*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,sans-serif;color:#fff}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff;outline-offset:3px}body{background:#142b2a}#game{height:100dvh;min-height:0;position:relative;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;gap:12px;align-items:center;text-shadow:0 2px 8px #173a2b;font-weight:800;letter-spacing:2px;font-size:17px}.brand>span{font-size:32px;color:#ffdd88}.brand small{display:block;letter-spacing:0;font-size:13px;font-weight:500;margin-top:3px}header button{background:#18382cdb;border:1px solid #ffffff55;color:white;border-radius:10px;padding:10px 15px;font-size:14px}.status{position:absolute;left:24px;top:92px;background:#12372edb;border:1px solid #e7efc447;display:flex;padding:12px;border-radius:14px;gap:10px;width:280px;box-shadow:0 8px 24px #193a2920}.portrait{width:56px;height:66px;background-size:400% 100%;border-radius:9px;background-color:#ffffff12}.vitals{flex:1}.name{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}.name span{color:#e2c988}.bar{height:17px;background:#061d2299;border-radius:5px;overflow:hidden;position:relative;margin-top:5px}.bar i{display:block;height:100%;width:100%;transition:width .2s}.bar span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:17px;font-weight:600;text-shadow:0 1px 2px #000}.hp i{background:linear-gradient(90deg,#df695c,#f49a7d)}.mp i{background:linear-gradient(90deg,#3887a9,#70c7e8)}.xp{height:4px}.xp i{background:#f4d189}.quest{position:absolute;right:24px;top:92px;width:242px;background:#14362cd9;padding:17px;border:1px solid #fff3;border-radius:14px;display:flex;flex-direction:column;gap:8px;font-size:14px}.quest small{font-size:12px;color:#e5c77e;letter-spacing:1px}.quest b{font-size:17px}.quest>span{color:#d2e5d8}.quest div{display:flex;justify-content:space-between;color:#f3d494}.quest button{padding:9px;background:#efd190;border:0;border-radius:7px;color:#294133}.help{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);background:#15392cb8;border-radius:20px;padding:7px 15px;font-size:13px;white-space:nowrap;pointer-events:none}footer{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center}#skills{display:flex;gap:9px;padding:9px;background:#153c32dd;border:1px solid #fff3;border-radius:17px}footer button{width:73px;height:69px;border-radius:12px;border:1px solid #f7dea85a;background:#345349f2;color:#ffe5a7;position:relative;font-size:25px}footer small{display:block;color:white;font-size:12px;margin-top:3px}footer button em{position:absolute;top:3px;left:6px;font-size:11px;font-style:normal;color:#cbdccc}.utility{background:#19372deb}button:disabled{opacity:.45;cursor:default}#toast{position:absolute;top:42%;left:50%;transform:translateX(-50%);padding:10px 20px;background:#123a2de8;border:1px solid #efd49970;border-radius:12px;color:#ffe7b0;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}.overlay{position:absolute;inset:0;background:linear-gradient(180deg,#142b2a66,#102c2ad9);backdrop-filter:blur(5px);display:grid;place-items:center;padding:24px;overflow:auto}.overlay[hidden]{display:none}.choose{text-align:center;width:min(800px,100%);padding:28px 30px;background:#122d2ce8;border:1px solid #cfdeb04d;border-radius:25px;box-shadow:0 25px 80px #0b252b88}.eyebrow{letter-spacing:3px;font-size:12px;color:#d9c389}h1{font-family:Georgia,serif;font-size:clamp(30px,5vw,48px);margin:10px 0;color:#ffe5ab;font-weight:500}.choose p{color:#b8d2c8;margin:0 0 24px;font-size:16px}#classes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.class{background:linear-gradient(180deg,#35564c,#234338);border:1px solid #afc9aa44;border-radius:15px;color:#e4eee2;padding:8px 5px 13px}.class.active{border:2px solid #efd294;background:linear-gradient(180deg,#55725c,#31503f);box-shadow:0 0 25px #f6d58a16}.sprite{display:block;height:150px;background-image:url('assets/heroes.png');background-size:400% 100%;background-repeat:no-repeat}.class b{display:block;font-size:16px}.class small{display:block;font-size:12px;margin-top:4px;color:#bdd5c7}.chosen{min-height:72px;margin:20px 0 12px}.chosen b{display:block;color:#f1d295;font-size:18px;margin-bottom:5px}.chosen span{font-size:14px;color:#d0dfd3}#start,#revive{background:linear-gradient(180deg,#f5da9b,#d8b876);color:#233b31;border:1px solid #ffeabc;border-radius:12px;padding:14px 50px;font-weight:700;font-size:17px;box-shadow:0 5px 20px #080e1844}.note{display:block;color:#9fbfb1;font-size:12px;margin-top:14px}.compact{max-width:420px}@media(max-width:650px){header{top:12px;left:12px;right:12px}.brand{font-size:13px;letter-spacing:1px}.brand>span{font-size:25px}.brand small{font-size:12px}header button{font-size:12px;padding:9px}.status{top:72px;left:12px;width:220px;padding:8px}.portrait{width:44px;height:59px}.quest{top:155px;right:12px;width:188px;padding:11px;font-size:12px}.quest b{font-size:14px}.quest small{font-size:11px}.quest>span{line-height:1.4}footer{gap:6px;bottom:15px}footer button{width:58px;height:63px;font-size:22px}footer small{font-size:11px}#skills{gap:5px;padding:6px}.help{bottom:98px;font-size:12px}.choose{padding:20px 14px;border-radius:18px}#classes{gap:8px;grid-template-columns:repeat(2,1fr)}.sprite{height:112px;background-size:400% 100%}.class{padding:4px 5px 8px}.class b{font-size:14px}.choose p{font-size:14px;margin-bottom:15px}.chosen{margin:14px 0;min-height:58px}.chosen span{font-size:13px}.eyebrow{font-size:11px}h1{margin:8px 0}.note{font-size:11px}}

