:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#f0f4f0;background:#0c121b;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1600px;margin:auto;padding:0 38px}header{height:88px;display:flex;align-items:center;gap:20px}.brand{text-decoration:none;color:#e7f5e9;font-family:Georgia,serif;font-size:27px;letter-spacing:-5px;width:52px}.brand span{color:#a4ecbc;font-size:24px}.project{font-size:12px;font-weight:750;letter-spacing:3px}.project small{display:block;font-size:8px;letter-spacing:2.3px;color:#748897;margin-top:7px}.build{margin-left:auto;border:1px solid #2c3b47;border-radius:4px;padding:8px 12px;color:#91a0aa;font-size:9px;letter-spacing:2px}.build b{color:#b6e9c5;margin-left:8px}.game{height:calc(100dvh - 160px);min-height:480px;max-height:960px;position:relative;border:1px solid #33434c;border-radius:9px;overflow:hidden;background:#111c28}canvas{width:100%;height:100%;display:block;touch-action:none}.top-hud{position:absolute;top:26px;left:28px;right:28px;display:flex;justify-content:space-between;pointer-events:none}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#c8ddd5}.eyebrow em{font-style:normal;font-size:8px;color:#7e9998;margin-left:12px}.vitals{width:265px}.health-row{display:flex;align-items:center;gap:10px;margin-top:12px}.health-row>span{color:#a7e4b6}.health-track{height:9px;flex:1;border-radius:3px;background:#233835;overflow:hidden}.health-track div{height:100%;background:linear-gradient(90deg,#57a782,#b5ecc0);transition:width .12s}.health-row strong{font-size:10px;min-width:65px}.xp-track{height:3px;background:#28323f;margin:8px 76px 6px 24px}.xp-track div{height:100%;background:#b5a4f3;width:0}.vitals>small{font-size:9px;color:#9dabb1;margin-left:24px}.encounter{text-align:right}.encounter strong{display:block;font-size:23px;letter-spacing:2px;margin-top:9px}.encounter strong span{font-size:14px;color:#708992}.encounter small{font-size:10px;color:#a1b7ba}.location{position:absolute;left:28px;top:145px;pointer-events:none}.location>span{font-size:8px;letter-spacing:2px;color:#93afac}.location h1{font-family:Georgia,serif;font-weight:400;font-size:27px;margin:8px 0;color:#d8e6df}.location p{font-size:10px;color:#829b9c}.bottom-hud{position:absolute;bottom:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.weapon{display:flex;align-items:center;gap:12px;background:#101f29e8;border:1px solid #3c515a;border-radius:5px;padding:12px 15px}.weapon-icon{font-size:27px;color:#d6d7a4}.weapon small{font-size:8px;letter-spacing:1.4px;color:#809c9d}.weapon strong{display:block;font-size:12px;margin-top:5px}.weapon kbd{margin-left:22px}.dash{text-align:right;color:#b7e8c6;font-size:9px;letter-spacing:1px}.dash kbd{display:inline-block;margin-top:9px}kbd{font-family:inherit;border:1px solid #42515a;border-bottom:2px solid #52606b;border-radius:3px;padding:4px 6px;font-size:8px;color:#bbc8cc;background:#1a2630}footer{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;color:#82959f}.controls{display:flex;gap:22px}.controls span{display:flex;align-items:center;gap:8px}footer label{display:flex;align-items:center;gap:7px}input{accent-color:#a4e5bc}.overlay{position:absolute;inset:0;background:#08142075;display:grid;place-items:center;backdrop-filter:blur(4px)}.overlay[hidden]{display:none}.dialog{width:min(420px,90%);text-align:center;padding:36px;background:#13232eed;border:1px solid #4b6265;border-radius:10px;box-shadow:0 20px 90px #0005}.dialog .eyebrow{color:#a9dab8;font-size:9px}.dialog h2{font-family:Georgia,serif;font-weight:400;font-size:39px;margin:19px 0}.dialog p{font-size:13px;line-height:1.8;color:#a7babf}.dialog button{cursor:pointer;background:#b9ecc3;color:#142e29;border:0;border-radius:4px;font:700 12px inherit;width:100%;padding:16px;margin:18px 0}.dialog button span{float:right}.dialog button:hover{background:#d6f8dc}.dialog small{font-size:8px;line-height:1.6;color:#829a9e}#pause-label{position:absolute;inset:45% 0 auto;text-align:center;font-size:22px;letter-spacing:8px;pointer-events:none}@media(max-width:800px){main{padding:0 12px}header{height:65px}.game{height:calc(100dvh - 150px)}.controls{gap:8px;flex-wrap:wrap}footer{align-items:start;padding-top:15px}.top-hud{left:16px;right:16px}.vitals{width:210px}.eyebrow em{display:none}.location{top:130px;left:16px}.bottom-hud{left:16px;right:16px}.weapon kbd{display:none}.encounter strong{font-size:18px}}
.boss-hud{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:min(300px,28%);text-align:center;pointer-events:none}.boss-hud[hidden]{display:none}.boss-hud span{font-size:9px;letter-spacing:2px;font-weight:700;color:#ffd2a9}.boss-track{height:9px;margin-top:8px;border-radius:5px;background:#382d38;border:1px solid #7b5c58;overflow:hidden}.boss-track div{height:100%;background:linear-gradient(90deg,#b85472,#f2ac86);transition:width .12s}.choices-dialog{width:min(500px,92%);max-height:90%;overflow:auto}.choices-dialog h2{font-size:30px}.choices{display:grid;gap:9px}.dialog .choice{margin:0;padding:14px 16px;text-align:left;background:#243b42;border:1px solid #52716c;color:#e8f6e9;border-radius:5px;font-family:inherit;cursor:pointer}.dialog .choice:hover,.dialog .choice:focus-visible{background:#365a50;border-color:#b9ecc3;outline:2px solid #b9ecc3}.choice strong,.choice span{display:block;float:none!important}.choice strong{font-size:13px}.choice span{font-size:11px;color:#afc8bf;margin-top:5px}@media(max-width:800px){.boss-hud{top:100px;width:190px}}
.creator-dialog{width:min(620px,94%);max-height:94%;overflow:auto;padding:26px}.creator-dialog h2{font-size:30px;margin:12px 0}.creator-layout{display:grid;grid-template-columns:170px 1fr;gap:24px;text-align:left;align-items:center}.creator-fields>label{display:grid;gap:5px;margin-bottom:10px;font-size:11px;color:#c3d7ce}.creator-fields input[type=text],.creator-fields select{width:100%;padding:9px;border:1px solid #536e6d;border-radius:4px;background:#192e37;color:#f0f4f0;font:inherit}.class-note{font-size:10px!important;line-height:1.5!important;margin:3px 0 10px!important}.preview{border-radius:8px;background:radial-gradient(ellipse,#456d65,#1a333c);text-align:center;padding-bottom:8px}.preview canvas{width:170px;height:160px;max-width:100%}.preview>span{font-size:9px;letter-spacing:2px;color:#b6d8c5}.creator-fields fieldset{border:0;padding:0;margin:7px 0}.creator-fields legend{font-size:10px;color:#b9cfc6;margin-bottom:5px}.swatch{display:inline-block;margin-right:8px;cursor:pointer}.swatch input{position:absolute;opacity:0;width:1px;height:1px}.swatch span{display:block;width:23px;height:23px;border:2px solid #1a333c;border-radius:50%}.swatch input:checked+span{outline:2px solid #c2f4cc}.swatch input:focus-visible+span{outline:3px solid #fff}.profile-error{color:#ffaaa0!important;font-size:11px!important}.creator-dialog button:disabled{opacity:.5;cursor:not-allowed}.ability{text-align:center;color:#b7e8c6;font-size:9px;letter-spacing:1px}.ability kbd{display:inline-block;margin-top:9px}@media(max-width:650px){.creator-layout{grid-template-columns:100px 1fr;gap:12px}.preview canvas{width:100px;height:auto}.creator-dialog{padding:18px}.creator-dialog h2{font-size:25px}.ability{font-size:8px}.weapon{padding:8px}.weapon-icon{display:none}}
.weapon-description,.weapon-other{display:block;font-size:9px;line-height:1.35;color:#aec3ba;margin-top:4px;max-width:220px}.weapon-other{color:#e4cba5}.weapon strong{margin-top:4px}@media(max-width:800px){.weapon-description{display:none}.weapon-other{font-size:8px}.weapon{gap:6px}.controls{gap:8px}}
.setup-dialog{width:min(530px,92%);max-height:94%;overflow:auto;padding:24px}.setup-dialog h2{font-size:30px;margin:10px 0}.setup-dialog p{font-size:11px;line-height:1.5}.loadout-setup{display:grid;gap:8px;text-align:left}.loadout-setup label,.network-setup label{display:grid;gap:4px;color:#c4d8d0;font-size:10px}.loadout-setup select,.network-setup input{width:100%;padding:8px;color:#eff8f1;background:#1a3039;border:1px solid #54716e;border-radius:4px;font:inherit}.network-setup{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;border-top:1px solid #3c5555;margin-top:7px;padding-top:8px}.dialog .network-setup button{margin:0;padding:9px;background:#365a50;color:#e8f6e9;font:inherit}.network-setup p{grid-column:1/-1;color:#ffaaa0}.dialog #play{margin:12px 0}.network-status{position:absolute;top:105px;right:28px;display:flex;align-items:center;gap:10px;font-size:10px;color:#d9ecd9}.network-status[hidden]{display:none}.network-status button{font:inherit;color:#d7e8df;background:#263d42;border:1px solid #64817b;border-radius:4px;padding:5px 10px;cursor:pointer}.settings{display:flex;gap:12px}.choices-dialog button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:800px){.network-status{top:115px;right:16px}.setup-dialog{padding:16px}}
.combo-hint{margin:0;color:#ffe7a8;font-size:11px;line-height:1.5}
.upgrade-badge{position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:3;padding:5px 10px;font:inherit;font-size:10px;letter-spacing:1px;color:#2a1f08;background:#ffd76a;border:0;border-radius:4px;cursor:pointer;animation:badge-glow 1.4s ease-in-out infinite;pointer-events:auto}.upgrade-badge[hidden]{display:none}.upgrade-badge:disabled{cursor:default;opacity:.75}@keyframes badge-glow{50%{box-shadow:0 0 14px #ffd76a}}@media(prefers-reduced-motion:reduce){.upgrade-badge{animation:none}}
.gold{display:block;margin:6px 0 0 24px;font-size:10px;color:#ffd76a;letter-spacing:.5px}
.game.in-hub .encounter,.game.in-hub .bottom-hud,.game.in-hub .health-row,.game.in-hub .xp-track,.game.in-hub #xp,.game.in-hub .location p,.game.in-hub #boss-hud{display:none}
.game.in-hub .gold{margin-left:0;font-size:13px}
.hub-prompt{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:5px;background:#101f29e8;border:1px solid #3c515a;font-size:11px;letter-spacing:1px;color:#d9ecd9;pointer-events:none;white-space:nowrap}
.hub-prompt[hidden]{display:none}.hub-prompt b{color:#ffd76a}
.dialog button.secondary{background:#263d42;color:#d7e8df;border:1px solid #64817b;margin-top:0}.dialog button.secondary:hover{background:#2f4a50}
.shop-dialog{width:min(560px,94%);max-height:94%;overflow:auto;padding:24px}.shop-dialog h2{font-size:30px;margin:10px 0}.shop-dialog p{font-size:11px;line-height:1.6}
.shop-gold{color:#ffd76a!important;font-size:14px!important;letter-spacing:1px}
.shop-items{display:grid;gap:8px;text-align:left}
.shop-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#1a3039;border:1px solid #3c5555;border-radius:6px}
.shop-item>div{flex:1}.shop-item strong{display:block;font-size:13px;color:#eef6f0}.shop-item span{font-size:10px;color:#a7babf}
.dialog .shop-item button{width:auto;min-width:130px;margin:0;padding:10px 12px}.dialog .shop-item button:disabled{opacity:.45;cursor:not-allowed}
.shop-error{color:#ffaaa0!important}
.toast{position:absolute;top:64px;left:50%;transform:translateX(-50%);max-width:min(560px,90%);padding:10px 16px;border-radius:6px;background:#2a2410ee;border:1px solid #ffd76a;color:#ffe7a8;font-size:12px;text-align:center;pointer-events:none;z-index:4}.toast[hidden]{display:none}
.choice{border:1px solid transparent}
.game.in-safe .encounter,.game.in-safe #boss-hud{display:none}
.loadout-summary{margin:0;color:#d9ecd9;font-size:11px;line-height:1.6}
.shop-preview{display:block;margin:0 auto 8px;width:200px;height:190px;border-radius:8px;background:radial-gradient(ellipse,#456d65,#1a333c)}.shop-preview[hidden]{display:none}
/* Full screen: the game fills the window; controls, options and help live in the Esc menu. */
main{max-width:none;padding:0}.game{height:100dvh;min-height:0;max-height:none;border:0;border-radius:0}
.menu-dialog .settings{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:8px 0 16px;padding:16px;border:1px solid #2f444a;border-radius:6px;font-size:12px;color:#c4d4d4}
.menu-dialog .settings label{display:flex;align-items:center;gap:8px;cursor:pointer}
.menu-dialog button{margin:6px 0}
.help-dialog{width:min(900px,94%);max-height:90dvh;display:flex;flex-direction:column;text-align:left;padding:28px 32px}
.help-dialog h2{font-size:30px;margin:10px 0 14px}
.help-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid #2f444a;padding-bottom:10px}
.dialog .help-tabs button{width:auto;margin:0;padding:8px 14px;background:#1c2f36;color:#c4d4d4;border:1px solid #3c545a;font:600 12px inherit}
.dialog .help-tabs button[aria-selected=true]{background:#b9ecc3;color:#142e29;border-color:#b9ecc3}
.help-body{overflow:auto;padding:14px 4px 4px;font-size:13px;line-height:1.6;color:#c4d4d4}
.help-body h3{font-size:14px;margin:14px 0 6px;color:#e8f6e9}.help-body p{margin:4px 0 10px;font-size:13px}
.help-body table{width:100%;border-collapse:collapse}.help-body th,.help-body td{text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid #26383e}
.help-body th{font-size:10px;letter-spacing:1px;color:#8fb0aa}.help-body td b{color:#e8f6e9}.help-body kbd{font-size:10px}
.help-body .tag{display:inline-block;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:700;color:#10202a}
.help-body select{margin:4px 0 10px;background:#1c2f36;color:#e8f6e9;border:1px solid #3c545a;border-radius:4px;padding:6px}
.dialog #help-close{margin:14px 0 0}
.help-body small{font-size:11px;line-height:1.5;color:#8fa9a6}.help-body kbd{white-space:nowrap}
.account-dialog{width:min(460px,92%)}
.account-dialog form label{display:grid;gap:5px;margin-bottom:12px;text-align:left;font-size:11px;color:#c3d7ce}
.account-dialog input{width:100%;padding:10px;border:1px solid #536e6d;border-radius:4px;background:#192e37;color:#f0f4f0;font:inherit}
.account-dialog button{margin:8px 0}.account-email{font-size:12px!important;margin:0 0 12px}
.character-slots{display:grid;gap:8px;text-align:left}
.character-slot{display:flex;align-items:center;gap:10px;padding:12px;background:#1a3039;border:1px solid #3c5555;border-radius:6px}
.character-slot>div{flex:1}.character-slot strong{display:block;font-size:14px;color:#eef6f0}.character-slot span{font-size:11px;color:#a7babf}
.dialog .character-slot button{width:auto;margin:0;padding:9px 12px}
.dialog .character-slot button.danger{background:#3a2326;color:#ffb4a8;border:1px solid #7a3f3f}
.swatch.body-option span{width:auto;height:auto;border-radius:4px;padding:6px 14px;font-size:12px;color:#e8f6e9;background:#1c2f36;border:1px solid #3c545a}.swatch.body-option input:checked+span{background:#365a50;border-color:#b9ecc3}