[hidden]{display:none!important}html,body.player-page,#player-app{min-width:320px;min-height:100%}body.player-page{margin:0;overflow-x:hidden;color:#dce8e4;background:#091019}body.player-page[data-screen=game]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;overscroll-behavior:none}.portal-screen{display:grid;min-height:100dvh;place-items:center;padding:calc(1.2rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(1.2rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));background:radial-gradient(circle at 12% 10%,rgb(57 125 95 / 24%),transparent 28rem),radial-gradient(circle at 88% 92%,rgb(52 84 125 / 22%),transparent 32rem),repeating-linear-gradient(0deg,transparent 0 3px,rgb(255 255 255 / 1.2%) 3px 4px),#091019}.portal-card{width:min(100%,30rem);border:1px solid #2c403f;border-radius:16px;padding:clamp(1.25rem,4vw,2rem);background:#0d181ff5;box-shadow:0 26px 80px #0000006b,inset 0 1px #ffffff0a}.portal-mark{display:grid;width:3.25rem;height:3.25rem;place-items:center;border:1px solid #4d8b70;border-radius:12px;color:#d6f4df;background:linear-gradient(145deg,#24543f,#153227);font-family:ui-serif,Georgia,serif;font-size:1.6rem;box-shadow:0 8px 24px #134e364d}.eyebrow{margin:1.15rem 0 .35rem;color:#70b897;font-size:.68rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase}.portal-card h1{margin:0;color:#edf7f2;font-family:ui-serif,Georgia,serif;font-size:clamp(1.75rem,5vw,2.35rem);letter-spacing:.035em}.portal-description,.character-heading p{margin:.55rem 0 0;color:#8fa19e;font-size:.9rem;line-height:1.65}.auth-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin:1.5rem 0 1rem;border:1px solid #26383c;border-radius:10px;padding:.3rem;background:#0a141b}.auth-mode{border:0;border-radius:7px;padding:.62rem;color:#829591;background:transparent}.auth-mode:hover:not(:disabled){color:#cfddd8;background:#15242a}.auth-mode.active{color:#e7f6ef;background:#235b46;box-shadow:inset 0 0 0 1px #36795f}.portal-form fieldset{display:grid;gap:.5rem;min-width:0;margin:0;border:0;padding:0}.portal-form label,.character-form label,.hero-picker legend{color:#a4b4b0;font-size:.8rem;font-weight:650}.input-hint{margin-top:-.15rem;color:#708680;font-size:.72rem}.portal-form input,.character-form input{width:100%;min-height:2.85rem;border:1px solid #34494d;border-radius:9px;padding:.65rem .75rem;color:#eef7f3;outline:none;background:#08131a;font-size:1rem}.portal-form input:focus,.character-form input:focus{border-color:#56ba8d;box-shadow:0 0 0 3px #56ba8d26}.portal-form input[aria-invalid=true],.character-form input[aria-invalid=true]{border-color:#d96666}.portal-form button[type=submit]{min-height:2.85rem;margin-top:.55rem}.form-field{display:grid;gap:.5rem}.form-status,.form-error{margin:.85rem 0 0;border-radius:8px;padding:.65rem .75rem;font-size:.8rem;line-height:1.45}.form-status{border:1px solid #304b48;color:#9fc4b7;background:#10231f}.form-error{border:1px solid #6f3b40;color:#ffd0cb;background:#351a20}.character-card{width:min(100%,70rem)}.character-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}.character-heading .eyebrow{margin-top:0}.account-summary{display:flex;flex:0 0 auto;align-items:center;gap:.75rem;border:1px solid #293d40;border-radius:999px;padding:.3rem .4rem .3rem .75rem;color:#b8c7c3;background:#0a151c;font-size:.78rem}.text-button{border-color:transparent;padding:.35rem .55rem;color:#8dc8ad;background:transparent}.character-form{display:grid;gap:1.2rem;margin-top:1.5rem}.character-name-field{display:grid;gap:.45rem;max-width:31rem}.field-meta{display:flex;justify-content:space-between;gap:1rem;color:#708680;font-size:.72rem}#character-name-bytes[data-state=error],#password-bytes[data-state=error]{color:#ff918a}.hero-picker{min-width:0;margin:0;border:0;padding:0}.hero-picker legend{margin-bottom:.65rem}.hero-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}.hero-option{position:relative;min-width:0;overflow:hidden;border:1px solid #2d4244;border-radius:12px;color:#b7c4c0;background:#0a151c;cursor:pointer;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}.hero-option:hover{transform:translateY(-2px);border-color:#50766a}.hero-option:focus-within{outline:3px solid rgb(86 186 141 / 28%);outline-offset:2px}.hero-option:has(input:checked){border-color:#66c69b;box-shadow:0 0 0 2px #66c69b33,0 12px 28px #0000003d}.hero-option input{position:absolute;z-index:2;width:1px;height:1px;margin:0;opacity:0}.hero-card-art,.selected-hero-preview{display:block;background-color:#13242a;background-image:url(/assets/generated/hero-roster.png);background-repeat:no-repeat;background-position:var(--atlas-x, 0%) var(--atlas-y, 0%);background-size:300% 200%;image-rendering:pixelated}.hero-card-art{width:100%;aspect-ratio:1;border-bottom:1px solid #2a3e40}.hero-card-copy{display:block;min-width:0;padding:.65rem}.hero-card-copy strong,.hero-card-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-card-copy strong{color:#d9e8e2;font-size:.82rem}.hero-card-copy small{margin-top:.18rem;color:#6e827d;font-size:.62rem}.hero-confirmation{display:grid;grid-template-columns:auto minmax(8rem,1fr) auto;align-items:center;gap:.85rem;border-top:1px solid #283b3d;padding-top:1rem}.selected-hero-preview{width:3.75rem;height:3.75rem;border:1px solid var(--hero-primary, #4d8b70);border-radius:10px}.hero-confirmation small,.hero-confirmation strong{display:block}.hero-confirmation small{color:#71847e;font-size:.68rem}.hero-confirmation strong{margin-top:.2rem;color:#e0ece7}#character-submit{min-height:2.8rem}#game-shell,#game-canvas{width:100%;height:100dvh;overflow:hidden}#game-shell{position:relative;background:#101923}#game-canvas canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.game-hud{position:absolute;z-index:3;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:calc(.9rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) .9rem calc(1rem + env(safe-area-inset-left));pointer-events:none}.brand{color:#f0f7f3;font-size:1.12rem;font-weight:750;letter-spacing:.08em;text-shadow:0 1px 5px #000}.brand span{margin-left:.45rem;color:#93aaa1;font-size:.72rem;font-weight:550;letter-spacing:.02em}.hud-actions{display:flex;align-items:center;gap:.55rem;pointer-events:auto}.connection-pill{display:flex;align-items:center;gap:.48rem;border:1px solid rgb(255 255 255 / 12%);border-radius:999px;padding:.42rem .75rem;color:#bdc8d2;background:#080e14d1;font-size:.78rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-dot{width:.52rem;height:.52rem;border-radius:50%;background:#e4ae4f;box-shadow:0 0 0 3px #e4ae4f24}.connection-pill[data-state=connected] .status-dot{background:#4ddb9a;box-shadow:0 0 0 3px #4ddb9a24}.connection-pill[data-state=disconnected] .status-dot,.connection-pill[data-state=error] .status-dot{background:#e56062;box-shadow:0 0 0 3px #e5606224}.hud-button{border-color:#ffffff24;padding:.42rem .65rem;color:#c9d3db;background:#080e14d1;font-size:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.debug-panel{position:absolute;z-index:2;top:calc(4.6rem + env(safe-area-inset-top));right:calc(1rem + env(safe-area-inset-right));width:12rem;border:1px solid rgb(255 255 255 / 10%);border-radius:10px;padding:.65rem .8rem;color:#91a3b4;background:#080e14bd;font-size:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}.debug-panel div{display:flex;justify-content:space-between;gap:.7rem;padding:.22rem 0}.debug-panel strong{overflow:hidden;color:#d7e4ee;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.controls-hint{position:absolute;z-index:2;left:50%;bottom:calc(.9rem + env(safe-area-inset-bottom));display:flex;align-items:center;gap:.5rem;transform:translate(-50%);border:1px solid rgb(255 255 255 / 10%);border-radius:10px;padding:.5rem .75rem;color:#9fb0bf;background:#080e14b8;font-size:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.controls-hint kbd{border:1px solid #425160;border-bottom-width:2px;border-radius:4px;padding:.1rem .28rem;color:#e1ebf3;background:#17222d}.controls-hint a{margin-left:.7rem;pointer-events:auto}.mobile-dpad{display:none}.game-blocker{position:absolute;z-index:6;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1rem;background:#050a0fc2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.game-blocker>div{width:min(100%,26rem);border:1px solid #72464a;border-radius:12px;padding:1.15rem;color:#f2dcda;background:#25161b;box-shadow:0 18px 50px #0000005c}.game-blocker p{color:#c3a3a3;font-size:.82rem;line-height:1.5}.game-blocker button+button{margin-left:.45rem}#game-error{position:absolute;z-index:5;left:50%;bottom:calc(4rem + env(safe-area-inset-bottom));max-width:min(90vw,38rem);transform:translate(-50%);border:1px solid #8c4144;border-radius:8px;padding:.65rem .8rem;color:#ffd4d1;background:#451418f0;font-size:.8rem}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgb(104 217 176 / 45%);outline-offset:2px}@media (max-width: 1040px){.hero-options{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 680px){.portal-screen{place-items:start center;padding-top:calc(.8rem + env(safe-area-inset-top))}.portal-card{border-radius:13px;padding:1.1rem}.character-heading{display:grid}.account-summary{justify-self:start}.hero-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-confirmation{grid-template-columns:auto 1fr}#character-submit{grid-column:span 2;width:100%}.game-hud{align-items:flex-start;padding-right:calc(.65rem + env(safe-area-inset-right));padding-left:calc(.65rem + env(safe-area-inset-left))}.brand span{display:block;max-width:9rem;margin:.15rem 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection-pill{max-width:9.5rem}#connection-state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.debug-panel{top:calc(5.2rem + env(safe-area-inset-top));right:calc(.65rem + env(safe-area-inset-right));width:10.5rem}}@media (pointer: coarse){.controls-hint{display:none}.mobile-dpad{position:absolute;z-index:4;bottom:calc(1rem + env(safe-area-inset-bottom));left:calc(1rem + env(safe-area-inset-left));display:grid;grid-template-columns:repeat(3,3.25rem);grid-template-rows:repeat(3,3.25rem);gap:.22rem;touch-action:none;-webkit-user-select:none;user-select:none}.mobile-dpad button{min-width:3.25rem;min-height:3.25rem;border-color:#ffffff2e;border-radius:12px;padding:0;color:#dcece7;background:#09131ac7;box-shadow:inset 0 1px #ffffff14;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);touch-action:none}.mobile-dpad button.pressed{border-color:#62c499;color:#effff8;background:#1f674be0;transform:translateY(1px)}.dpad-up{grid-area:1 / 2}.dpad-left{grid-area:2 / 1}.mobile-dpad>span{grid-area:2 / 2}.dpad-right{grid-area:2 / 3}.dpad-down{grid-area:3 / 2}#game-error{bottom:calc(11.5rem + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}