#models3d,#numbers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#models3d{z-index:1}#numbers{z-index:2}header,.status,.quest,.help,footer,#toast{z-index:3}.overlay{z-index:4}

.gender-choice{display:flex;gap:12px;justify-content:center;margin:12px 0}.gender-choice button{padding:10px 28px}.gender-choice .active{background:#f0d68a;color:#142b2a}

#selection{background:radial-gradient(ellipse at top,#27384c,#0b101a 75%);backdrop-filter:none;padding:24px 32px;z-index:20}
#selection .choose{width:min(1320px,100%);background:transparent;border:0;box-shadow:none;padding:12px 0}
#selection .eyebrow{font-size:13px;letter-spacing:2px}#selection h1{margin:8px 0;font-size:clamp(30px,4vw,48px)}#selection .choose p{margin-bottom:22px;color:#c7ccd5}
#classes{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
#classes .class{position:relative;padding:0;overflow:hidden;border-radius:13px;background:#111c2a;border:1px solid #6b738550;color:#fff;transition:transform .2s,border-color .2s,box-shadow .2s}
#classes .class.active{border:2px solid #edd098;box-shadow:0 0 0 3px #edd09817,0 16px 30px #0005;transform:translateY(-5px)}
.class-scene{position:relative;display:block;height:clamp(270px,45vh,480px);background-size:cover;background-position:center;isolation:isolate}
.class-scene:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#00000008 35%,#070d16bb);z-index:-1}
.class-soldier .class-scene{background-image:url('assets/bg-soldier-v13.png')}.class-mage .class-scene{background-image:url('assets/bg-mage-v13.png')}.class-gunner .class-scene{background-image:url('assets/bg-gunner-v13.png')}.class-assassin .class-scene{background-image:url('assets/bg-assassin-v13.png')}
.class-hero{position:absolute;inset:12px 0 28px;width:100%;height:calc(100% - 40px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 7px #0008)}
.class-origin{position:absolute;bottom:8px;left:0;right:0;color:#f1e4cb;font-size:14px;text-shadow:0 2px 5px #000}
.class-caption{display:block;padding:14px 6px 16px;background:#111927}.class-caption b{font-size:20px}.class-caption small{font-size:14px;color:#b7c0cc;margin-top:7px}
#selection .chosen{min-height:58px;margin:18px 0 12px}#selection .chosen span{font-size:16px}#selection .note{font-size:13px}
@media(max-width:760px){#selection{padding:18px 12px;align-items:start}#classes{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.class-scene{height:310px}.class-caption b{font-size:18px}.class-caption small{font-size:14px}#selection .choose{padding:6px 0}#selection h1{font-size:32px}}
@media(max-width:400px){.class-scene{height:250px}.class-caption b{font-size:16px}.class-caption small{font-size:14px;line-height:1.4}}

#skills[hidden]{display:none}#death{background:linear-gradient(180deg,transparent 50%,#0c152bcc);backdrop-filter:none;align-items:end;padding-bottom:24px}#death .choose{padding:16px 24px}#death h2{margin:0 0 8px}#death p{margin-bottom:12px}

#loadingScreen,#loginScreen{position:fixed;inset:0;z-index:1000;background:#061b46;display:grid;place-items:center}#loadingScreen[hidden],#loginScreen[hidden]{display:none}.loading-art{position:relative;width:min(100vw,177.68vh);aspect-ratio:1672/941}.loading-art img{display:block;width:100%;height:100%}#loadPercent{position:absolute;left:50.1%;top:71.9%;font-family:Georgia,serif;font-size:clamp(14px,1.7vw,30px);color:white;text-shadow:0 2px 5px #00346a;white-space:nowrap}#loadError{position:absolute;bottom:3%;color:white;text-align:center}#loginScreen{background:#061b46 url('assets/loading-v19.png') center/cover no-repeat}#loginForm{width:min(360px,90vw);padding:28px;border:1px solid #a3ccff80;border-radius:18px;background:#081b42ed;box-shadow:0 16px 60px #0008;color:white;display:grid;gap:10px}#loginForm h1{font-size:28px;margin:0 0 12px}#loginForm label{font-size:16px}#loginForm input{min-width:0;padding:12px;border:1px solid #91baff80;border-radius:8px;background:#fff;color:#132744;font-size:16px}#loginForm button{padding:12px;font-size:17px}#loginError{color:#ffd0cc;min-height:20px;margin:0;font-size:14px}

#loadPercent{left:50%;top:72%;transform:translateX(-50%);font-family:inherit;font-size:clamp(16px,1.7vw,28px)}
#loginScreen{display:block;overflow:auto;background:#061b46}.login-art{position:relative;width:min(100vw,177.68vh);aspect-ratio:1672/941;margin:0 auto}.login-art>img{display:block;width:100%;height:auto}#loginForm{position:absolute;top:66%;left:50%;transform:translateX(-50%);width:min(360px,88vw);padding:16px 22px;gap:6px;background:#071d43df;border-color:#a3ccff60;border-radius:12px;box-shadow:0 8px 32px #00112a80}#loginForm h1{font-size:20px;text-align:center;margin:0 0 6px}#loginForm input{padding:9px 10px}#loginForm button{padding:9px}#loginError{font-size:14px;min-height:18px}@media(max-width:600px),(max-height:600px){#loginScreen{padding-bottom:280px}.login-art{width:100vw}#loginForm{top:68%;width:min(360px,88vw)}}

/* Independent full-bleed scenery and responsive logo/form cluster. */
#loadingScreen,#loginScreen{background:#061b46 url('assets/entry-background-v21.png') center center/cover no-repeat;min-height:100dvh;padding:24px 16px;overflow-y:auto;display:flex;align-items:center;justify-content:center}#loadingScreen[hidden],#loginScreen[hidden]{display:none}.entry-cluster{width:min(680px,100%);height:auto;aspect-ratio:auto;margin:auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}.entry-cluster>img{width:100%;height:auto;max-height:44dvh;object-fit:contain;display:block}.loading-art #loadPercent{position:static;transform:none;font-size:clamp(18px,2.5vw,28px);text-align:center}.login-art #loginForm{position:static;transform:none;width:min(360px,100%);margin:0;padding:18px 22px;background:linear-gradient(180deg,#0b3263ed,#081e43f2);border:1px solid #b1ddff9c;border-radius:14px;box-shadow:0 8px 32px #00112a99,0 0 24px #75c9ff30}.login-art{gap:0}.login-art>img{margin-bottom:8px}#loginForm h1{color:#e2f4ff}#loginForm button{background:linear-gradient(#548fd0,#285e9b);border:1px solid #9acfff;color:white;border-radius:8px}@media(max-width:600px),(max-height:600px){#loadingScreen,#loginScreen{padding:16px;min-height:100dvh}.entry-cluster{width:min(500px,100%)}.entry-cluster>img{max-height:35dvh}.login-art #loginForm{padding:14px 18px}} 

/* Gameplay cleanup and loot confirmation. */
header{justify-content:flex-end}.status{top:20px}
#lootDialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #eacf94;border-radius:18px;padding:22px;background:linear-gradient(160deg,#203f36,#122c27);color:#fff8e9;box-shadow:0 20px 70px #0009;z-index:100}
#lootDialog::backdrop{background:#05171380}
.loot-heading{display:flex;gap:14px;align-items:center}.loot-heading img{width:72px;height:72px;object-fit:contain}.loot-heading h2{margin:0 0 6px;font-size:22px;color:#ffe1a1}.loot-heading p{margin:0;color:#d0dfd3;font-size:14px;line-height:1.5}
#lootItems{list-style:none;padding:0;margin:20px 0;display:grid;gap:8px}#lootItems li{display:flex;justify-content:space-between;gap:20px;padding:13px 15px;background:#ffffff0c;border:1px solid #ffffff16;border-radius:9px;font-size:16px}#lootItems b{color:#ffdda0;white-space:nowrap}
#lootError{color:#ffbcad;font-size:14px;margin:0 0 12px}.loot-actions{display:flex;gap:10px;justify-content:flex-end}.loot-actions button{padding:12px 16px;min-height:44px;border-radius:9px;border:1px solid #e4d4b34d;background:#24463b;color:#fff;font-size:16px}#lootConfirm{background:linear-gradient(#f3d99c,#d5b36e);border-color:#ffe7ad;color:#24392d;font-weight:700}
@media(max-width:650px){.status{top:12px}#lootDialog{padding:18px}.loot-heading h2{font-size:20px}.loot-heading img{width:58px;height:58px}.loot-actions button{flex:1;padding:12px 10px}}

#toast{max-width:calc(100vw - 24px);white-space:normal;text-align:center}

@media(max-width:650px){.status{width:min(220px,calc(100vw - 124px))}}

/* Fullscreen must be enabled before character selection when supported. */
html,body{overflow:hidden}#game{width:100%;height:100vh;height:100dvh}


#fullscreenError{color:#ffc8bc;min-height:0;margin-bottom:14px}#fullscreenError:empty{display:none}
#enableFullscreen{background:linear-gradient(#f5da9b,#d8b876);color:#233b31;border:1px solid #ffeabc;border-radius:12px;padding:14px 24px;font-weight:700;font-size:17px;min-height:48px}
@media(max-height:460px){.status{padding:6px;top:10px}.quest{top:65px;padding:10px;gap:4px}.help{bottom:84px}footer{bottom:max(8px,env(safe-area-inset-bottom))}footer button{height:56px}#skills{padding:5px}}
#loginForm .remember{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer;user-select:none}
#loginForm .remember input{width:18px;height:18px;margin:0;padding:0;accent-color:#548fd0;cursor:pointer}