.screen{position:fixed;top:0;right:0;bottom:0;left:0}.hidden{display:none!important}#login-screen{display:flex;align-items:center;justify-content:center;--login-bg: url(/images/login-background-1.webp);background:linear-gradient(#0b10200d,#0b10201a),var(--login-bg) center / cover no-repeat;color:#eef2ff;font-family:Georgia,Times New Roman,serif}#world-loading-screen{z-index:200;display:flex;align-items:center;justify-content:center;--login-bg: url(/images/login-background-1.webp);background:linear-gradient(#0b10201f,#0b102038),var(--login-bg) center / cover no-repeat;color:#eef2ff;font-family:Georgia,Times New Roman,serif}.loading-panel{text-align:center;padding:2rem 2.5rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#080c18d1;box-shadow:0 24px 80px #00000073;min-width:min(360px,88vw)}.loading-title{margin:0 0 .75rem;font-size:1.6rem;font-weight:400;letter-spacing:.02em}.loading-status{margin:0;color:#eef2ffb8;font-size:.95rem}.loading-progress{margin:.55rem 0 0;font:600 13px/1.35 ui-monospace,Cascadia Code,Consolas,monospace;color:#c9a96e;letter-spacing:.02em;max-width:min(420px,88vw);word-break:break-word}.loading-spinner{width:46px;height:46px;margin:1.35rem auto 0;border:3px solid rgba(255,255,255,.14);border-top-color:#c9a96e;border-radius:50%;animation:loading-spin .85s linear infinite}@keyframes loading-spin{to{transform:rotate(360deg)}}.login-panel{width:min(420px,92vw);padding:2rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#080c18d1;box-shadow:0 24px 80px #00000073;margin-top:240px}.login-panel h1{margin:0 0 .35rem;font-size:1.8rem}.subtitle{margin:0 0 1.5rem;color:#eef2ffa6}label{display:block;margin-bottom:.85rem;font-size:.85rem;color:#eef2ffbf}input{display:block;width:100%;margin-top:.35rem;padding:.65rem .75rem;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff0f;color:#fff;font:inherit;box-sizing:border-box}input:focus{outline:2px solid rgba(110,150,230,.55)}.button-row{display:flex;gap:.75rem;margin-top:1rem}button{padding:.7rem 1rem;border:none;border-radius:8px;background:linear-gradient(180deg,#4d7fd6,#315fa8);color:#fff;font:inherit;cursor:pointer}button.secondary{background:#ffffff14;border:1px solid rgba(255,255,255,.14)}select{display:block;width:100%;margin-top:.35rem;padding:.65rem .75rem;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff0f;color:#fff;font:inherit;box-sizing:border-box}#create-screen,#character-create-screen{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%,rgba(72,110,180,.35),transparent 40%),radial-gradient(circle at 80% 70%,rgba(120,60,90,.25),transparent 45%),linear-gradient(160deg,#0b1020,#151b2e 45%,#0d1220);color:#eef2ff;font-family:Georgia,Times New Roman,serif}.create-panel{width:min(920px,96vw);padding:1.75rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#080c18d1;box-shadow:0 24px 80px #00000073}.create-panel h1{margin:0 0 .35rem;font-size:1.8rem}.create-layout{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(240px,.9fr);gap:1.25rem;margin-top:1rem}.preview-wrap{min-height:360px;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;background:#00000040}#character-preview-canvas{display:block;width:100%;height:100%;min-height:360px}.create-form button{width:100%;margin-top:.65rem}@media(max-width:760px){.create-layout{grid-template-columns:1fr}}button.small-btn{padding:.35rem .7rem;font-size:.85rem}button:disabled{opacity:.55;cursor:not-allowed}.status{min-height:1.2rem;margin:1rem 0 0;color:#eef2ffbf}#game-screen{background:#87a96b}#game-canvas{display:block;width:100vw;height:100vh}.hud-panel{position:fixed;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-radius:10px;background:#0000008c;color:#f5f5f5;font:14px/1.5 system-ui,sans-serif;pointer-events:auto}.hud-title{font-size:1.05rem;font-weight:700}.hud-top-left{flex:1;min-width:0}.hud-bars{width:min(420px,55vw);margin-top:.35rem}.progress-row{position:relative;margin-bottom:.3rem}.progress-split{display:flex;gap:.35rem}.progress-half{position:relative;flex:1;min-width:0}.progress-track{height:14px;border-radius:4px;background:#00000073;border:1px solid rgba(255,255,255,.12);overflow:hidden}.progress-fill{height:100%;width:0%;transition:width .2s ease}.progress-xp .progress-fill{background:linear-gradient(180deg,#6fd86f,#3a9e3a)}.progress-hp .progress-fill{background:linear-gradient(180deg,#e85d5d,#b52a2a)}.progress-mana .progress-fill{background:linear-gradient(180deg,#5da8e8,#2a6ab5)}.progress-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.85);pointer-events:none}.stat-row{font-size:.82rem;opacity:.85}.hud-top-right{display:flex;align-items:center;gap:.75rem}.hud-fps{min-width:4.5rem;padding:.2rem .45rem;border-radius:4px;background:#00000059;border:1px solid rgba(255,255,255,.12);font:600 12px/1.2 ui-monospace,Cascadia Code,Consolas,monospace;text-align:center;color:#8fd48f}.hud-fps.fps-mid{color:#e8c547}.hud-fps.fps-low{color:#e87a7a}.hud-clock{min-width:3.2rem;padding:.2rem .45rem;border-radius:4px;background:#00000059;border:1px solid rgba(255,255,255,.12);font:600 12px/1.2 ui-monospace,Cascadia Code,Consolas,monospace;text-align:center;color:#e8dcc8}.hud-connection{color:#8fd48f}.quality-label{display:flex;flex-direction:column;gap:.15rem;font-size:.72rem;opacity:.85;color:#e8e8e8}.quality-select{font:12px system-ui,sans-serif;padding:.2rem .35rem;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:#141820d9;color:#f0f0f0;cursor:pointer}.hud-hint{position:fixed;bottom:78px;left:50%;transform:translate(-50%);padding:.45rem .85rem;border-radius:8px;background:#00000073;color:#f5f5f5;font:13px system-ui,sans-serif;pointer-events:none;z-index:1}.hotbar{position:fixed;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:.35rem;padding:.4rem .5rem;border-radius:10px;background:#0009;border:1px solid rgba(255,255,255,.12);z-index:3;pointer-events:auto}.hotbar-slot{position:relative;width:44px;height:44px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:#ffffff0f;color:#eef2ff;font:11px system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;padding:2px}.hotbar-slot:hover{border-color:#6e96e699}.hotbar-slot.selected{outline:2px solid rgba(110,150,230,.85)}.hotbar-slot .slot-key{position:absolute;top:2px;left:4px;font-size:9px;opacity:.65}.hotbar-slot .slot-name{font-size:10px;line-height:1.1;overflow:hidden;text-overflow:ellipsis}.hotbar-slot.spell-slot{background:#2d508c59}.hotbar-slot.item-slot{background:#503c2859}.game-log-panel{position:fixed;bottom:12px;left:12px;width:min(360px,90vw);padding:.55rem .75rem .65rem;border-radius:10px;background:#0000008c;color:#f0f0f0;font:12px/1.4 system-ui,sans-serif;pointer-events:auto;z-index:2}#game-log{max-height:150px;overflow-y:auto;margin-bottom:.5rem;padding-right:.25rem}.game-log-line+.game-log-line{margin-top:.2rem}.chat-line{color:#f0f0f0}.combat-line{color:#ffe9a8}.chat-input-row{display:flex;gap:.5rem}.chat-input-row input{flex:1;margin:0;font:13px system-ui,sans-serif}.inventory-modal,.game-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#040812b8;z-index:30;pointer-events:auto}.inventory-panel,.game-modal-panel{width:min(760px,94vw);max-height:min(82vh,720px);overflow:auto;padding:1.1rem 1.25rem;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#080c18f2;color:#eef2ff;font-family:Georgia,Times New Roman,serif;box-shadow:0 24px 80px #0000008c}.spells-panel{width:min(860px,94vw)}.inventory-header,.game-modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.inventory-header h2,.game-modal-header h2{margin:0;font-size:1.45rem}.modal-help{margin:.5rem 0 .75rem;color:#eef2ffa6;font-size:.85rem}.modal-highlight{margin:0 0 .75rem;color:#ffe9a8;font-size:.9rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.65rem}.stat-card{padding:.65rem .75rem;border-radius:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.stat-card h4{margin:0 0 .35rem;font-size:.95rem}.stat-card .stat-value{font-size:1.4rem;margin-bottom:.45rem}.stat-card button{width:100%}.spells-section{margin-bottom:1rem}.spells-section h3{margin:0 0 .5rem;font-size:1rem}.spells-list{display:flex;flex-direction:column;gap:.45rem}.spell-card{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;padding:.55rem .7rem;border-radius:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.spell-card.known{border-color:#78c87859}.spell-card.locked{opacity:.55}.spell-icon{font-size:1.4rem;width:2rem;text-align:center}.spell-meta{font-size:.78rem;color:#eef2ffa6;margin-top:.15rem}.spell-actions{display:flex;flex-direction:column;gap:.3rem}.spell-actions button{font-size:.78rem;padding:.35rem .55rem}.inventory-help{margin:.5rem 0 1rem;color:#eef2ffa6;font-size:.85rem}.inventory-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}.inventory-columns h3{margin:0 0 .6rem;font-size:1rem}.inventory-items,.equipped-slots{display:flex;flex-direction:column;gap:.45rem}.inventory-item{width:100%;text-align:left;padding:.55rem .7rem;border-radius:8px;background:#ffffff12;border:1px solid rgba(255,255,255,.1);color:#eef2ff;font:inherit;cursor:pointer}.inventory-item:hover:not(:disabled){background:#4d7fd640}.inventory-item.already-equipped,.inventory-item:disabled{opacity:.45;cursor:not-allowed}.equipped-item{background:#5a8c5a38;border-color:#78c87859}.equipped-row{display:grid;grid-template-columns:72px 1fr;gap:.5rem;align-items:center}.equipped-slot-label{font-size:.82rem;color:#eef2ffb3}.equipped-empty{font-size:.85rem;color:#eef2ff73;font-style:italic}.inventory-empty{margin:0;color:#eef2ff8c;font-style:italic}@media(max-width:680px){.inventory-columns{grid-template-columns:1fr}}.login-title{margin:0 0 .25rem;font-size:1.7rem;font-weight:400;letter-spacing:.01em;color:#f1e3b8}.login-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.1rem 0 0;font-size:.9rem}.login-links a{color:#c9d7f2}.choice-group{margin:0 0 .9rem;padding:0;border:none}.choice-group legend{margin-bottom:.4rem;font-size:.85rem;color:#eef2ffbf}.choice-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.choice-row-4{grid-template-columns:repeat(4,1fr)}.choice-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .4rem;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff0d;color:#eef2ff;font-size:.95rem;text-align:center}.choice-btn small{font-size:.72rem;color:#eef2ff99}.choice-btn[aria-checked=true]{border-color:var(--choice-accent, #c9a54a);background:color-mix(in srgb,var(--choice-accent, #c9a54a) 22%,transparent);box-shadow:inset 0 0 0 1px var(--choice-accent, #c9a54a)}.choice-btn:focus-visible{outline:2px solid #f1e3b8;outline-offset:2px}.class-details{min-height:7.5rem;margin:0 0 .9rem;padding:.75rem .85rem;border-left:3px solid var(--choice-accent, #c9a54a);border-radius:0 8px 8px 0;background:#ffffff0a;font-size:.86rem;line-height:1.45;color:#eef2ffd9}.class-details h3{margin:0 0 .25rem;font-size:1rem;font-weight:400;color:#f1e3b8}.class-details p{margin:0 0 .4rem}.class-details .passives{color:#c9d7f2}.stat-preview{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem;margin-top:.4rem;text-align:center;font-size:.75rem}.stat-preview span{display:block;font-size:1rem;color:#fff}.look-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}@media(max-width:760px){.choice-row-4{grid-template-columns:repeat(2,1fr)}.look-row{grid-template-columns:1fr}}.hud-buffs{display:flex;gap:.35rem;min-height:0;margin:.25rem 0}.hud-buff{padding:.1rem .45rem;border:1px solid rgba(241,227,184,.45);border-radius:6px;background:#141a2cbf;font-size:.75rem;color:#f1e3b8}.combat-line.crit-line{color:#ffd166;font-weight:600}.combat-line.system-line{color:#9fd3c7}