/* Keep the existing card width, horizontal padding and logo width rules. */
.login-screen{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;padding:max(16px,env(safe-area-inset-top)) 20px 0;min-height:max(100svh,740px);background:#160b1c;overflow:hidden}
.login-screen::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#2a1027c9 0%,#32152a91 22%,#5a243733 46%,transparent 65%);opacity:1;animation:none}
.login-screen::after{display:none}
.login-card{flex:none;padding:12px 34px;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:2}
/* Course-style frame belongs only to the desktop Web interface. */
@media(min-width:1001px){html[data-ui="desktop"] .login-card{border-radius:20px;background:linear-gradient(145deg,rgba(14,25,48,.32),rgba(11,21,40,.22));box-shadow:inset 0 0 0 1px rgba(184,196,219,.26),0 12px 34px rgba(0,0,0,.16)}}
.login-card .login-intro{color:#e5edff;text-shadow:0 2px 3px #020a1c}
.login-card #loginBtn{border:1px solid #c3d7ff8a;box-shadow:0 3px 0 #132644,0 0 24px #628fff40;font-weight:700}
.login-card .status{background:#101b30eb;padding:8px;border-radius:6px}
.official-logo-login{margin-bottom:5px}
.login-card .login-intro{font-size:12px;line-height:1.35;margin:3px 0 8px}
.login-card #loginBtn{margin-top:0!important;min-height:44px}
.login-card .pwa-controls{margin-top:8px;gap:6px}
.login-card .status{margin-top:8px}
.chewe-hud{width:min(560px,100%);flex:none;padding:8px 12px;background:#0b172bd9;border:2px solid #6a81b17a;border-radius:3px;box-shadow:inset 0 -3px #172a45,0 3px #02081266;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#dfebff;z-index:2}
.chewe-hud-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid #6a81b12b}
.chewe-identity{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.chewe-identity strong{font-size:13px;letter-spacing:1px}.chewe-identity small{font-size:9px;color:#afc0d9}
.chewe-sound{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:7px;min-width:88px;min-height:36px;padding:6px 10px;margin-left:auto;font:inherit;font-size:10px;letter-spacing:.3px;color:#b9cbe5;background:#16284080;border:1px solid #6a81b157;border-radius:4px;box-shadow:inset 0 1px #aacaff0d;cursor:pointer;touch-action:manipulation}
.chewe-sound svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.chewe-sound .chewe-sound-on{display:none}.chewe-sound[aria-pressed="true"] .chewe-sound-on{display:block}.chewe-sound[aria-pressed="true"] .chewe-sound-off{display:none}
.chewe-sound[aria-pressed="true"]{color:#c1f1e6;border-color:#82b6ac8c;background:#1c3b4870}
.chewe-sound:active{box-shadow:inset 0 2px 3px #050e2066}
.chewe-sound:focus-visible,.chewe-controls button:focus-visible,.chewe-stage:focus-visible{outline:2px solid #9fd5ff;outline-offset:3px}
.chewe-meters{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px;align-items:end}
.chewe-meter-label{display:flex;justify-content:space-between;gap:3px;margin-bottom:3px;font-size:9px;color:#b5c6df;letter-spacing:.6px}
.chewe-meter-label output{color:#e6edff;letter-spacing:0}
.chewe-hearts{display:flex;gap:5px;height:12px;align-items:center}.chewe-heart{display:block;flex:0 0 14px;width:14px;height:12px;padding:0;box-sizing:border-box;background:#fa7e91;clip-path:polygon(0 17%,14% 17%,14% 0,43% 0,50% 17%,57% 0,86% 0,86% 17%,100% 17%,100% 58%,50% 100%,0 58%);filter:drop-shadow(0 1px #8e3653)}
.chewe-heart.is-empty{background:#070d18;filter:drop-shadow(0 1px #65718c)}.chewe-hud progress{display:block;width:100%;height:12px;appearance:none;border:1px solid #607292;background:#111a30;border-radius:0;overflow:hidden}
.chewe-hud progress::-webkit-progress-bar{background:#111a30}.chewe-hud progress::-webkit-progress-value{background:var(--meter-color);box-shadow:inset 0 2px #ffffff33}.chewe-hud progress::-moz-progress-bar{background:var(--meter-color)}
.chewe-mana{--meter-color:#7c97f2}.chewe-xp{--meter-color:#edc76f}
.chewe-stage{position:absolute;inset:0;isolation:isolate;width:100%;height:100%;margin:0;min-height:0;outline:none;background:#172644}
.chewe-stage .login-journey{z-index:0;image-rendering:pixelated}
.chewe-caption{position:absolute;left:12px;right:12px;bottom:calc(138px + env(safe-area-inset-bottom,0px));text-align:center;font:11px/1.4 ui-monospace,Consolas,monospace;color:#e3ecff;text-shadow:0 2px 2px #091022;pointer-events:none;z-index:1}
.chewe-controls{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:12px;z-index:2;pointer-events:none}
.chewe-control-group{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.chewe-controls button{display:grid;place-items:center;box-sizing:border-box;min-width:48px;min-height:48px;padding:0;color:#d7e9ff;font:bold 25px/1 ui-monospace,Consolas,monospace;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Four independent 48px targets; multiple pointers can hold a direction and an action. */
.chewe-dpad{position:relative;width:132px;height:112px;flex:0 0 132px;isolation:isolate;filter:drop-shadow(0 4px 0 #050e20) drop-shadow(0 0 7px #6b89b426)}
.chewe-dpad::before,.chewe-dpad::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;clip-path:polygon(33.33% 0,66.67% 0,66.67% 28.57%,100% 28.57%,100% 71.43%,66.67% 71.43%,66.67% 100%,33.33% 100%,33.33% 71.43%,0 71.43%,0 28.57%,33.33% 28.57%);background:linear-gradient(145deg,#9cbde3,#567598 55%,#243c60)}
.chewe-dpad::after{inset:3px;z-index:-1;background:linear-gradient(145deg,#365679,#1b304e 55%,#101d34)}
.chewe-dpad button{position:absolute;top:32px;width:66px;height:48px;border:0;background:transparent;box-shadow:none}
.chewe-dpad button[data-chewe-control="left"]{left:0;border-radius:5px 0 0 5px;padding-right:18px}
.chewe-dpad button[data-chewe-control="right"]{right:0;border-radius:0 5px 5px 0;padding-left:18px}
.chewe-arrow{display:block;width:17px;height:20px;background:#9ebfe7;filter:drop-shadow(0 2px 0 #071326);clip-path:polygon(0 50%,100% 0,100% 100%)}
.chewe-arrow-right{transform:rotate(180deg)}
.chewe-dpad-center{position:absolute;left:55px;top:45px;width:22px;height:22px;border-radius:50%;border:2px solid #12233e;box-sizing:border-box;background:radial-gradient(circle at 35% 30%,#56769e,#142a49 75%);box-shadow:0 1px 0 #839fc25c,inset 0 2px 3px #091326;pointer-events:none}
.chewe-dpad-grip{position:absolute;left:58px;width:16px;height:12px;background:repeating-linear-gradient(0deg,#0d1c33 0 2px,#7894b454 2px 3px,transparent 3px 5px);pointer-events:none}
.chewe-dpad-grip-top{top:11px}.chewe-dpad-grip-bottom{bottom:11px}
.chewe-dpad button.pressed{background:#72a3d438;box-shadow:inset 0 2px 4px #081327}
.chewe-dpad button.pressed .chewe-arrow{background:#d0eaff}
.chewe-actions{display:flex;align-items:flex-end;gap:14px;padding-bottom:7px}
.chewe-action{display:flex;flex-direction:column;align-items:center;gap:7px}
.chewe-action-a{padding-bottom:24px}
.chewe-action>span{font:10px/1 ui-monospace,Consolas,monospace;color:#c6d6f1;text-shadow:0 2px 2px #050e20;pointer-events:none}
.chewe-actions button{width:56px;height:56px;border-radius:50%;border:2px solid #86a9df;background:radial-gradient(circle at 35% 25%,#47699c,#263e69 65%,#13294b);box-shadow:inset 0 2px 2px #b4d0f270,inset 0 -4px 3px #102442,0 4px 0 #050e20,0 0 9px #7c97f226;text-shadow:0 2px 1px #10203e}
.chewe-actions button[data-chewe-control="attack"]{color:#e2dfff;border-color:#a4a2e0;background:radial-gradient(circle at 35% 25%,#6665a6,#3d4178 65%,#252e56)}
.chewe-actions button.pressed{transform:translateY(3px);box-shadow:inset 0 3px 5px #101d34,0 1px 0 #050e20;background:#344d78}
.chewe-keyboard-tip{position:absolute;left:0;right:0;bottom:18px;text-align:center;pointer-events:none;color:#96accb;font:10px ui-monospace,Consolas,monospace;z-index:1}
.chewe-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(pointer:coarse),(max-width:650px){.chewe-keyboard-tip{display:none}}
@media(pointer:coarse){.chewe-sound{min-height:44px}}
@media(max-width:380px){.chewe-hud{padding:7px 9px}.chewe-identity small{font-size:8px}.chewe-sound{min-width:82px;padding:6px 8px}.chewe-meters{gap:9px}}
@media(max-height:560px) and (orientation:landscape){.login-screen{padding-top:10px;gap:8px;min-height:740px}}

/* Compact centred entry at the top; sound stays inside the status header. */
.login-screen::before{background:radial-gradient(ellipse 380px 190px at 50% 150px,#1c0d1fba 0%,#2b112370 55%,transparent 100%)}
.login-card{align-self:center;margin:0;max-width:460px}
.chewe-hud{position:relative;align-self:center;width:min(460px,100%);box-sizing:border-box;padding:9px 11px;background:#060d25d9;border:1px solid #756db16e;box-shadow:inset 0 -2px #26204b80;color:#eef0ff;z-index:3}
.chewe-hud-head{gap:7px;padding-bottom:6px;margin-bottom:6px}
.chewe-identity{gap:6px}.chewe-identity strong{color:#d4f8ff}.chewe-identity small:last-child{display:none}
.chewe-gem-count{display:flex;gap:4px;align-items:center;font-size:9px;white-space:nowrap}.chewe-gem-count label{font-size:8px;color:#c0d6eb}.chewe-gem-count output{color:#dbfaff}.chewe-gem-icon{color:#40e1ef;font-size:14px}
.chewe-meters{gap:9px;grid-template-columns:.9fr 1fr 1.2fr}.chewe-meter-label{font-size:8px}.chewe-mana{--meter-color:#9174ee}.chewe-xp{--meter-color:#31c8e6}
.chewe-sound{position:static;margin-left:0;z-index:3;min-width:76px;min-height:44px;padding:7px;gap:4px;background:#060d25da;border-color:#756db16e;border-radius:3px;font-size:9px;box-sizing:border-box;box-shadow:inset 0 -2px #26204b80}
.chewe-sound svg{width:18px;height:18px}.chewe-stage{background:#160b1c}
.chewe-caption{color:#c6ebff;bottom:calc(130px + env(safe-area-inset-bottom,0px));font-size:10px}
@media(max-width:380px){.chewe-hud{padding:8px}.chewe-identity strong{font-size:11px}.chewe-identity small{font-size:8px}.chewe-gem-count label{display:none}.chewe-meter-label{font-size:8px}.chewe-meters{gap:6px}.chewe-sound{min-width:72px;padding:6px}.chewe-hearts{gap:3px}}
@media(max-height:560px) and (orientation:landscape){.login-screen{min-height:100svh;justify-content:flex-start;padding-top:max(10px,env(safe-area-inset-top));gap:8px}.login-card{padding-top:0;padding-bottom:0}}
/* Follow the visible browser/app height on Mobile, including toolbar changes. */
html[data-ui="mobile"] body,html[data-ui="mobile"] .login-screen{min-height:100svh;min-height:100dvh}
@media(max-width:1000px){body,.login-screen{min-height:100svh;min-height:100dvh}}

.chewe-dpad{width:144px;height:144px;flex-basis:144px}
.chewe-dpad::before,.chewe-dpad::after{clip-path:polygon(33.33% 0,66.67% 0,66.67% 33.33%,100% 33.33%,100% 66.67%,66.67% 66.67%,66.67% 100%,33.33% 100%,33.33% 66.67%,0 66.67%,0 33.33%,33.33% 33.33%)}
.chewe-dpad button{width:48px;height:48px;top:48px;min-width:48px;min-height:48px}
.chewe-dpad button[data-chewe-control="left"],.chewe-dpad button[data-chewe-control="right"]{padding:0}
.chewe-dpad button[data-chewe-control="up"]{left:48px;top:0;border-radius:5px 5px 0 0}
.chewe-dpad button[data-chewe-control="down"]{left:48px;top:96px;border-radius:0 0 5px 5px}
.chewe-arrow-up{transform:rotate(90deg)}.chewe-arrow-down{transform:rotate(-90deg)}
.chewe-dpad-center{left:61px;top:61px}
.chewe-caption{bottom:calc(164px + env(safe-area-inset-bottom,0px))}
.chewe-keyboard-tip{bottom:6px;padding:0 170px;font-size:9px}
@media(max-width:650px){.chewe-controls{left:12px;right:12px;gap:8px}.chewe-actions{gap:10px}}

.chewe-identity #chewePhase{display:inline;color:#9cdecf;font-size:8px}
.chewe-result[hidden]{display:none}
.chewe-result{position:absolute;left:50%;bottom:calc(174px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;width:min(380px,calc(100% - 32px));padding:18px;box-sizing:border-box;border:1px solid #6d83b7;border-radius:12px;background:linear-gradient(145deg,#101d35f7,#14132bf7);box-shadow:0 10px 35px #05081580;color:#edf3ff;font-family:ui-monospace,Consolas,monospace}
.chewe-result-eyebrow{margin:0 0 6px;font-size:9px;letter-spacing:1.5px;color:#87e0d3}
.chewe-result h2{margin:0 0 14px;font-size:17px;line-height:1.3}
.chewe-result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
.chewe-result-stats dt{font-size:8px;line-height:1.5;color:#b5c6df}.chewe-result-stats dd{margin:4px 0 0;font-size:17px;font-weight:bold;color:#e7faff}
.chewe-result-summary{margin:12px 0 0;color:#b5c6df;font-size:9px;line-height:1.6}
.chewe-result-actions{display:flex;gap:8px;margin-top:14px}
.chewe-result-actions button{flex:1;min-height:44px;border-radius:6px;border:1px solid #637bab;background:#223754;color:#edf3ff;font:11px ui-monospace,Consolas,monospace;cursor:pointer}
.chewe-result-actions button:first-child{background:#27515c;border-color:#76b6bb}
.chewe-result-actions button:focus-visible{outline:2px solid #b7f9e4;outline-offset:3px}
.chewe-result-actions:has(button:not([hidden])){display:flex}.chewe-result-actions:has(button[hidden]){margin-top:0}
/* A short screen can scroll the result without covering the Google login above it. */
@media(max-height:740px){.login-screen:has(.chewe-result:not([hidden])){min-height:780px}}
.chewe-result [hidden]{display:none!important}

.chewe-dialogue strong{color:#c3a4ff;font-size:15px;letter-spacing:1px}
.chewe-dialogue p:not(.chewe-result-eyebrow){font-size:12px;line-height:1.7;margin:9px 0 0}
.chewe-dialogue[hidden]{display:none}
@media(max-height:740px){.login-screen:has(.chewe-dialogue:not([hidden])){min-height:780px}}