:root{color-scheme:dark;--ink:#eefbff;--muted:#a7c9ee;--navy:#06112b;--cyan:#20ddff;--pink:#ff3aa7;--violet:#af4bff;--gold:#ffc94a;--panel:rgba(6,19,54,.88);--line:rgba(104,209,255,.3)}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050b22;color:var(--ink);font-family:'Exo 2',system-ui,sans-serif}
button,input,textarea,select{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #fff;outline-offset:3px}
.screen{display:none}
.screen.active{display:block}
#screen-hub{position:relative;min-height:100vh;overflow:hidden;background:#071136;isolation:isolate;animation:screen-in .8s both}
.hub-sky{position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 25% 40%,#0b79ba 0,transparent 26%),radial-gradient(circle at 77% 28%,#7118a5 0,transparent 25%),linear-gradient(#040a25,#122353 68%,#07122d)}
.starfield{position:absolute;inset:-15%;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#73eaff 0 1px,transparent 1.5px),radial-gradient(circle,#ff8ee8 0 1px,transparent 1.5px);background-size:67px 67px,113px 113px,157px 157px;background-position:10px 10px,22px 43px,80px 20px;animation:star-drift 35s linear infinite}
.stars-b{opacity:.5;transform:scale(1.4);animation-duration:55s;animation-direction:reverse}
.nebula{position:absolute;inset:4% -10% 20%;background:radial-gradient(ellipse at 30% 45%,rgba(37,211,255,.48),transparent 28%),radial-gradient(ellipse at 70% 35%,rgba(244,44,219,.42),transparent 30%);filter:blur(26px);animation:nebula-breathe 10s ease-in-out infinite alternate}
.planet{position:absolute;border-radius:50%;box-shadow:inset -25px -18px 35px rgba(0,0,0,.45),0 0 55px currentColor}
.planet:after{content:"";position:absolute;inset:38% -35%;border:9px solid currentColor;border-top-color:transparent;border-radius:50%;transform:rotate(-12deg)}
.planet-a{width:110px;height:110px;left:4%;top:25%;color:#43d8ff;background:radial-gradient(circle at 35% 30%,#a4efff,#5b4bd0 55%,#20215f)}
.planet-b{width:84px;height:84px;right:4%;top:18%;color:#ff8c63;background:radial-gradient(circle at 35% 30%,#ffd574,#c75077 60%,#582064)}
.cockpit{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cockpit:before,.cockpit:after{content:"";position:absolute;top:0;bottom:0;width:10vw;background:linear-gradient(90deg,#020718,#142c5e 55%,#1956a0 58%,transparent);clip-path:polygon(0 0,100% 0,45% 22%,32% 80%,100% 100%,0 100%)}
.cockpit:after{right:0;transform:scaleX(-1)}
.cockpit i{position:absolute;bottom:-9vh;height:22vh;width:40%;background:linear-gradient(#122d5a,#07142c);border-top:4px solid #277eea;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
.cockpit i:nth-child(1){left:-10%}
.cockpit i:nth-child(2){right:-10%}
.cockpit i:nth-child(3){left:30%;width:40%;height:15vh;background:repeating-linear-gradient(90deg,transparent 0 17%,rgba(26,122,234,.18) 18% 19%),linear-gradient(#193367,#08142e)}

.hub-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;max-width:1720px;margin:auto;padding:18px 30px 16px}
.hub-topbar{min-height:92px;display:flex;align-items:center;gap:20px;padding:10px 16px;border:1px solid rgba(111,196,255,.35);border-radius:28px;background:linear-gradient(180deg,rgba(15,42,95,.94),rgba(5,17,48,.94));box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.15)}
.brand{min-width:245px;line-height:.78;transform:skew(-5deg);filter:drop-shadow(0 4px 0 #102b79) drop-shadow(0 0 12px #2aaeff)}
.brand span,.brand b{display:block;font-style:italic;font-weight:900;letter-spacing:-.05em}
.brand span{font-size:2.3rem;color:#fff;text-shadow:0 3px #1972db}
.brand b{font-size:1.65rem;color:#ffc633;text-shadow:0 3px #a44b09}
.brand small{font-size:.57rem;letter-spacing:.3em;color:#9ef5ff;margin-left:6px}
.player-chip{height:68px;min-width:240px;display:grid;grid-template-columns:58px 1fr;align-items:center;gap:10px;padding:5px 18px 5px 5px;border-left:1px solid var(--line)}
.player-chip strong{display:block;font-size:1.25rem}
.player-chip small{display:block;color:#8ddcff;font-weight:700}
.avatar-mini{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#52efff,#1c5bb9);border:3px solid #75efff;padding:7px}
.avatar-mini span{display:block;width:100%;height:100%;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 58%,#ffc29b 0 31%,transparent 32%),radial-gradient(ellipse at 52% 29%,#482516 0 39%,transparent 40%),linear-gradient(90deg,#edfaff 50%,#245db8 50%)}
.level-mini{grid-column:2;height:5px;border-radius:5px;background:#13254b;overflow:hidden}
.level-mini i{display:block;width:0;height:100%;background:linear-gradient(90deg,#30e9ff,#6cff94)}
.resources{display:flex;gap:10px;flex:1;justify-content:center}
.resource{min-width:130px;display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;align-items:center;padding:7px 14px;border:1px solid rgba(105,184,255,.25);border-radius:18px;background:rgba(3,13,39,.7)}
.resource svg{grid-row:1/3;width:28px;fill:#ffd151;stroke:#fff2a2}
.resource b{font-size:1.3rem}
.resource span{font-size:.64rem;text-transform:uppercase;color:#87b6e7}
.resource.crystal svg{fill:#1bb7ff;stroke:#9fffff;stroke-width:1.5}
.resource.cards svg{fill:#277bd1;stroke:#9ff6ff;stroke-width:1.4}
.top-actions{display:flex;gap:10px}
.icon-button,.teacher-button{height:58px;border:1px solid #48b4ff;border-radius:18px;background:linear-gradient(180deg,#174b96,#0a2459);cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 16px rgba(25,144,255,.2)}
.icon-button{width:58px;padding:13px}
.icon-button svg,.teacher-button svg{fill:none;stroke:currentColor;stroke-width:2}
.teacher-button{display:flex;align-items:center;gap:8px;padding:7px 15px;border-color:#ffc23d;background:linear-gradient(#8a5711,#543007);color:#fff1b4;font-size:.78rem;font-weight:900;text-align:left}
.teacher-button svg{width:34px;stroke:#ffd969}

.hub-stage{min-height:570px;display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:end;padding:16px 0 10px}
.crew{height:570px;position:relative;align-self:end}
.crew-glow{position:absolute;inset:16% -5% 0;background:radial-gradient(ellipse,#16d7ff55,transparent 68%)}
.cadet{position:absolute;width:220px;height:470px;bottom:5px;left:0;filter:drop-shadow(0 14px 18px #02071c);animation:crew-float 4s ease-in-out infinite}
.robot{position:absolute;width:120px;right:-10px;bottom:250px;filter:drop-shadow(0 0 12px #00ddff);animation:robot-float 3s ease-in-out infinite}
.crew-label{position:absolute;bottom:4px;left:10px;right:10px;padding:10px;text-align:center;border-radius:13px;background:#07153ddd;border:1px solid #3de1ff;box-shadow:0 0 18px #00cfff44}
.crew-label span,.crew-label strong{display:block}
.crew-label span{font-size:.62rem;letter-spacing:.14em;color:#75e9ff}
.crew-label strong{font-size:1rem}
.missions{min-width:0}
.mission-heading{height:54px;display:flex;align-items:center;gap:15px;padding:0 10px}
.mission-heading>span{font-size:.72rem;letter-spacing:.2em;color:#5beaff}
.mission-heading h1{font-size:1.65rem;text-transform:uppercase;margin:0}
.signal{margin-left:auto;font-size:.7rem;color:#9decc8;text-transform:uppercase}
.signal i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3cff9a;box-shadow:0 0 12px #3cff9a}
.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mission-card{--accent:#2de6ff;--accent2:#1588ff;position:relative;height:505px;display:flex;flex-direction:column;overflow:hidden;padding:18px;border:1px solid color-mix(in srgb,var(--accent),white 25%);border-radius:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent2),transparent 60%),rgba(4,12,39,.96) 52%);box-shadow:inset 0 0 0 4px rgba(2,13,40,.75),inset 0 0 25px color-mix(in srgb,var(--accent),transparent 80%),0 16px 30px rgba(0,0,0,.42),0 0 20px color-mix(in srgb,var(--accent),transparent 70%);transform:translateZ(0);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,filter .28s}
.mission-card:before{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--accent),transparent 35%);border-radius:23px;pointer-events:none}
.mission-card:hover{transform:translateY(-9px) scale(1.025);box-shadow:inset 0 0 0 4px rgba(2,13,40,.75),inset 0 0 40px color-mix(in srgb,var(--accent),transparent 72%),0 25px 45px rgba(0,0,0,.5),0 0 38px color-mix(in srgb,var(--accent),transparent 45%)}
.mission-card:active{transform:translateY(-3px) scale(.995)}
.mission-card.runner{--accent:#ff4caa;--accent2:#c52c65}
.mission-card.battle{--accent:#bc58ff;--accent2:#7625d2}
.card-aura{position:absolute;inset:-45% -30% auto;height:85%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.2;animation:aura 5s ease-in-out infinite}
.mission-number{position:absolute;z-index:3;top:17px;left:17px;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;font-size:1.5rem;font-weight:900;background:linear-gradient(145deg,var(--accent),var(--accent2));border:3px solid #b8f8ff;box-shadow:0 0 18px var(--accent)}
.mission-status{position:absolute;z-index:3;right:18px;top:23px;padding:6px 10px;border-radius:15px;background:#05344fdd;color:#85f4ff;font-size:.6rem;font-weight:900;letter-spacing:.1em;border:1px solid var(--accent)}
.mission-visual{height:208px;margin:-6px -6px 0}
.mission-visual svg{width:100%;height:100%;filter:drop-shadow(0 0 12px var(--accent))}
.mission-copy{text-align:center;position:relative;margin-top:-3px}
.mission-kicker{font-size:.65rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.mission-copy h2{margin:4px 0 1px;font-size:1.65rem;line-height:.98;text-shadow:0 0 12px var(--accent)}
.mission-copy p{margin:7px 0;color:#dbeaff;font-weight:600}
.mission-bottom{margin-top:auto}
.stars-progress{display:flex;justify-content:center;gap:14px;font-size:1.45rem;color:#26395d;text-shadow:0 0 0 #8293ad}
.stars-progress .earned{color:#ffd349;text-shadow:0 0 10px #ffac19}
.rewards{display:flex;justify-content:center;gap:8px;margin:8px 0}
.rewards span{min-width:78px;text-align:center;padding:5px 10px;border-radius:14px;background:#071433;border:1px solid color-mix(in srgb,var(--accent),transparent 50%);font-size:.8rem;font-weight:800}
.play-button{position:relative;overflow:hidden;width:100%;height:48px;border:0;border-radius:18px;background:linear-gradient(90deg,var(--accent2),var(--accent));font-weight:900;letter-spacing:.12em;cursor:pointer;box-shadow:inset 0 2px rgba(255,255,255,.35),0 0 20px color-mix(in srgb,var(--accent),transparent 45%)}
.play-button:before{content:"";position:absolute;top:-50%;bottom:-50%;width:35%;left:-55%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#fff9,transparent);animation:button-shine 3.5s infinite}
.play-button b{position:absolute;right:18px;font-size:1.1rem}
.locked{filter:saturate(.68)}
.locked:hover{filter:saturate(.9)}
.locked .mission-status{background:#3b164e;color:#f4caff}
.locked .mission-visual{opacity:.77}
.locked .play-button{background:linear-gradient(90deg,#3e3761,#62517c);box-shadow:none;cursor:not-allowed}
.lock-message{position:absolute;left:15px;right:15px;bottom:102px;z-index:3;display:flex;justify-content:center;align-items:center;gap:6px;padding:7px;background:#160f35e8;border:1px solid var(--accent);border-radius:12px;font-size:.68rem;color:#ecdfff}
.lock-message svg{width:16px;fill:none;stroke:currentColor;stroke-width:2}
.locked .mission-copy{transform:translateY(-3px)}
.locked .mission-bottom{padding-top:32px}
.unlocking{animation:unlock 1.2s both}

.hub-footer{min-height:104px;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;padding-top:10px}
.hub-footer>section{position:relative;display:flex;align-items:center;gap:13px;min-width:0;padding:12px 16px;border:1px solid rgba(77,170,255,.36);border-radius:22px;background:linear-gradient(180deg,rgba(11,38,87,.96),rgba(3,15,46,.96));box-shadow:0 8px 25px #0008,inset 0 1px rgba(255,255,255,.12)}
.rank-badge{flex:0 0 64px;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;font-size:2.1rem;color:#ffce43;background:#17366b;border:3px solid #3aaeff}
.rank-badge span{position:absolute;font-size:.75rem;color:#fff}
.level-progress>div:last-child{flex:1}
.level-progress>div>span,.footer-title{font-weight:900;font-size:.7rem;letter-spacing:.09em}
.progress-track{position:relative;height:24px;margin-top:7px;border-radius:13px;background:#06132e;border:2px solid #3287cc;overflow:hidden}
.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#42cb52,#8aff64);transition:width .6s}
.progress-track b{position:absolute;inset:0;display:grid;place-items:center;font-size:.68rem;text-shadow:0 1px 2px #000}
.achievements{flex-direction:column!important;gap:6px!important;padding:8px 14px!important}
.footer-title small{color:#78dcff;margin-left:8px}
.medal-list{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;padding:0;margin:0}
.medal-list li{min-width:0;text-align:center;color:#69809f}
.medal-icon{width:46px;height:46px;display:grid;place-items:center;margin:auto;border-radius:50%;font-size:1.3rem;background:#102448;border:2px solid #375b8f;filter:grayscale(1)}
.achievement-active{color:#ffe9a0!important}
.achievement-active .medal-icon{background:radial-gradient(circle,#fff1a1,#e28e10 72%);border-color:#ffe87e;color:#6c3200;filter:none;box-shadow:0 0 13px #ffc42d88}
.medal-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.56rem;margin-top:3px}
.daily-reward{overflow:hidden}
.reward-ready{position:absolute;top:5px;right:8px;font-size:.52rem;color:#ffdf67}
.chest{position:relative;flex:0 0 65px;height:53px;border:3px solid #ffd34b;border-radius:13px;background:linear-gradient(#804de1 45%,#3f237c 46%);box-shadow:0 0 22px #ffc83d99;animation:reward-pulse 1.8s infinite}
.chest:before{content:"";position:absolute;left:25px;top:-4px;width:15px;height:54px;background:#ffc941;border:2px solid #fff1a0}
.chest:after{content:"★";position:absolute;left:23px;top:14px;color:#754300;font-weight:900}
.daily-reward strong,.daily-reward small{display:block}
.daily-reward strong{font-size:.7rem;color:#ffe583}
.daily-reward small{font-size:.58rem;color:#9fc6ec}
.daily-reward button{margin-left:auto;border:1px solid #fff093;border-radius:12px;padding:10px 13px;background:linear-gradient(#ffcb38,#de7908);color:#462000;font-weight:900;font-size:.68rem;cursor:pointer;box-shadow:0 0 14px #ff9f19aa}
.daily-reward.claimed{opacity:.75}
.daily-reward.claimed .chest{animation:none;filter:grayscale(.8)}
.daily-reward.claimed button{background:#31486d;color:#aac0de;border-color:#4f6e98;box-shadow:none;cursor:default}

.game-screen{min-height:100vh;padding:28px max(24px,calc((100vw - 1120px)/2));background:radial-gradient(circle at 20% 10%,#133d74,#071126 45%,#040916);animation:screen-in .35s both}
.screen-header{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.screen-header h2{margin:0;font-size:1.8rem}
.mission-note{color:var(--muted)}
.screen-body{display:grid;gap:18px}
.neon-card{padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 15px 40px #0006}
.section-title{margin-bottom:14px;color:var(--cyan);font-size:.8rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.back-button,#mission1-reset,#mission2-next,#mission3-submit,#teacher-create-assignment,#editor-save,.secondary-button{border:0;padding:13px 18px;border-radius:15px;background:linear-gradient(135deg,#159ddd,#8150ec);font-weight:800;cursor:pointer}
.back-button{width:auto}
.mission-info{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.card-tile{min-height:100px;display:grid;place-items:center;padding:12px;border:1px solid #ffffff18;border-radius:18px;background:#08152f;cursor:pointer;transition:.2s}
.card-tile:hover{transform:translateY(-2px);border-color:#55ddff}
.card-tile.selected{border-color:#ff62d5;box-shadow:0 0 0 3px #ff62d533}
.card-tile.matched{background:#245ea1;color:#d9f5ff}
.sentence-card{min-height:120px;display:grid;place-items:center;text-align:center;font-size:1.1rem}
.answer-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.answer-button{border:1px solid #4f75aa;padding:15px;border-radius:16px;background:#10264f;cursor:pointer}
.mission-input label,.editor-form label{display:block;margin:10px 0 7px;color:var(--muted)}
.mission-input input,.editor-form input,.editor-form textarea,.editor-form select{width:100%;padding:14px;border:1px solid #395c91;border-radius:14px;background:#06112a;color:#fff}
.feedback{min-height:40px;color:#ffd66e}
.teacher-grid,.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.teacher-grid ul,.editor-list ul{list-style:none;padding:0}
.teacher-grid li,.editor-list li{padding:10px;margin:7px 0;border-radius:10px;background:#08162f}
.toast{position:fixed;left:50%;bottom:28px;z-index:20;transform:translate(-50%,30px);padding:12px 22px;border:1px solid #7df0ff;border-radius:16px;background:#071a3bf2;box-shadow:0 0 25px #21cdfd66;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes screen-in{from{opacity:0;transform:scale(1.015)}
to{opacity:1;transform:none}
}
@keyframes star-drift{to{transform:translate3d(67px,67px,0)}
}
@keyframes nebula-breathe{to{transform:scale(1.08) translateX(2%)}
}
@keyframes crew-float{50%{transform:translateY(-6px) rotate(.4deg)}
}
@keyframes robot-float{50%{transform:translateY(-13px) rotate(3deg)}
}
@keyframes aura{50%{opacity:.35;transform:scale(1.08)}
}
@keyframes button-shine{0%,55%{left:-55%}
85%,100%{left:130%}
}
@keyframes reward-pulse{50%{transform:scale(1.06);box-shadow:0 0 35px #ffc83ddd}
}
@keyframes unlock{0%{filter:brightness(2);transform:scale(.92)}
40%{filter:brightness(1.8);box-shadow:0 0 70px var(--accent)}
100%{filter:none;transform:none}
}

body.effects-off *,body.effects-off *:before,body.effects-off *:after{animation-play-state:paused!important}

@media(max-width:1200px){.hub-shell{padding:12px 18px}
.hub-topbar{gap:10px}
.brand{min-width:190px}
.brand span{font-size:1.8rem}
.brand b{font-size:1.3rem}
.player-chip{min-width:190px}
.resource{min-width:92px;padding:7px 9px}
.resource span{display:none}
.hub-stage{grid-template-columns:170px 1fr;gap:14px}
.crew{height:520px}
.cadet{width:185px}
.robot{width:100px;right:-4px}
.mission-card{height:485px;padding:14px}
.mission-copy h2{font-size:1.38rem}
.mission-grid{gap:12px}
.hub-footer{grid-template-columns:.9fr 1.2fr 1fr}
}

@media(max-width:900px){.hub-shell{display:block}
.hub-topbar{flex-wrap:wrap}
.brand{order:1}
.player-chip{order:2;flex:1}
.resources{order:4;width:100%}
.top-actions{order:3}
.hub-stage{display:block}
.crew{height:155px;margin:8px 0}
.cadet{height:185px;width:105px;left:10px;bottom:-10px}
.robot{width:75px;left:90px;right:auto;bottom:55px}
.crew-label{left:180px;right:auto;bottom:30px;width:170px}
.mission-grid{grid-template-columns:repeat(3,minmax(260px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 8px 22px}
.mission-card{scroll-snap-align:center}
.hub-footer{grid-template-columns:1fr 1fr}
.daily-reward{grid-column:1/-1}
.teacher-grid,.editor-grid{grid-template-columns:1fr}
}

@media(max-width:620px){.hub-shell{padding:8px}
.hub-topbar{border-radius:18px}
.brand{min-width:145px}
.brand span{font-size:1.4rem}
.brand b{font-size:1rem}
.brand small{font-size:.42rem}
.player-chip{min-width:145px;padding-right:4px}
.avatar-mini{width:45px;height:45px}
.resources{gap:5px}
.resource{min-width:0;flex:1;padding:5px}
.resource svg{width:22px}
.teacher-button span{display:none}
.teacher-button{padding:8px}
.mission-heading h1{font-size:1.2rem}
.mission-heading>span,.signal{display:none}
.crew{height:125px}
.cadet{height:150px}
.robot{width:60px;left:80px}
.crew-label{left:150px;bottom:20px}
.mission-grid{grid-template-columns:repeat(3,minmax(275px,86vw))}
.hub-footer{grid-template-columns:1fr}
.daily-reward{grid-column:auto}
.screen-header{align-items:flex-start;flex-direction:column}
.mission-info{grid-template-columns:1fr}
.game-screen{padding:18px 14px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.mission-card:hover{transform:none}
}


/* Generated game art */
.hub-sky{background-image:linear-gradient(180deg,rgba(2,7,28,.06),rgba(3,10,31,.25)),url('assets-web/generated/bridge-background.webp');background-size:cover;background-position:center;animation:bridge-drift 18s ease-in-out infinite alternate}
.hub-sky .nebula{opacity:.2}
.avatar-mini{padding:0;background:#123d78 url('assets-web/generated/cadet-kosmo.webp') center 17%/92% auto no-repeat}
.avatar-mini span{display:none}
.cadet{width:250px;height:500px;left:-18px;bottom:-2px;object-fit:contain}
.robot{width:135px;height:135px;right:-15px;bottom:285px;object-fit:contain}
.mission-card{isolation:isolate}
.mission-card .card-aura{z-index:1;pointer-events:none}
.mission-visual{position:absolute;inset:0;height:auto;margin:0;overflow:hidden;border-radius:28px;z-index:0}
.mission-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;transform:scale(1.015);transition:transform .6s cubic-bezier(.2,.8,.2,1);filter:saturate(1.05) contrast(1.03)}
.mission-visual:before{content:"";position:absolute;inset:0;z-index:1;background-image:radial-gradient(circle at 15% 24%,#fff 0 1px,transparent 2px),radial-gradient(circle at 81% 31%,#fff 0 1px,transparent 2px);background-size:61px 61px,83px 83px;opacity:.38;pointer-events:none}
.mission-visual:after{content:"";position:absolute;z-index:2;inset:39% 0 0;background:linear-gradient(180deg,transparent 0,rgba(3,8,28,.42) 30%,rgba(3,8,28,.97) 73%);pointer-events:none}
.mission-card:hover .mission-visual img{transform:scale(1.08) translateY(-1.5%)}
.mission-card .mission-copy,.mission-card .mission-bottom{z-index:2}
.mission-copy{margin-top:auto}
.locked .mission-visual{opacity:.72}
.locked .mission-visual img{filter:saturate(.62) brightness(.75)}
.medal-icon{width:54px;height:54px;display:block;margin:auto;border:0;border-radius:50%;font-size:0;background-color:transparent;background-image:url('assets-web/generated/achievement-medals.webp');background-size:400% 200%;background-position:calc(var(--medal-index,0) * -100%) center;filter:grayscale(1) brightness(.55);opacity:.7}
.achievement-active .medal-icon{background-color:transparent;filter:none;opacity:1;box-shadow:0 0 13px #ffc42d88}
.chest{position:relative;flex:0 0 78px;width:78px;height:70px;border:0;border-radius:0;object-fit:contain;background:none;box-shadow:none;filter:drop-shadow(0 0 14px #ffc83dcc);animation:reward-pulse 1.8s infinite}
.chest:before,.chest:after{content:none}
.daily-reward.claimed .chest{filter:grayscale(.8)}

@keyframes bridge-drift{to{transform:scale(1.035) translate3d(-.6%,.3%,0)}
}

@media(max-width:1200px){.cadet{width:205px;height:480px}
.robot{width:112px;height:112px;bottom:280px}
}

@media(max-width:900px){.cadet{height:190px;width:125px}
.robot{width:82px;height:82px;left:95px;right:auto;bottom:63px}
}

@media(max-width:620px){.cadet{height:155px;width:105px}
.robot{width:66px;height:66px;left:83px;bottom:52px}
}

.medal-icon{background-size:400% auto;background-position:0 center}
.medal-list li:nth-child(2) .medal-icon{background-position:33.333% center}
.medal-list li:nth-child(3) .medal-icon{background-position:66.667% center}
.medal-list li:nth-child(4) .medal-icon{background-position:100% center}


/* Responsive composition pass */
#screen-hub{min-height:100dvh;overflow-x:clip;overflow-y:auto}
.hub-sky:after{content:"";position:absolute;inset:7% 9% 10% 14%;background:radial-gradient(ellipse at center,rgba(1,6,25,.45),rgba(1,6,25,.2) 55%,transparent 78%);pointer-events:none}
.hub-sky{filter:saturate(.84) contrast(.9)}
.starfield{opacity:.42}
.stars-b{opacity:.2}
.hub-shell{height:100dvh;min-height:720px;grid-template-rows:clamp(74px,8.1dvh,86px) minmax(0,1fr) clamp(68px,8.8dvh,92px);padding:clamp(8px,1.3dvh,14px) clamp(18px,2vw,30px);gap:clamp(5px,.8dvh,9px)}
.hub-topbar{height:100%;min-height:0;padding:6px 14px;border-radius:23px}
.brand{min-width:clamp(180px,14vw,230px)}
.brand span{font-size:clamp(1.65rem,2.15vw,2.15rem)}
.brand b{font-size:clamp(1.15rem,1.55vw,1.5rem)}
.player-chip{height:58px}
.resources{align-items:center}
.resource{padding-block:5px}
.icon-button,.teacher-button{height:54px}
.hub-stage{min-height:0;height:100%;grid-template-columns:clamp(178px,14vw,225px) minmax(0,1fr);gap:clamp(14px,1.5vw,24px);align-items:center;padding:0}
.crew{height:min(52dvh,520px);min-height:350px;align-self:center}
.crew-glow{inset:18% 2% 4%;opacity:.65}
.cadet{width:min(13.5vw,225px);height:calc(100% - 12px);left:clamp(4px,1vw,15px);bottom:7px}
.robot{width:clamp(88px,7.5vw,120px);height:clamp(88px,7.5vw,120px);right:0;bottom:53%}
.crew-label{left:22px;right:22px;bottom:4px;padding:7px}
.missions{align-self:center}
.mission-heading{height:clamp(38px,4.8dvh,48px);padding-inline:8px}
.mission-heading h1{font-size:clamp(1.25rem,1.55vw,1.55rem)}
.mission-grid{gap:clamp(11px,1.15vw,18px);align-items:stretch}
.mission-card{height:clamp(410px,calc(100dvh - 252px),515px);min-height:0;padding:clamp(12px,1.25dvh,17px);border-radius:27px}
.mission-card:before{inset:6px;border-radius:21px}
.mission-number{top:14px;left:14px;width:clamp(44px,4.6dvh,52px);height:clamp(44px,4.6dvh,52px);font-size:clamp(1.15rem,2dvh,1.45rem)}
.mission-status{top:18px;right:15px;padding:5px 9px}
.mission-visual{border-radius:26px}
.mission-visual:after{inset:35% 0 0;background:linear-gradient(to bottom,transparent 0%,transparent 16%,rgba(3,8,30,.68) 50%,rgba(3,8,30,.96) 79%)}
.archive .mission-visual img{object-position:center 43%}
.runner .mission-visual img{object-position:center 42%}
.battle .mission-visual img{object-position:center 40%;filter:saturate(1.08) contrast(1.08) brightness(1.04)}
.mission-copy{flex:0 0 auto;min-height:clamp(88px,10.5dvh,108px);display:flex;flex-direction:column;justify-content:flex-end;padding:0 5px}
.mission-kicker{font-size:.6rem}
.mission-copy h2{margin:3px 0 0;font-size:clamp(1.2rem,2.25dvh,1.58rem);line-height:.98;color:#fff;text-shadow:0 2px 4px #000,0 0 8px color-mix(in srgb,var(--accent),transparent 30%)}
.mission-copy p{min-height:1.15em;margin:5px 0 0;font-size:clamp(.72rem,1.25dvh,.88rem);line-height:1.1}
.mission-bottom{flex:0 0 auto}
.stars-progress{gap:12px;font-size:clamp(1.05rem,1.9dvh,1.35rem)}
.rewards{margin:5px 0}
.rewards span{padding:4px 8px}
.play-button{height:clamp(40px,4.8dvh,47px)}
.archive{box-shadow:inset 0 0 0 4px rgba(2,13,40,.75),inset 0 0 26px #20ddff33,0 18px 35px #0008,0 0 27px #20ddff6b}
.locked{filter:saturate(.82)}
.locked:hover{filter:saturate(.92)}
.locked .mission-visual{opacity:.9}
.locked .mission-visual:before{background-color:rgba(93,31,145,.08)}
.locked .mission-visual img{filter:saturate(.78) brightness(.88)}
.locked .mission-copy{filter:none}
.lock-message{bottom:clamp(89px,10.5dvh,102px);padding:5px 8px;background:rgba(23,13,53,.9)}
.locked:hover .lock-message{background:#281354;box-shadow:0 0 16px color-mix(in srgb,var(--accent),transparent 45%)}
.locked .mission-bottom{padding-top:25px}
.battle .mission-number{border-color:#ffe083;box-shadow:0 0 19px #ffc83d}
.hub-footer{height:100%;min-height:0;grid-template-columns:1fr 1.15fr 1fr;gap:10px;padding:0}
.hub-footer>section{height:100%;padding:7px 12px;border-radius:18px}
.rank-badge{flex-basis:52px;width:52px;height:52px;font-size:1.65rem}
.progress-track{height:20px;margin-top:4px}
.achievements{padding:5px 11px!important}
.medal-list{grid-template-columns:repeat(3,1fr)}
.medal-icon{width:clamp(38px,4.6dvh,50px);height:clamp(38px,4.6dvh,50px)}
.chest{flex-basis:clamp(53px,6.2dvh,66px);width:clamp(53px,6.2dvh,66px);height:clamp(50px,6dvh,64px)}

@media(max-height:849px) and (min-width:901px){.hub-shell{grid-template-rows:72px minmax(0,1fr) 64px;min-height:700px;padding-block:7px;gap:5px}
.hub-topbar{padding-block:4px}
.brand span{font-size:1.55rem}
.brand b{font-size:1.05rem}
.brand small{display:none}
.player-chip{height:52px}
.avatar-mini{width:47px;height:47px}
.resources{gap:7px}
.resource{min-width:88px;padding:4px 8px}
.resource svg{width:24px}
.icon-button,.teacher-button{height:48px}
.hub-stage{grid-template-columns:165px minmax(0,1fr);gap:11px}
.crew{height:420px;min-height:0}
.cadet{width:174px;left:2px}
.robot{width:86px;height:86px;right:-2px;bottom:55%}
.crew-label{left:15px;right:15px;padding:5px}
.crew-label span{display:none}
.mission-heading{height:34px}
.mission-heading>span{display:none}
.mission-card{height:calc(100dvh - 190px);max-height:470px;min-height:438px;padding:11px}
.mission-copy{min-height:79px}
.mission-copy h2{font-size:1.18rem}
.mission-copy p{font-size:.7rem}
.mission-kicker{display:none}
.stars-progress{font-size:1rem}
.rewards{margin:3px 0}
.rewards span{padding:3px 7px}
.play-button{height:38px}
.locked .mission-bottom{padding-top:21px}
.lock-message{bottom:82px;font-size:.62rem}
.hub-footer>section{padding:4px 9px}
.rank-badge{width:44px;height:44px;flex-basis:44px}
.medal-icon{width:37px;height:37px}
.medal-list small{display:none}
.footer-title{font-size:.62rem}
.daily-reward small{display:none}
.chest{width:50px;height:48px;flex-basis:50px}
.daily-reward button{padding:7px 9px}
.reward-ready{display:none}
}

@media(max-width:1100px){.brand{min-width:160px}
.player-chip{min-width:170px}
.resource{min-width:82px}
.hub-stage{grid-template-columns:150px minmax(0,1fr)}
.crew{height:390px}
.cadet{width:160px}
.robot{width:80px;height:80px;bottom:56%}
.crew-label{left:8px;right:8px}
.mission-grid{gap:9px}
.mission-card{padding:10px}
.mission-copy h2{font-size:1.08rem}
.mission-copy p{font-size:.66rem}
.rewards span{min-width:62px}
.mission-status{font-size:.52rem}
.hub-footer{grid-template-columns:.9fr 1.1fr .95fr}
}

@media(max-width:900px){#screen-hub{overflow-y:auto}
.hub-shell{height:auto;min-height:100dvh;display:block;padding:9px 12px}
.hub-topbar{height:auto;min-height:72px}
.hub-stage{display:block;height:auto}
.crew{height:125px;min-height:0;margin:4px 0}
.cadet{width:108px;height:132px;left:15px;bottom:-4px}
.robot{width:67px;height:67px;left:102px;bottom:46px}
.crew-label{left:185px;right:auto;bottom:27px;width:155px}
.missions{width:100%}
.mission-heading{height:40px}
.mission-grid{grid-template-columns:repeat(3,minmax(300px,82vw));gap:14px;padding:8px max(8vw,18px) 16px;margin-inline:-12px}
.mission-card{height:clamp(440px,62dvh,500px);min-height:440px}
.hub-footer{height:auto;min-height:68px;grid-template-columns:1fr 1fr;margin-top:4px}
.hub-footer>section{min-height:68px}
.daily-reward{grid-column:1/-1}
.mission-card:hover{transform:translateY(-4px) scale(1.008)}
}

@media(max-width:620px){.player-chip{min-width:150px}
.resources{order:4}
.crew-label{left:170px}
.mission-grid{grid-template-columns:repeat(3,minmax(280px,88vw))}
.mission-card{height:455px}
.hub-footer{grid-template-columns:1fr}
.daily-reward{grid-column:auto}
}


/* Circular mission controls */
.mission-grid{padding-bottom:clamp(27px,3.4dvh,36px)}
.mission-card{height:clamp(390px,calc(100dvh - 282px),485px);overflow:visible}
.mission-visual{overflow:hidden}
.mission-bottom{position:relative;padding-bottom:clamp(22px,2.8dvh,30px)}
.play-button{position:absolute;z-index:8;left:50%;bottom:calc(clamp(31px,3.7dvh,38px) * -1);width:clamp(68px,7.5dvh,82px);height:clamp(68px,7.5dvh,82px);min-width:64px;min-height:64px;padding:0;border:3px solid rgba(222,253,255,.9);border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 38% 30%,#9cffff 0,#22e6ff 28%,#078ccd 68%,#0458a0 100%);color:#fff;box-shadow:inset 0 3px 7px #fff9,inset 0 -7px 12px #003d8099,0 0 0 5px rgba(31,220,255,.2),0 0 26px #16dfff,0 10px 22px #0009;display:grid;place-items:center;overflow:hidden;isolation:isolate;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.play-button:after{content:"";position:absolute;z-index:-1;inset:-10px;border:2px solid var(--accent);border-radius:50%;opacity:.65;animation:play-ring 2.4s ease-out infinite}
.play-button:before{z-index:2;top:-35%;bottom:-35%;width:28%;animation:button-shine 3.8s ease-in-out infinite}
.play-button svg{width:clamp(25px,2.8dvh,30px);height:clamp(25px,2.8dvh,30px);position:relative;z-index:3}
.play-icon{fill:currentColor;stroke:rgba(255,255,255,.5);stroke-width:1}
.lock-icon{display:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.runner .play-button{background:radial-gradient(circle at 38% 30%,#ffd08d 0,#ff648a 27%,#e82d8d 61%,#92225c 100%);box-shadow:inset 0 3px 7px #fff8,inset 0 -7px 12px #7d114c99,0 0 0 5px #ff559d30,0 0 26px #ff4caa,0 10px 22px #0009}
.battle .play-button{border-color:#ffe6a0;background:radial-gradient(circle at 38% 30%,#ffe58b 0,#be64ff 30%,#8128d5 65%,#47137d 100%);box-shadow:inset 0 3px 7px #fff8,inset 0 -7px 12px #3b075f99,0 0 0 5px #bd58ff30,0 0 26px #b64fff,0 10px 22px #0009}
.play-button:not(:disabled):hover{transform:translateX(-50%) translateY(-4px) scale(1.075);filter:brightness(1.1);box-shadow:inset 0 3px 9px #fffc,inset 0 -7px 12px #003d8077,0 0 0 7px color-mix(in srgb,var(--accent),transparent 70%),0 0 38px var(--accent),0 14px 25px #000a}
.play-button:not(:disabled):active,.play-button.launching{transform:translateX(-50%) translateY(-1px) scale(.94);filter:brightness(1.25)}
.play-button:focus-visible{outline:4px solid #fff;outline-offset:6px;box-shadow:0 0 0 10px #143b82,0 0 38px var(--accent)}
.play-button:disabled{cursor:not-allowed;filter:saturate(.55) brightness(.86);background:radial-gradient(circle at 38% 30%,#c6b8d4,#6d5a82 52%,#392f51);border-color:#bdb1ca;color:#f2ecf7;box-shadow:inset 0 2px 5px #fff5,0 0 0 4px color-mix(in srgb,var(--accent),transparent 82%),0 0 14px color-mix(in srgb,var(--accent),transparent 65%),0 8px 18px #0008}
.play-button:disabled:after{display:none}
.play-button:disabled:before{display:none}
.play-button:disabled .play-icon{display:none}
.play-button:disabled .lock-icon{display:block}
.locked .play-button{background:radial-gradient(circle at 38% 30%,#bba9ca,#665478 55%,#342a49);box-shadow:inset 0 2px 5px #fff5,0 0 0 4px color-mix(in srgb,var(--accent),transparent 82%),0 0 14px color-mix(in srgb,var(--accent),transparent 65%),0 8px 18px #0008}
.lock-message{bottom:clamp(45px,5.4dvh,55px);z-index:6}
.locked .mission-bottom{padding-top:24px;padding-bottom:clamp(22px,2.8dvh,30px)}

@keyframes play-ring{0%{transform:scale(.88);opacity:.65}
70%,100%{transform:scale(1.28);opacity:0}
}

@media(max-height:849px) and (min-width:901px){.mission-grid{padding-bottom:29px}
.mission-card{height:clamp(395px,calc(100dvh - 310px),440px);min-height:395px}
.mission-bottom{padding-bottom:20px}
.play-button{width:66px;height:66px;min-width:64px;min-height:64px;bottom:-31px}
.lock-message{bottom:41px}
.locked .mission-bottom{padding-top:19px;padding-bottom:20px}
}

@media(max-width:900px){.mission-grid{padding-bottom:38px}
.mission-card{height:clamp(420px,58dvh,470px);min-height:420px}
.play-button{width:clamp(64px,8dvh,74px);height:clamp(64px,8dvh,74px);bottom:-31px}
.lock-message{bottom:43px}
}

@media(prefers-reduced-motion:reduce){.play-button:after,.play-button:before{animation:none!important}
.play-button:not(:disabled):hover{transform:translateX(-50%);filter:brightness(1.12)}
}

.play-button{overflow:visible}
.play-button:before{clip-path:circle(50% at 50% 50%)}


/* Final illustrated cards and progression UI */
.crew .cadet,.crew .robot{display:none}
.crew-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 15px 18px #02071c);animation:crew-float 4s ease-in-out infinite}
.mission-grid{padding-bottom:0}
.mission-card{width:auto;max-width:100%;aspect-ratio:1086/1448;justify-self:center;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.mission-card:before{display:none}
.mission-card:hover{box-shadow:none;filter:drop-shadow(0 20px 25px #0009) drop-shadow(0 0 17px color-mix(in srgb,var(--accent),transparent 45%))}
.archive{box-shadow:none}
.mission-card .card-aura{display:none}
.mission-visual{inset:0;border-radius:0;overflow:visible}
.mission-visual:before,.mission-visual:after{display:none}
.mission-visual img,.locked .mission-visual img,.battle .mission-visual img{width:100%;height:100%;object-fit:contain;object-position:center;filter:none;transform:scale(1);transition:transform .45s ease,filter .3s ease}
.mission-card:hover .mission-visual img{transform:scale(1.025)}
.locked{filter:saturate(.92)}
.locked:hover{filter:saturate(1) drop-shadow(0 16px 20px #0008)}
.locked .mission-visual{opacity:1}
.mission-copy,.rewards,.mission-number{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mission-status{top:8.4%;right:8.5%;min-width:27%;padding:5px 8px;text-align:center;background:linear-gradient(#164c81,#082d58);border:2px solid var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 55%);font-size:clamp(.52rem,1.05dvh,.67rem)}
.locked .mission-status{background:linear-gradient(#752454,#3d113b);color:#ffe1f2}
.completed .mission-status{background:linear-gradient(#258957,#0d4e35);border-color:#68ffc3;color:#effff8}
.mission-bottom{position:static;padding:0}
.stars-progress{position:absolute;z-index:5;left:29%;right:29%;top:63.2%;display:grid;grid-template-columns:repeat(3,1fr);gap:8%;font-size:clamp(1.35rem,3.1dvh,2rem);line-height:1}
.stars-progress span{color:transparent;text-shadow:none}
.stars-progress span.earned{color:#ffd43d;text-shadow:0 0 8px #ffac19,0 2px 1px #8a4300}
.play-button{left:50%;bottom:1.6%;width:clamp(64px,8.2dvh,82px);height:clamp(64px,8.2dvh,82px);transform:translateX(-50%);z-index:9}
.play-button:not(:disabled):hover{transform:translateX(-50%) translateY(-3px) scale(1.06)}
.play-button:not(:disabled):active,.play-button.launching{transform:translateX(-50%) scale(.94)}
.lock-message{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.runner:not(.locked) .play-button,.battle:not(.locked) .play-button{z-index:6}
.achievements,.daily-reward{isolation:isolate}
.achievements:before,.daily-reward:before{content:"";position:absolute;z-index:-1;inset:0;background:center/cover no-repeat;opacity:.08;pointer-events:none}
.achievements:before{background-image:url('assets-web/ui/achievements-panel.webp')}
.daily-reward:before{background:linear-gradient(135deg,rgba(21,55,108,.9),rgba(50,19,91,.92));opacity:1;border:1px solid #48dfff;border-radius:18px;box-shadow:inset 0 0 18px #2baaff33}
.medal-list{grid-template-columns:repeat(4,1fr)}
.medal-list li{position:relative}
.medal-list em{display:block;max-width:110px;margin:2px auto 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6f8eaf;font-size:.48rem;font-style:normal}
.achievement-active em{color:#8fe3c6}
.daily-reward.available .reward-ready{display:block;color:#fff2a0;text-shadow:0 0 8px #ffc83d}
.daily-reward.opening .chest{animation:chest-open .52s ease}
.reward-burst{position:absolute;left:80px;top:50%;z-index:8}
.reward-burst i{position:absolute;width:12px;height:12px;border-radius:50%;background:#ffd73f;box-shadow:0 0 12px #ffd73f;animation:reward-fly .9s ease-out forwards}
.reward-burst i:nth-child(2){background:#35dcff;animation-delay:.05s;--x:38px}
.reward-burst i:nth-child(3){--x:-34px;animation-delay:.1s}
.reward-burst i:nth-child(4){background:#9f6bff;--x:55px;animation-delay:.13s}
.reward-burst i:nth-child(5){--x:-52px;animation-delay:.16s}
.game-modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,5,18,.78);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.25s}
.game-modal.open{opacity:1;visibility:visible}
.modal-card{width:min(470px,92vw);padding:30px;border:2px solid #53eaff;border-radius:28px;background:linear-gradient(160deg,#14366f,#070e29 68%);text-align:center;box-shadow:0 0 45px #29cfff66}
.modal-kicker{color:#65eaff;font-size:.7rem;letter-spacing:.18em}
.modal-card h2{margin:10px 0;font-size:2rem}
.modal-card p{color:#b9d8f7}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.modal-actions button{padding:13px;border:1px solid #5ae4ff;border-radius:14px;background:#102956;color:#fff;font-weight:800;cursor:pointer}
.modal-actions .modal-hub{background:linear-gradient(135deg,#12a9df,#7657ed)}

@keyframes reward-fly{to{transform:translate(var(--x,25px),-75px) scale(.3);opacity:0}
}
@keyframes chest-open{50%{transform:scale(1.14) rotate(-4deg);filter:drop-shadow(0 0 30px #ffe156)}
}

@media(max-height:849px) and (min-width:901px){.mission-card{height:clamp(390px,calc(100dvh - 300px),440px);min-height:390px}
.play-button{bottom:1.5%;width:64px;height:64px}
.stars-progress{font-size:1.3rem}
.medal-list em{display:none}
}

@media(max-width:900px){.mission-card{height:clamp(420px,58dvh,470px);min-height:420px}
.crew-art{object-position:left bottom}
.medal-list em{display:none}
}

.daily-reward.claimed .reward-ready{display:none}


/* Reference-aligned full-screen hub */
#screen-hub{height:100dvh;min-height:600px;overflow:hidden}
.hub-shell{width:100%;max-width:1920px;height:100dvh;min-height:600px;padding:clamp(7px,1dvh,12px) clamp(14px,1.5vw,26px);grid-template-rows:clamp(70px,8.4dvh,88px) minmax(0,1fr) clamp(92px,12.2dvh,128px);gap:clamp(4px,.7dvh,8px)}
.hub-topbar{display:grid;grid-template-columns:clamp(190px,15vw,270px) clamp(170px,13vw,220px) minmax(390px,620px) clamp(74px,8vw,128px);justify-content:center;align-items:center;width:100%;height:100%;padding:0 8px;border:0;background:transparent;box-shadow:none}
.brand{min-width:0}
.player-chip{height:clamp(54px,6.5dvh,66px);padding:4px 14px 4px 5px;border:1px solid #3479c4;border-radius:22px 0 0 22px;background:linear-gradient(180deg,rgba(15,42,95,.96),rgba(5,17,48,.96));box-shadow:0 8px 24px #0007}
.resources{height:clamp(54px,6.5dvh,66px);justify-content:center;gap:5px;padding:6px 9px;border:1px solid #3479c4;border-left:0;border-radius:0 22px 22px 0;background:linear-gradient(180deg,rgba(15,42,95,.96),rgba(5,17,48,.96));box-shadow:0 8px 24px #0007}
.resource{min-width:0;flex:1;height:44px;padding:4px 8px;border-color:#2d568d;background:#071633}
.resource svg{width:25px}
.resource b{font-size:1.08rem}
.top-actions{justify-content:flex-end}
.teacher-button{height:54px;padding:7px 11px}
.hub-stage{height:100%;min-height:0;grid-template-columns:clamp(175px,16vw,275px) minmax(0,1fr);gap:clamp(5px,1vw,18px);padding:0;align-items:end}
.crew{width:100%;height:100%;min-height:0;margin:0;align-self:end}
.crew-art{width:108%;height:96%;left:2%;bottom:-1%;object-position:center bottom;filter:drop-shadow(0 12px 15px #02071c)}
.crew-glow{inset:25% -3% 0 8%;opacity:.42}
.crew-label{left:13%;right:3%;bottom:1%;padding:5px 7px}
.missions{height:100%;display:grid;grid-template-rows:clamp(28px,3.7dvh,40px) minmax(0,1fr);align-self:stretch}
.mission-heading{height:100%;padding:0 5px}
.mission-grid{height:100%;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,17px);align-items:center;padding:0}
.mission-card{width:100%;height:auto;max-height:100%;min-height:0;aspect-ratio:1086/1448}
.play-button{border:0!important;box-shadow:inset 0 3px 7px #fff7,inset 0 -7px 12px #003d8099,0 0 0 4px rgba(31,220,255,.2),0 0 24px var(--accent),0 8px 18px #0009}
.runner .play-button,.battle .play-button{border:0!important}
.play-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hub-footer{height:100%;min-height:0;display:grid;grid-template-columns:minmax(290px,1fr) minmax(260px,.9fr) minmax(330px,1.15fr);gap:clamp(8px,1vw,14px);align-items:stretch;padding:0}
.hub-footer>section{height:100%;min-height:0;padding:7px 12px;border-radius:20px}
.footer-panel-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.achievements:before,.daily-reward:before{display:none}
.achievements,.daily-reward{position:relative;overflow:visible;background:transparent!important;border:0!important;box-shadow:none!important}
.achievement-counter{position:absolute;z-index:3;top:22%;left:50%;transform:translateX(-50%);min-width:54px;padding:2px 8px;border-radius:10px;background:#071936;color:#57ecff;text-align:center;font-size:.65rem;font-weight:900}
.medal-list{position:absolute;z-index:3;inset:34% 7% 10%;display:grid;grid-template-columns:repeat(4,1fr);gap:3%;pointer-events:none}
.medal-list li{display:grid;place-items:end center}
.medal-icon,.medal-list small,.medal-list em{display:none!important}
.daily-reward #daily-copy{position:absolute;z-index:4;right:7.5%;top:19%;width:25%;padding:4px 7px;border-radius:9px;background:#061a3be6;color:#61e9ff;font-size:clamp(.5rem,.65vw,.7rem);line-height:1.15;text-align:center}
.daily-reward #daily-chest-button{position:absolute;z-index:5;right:6.5%;bottom:20%;width:24%;height:35%;margin:0;padding:0;border-radius:16px;font-size:clamp(.6rem,.85vw,.82rem)}
.daily-reward.available #daily-chest-button{border:0;background:transparent;color:transparent;box-shadow:0 0 20px #ffc52b66}
.daily-reward.available #daily-chest-button:hover{box-shadow:0 0 30px #ffd04d}
.daily-reward.claimed #daily-chest-button{border:2px solid #5a7ead;background:rgba(7,24,57,.92);color:#b7cce8}
.reward-ready{z-index:5;right:5%;top:3%}
.level-progress{background:linear-gradient(180deg,rgba(11,38,87,.96),rgba(3,15,46,.96))!important;border:1px solid #3479c4!important;box-shadow:0 8px 25px #0008!important}

@media(max-height:820px){.hub-shell{grid-template-rows:68px minmax(0,1fr) 88px;padding-block:6px}
.mission-heading{font-size:.85rem}
.crew-art{height:94%}
.crew-label{display:none}
.mission-status{font-size:.48rem;padding:3px 5px}
.play-button{width:58px;height:58px;min-width:58px;min-height:58px}
.stars-progress{font-size:1.1rem}
.achievement-counter{top:19%}
.daily-reward #daily-copy{top:16%}
}

@media(max-width:1180px){.hub-topbar{grid-template-columns:180px 165px minmax(350px,500px) 70px}
.teacher-button span{display:none}
.teacher-button{width:54px}
.hub-stage{grid-template-columns:150px minmax(0,1fr)}
.hub-footer{grid-template-columns:minmax(250px,1fr) minmax(220px,.82fr) minmax(290px,1.08fr)}
.resource span{display:none}
.crew-art{width:115%;left:-1%}
}

@media(max-width:900px){#screen-hub{height:100dvh;overflow:hidden}
.hub-shell{display:grid;height:100dvh;min-height:600px;padding:6px 9px;grid-template-rows:66px minmax(0,1fr) 82px}
.hub-topbar{display:grid;grid-template-columns:150px 145px minmax(300px,1fr) 58px;min-height:0;flex-wrap:nowrap}
.brand span{font-size:1.25rem}
.brand b{font-size:.92rem}
.brand small{display:none}
.player-chip{min-width:0}
.avatar-mini{width:43px;height:43px}
.resources{order:initial;width:auto}
.resource{padding:3px}
.hub-stage{display:grid;height:100%;grid-template-columns:118px minmax(0,1fr)}
.crew{height:100%;margin:0}
.crew-art{width:132%;height:88%;left:-14%;bottom:0}
.missions{height:100%}
.mission-heading{height:28px}
.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0;padding:0;overflow:visible}
.mission-card{height:auto;min-height:0;width:100%}
.hub-footer{height:100%;grid-template-columns:1fr .82fr 1.1fr;margin:0;gap:5px}
.hub-footer>section{min-height:0}
.rank-badge{display:none}
.level-progress{padding:5px!important}
.level-progress>div:last-child{width:100%}
.level-progress>div>span{font-size:.55rem}
.daily-reward{grid-column:auto}
.daily-reward #daily-copy{display:block}
.medal-list{inset:32% 5% 8%}
}


/* Final placement corrections */
.mission-heading{display:none}
.missions{grid-template-rows:minmax(0,1fr)}
.footer-panel-art{object-fit:contain}
.hub-stage{position:relative;z-index:1}
.crew{z-index:1;overflow:visible}
.crew-art{height:108%;bottom:-11%}
.hub-footer{position:relative;z-index:6}
.level-progress{z-index:7}

@media(max-height:820px) and (min-width:901px){.hub-shell{grid-template-rows:68px minmax(0,1fr) 78px}
.hub-stage{padding-right:clamp(220px,19vw,275px)}
.hub-footer{display:block;position:static}
.level-progress{position:fixed;z-index:12;left:18px;bottom:7px;width:clamp(300px,34vw,455px);height:68px!important}
.achievements,.daily-reward{position:fixed;z-index:11;right:8px;width:clamp(215px,18vw,260px);height:clamp(104px,14dvh,118px)!important}
.achievements{top:82px}
.daily-reward{top:clamp(194px,27dvh,216px)}
.footer-panel-art{object-fit:contain}
.crew-art{height:114%;bottom:-17%}
}

@media(max-width:900px){.mission-heading{display:none}
.missions{grid-template-rows:minmax(0,1fr)}
.crew-art{height:103%;bottom:-10%}
.footer-panel-art{object-fit:contain}
}


/* Stable character and footer layout */
.crew-art{display:none}
.crew .cadet{display:block!important;animation:none!important;width:108%;height:112%;left:-2%;bottom:-17%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 15px #02071c)}
.crew .robot{display:block!important;width:42%;height:auto;right:-3%;bottom:56%;object-fit:contain;filter:drop-shadow(0 0 14px #00ddff);animation:robot-float 3s ease-in-out infinite}
.play-button:before{display:none!important}
.footer-panel-art{object-fit:contain!important}

@media(max-height:820px) and (min-width:901px){.hub-shell{grid-template-rows:68px minmax(0,1fr) 104px}
.hub-stage{padding-right:0}
.hub-footer{position:relative;display:grid;grid-template-columns:minmax(270px,1fr) minmax(245px,.9fr) minmax(300px,1.12fr);gap:8px}
.level-progress,.achievements,.daily-reward{position:relative;inset:auto;right:auto;top:auto;left:auto;bottom:auto;width:auto;height:100%!important;aspect-ratio:auto;z-index:8}
.footer-panel-art{width:100%;height:100%;object-fit:contain!important}
.mission-card{width:100%;height:auto;min-height:0;max-height:100%;aspect-ratio:1086/1448}
.crew .cadet{height:118%;bottom:-23%}
.crew .robot{width:43%;bottom:58%}
}

@media(max-width:900px){.hub-shell{grid-template-rows:66px minmax(0,1fr) 96px}
.hub-stage{padding-right:0}
.hub-footer{display:grid;grid-template-columns:1fr .9fr 1.1fr}
.crew .cadet{width:135%;height:110%;left:-18%;bottom:-18%}
.crew .robot{width:53%;right:-12%;bottom:58%}
.footer-panel-art{object-fit:contain!important}
}


/* Larger motivation panels and crew */
.hub-shell{grid-template-rows:clamp(70px,8.4dvh,88px) minmax(0,1fr) clamp(142px,19dvh,188px)}
.hub-stage{grid-template-columns:clamp(235px,19vw,325px) minmax(0,1fr)}
.crew .cadet{width:126%;height:128%;left:-10%;bottom:-27%}
.crew .robot{width:39%;height:auto;right:-1%;bottom:32%;z-index:3}
.crew-label{display:none}
.hub-footer{grid-template-columns:minmax(290px,370px) minmax(390px,520px) 1fr;justify-content:start;gap:clamp(12px,2vw,28px)}
.achievements{width:100%;height:100%!important;min-width:390px}
.achievements .footer-panel-art{width:100%;height:100%;object-fit:contain!important}
.achievement-counter{top:21%;font-size:.78rem}
.medal-list{inset:35% 8% 9%}
.daily-reward{position:fixed!important;z-index:20!important;left:clamp(12px,1.3vw,24px)!important;right:auto!important;top:clamp(82px,9.5dvh,102px)!important;bottom:auto!important;width:clamp(300px,22vw,390px)!important;height:auto!important;aspect-ratio:1858/846}
.daily-reward .footer-panel-art{display:block;width:100%;height:100%;object-fit:contain!important}
.daily-reward #daily-copy{right:7%;top:18%;font-size:clamp(.56rem,.72vw,.76rem)}
.daily-reward #daily-chest-button{right:6%;bottom:20%;width:25%;height:36%}
.reward-ready{right:4%;top:2%}

@media(max-height:820px) and (min-width:901px){.hub-shell{grid-template-rows:68px minmax(0,1fr) 148px}
.hub-stage{grid-template-columns:clamp(215px,18vw,285px) minmax(0,1fr);padding-right:0}
.hub-footer{display:grid;grid-template-columns:minmax(270px,340px) minmax(350px,460px) 1fr;gap:14px}
.level-progress,.achievements{position:relative;inset:auto;width:auto;height:100%!important;aspect-ratio:auto}
.achievements{min-width:350px}
.daily-reward{position:fixed!important;left:10px!important;top:76px!important;width:clamp(285px,23vw,345px)!important;height:auto!important;aspect-ratio:1858/846}
.crew .cadet{width:130%;height:132%;left:-13%;bottom:-31%}
.crew .robot{width:40%;right:-2%;bottom:31%}
}

@media(max-width:900px){.hub-shell{grid-template-rows:66px minmax(0,1fr) 128px}
.hub-stage{grid-template-columns:155px minmax(0,1fr)}
.hub-footer{grid-template-columns:210px minmax(300px,1fr);gap:7px}
.achievements{min-width:300px}
.daily-reward{left:7px!important;top:72px!important;width:245px!important}
.crew .cadet{width:145%;height:126%;left:-24%;bottom:-28%}
.crew .robot{width:47%;right:-8%;bottom:31%}
}


/* Reference-led desktop composition: one clear stage with compact overlays. */
@media(min-width:901px){
  .hub-shell{
    position:relative;
    grid-template-rows:88px minmax(0,1fr);
    gap:6px;
    padding:8px 22px 10px;
  }

  .hub-topbar{
    grid-template-columns:290px 230px minmax(500px,650px) 180px;
    max-width:1540px;
    margin-inline:auto;
  }

  .brand span{font-size:2rem}

  .brand b{font-size:1.25rem}

  .hub-stage{
    grid-template-columns:clamp(300px,19vw,350px) minmax(0,1fr);
    gap:16px;
    align-items:start;
    padding:0 0 132px;
  }

  .crew{overflow:visible}

  .crew .cadet{width:118%;height:112%;left:-7%;bottom:-18%}

  .crew .robot{width:36%;right:0;bottom:38%}

  .missions{display:block;height:100%}

  .mission-heading{display:none}

  .mission-grid{
    width:100%;
    max-width:1420px;
    height:100%;
    margin-inline:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(12px,1.15vw,22px);
    align-items:start;
  }

  .mission-card{
    width:100%;
    max-width:470px;
    max-height:min(69vh,680px);
    justify-self:center;
  }

  .hub-footer{position:absolute;inset:0;display:block;pointer-events:none}

  .hub-footer>section{pointer-events:auto}

  .level-progress{
    position:absolute!important;
    left:28px!important;
    bottom:10px!important;
    width:clamp(370px,24vw,455px)!important;
    height:clamp(112px,14vh,142px)!important;
    z-index:12;
  }

  .achievements{
    position:absolute!important;
    left:50%!important;
    bottom:8px!important;
    transform:translateX(-50%);
    width:clamp(500px,31vw,610px)!important;
    min-width:500px;
    height:clamp(116px,14.5vh,148px)!important;
    z-index:13;
  }

  .daily-reward{
    left:26px!important;
    top:100px!important;
    width:clamp(330px,20vw,385px)!important;
  }

  .achievement-counter{font-size:.9rem}

}


@media(min-width:901px) and (max-height:760px){
  .hub-shell{grid-template-rows:74px minmax(0,1fr)}

  .hub-stage{padding-bottom:104px;grid-template-columns:250px minmax(0,1fr)}

  .mission-card{max-height:calc(100vh - 178px)}

  .daily-reward{top:78px!important;width:300px!important}

  .level-progress{height:96px!important;width:340px!important}

  .achievements{height:102px!important;width:450px!important;min-width:450px}

  .crew .cadet{bottom:-23%}

}


/* Final overlay map: achievements upper-left, daily reward below cards. */
@media(min-width:901px){
  .hub-stage{grid-template-columns:clamp(380px,23vw,430px) minmax(0,1fr)}

  .achievements{
    position:absolute!important;
    left:24px!important;
    top:104px!important;
    bottom:auto!important;
    transform:none!important;
    width:clamp(390px,22vw,420px)!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:1693/929;
    z-index:14;
  }

  .achievements .footer-panel-art{object-fit:contain!important}

  .achievement-counter{top:20%;font-size:clamp(.82rem,1vw,1rem)}

  .medal-list{inset:34% 7% 9%}

  .daily-reward{
    position:absolute!important;
    left:auto!important;
    right:26px!important;
    top:auto!important;
    bottom:10px!important;
    width:clamp(330px,21vw,395px)!important;
    height:auto!important;
    aspect-ratio:1858/846;
    z-index:14!important;
  }

  .daily-reward .footer-panel-art{object-fit:contain!important}

}


@media(min-width:901px) and (max-height:760px){
  .hub-stage{padding-bottom:120px}

  .mission-card{max-height:calc(100vh - 210px)}

  .achievements{top:82px!important;width:330px!important}

  .daily-reward{right:14px!important;bottom:6px!important;width:250px!important}

}


@media(min-width:901px) and (max-width:1450px){
  .hub-stage{grid-template-columns:350px minmax(0,1fr)}

  .achievements{left:14px!important;width:340px!important}

  .daily-reward{right:14px!important;width:310px!important}

}


/* Canva-approved hub layout. Keep all desktop regions mutually exclusive. */
@media(min-width:901px){
  .hub-shell{
    grid-template-rows:70px minmax(0,1fr);
    padding:6px 18px 8px;
    gap:4px;
  }

  .hub-topbar{
    grid-template-columns:260px 220px minmax(480px,640px) 165px;
    max-width:none;
    margin:0;
    padding:0 10px;
  }

  .brand{align-self:start;padding-top:8px}

  .brand span{font-size:1.85rem}

  .brand b{font-size:1.15rem}

  .hub-stage{
    grid-template-columns:320px minmax(0,1fr);
    gap:14px;
    padding:0;
    align-items:stretch;
  }

  .crew{
    position:relative;
    width:100%;
    height:calc(100% - 190px);
    min-height:330px;
    align-self:start;
    overflow:hidden;
    border-radius:30px;
    background:linear-gradient(180deg,rgba(42,57,116,.96),rgba(30,43,94,.94));
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 30px #0005;
  }

  .crew-glow{display:none}

  .crew .cadet{
    display:block;
    width:76%;
    height:96%;
    left:0;
    bottom:-9%;
    object-fit:contain;
    object-position:left bottom;
  }

  .crew .robot{
    display:block;
    width:43%;
    height:auto;
    left:auto;
    right:2%;
    bottom:29%;
    object-fit:contain;
  }

  .missions{height:100%;overflow:visible}

  .mission-grid{
    width:100%;
    max-width:none;
    height:100%;
    margin:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    align-items:start;
  }

  .mission-card{
    width:100%;
    max-width:none;
    max-height:calc(100vh - 92px);
    justify-self:stretch;
  }

  .hub-footer{position:absolute;inset:0;display:block;pointer-events:none}

  .level-progress,.daily-reward{display:none!important}

  .achievements{
    position:absolute!important;
    left:14px!important;
    top:auto!important;
    bottom:8px!important;
    width:330px!important;
    min-width:330px!important;
    height:auto!important;
    aspect-ratio:1693/929;
    transform:none!important;
    z-index:15;
    pointer-events:auto;
  }

  .achievement-counter{top:18%;font-size:.9rem}

  .medal-list{inset:34% 7% 8%}

}


@media(min-width:901px) and (max-width:1350px){
  .hub-stage{grid-template-columns:330px minmax(0,1fr);gap:8px}

  .crew{height:calc(100% - 170px);min-height:290px}

  .achievements{left:8px!important;width:290px!important;min-width:290px!important}

  .hub-topbar{grid-template-columns:240px 195px minmax(400px,1fr) 145px}

}


@media(min-width:901px) and (max-height:700px){
  .hub-shell{grid-template-rows:62px minmax(0,1fr)}

  .crew{height:calc(100% - 180px);min-height:260px}

  .achievements{width:320px!important;min-width:320px!important}

  .mission-card{max-height:calc(100vh - 72px)}

}


/* These widgets are intentionally absent from the approved start-screen composition. */
.daily-reward,.level-progress{display:none!important}



/* Transparent crew cutout and maximum non-overlapping mission cards. */
@media(min-width:901px){
  .crew{
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0;
    overflow:visible;
  }

  .crew .cadet{
    width:92%;
    height:auto;
    left:-3%;
    bottom:-38%;
    z-index:2;
    object-fit:contain;
    filter:drop-shadow(0 14px 15px rgba(1,7,25,.55));
  }

  .crew .robot{
    width:43%;
    right:0;
    bottom:29%;
    z-index:3;
  }

  .mission-grid{gap:2px}

  .mission-card{width:100%;max-width:none;overflow:visible}

  .mission-card:hover{transform:translateY(-4px) scale(1)}

  .mission-card:hover .mission-visual img{transform:scale(1.012)}

}


.daily-launcher{
  position:relative;width:58px;height:58px;padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;filter:drop-shadow(0 0 10px rgba(255,190,39,.5));
  transition:transform .2s ease,filter .2s ease;
}

.daily-launcher span{position:absolute;inset:-5px;background:url('assets-web/ui/daily-reward-launcher-first.webp') center/contain no-repeat}

.daily-launcher.available{animation:reward-pulse 1.8s ease-in-out infinite}

.daily-launcher:hover{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 0 16px #ffd34f)}

.daily-launcher:active{transform:scale(.94)}

.daily-launcher.claimed{filter:grayscale(.38) brightness(.82)}

.daily-launcher:disabled{cursor:default}


@media(min-width:901px){
  .hub-topbar{grid-template-columns:260px 220px minmax(400px,1fr) 62px 165px;column-gap:7px}

  .achievement-counter{top:23%;left:50%;transform:translateX(-50%);padding:0;background:transparent;font-size:clamp(.56rem,.66vw,.7rem)}

}

@media(max-width:900px){
  .hub-topbar{grid-template-columns:150px 145px minmax(280px,1fr) 50px 58px;column-gap:4px}

  .daily-launcher{width:48px;height:48px}

}


/* Teacher mission editor */
.teacher-screen{height:100dvh;overflow:auto;background:radial-gradient(circle at 50% -20%,#123a79 0,#061838 46%,#02091d 100%);color:#eef8ff}

.teacher-screen:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#75d8ff 0 1px,transparent 1.5px);background-size:52px 52px;opacity:.12}

.teacher-header{position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr minmax(310px,auto);align-items:center;min-height:108px;padding:14px 28px;text-align:center}

.teacher-header h2{margin:0;color:#fff;font-size:clamp(2rem,3vw,3.5rem);letter-spacing:.05em;text-shadow:0 0 8px #25cfff,0 0 22px #168eff}

.teacher-header p{margin:3px 0;color:#54ddff;font-size:1rem}
.teacher-header .back-button{justify-self:start}
.teacher-session-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.teacher-session-actions button,.teacher-unlock{min-height:44px;padding:8px 12px;border:1px solid #2787bd;border-radius:12px;background:#071b3d;color:#fff;font-size:.72rem;font-weight:900}.teacher-unlock{display:flex;align-items:center;gap:8px;cursor:pointer}.teacher-unlock input{width:20px;height:20px;accent-color:#36dcff}
.teacher-brand{justify-self:end;font-size:1.65rem;font-weight:1000;font-style:italic}
.teacher-brand b{display:block;color:#ffd633}

.teacher-workspace{position:relative;z-index:1;width:min(96vw,1800px);margin:auto;padding-bottom:20px}

.teacher-import-hero{display:grid;grid-template-columns:400px 1fr;gap:18px;padding:18px;border:2px solid #25c9ff;border-radius:30px;background:linear-gradient(135deg,rgba(8,45,93,.96),rgba(4,17,47,.97));box-shadow:0 0 30px #0798e04d,inset 0 1px #fff3}

.import-visual{grid-row:1/3;display:flex;align-items:center;justify-content:center;gap:12px;min-height:190px;border-radius:22px;background:radial-gradient(circle,#19cfff38,transparent 64%)}
.import-visual strong{display:grid;width:120px;height:100px;place-items:center;border-radius:50%;color:#fff;font-size:4rem;background:radial-gradient(circle,#b5faff,#249be2 67%,#0a397d);box-shadow:0 0 35px #39dfff}
.import-visual span{padding:8px;border-radius:8px;background:#734ad4;font-size:.75rem;font-weight:900;transform:rotate(8deg)}
.import-visual span:first-child{background:#2f7edb;transform:rotate(-8deg)}
.import-visual span:last-child{background:#8a50e8}

.import-actions{display:grid;grid-template-columns:minmax(350px,1fr) 300px;gap:20px;align-items:center}
.teacher-upload,.teacher-template,.teacher-save,.teacher-play-preview,.teacher-add{border:1px solid #35deff;border-radius:18px;color:#fff;font-weight:900;cursor:pointer}
.teacher-upload{min-height:96px;padding:16px 25px;background:linear-gradient(180deg,#22cfff,#078ddc 55%,#075fb3);font-size:clamp(1.15rem,1.7vw,1.8rem);box-shadow:inset 0 2px #fff8,0 0 20px #17bfff88}
.teacher-upload small{display:block;margin-top:6px;color:#c5efff;font-size:.8rem;font-weight:600}
.teacher-template{min-height:68px;background:#071b42;font-size:1.05rem}
.import-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none}
.import-steps li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#071c43;font-weight:800}
.import-steps b{display:grid;width:42px;height:42px;place-items:center;border:2px solid #42e7ff;border-radius:50%;font-size:1.35rem;box-shadow:0 0 12px #16dfff}

.teacher-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 12px}
.teacher-tabs button{display:flex;align-items:center;gap:18px;min-height:110px;padding:15px 22px;border:2px solid #258fcc;border-radius:25px;background:linear-gradient(135deg,#06345b,#061633);color:#c9ebff;text-align:left;cursor:pointer;transition:.2s}
.teacher-tabs button:nth-child(2){border-color:#df6b35;background:linear-gradient(135deg,#54201b,#211027)}
.teacher-tabs button:nth-child(3){border-color:#c73ddd;background:linear-gradient(135deg,#391151,#1c0c38)}
.teacher-tabs button.active{transform:translateY(-3px);box-shadow:0 0 24px #2bdcff}
.teacher-tabs b{font-size:1.6rem;color:#ffe99d}
.teacher-tabs span{font-size:1.15rem;font-weight:900}
.teacher-tabs small{display:block;margin-top:5px;color:#bcd9ea;font-size:.75rem;font-weight:600}

.teacher-editor-grid{display:grid;grid-template-columns:minmax(330px,.9fr) minmax(430px,1fr) minmax(390px,1fr);gap:14px}
.teacher-editor-grid>aside,.task-editor{min-width:0;min-height:440px;padding:16px;border:1px solid #2378b7;border-radius:20px;background:linear-gradient(180deg,rgba(5,28,63,.98),rgba(3,13,34,.98));box-shadow:inset 0 1px #fff2}
.teacher-editor-grid header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.teacher-editor-grid h3{margin:0 0 12px;color:#55ddff;font-size:1rem;letter-spacing:.04em}
.teacher-editor-grid header span{color:#88a9c7;font-size:.72rem}
.teacher-editor-grid header span.saved{color:#5dffae}
.task-filters{display:grid;grid-template-columns:1fr 135px;gap:7px}
.task-filters input,.task-filters select,.teacher-fields input,.teacher-fields textarea,.teacher-fields select{width:100%;border:1px solid #28669e;border-radius:10px;background:#071a3b;color:#effaff;font:inherit}
.task-filters input,.task-filters select{height:42px;padding:0 11px}
.teacher-task-list{height:300px;margin:10px 0;overflow:auto}
.teacher-task-row{display:grid;width:100%;grid-template-columns:40px 1fr 76px;align-items:center;gap:7px;margin:3px 0;padding:9px;border:1px solid #1e537f;border-radius:9px;background:#071b3a;color:#bedcf4;text-align:left;cursor:pointer}
.teacher-task-row.active{border-color:#30dfff;background:#0a3760;box-shadow:inset 3px 0 #37e7ff}
.teacher-task-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teacher-task-row em{padding:4px;border-radius:6px;text-align:center;font-size:.65rem;font-style:normal;font-weight:900}
.difficulty-easy{background:#127b50;color:#93ffd0}
.difficulty-medium{background:#82670a;color:#ffe77b}
.difficulty-hard{background:#873b24;color:#ffb89f}
.teacher-add{width:100%;height:46px;background:linear-gradient(#08a9de,#0769a8)}
.teacher-library-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.teacher-library-actions button{min-height:44px;border:1px solid #446da5;border-radius:10px;background:#101d47;color:#dceeff;font-size:.68rem;font-weight:900;cursor:pointer}.teacher-library-actions button+button{border-color:#9a45e1;background:#32135c}

.teacher-fields{display:grid;gap:11px}
.teacher-fields label{display:grid;grid-template-columns:155px 1fr;align-items:center;gap:10px;color:#a9cde9;font-size:.8rem}
.teacher-fields input,.teacher-fields textarea,.teacher-fields select{min-height:44px;padding:9px 12px}
.teacher-form-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid #28618f}.teacher-form-actions .teacher-save{flex:1 1 220px}
.teacher-form-actions button{min-height:48px;padding:8px 13px;border:1px solid #267bb2;border-radius:12px;background:#0a2850;color:#fff;font-weight:800;cursor:pointer}
.teacher-form-actions .teacher-save{background:linear-gradient(#14c8ed,#0672bb);box-shadow:0 0 15px #12c9ed66}
.teacher-form-actions .danger{border-color:#e74958;color:#ff9ca7}
.teacher-form-actions button:disabled{opacity:.4;cursor:default}

.teacher-preview-card{display:grid;align-content:center;min-height:320px;padding:24px;border-radius:18px;background:radial-gradient(circle at 50% 80%,#0c5a8e,#061a3e 63%,#041029);text-align:center}
.preview-mahjong{display:flex;justify-content:center;gap:25px}
.preview-mahjong b{display:grid;width:120px;height:155px;place-items:center;border:5px solid #e8d49c;border-radius:18px;background:linear-gradient(145deg,#fff4cf,#bda36d);color:#07536a;font-size:1.7rem;box-shadow:0 15px 0 #68562f,0 0 22px #3fe7ff66;transform:rotate(-5deg)}
.preview-mahjong b+ b{transform:rotate(5deg)}
.preview-sentence,.preview-paradox{padding:22px;border:1px solid #3bdfff;border-radius:14px;background:#071b3d;font-size:1.1rem;font-weight:800}
.preview-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}
.preview-options span{padding:10px;border:1px solid #fa6f85;border-radius:9px;background:#36142d}
.preview-correct{margin-top:15px;color:#72ffc1}
.teacher-play-preview{width:100%;height:50px;margin-top:12px;background:linear-gradient(#bb4fff,#6823bd)}
.teacher-save-state{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px;padding:9px 16px;border:1px solid #176a87;border-radius:10px;background:#061936;color:#5effa9;font-size:.8rem}.teacher-save-state span{margin-right:auto}.teacher-save-state button{min-height:44px;padding:8px 16px;border:1px solid #2986b2;border-radius:10px;background:#0a2b50;color:#fff;font-weight:900}.teacher-save-state button:last-child{background:linear-gradient(#16bfe4,#0878ba)}

.teacher-login-modal{position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:20px;background:#010612e8;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.2s}.teacher-login-modal.open{opacity:1;visibility:visible}.teacher-login-dialog{width:min(440px,94vw);padding:30px;border:2px solid #39dfff;border-radius:24px;background:linear-gradient(180deg,#092957,#050e25);box-shadow:0 0 45px #25cfff77;color:#fff;text-align:center}.teacher-login-dialog h2{margin:0;color:#65e8ff}.teacher-password-field{display:flex;margin:22px 0 8px}.teacher-password-field input{min-width:0;flex:1;height:54px;padding:0 16px;border:1px solid #3a9dc9;border-radius:12px 0 0 12px;background:#030b1d;color:#fff;font-size:1.5rem;text-align:center}.teacher-password-field button{width:56px;border:1px solid #3a9dc9;border-radius:0 12px 12px 0;background:#123b68;color:#fff}.teacher-login-error{min-height:42px;color:#ff9dac}.teacher-login-dialog>div{display:flex;justify-content:center;gap:10px}.teacher-login-dialog>div button{min-height:48px;padding:8px 25px;border:1px solid #3191bd;border-radius:12px;background:#10294c;color:#fff;font-weight:900}.teacher-login-dialog>div button:last-child{background:linear-gradient(#21cbea,#0879bd)}
.teacher-preview-badge{position:fixed;z-index:95;left:50%;top:12px;display:none;transform:translateX(-50%);padding:7px 18px;border:1px solid #ffce58;border-radius:12px;background:#07142eef;color:#fff;text-align:center;box-shadow:0 0 18px #9f5bff88;pointer-events:none}.teacher-preview-badge.open{display:grid}.teacher-preview-badge b{color:#ffe36d;font-size:.78rem}.teacher-preview-badge span{font-size:.62rem}
.teacher-ai-dialog{width:min(760px,95vw);max-height:92vh;overflow:auto}.teacher-ai-fields{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.teacher-ai-fields label{display:grid;gap:5px;color:#9edfff;font-size:.8rem;font-weight:800}.teacher-ai-fields input,.teacher-ai-fields select,.teacher-ai-fields textarea{width:100%;min-height:44px;padding:9px 12px;border:1px solid #327ca7;border-radius:10px;background:#030c21;color:#fff;font:inherit}.teacher-ai-fields .teacher-ai-json{grid-column:1/-1}.teacher-ai-dialog>div:last-child{flex-wrap:wrap}
.teacher-screen :is(button,input,select,textarea):focus-visible,.teacher-login-modal :is(button,input,select,textarea):focus-visible{outline:3px solid #ffe269;outline-offset:3px}
.home-sound-button,.teacher-sound-button{width:52px!important;height:52px!important;min-width:52px;padding:0!important;border:0!important;border-radius:50%!important;background:transparent url('assets-web/runner/ui/runner-sound-button.webp') center/contain no-repeat!important;color:transparent!important}.hud-sound-button.is-muted{filter:grayscale(1) brightness(.6)!important}
.volume-popover{position:fixed;z-index:2000;width:min(340px,calc(100vw - 24px));padding:16px;box-sizing:border-box;border:2px solid #35ddff;border-radius:18px;background:rgba(3,14,48,.97);box-shadow:0 0 20px rgba(40,221,255,.38),inset 0 0 20px rgba(40,122,255,.12);color:#fff}.volume-popover[hidden]{display:none!important}.volume-popover__header{display:flex;align-items:center;justify-content:space-between;color:#78eaff}.volume-popover__close{width:44px;height:44px;border:1px solid #42dfff;border-radius:50%;background:#102b58;color:#fff;font-size:1.5rem}.volume-popover__control{display:grid;grid-template-columns:36px 1fr 52px;align-items:center;gap:10px;margin-top:14px}.volume-popover__icon{width:34px;height:34px;background:url('assets-web/runner/ui/runner-sound-button.webp') center/contain no-repeat}.volume-popover__slider{width:100%;height:28px;cursor:pointer;accent-color:#35ddff}.volume-popover__slider::-webkit-slider-thumb{width:24px;height:24px}.volume-popover__value{color:#fff;font-size:16px;font-weight:900;text-align:right}.volume-popover__mute{width:100%;min-height:46px;margin-top:12px;border:1px solid #8566ff;border-radius:12px;background:linear-gradient(#6432a9,#341766);color:#fff;font-weight:900}

.empty-tasks{padding:30px;text-align:center;color:#7894ad}

.teacher-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:22px;background:#010613e8;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.2s}
.teacher-modal.open{opacity:1;visibility:visible}
.teacher-modal-dialog{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(1500px,96vw);height:min(850px,92vh);border:2px solid #34dfff;border-radius:24px;background:#06152f;box-shadow:0 0 45px #18bdff66;overflow:hidden}
.teacher-modal-dialog>header,.teacher-modal-dialog>footer{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:#09244d}
.teacher-modal-dialog h2{margin:0}
.teacher-modal-dialog p{margin:4px 0 0;color:#84badc}
.teacher-modal-dialog header button{border:0;background:none;color:#fff;font-size:2rem;cursor:pointer}
.import-summary{display:flex;gap:12px;padding:10px 22px}
.import-summary span{padding:7px 12px;border-radius:10px;background:#12673f;color:#8cffc2}
.import-summary span+span{background:#762838;color:#ffacb7}
.import-table-wrap{overflow:auto;padding:0 16px}
.import-table-wrap table{width:100%;border-collapse:collapse}
.import-table-wrap th{position:sticky;top:0;z-index:2;padding:10px;background:#0b2a56;color:#88e7ff;text-align:left}
.import-table-wrap td{padding:8px;border-bottom:1px solid #17385c;vertical-align:top}
.import-table-wrap tr.import-error{background:#5e182555}
.import-table-wrap input,.import-table-wrap select{width:100%;padding:8px;border:1px solid #32658d;border-radius:7px;background:#07182f;color:#fff}
.import-row-fields{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:5px}
.import-row-fields label span{display:block;color:#8fb8d7;font-size:.62rem}
.import-errors{max-width:260px;color:#63f3aa;font-size:.72rem}
.import-error .import-errors{color:#ff9da8}
.teacher-modal-dialog>footer{justify-content:flex-end;gap:12px}
.teacher-modal-dialog>footer button{min-height:48px;padding:10px 18px;border:1px solid #3388b8;border-radius:12px;background:#0b2b50;color:#fff;font-weight:800;cursor:pointer}
.teacher-modal-dialog>footer .teacher-upload{min-height:48px;font-size:.85rem}
.teacher-modal-dialog>footer button:disabled{opacity:.4;cursor:not-allowed}


/* Keep the source artwork crisp at a larger native scale. */
@media(min-width:901px){.hub-stage{grid-template-columns:360px minmax(0,1fr)}
.achievements{width:360px!important;min-width:360px!important}
.achievements .footer-panel-art{width:100%;height:100%;object-fit:contain!important;image-rendering:auto}
}

@media(min-width:901px) and (max-width:1450px){.hub-stage{grid-template-columns:345px minmax(0,1fr)}
.achievements{width:335px!important;min-width:335px!important}
}


@media(max-width:1500px){.teacher-header{grid-template-columns:220px 1fr 180px;min-height:88px}
.teacher-import-hero{grid-template-columns:300px 1fr;padding:12px}
.import-visual{min-height:145px}
.import-actions{grid-template-columns:1fr 230px}
.teacher-upload{min-height:78px}
.teacher-tabs button{min-height:88px}
.teacher-editor-grid{grid-template-columns:minmax(290px,.85fr) minmax(390px,1fr) minmax(340px,.9fr)}
.teacher-editor-grid>aside,.task-editor{min-height:400px;padding:12px}
.teacher-task-list{height:260px}
.teacher-preview-card{min-height:275px}
}

@media(max-width:1100px){.teacher-header{grid-template-columns:170px 1fr}
.teacher-brand{display:none}
.teacher-import-hero{grid-template-columns:1fr}
.import-visual{display:none}
.teacher-tabs{gap:7px}
.teacher-tabs button{padding:10px}
.teacher-editor-grid{grid-template-columns:300px 1fr}
.task-preview{grid-column:1/-1}
.teacher-preview-card{min-height:220px}
.import-actions{grid-template-columns:1fr 210px}
}


/* Mission 1 — Archive Mahjong */
.mahjong-screen{position:relative;height:100dvh;min-height:620px;overflow:hidden;color:#effcff;background:#020d23;font-family:Inter,Segoe UI,sans-serif}

.mahjong-backdrop{position:absolute;inset:0;background:url('assets-web/mahjong/backgrounds/archive-gameplay-background.webp') center/cover no-repeat;filter:saturate(1.1) contrast(1.03);animation:archive-drift 18s ease-in-out infinite alternate}

.mahjong-backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,transparent 15%,rgba(1,8,28,.22) 72%),linear-gradient(180deg,rgba(2,8,28,.72),transparent 20%,transparent 78%,rgba(1,7,25,.88))}

.mahjong-header{position:relative;z-index:6;display:grid;grid-template-columns:48px 145px minmax(300px,1fr) auto 48px;align-items:center;gap:12px;height:70px;padding:8px 22px;border-bottom:1px solid #23cfff88;background:linear-gradient(180deg,rgba(3,21,56,.96),rgba(3,15,42,.82));box-shadow:0 8px 28px #020719aa}

.mahjong-header h2{margin:0;text-align:center;font-size:clamp(1.25rem,2vw,2rem);letter-spacing:.07em;text-shadow:0 0 16px #36d8ff}

.mahjong-logo{font-weight:1000;font-style:italic;line-height:.85;color:#fff;text-shadow:0 0 10px #39cfff}
.mahjong-logo:after{content:"ARCHIVE";display:block;color:#ffd735;font-size:.7em}

.mahjong-icon-button,.mahjong-control,.mahjong-how{border:1px solid #31d7ff;border-radius:12px;background:linear-gradient(180deg,#0d4776,#061a3d);color:#fff;font-weight:900;cursor:pointer;box-shadow:inset 0 1px #fff3,0 0 12px #19b8ff44}

.mahjong-icon-button{width:44px;height:44px;font-size:1.35rem}
.mahjong-resources{display:flex;gap:8px}
.mahjong-resources span{min-width:88px;padding:8px 13px;border:1px solid #207fb5;border-radius:18px;background:#051a3c;color:#ffd94e}
.mahjong-resources span+span{color:#45dcff}

.mahjong-level-strip{position:relative;z-index:5;display:flex;justify-content:center;gap:7px;height:47px;padding:5px;background:#031534cc}

.mahjong-level-strip button{display:flex;align-items:center;gap:7px;min-width:116px;padding:5px 11px;border:1px solid #2476a9;border-radius:12px;background:#071c3e;color:#80afd0;font-weight:900;cursor:pointer}
.mahjong-level-strip button span{font-size:.65rem;white-space:nowrap}
.mahjong-level-strip button.active{border-color:#46e9ff;color:#fff;background:#0b4c78;box-shadow:0 0 15px #20cfff}
.mahjong-level-strip button:disabled{opacity:.48;cursor:not-allowed}

.mahjong-arena{position:relative;z-index:3;display:grid;grid-template-columns:185px minmax(650px,1fr) 190px;gap:10px;width:min(1600px,98vw);height:calc(100dvh - 190px);min-height:430px;margin:auto;padding:9px 0 82px}

.mahjong-table{position:relative;min-width:0;filter:drop-shadow(0 18px 25px #0008)}
.mahjong-board{position:absolute;inset:0 0 58px}

.mahjong-tile{position:absolute;z-index:calc(20 + var(--tile-z));left:var(--tile-left);top:var(--tile-top);width:clamp(76px,7vw,116px);aspect-ratio:1.333;transform:translate(calc(var(--tile-z)*5px),calc(var(--tile-z)*-4px));border:0;padding:0;background-image:url('assets-web/mahjong/tiles/mahjong-tile-states.webp');background-size:400% 300%;background-position:calc(var(--sprite-col)*33.333%) calc(var(--sprite-row)*50%);background-color:transparent;color:#052b45;cursor:pointer;filter:drop-shadow(0 8px 5px #0009);transition:transform .18s,filter .18s,opacity .18s}

.mahjong-tile span{position:absolute;inset:23% 12% 23%;display:grid;place-items:center;font-size:clamp(.86rem,1.25vw,1.35rem);font-weight:1000;text-transform:lowercase;text-shadow:0 1px #fff}
.mahjong-tile small{position:absolute;left:16%;bottom:13%;font-size:.55rem;font-weight:1000;color:#08718c}
.mahjong-tile .tile-lock{position:absolute;right:14%;bottom:13%;font-size:.7rem}
.mahjong-tile.free:hover,.mahjong-tile.free:focus-visible{z-index:50;transform:translate(calc(var(--tile-z)*5px),calc(var(--tile-z)*-4px - 7px)) scale(1.08);filter:drop-shadow(0 0 16px #43eaff) drop-shadow(0 10px 5px #0009);outline:0}
.mahjong-tile.blocked{opacity:.62;filter:saturate(.45) brightness(.7) drop-shadow(0 7px 4px #000)}
.mahjong-tile.selected{z-index:55;transform:translate(calc(var(--tile-z)*5px),calc(var(--tile-z)*-4px - 9px)) scale(1.11);filter:drop-shadow(0 0 20px #ffe26b)}
.mahjong-tile.error{animation:tile-error .35s 2;filter:drop-shadow(0 0 18px #ff315f)}
.mahjong-tile.hint{animation:tile-hint .75s infinite alternate;opacity:1}
.mahjong-tile.transparent-layer{opacity:.32}
.mahjong-tile:active{transform:scale(.96)}

.selected-pair-panel{position:absolute;left:50%;bottom:3px;display:flex;align-items:center;gap:10px;transform:translateX(-50%);padding:7px 18px;border:1px solid #40dfff;border-radius:20px;background:#031a40e8;box-shadow:0 0 17px #1acfff55}
.selected-pair-panel span{min-width:95px;text-align:center;font-weight:900}
.selected-pair-panel i{color:#ffd94a}

.mahjong-table[data-combo="combo"]{filter:drop-shadow(0 0 18px #55ddff) drop-shadow(0 18px 25px #0008)}
.mahjong-table[data-combo="series"]{filter:drop-shadow(0 0 25px #b65cff) drop-shadow(0 18px 25px #0008)}

.mahjong-bip{align-self:end;margin-bottom:55px;text-align:center}
.bip-sprite{width:170px;aspect-ratio:713/551;margin:auto;background:url('assets-web/mahjong/characters/bip-reactions.webp');background-size:400% 200%;background-position:calc(var(--bip-col,0)*33.333%) calc(var(--bip-row,0)*100%);filter:drop-shadow(0 0 18px #33dcff);animation:bip-float 3s ease-in-out infinite}
.bip-message{position:relative;margin-top:-15px;padding:10px;border:1px solid #41dfff;border-radius:15px;background:#061d43ec;font-size:.75rem;font-weight:800;box-shadow:0 0 18px #18cfff55}

.mahjong-side{display:flex;flex-direction:column;gap:9px;padding-top:3px}
.mahjong-how{height:42px}
.archive-meter{padding:10px;border:1px solid #33cfff;border-radius:14px;background:#061a3ee8;text-align:center;font-size:.66rem;font-weight:900}
.archive-meter div{height:10px;margin:7px 0;border:1px solid #2fcfff;border-radius:8px;background:#020b20;overflow:hidden}
.archive-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#00a5ed,#64f4ff);box-shadow:0 0 10px #38e7ff;transition:width .35s}
.archive-meter b{color:#63eaff}

.mahjong-bonuses{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mahjong-bonuses button{position:relative;min-height:105px;padding:67px 4px 7px;border:1px solid #237bb1;border-radius:14px;background:#06183bd9;color:#dff8ff;font-size:.64rem;font-weight:800;cursor:pointer}
.mahjong-bonuses button i{position:absolute;inset:3px 15px 34px;background-image:url('assets-web/mahjong/powerups/mahjong-powerups.webp');background-size:400% 300%;filter:drop-shadow(0 0 9px #2fdcff)}
.mahjong-bonuses button:nth-child(1) i{background-position:0 0}
.mahjong-bonuses button:nth-child(2) i{background-position:100% 0}
.mahjong-bonuses button:nth-child(3) i{background-position:33.333% 0}
.mahjong-bonuses button:nth-child(4) i{background-position:66.666% 50%}
.mahjong-bonuses button b{position:absolute;right:6px;top:5px;display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:#ffd73f;color:#082347}
.mahjong-bonuses button:hover:not(:disabled){transform:translateY(-3px);border-color:#6ef0ff;box-shadow:0 0 15px #24dfff}
.mahjong-bonuses button:disabled{opacity:.4}

.mahjong-hud{position:absolute;z-index:7;left:50%;bottom:8px;display:flex;align-items:center;gap:8px;transform:translateX(-50%);padding:7px 12px;border:1px solid #36cfff;border-radius:20px;background:#031630ef;box-shadow:0 0 22px #18baff55}
.mahjong-hud>div{min-width:108px;padding:4px 14px;border-right:1px solid #205f89;text-align:center}
.mahjong-hud small{display:block;color:#78b9da;font-size:.57rem}
.mahjong-hud b{color:#fff;font-size:1.1rem}
.mahjong-control{height:42px;padding:0 16px}

.mahjong-overlay{position:absolute;z-index:80;inset:0;display:grid;place-items:center;padding:18px;background:#010817d9;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.25s}
.mahjong-overlay.open{opacity:1;visibility:visible}
.mahjong-dialog{position:relative;width:min(720px,94vw);max-height:90vh;overflow:auto;padding:26px;border:2px solid #39dfff;border-radius:28px;background:linear-gradient(160deg,#092c61,#04132f 65%);text-align:center;box-shadow:0 0 45px #1acfff88,inset 0 1px #fff4}
.mahjong-dialog h2{margin:5px 0 12px;color:#fff;text-shadow:0 0 15px #41dcff}
.mahjong-dialog button{min-height:46px;padding:10px 20px;border:1px solid #45e7ff;border-radius:15px;background:linear-gradient(#18cdec,#0874bd);color:#fff;font-weight:900;cursor:pointer}
.mahjong-dialog .mahjong-close{position:absolute;right:14px;top:12px;width:40px;padding:0}
.intro-crew{display:flex;justify-content:center;align-items:end;height:180px}
.intro-crew img{height:190px;object-fit:contain;filter:drop-shadow(0 0 15px #1bcfff)}
.intro-crew .bip-sprite{width:140px;margin:0}
.mission-goal{margin:12px;padding:12px;border:1px solid #ffd451;border-radius:12px;background:#5f3a1033;color:#ffe675}
.intro-dialog label{display:block;margin:12px}
.help-dialog ol{text-align:left;line-height:1.6}
.help-example{display:flex;justify-content:center;gap:15px;margin:18px}
.help-example span{padding:18px;border:4px solid #d7c483;border-radius:10px;background:#f8eac0;color:#08395a;font-weight:1000}
.help-example small{display:block;font-size:.55rem}
.help-example .blocked{filter:grayscale(.8);opacity:.55}
.help-actions,.victory-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.mahjong-dialog.compact{width:min(430px,90vw)}
.victory-dialog{background-image:linear-gradient(#06173388,#061733ee),url('assets-web/mahjong/ui/mahjong-victory-screen.webp');background-size:cover;background-position:center}
.victory-stars{color:#ffd84a;font-size:3rem;letter-spacing:.14em;text-shadow:0 0 18px #ffb900}
.found-pairs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px}
.found-pairs span{padding:5px 9px;border:1px solid #37dfff;border-radius:10px;background:#061b3de8;font-size:.72rem}

@keyframes archive-drift{to{transform:scale(1.025) translate3d(-.5%,.4%,0)}
}
@keyframes bip-float{50%{transform:translateY(-8px) rotate(1deg)}
}
@keyframes tile-error{50%{transform:translateX(6px)}
}
@keyframes tile-hint{to{filter:drop-shadow(0 0 25px #fff36b) brightness(1.18)}
}

@media(max-width:1400px){.mahjong-arena{grid-template-columns:145px minmax(600px,1fr) 160px}
.mahjong-bip .bip-sprite{width:138px}
.mahjong-tile{width:clamp(70px,7.2vw,101px)}
.mahjong-level-strip button{min-width:99px}
.mahjong-level-strip button span{display:none}
.mahjong-bonuses button{min-height:91px;padding-top:57px}
.mahjong-hud>div{min-width:92px}
.mahjong-header{grid-template-columns:44px 120px 1fr auto 44px}
}

@media(max-width:1050px){.mahjong-screen{min-height:600px}
.mahjong-header{grid-template-columns:42px 1fr auto 42px}
.mahjong-logo{display:none}
.mahjong-arena{grid-template-columns:105px minmax(550px,1fr) 135px;gap:4px}
.mahjong-bip .bip-sprite{width:105px}
.bip-message{font-size:.62rem}
.mahjong-tile{width:clamp(65px,8.3vw,88px)}
.mahjong-bonuses button{min-height:80px;padding-top:48px;font-size:.55rem}
.mahjong-bonuses button i{inset:2px 10px 28px}
.mahjong-hud>div{min-width:78px;padding:3px 8px}
}

@media(max-width:800px){.mahjong-header{height:60px;padding:6px 10px}
.mahjong-header h2{font-size:1rem}
.mahjong-resources span{min-width:62px;padding:6px}
.mahjong-level-strip{height:42px}
.mahjong-level-strip button{min-width:52px;justify-content:center}
.mahjong-arena{grid-template-columns:1fr 120px;height:calc(100dvh - 170px);padding-bottom:70px}
.mahjong-bip{position:absolute;left:3px;bottom:58px;width:90px;z-index:4}
.mahjong-bip .bip-sprite{width:82px}
.bip-message{display:none}
.mahjong-table{grid-column:1}
.mahjong-side{grid-column:2}
.mahjong-tile{width:clamp(58px,10vw,78px)}
.mahjong-hud{max-width:96vw}
.mahjong-hud>div{min-width:60px;padding:2px 5px}
.mahjong-control{padding:0 9px}
}

@media(prefers-reduced-motion:reduce){.mahjong-backdrop,.bip-sprite,.mahjong-tile,.mahjong-bonuses button{animation:none!important;transition:none!important}
}


/* Mahjong composition aligned with the approved gameplay reference. */
.mahjong-header{grid-template-columns:190px 145px minmax(350px,1fr) auto;height:64px;padding:6px 18px}

.mahjong-bridge{height:44px;padding:0 18px;border:1px solid #32cfff;border-radius:22px;background:#061a3de8;color:#fff;font-weight:950;white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px #fff3,0 0 12px #1ecfff44}

.mahjong-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.mahjong-header-actions .mahjong-how{height:44px;padding:0 15px;white-space:nowrap;border-color:#ffc52e;background:linear-gradient(#ad6f08,#6c3505);box-shadow:0 0 14px #ffbb2b77}

.mahjong-round-title{position:relative;z-index:6;display:flex;justify-content:center;align-items:center;gap:22px;height:42px;color:#8eefff;font-size:.78rem;font-weight:900;text-shadow:0 0 8px #1ccfff}
.mahjong-round-title b,.mahjong-round-title span{padding:6px 14px;border:1px solid #258fc1;border-radius:16px;background:#041936dc}
.mahjong-round-title span{color:#ffe36c}

.mahjong-level-strip,.mahjong-resources{display:none!important}

.mahjong-arena{display:block;width:min(1360px,96vw);height:calc(100dvh - 170px);min-height:450px;padding:0 0 75px}

.mahjong-arena:before{content:"";position:absolute;left:50%;top:47%;width:72%;height:62%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(2,13,35,.72),rgba(2,12,32,.38) 58%,transparent 73%);filter:blur(3px);pointer-events:none}

.mahjong-table{position:absolute;left:50%;top:48%;width:min(1040px,74vw);height:min(610px,69vh);transform:translate(-50%,-50%);perspective:900px;filter:drop-shadow(0 24px 20px #000a)}

.mahjong-board{inset:2% 0 48px;transform:perspective(950px) rotateX(3deg)}

.mahjong-tile{width:clamp(92px,6.45vw,124px);aspect-ratio:1/1;transform:translate(calc(var(--tile-z)*7px),calc(var(--tile-z)*-7px));filter:drop-shadow(7px 10px 5px #000a)}

.mahjong-tile span{inset:25% 12% 24%;font-size:clamp(1rem,1.3vw,1.48rem);line-height:1}
.mahjong-tile small{bottom:15%;font-size:.54rem}
.mahjong-tile .tile-lock{display:none}

.mahjong-tile.free{filter:drop-shadow(0 0 5px #42dfff66) drop-shadow(7px 10px 5px #000a)}

.mahjong-tile.blocked{opacity:.76;filter:saturate(.68) brightness(.86) drop-shadow(7px 10px 5px #000a)}

.mahjong-tile.free:hover,.mahjong-tile.free:focus-visible{transform:translate(calc(var(--tile-z)*7px),calc(var(--tile-z)*-7px - 10px)) scale(1.045)}

.mahjong-tile.selected{transform:translate(calc(var(--tile-z)*7px),calc(var(--tile-z)*-7px - 12px)) scale(1.06)}

.mahjong-tile.matched{z-index:70;animation:pair-restore .52s ease-in forwards;filter:drop-shadow(0 0 24px #fff06a)}
.mahjong-pair-link{display:none!important}

.mahjong-table:has(.mahjong-tile.selected) .mahjong-tile:not(.selected){filter:saturate(.82) brightness(.9) drop-shadow(7px 10px 5px #000a)}

.selected-pair-panel{bottom:4px;min-width:255px;justify-content:center;opacity:.86}
.selected-pair-panel span{min-width:92px}

.archive-meter{position:absolute;left:50%;bottom:67px;width:min(430px,42vw);transform:translateX(-50%);padding:7px 12px;z-index:5}
.archive-meter span{font-size:.58rem}

.mahjong-bip{position:absolute;z-index:12;left:1.5%;bottom:92px;width:170px;margin:0;align-self:auto;pointer-events:none;opacity:0;transform:translateX(-55%);transition:opacity .25s,transform .25s}
.mahjong-bip.visible{opacity:1;transform:translateX(0)}
.bip-frame{width:120px;height:150px;margin:auto;display:flex;align-items:center;justify-content:center}
.bip-frame .bip-sprite{display:block;width:min(110px,9vw);height:auto;aspect-ratio:713/1103;margin:0;background-repeat:no-repeat;object-fit:contain;transform:none}
.mahjong-bip .bip-message{margin:-14px 0 0;padding:9px;font-size:.7rem}

.mahjong-hud{bottom:7px;gap:4px;padding:5px 8px;max-width:96vw}
.mahjong-hud>div{min-width:105px;padding:3px 11px}
.mahjong-hud .mahjong-bonuses{display:flex;grid-template-columns:none;gap:5px;border-right:0;padding:0 0 0 6px}
.mahjong-bonuses button{width:52px;height:52px;min-height:0;padding:0;border-radius:12px}
.mahjong-bonuses button i{inset:2px;background-repeat:no-repeat}
.mahjong-bonuses button b{right:-2px;top:-4px;width:19px;height:19px;font-size:.7rem}

.level-select-dialog{width:min(900px,94vw)}
.mahjong-level-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0}
.mahjong-level-cards button{display:grid;gap:6px;place-items:center;min-height:150px;padding:12px}
.mahjong-level-cards button b{display:grid;width:48px;height:48px;place-items:center;border:2px solid #55e9ff;border-radius:50%;font-size:1.35rem}
.mahjong-level-cards button span{font-size:.78rem}
.mahjong-level-cards button small{color:#8fc8e6}
.mahjong-level-cards button:disabled{filter:grayscale(.8);opacity:.48;cursor:not-allowed}

#mahjong-level-select{display:none!important}

.intro-crew .bip-sprite{width:116px;height:auto;aspect-ratio:713/1103;background-repeat:no-repeat;transform:none}

@keyframes tile-materialize{from{opacity:0;transform:translateY(36px) scale(.82);filter:brightness(2) drop-shadow(0 0 22px #48eaff)}
}
@keyframes pair-restore{45%{transform:translate(calc(var(--tile-z)*7px),calc(var(--tile-z)*-7px - 28px)) scale(1.12)}
to{opacity:0;transform:translate(calc(var(--tile-z)*7px),calc(var(--tile-z)*-7px - 45px)) scale(.45);filter:brightness(2) drop-shadow(0 0 30px #71edff)}
}

@media(max-width:1400px){.mahjong-header{grid-template-columns:170px 110px minmax(320px,1fr) auto}
.mahjong-table{width:min(920px,72vw);height:min(510px,66vh)}
.mahjong-tile{width:clamp(82px,6.4vw,96px)}
.mahjong-bip{width:140px}
.bip-frame{width:100px;height:118px}
.mahjong-hud>div{min-width:86px;padding-inline:7px}
.mahjong-bonuses button{width:46px;height:46px}
}

@media(max-width:1050px){.mahjong-header{grid-template-columns:150px minmax(300px,1fr) auto}
.mahjong-logo{display:none}
.mahjong-header-actions .mahjong-how{font-size:.68rem}
.mahjong-table{left:45%;width:76vw}
.mahjong-tile{width:clamp(70px,8.4vw,88px)}
.mahjong-bip{left:0;width:105px}
.bip-frame{width:82px;height:96px}
.mahjong-bip .bip-message{font-size:.58rem}
.mahjong-level-cards{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:800px){.mahjong-header{grid-template-columns:135px 1fr auto;height:58px;padding-inline:7px}
.mahjong-header h2{font-size:.9rem}
.mahjong-bridge{height:40px;padding:0 10px;font-size:.68rem}
.mahjong-header-actions .mahjong-how{width:42px;padding:0;font-size:0}
.mahjong-header-actions .mahjong-how:first-letter{font-size:1.2rem}
.mahjong-round-title{height:38px}
.mahjong-arena{height:calc(100dvh - 154px)}
.mahjong-table{left:43%;top:46%;width:82vw;height:62vh}
.mahjong-tile{width:clamp(64px,9.8vw,78px)}
.archive-meter{bottom:61px}
.mahjong-hud>div{min-width:62px}
.mahjong-hud .mahjong-bonuses{display:flex}
.mahjong-bonuses button{width:40px;height:40px}
.mahjong-level-cards{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){.mahjong-tile{animation:none!important}
.mahjong-bip{transition:none!important}
}


/* Approved Mahjong UI artwork and persistent Bip helper. */
.mahjong-bridge{border:0;background:transparent url('assets-web/mahjong/ui/crops/button-blue.webp') center/100% 100% no-repeat;box-shadow:none;text-shadow:0 1px 2px #00152b}

.mahjong-header-actions .mahjong-how{border:0;background:transparent url('assets-web/mahjong/ui/crops/button-purple.webp') center/100% 100% no-repeat;box-shadow:none;text-shadow:0 1px 2px #180029}

.mahjong-header-actions .mahjong-icon-button{width:58px;height:54px;border:0;border-radius:0;background-color:transparent;background-image:url('assets-web/mahjong/ui/crops/button-sound.webp');background-position:center;background-size:contain;background-repeat:no-repeat;box-shadow:none;color:transparent;font-size:0}

.mahjong-header-actions button:hover{filter:brightness(1.18) drop-shadow(0 0 10px #52eaff);transform:translateY(-2px)}
.mahjong-header-actions button:active,.mahjong-bridge:active{transform:translateY(1px) scale(.97)}

.archive-meter{width:min(460px,44vw);height:60px;padding:13px 42px 11px;border:0;border-radius:0;background:transparent url('assets-web/mahjong/ui/crops/button-blue.webp') center/100% 100% no-repeat;box-shadow:none}
.archive-meter span{position:absolute;left:50%;top:7px;transform:translateX(-50%);white-space:nowrap;color:#dffbff;text-shadow:0 1px 3px #001,0 0 7px #26dfff}
.archive-meter div{position:relative;height:11px;margin:20px 0 0;border:1px solid #62edff;border-radius:8px;background:#010a1d;box-shadow:inset 0 2px 5px #000,0 0 7px #26dfff55;overflow:hidden}
.archive-meter div:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 19%,rgba(255,255,255,.2) 19% 20%);pointer-events:none}
.archive-meter i{border-radius:7px;background:linear-gradient(90deg,#0589d4,#25d8f4 65%,#a8fbff);box-shadow:0 0 12px #43efff}

.selected-pair-panel{min-width:330px;min-height:58px;padding:10px 42px;border:0;border-radius:0;background:transparent url('assets-web/mahjong/ui/crops/panel-wide.webp') center/100% 100% no-repeat;box-shadow:none}
.selected-pair-panel span{font-size:1rem;text-shadow:0 0 8px #4ee7ff}

.mahjong-bonuses button{border:0;background-color:transparent;background-image:url('assets-web/mahjong/ui/crops/button-blue.webp');background-size:100% 100%;box-shadow:none}
.mahjong-bonuses button:hover:not(:disabled){filter:brightness(1.18) drop-shadow(0 0 9px #48eaff)}

.mahjong-bonuses button:after{content:attr(data-tooltip);position:absolute;right:0;bottom:calc(100% + 9px);z-index:500;display:block;width:290px;padding:14px 16px;border:1px solid #45ddff;border-radius:12px;background:#041734f7;color:#dff8ff;box-shadow:0 0 20px #29d7ff59;font-size:.72rem;font-weight:650;line-height:1.4;text-align:left;white-space:pre-wrap;opacity:0;visibility:hidden;transform:translateY(5px);transition:.18s;pointer-events:none}
.mahjong-bonuses button:hover:after,.mahjong-bonuses button:focus-visible:after{opacity:1;visibility:visible;transform:none}

.mahjong-dialog button{border:0;border-radius:0;background:transparent url('assets-web/mahjong/ui/crops/button-blue.webp') center/100% 100% no-repeat;box-shadow:none}
.mahjong-dialog button:hover{filter:brightness(1.15) drop-shadow(0 0 9px #3fe4ff)}
.mahjong-dialog .mahjong-close{background:transparent url('assets-web/mahjong/ui/crops/button-purple.webp') center/100% 100% no-repeat}

.mahjong-bip{left:.5%;bottom:84px;width:310px;opacity:1!important;transform:none!important}
.bip-frame{width:240px;height:300px}
.bip-frame .bip-sprite{width:min(220px,18vw);height:auto;aspect-ratio:713/1103;filter:drop-shadow(0 0 22px #32dfff);animation:bip-float 3s ease-in-out infinite}
.mahjong-bip .bip-message{position:absolute;left:175px;bottom:185px;width:285px;min-height:92px;display:grid;place-items:center;margin:0;padding:18px 25px 22px;border:0;border-radius:0;background:transparent url('assets-web/mahjong/ui/crops/speech-bubble.webp') center/100% 100% no-repeat;box-shadow:none;font-size:1rem;line-height:1.28;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.mahjong-bip.visible .bip-message{opacity:1;visibility:visible;transform:translateY(0)}

@media(max-width:1400px){.mahjong-bip{width:250px;bottom:76px}
.bip-frame{width:200px;height:250px}
.bip-frame .bip-sprite{width:min(185px,16vw)}
.mahjong-bip .bip-message{left:142px;bottom:155px;width:245px;min-height:80px;padding:14px 20px 19px;font-size:.88rem}
}

@media(max-width:900px){.mahjong-bip{width:190px;bottom:68px}
.bip-frame{width:155px;height:195px}
.bip-frame .bip-sprite{width:min(145px,18vw)}
.mahjong-bip .bip-message{left:108px;bottom:120px;width:210px;min-height:68px;font-size:.75rem}
.mahjong-header-actions .mahjong-icon-button{width:46px;height:44px}
}


/* Keep helper text and bottom game panels in independent, non-overlapping rows. */
.mahjong-bip .bip-message{left:4px;bottom:286px;width:340px;min-height:126px;height:auto;padding:24px 30px 31px;overflow:visible;white-space:normal;text-wrap:balance}

.archive-meter{position:fixed;left:50%;right:auto;top:auto;bottom:74px;height:55px;transform:translateX(-50%)}
.selected-pair-panel{position:fixed;left:50%;bottom:131px;z-index:8;transform:translateX(-50%)}

@media(max-width:1400px){.mahjong-bip .bip-message{left:2px;bottom:238px;width:285px;min-height:108px;padding:19px 25px 27px}
.archive-meter{bottom:70px}
.selected-pair-panel{bottom:125px}
}

@media(max-width:900px){.mahjong-bip .bip-message{left:0;bottom:184px;width:245px;min-height:94px;padding:16px 21px 23px}
.selected-pair-panel{bottom:111px;min-width:280px}
.archive-meter{bottom:62px}
}


/* Compact 2×2 help layout that fits a 1366×768 viewport without scrolling. */
.how-dialog{height:min(690px,96vh)}
.how-scroll{overflow:hidden;padding:7px 12px 4px}
.how-grid{gap:7px}
.how-card{min-height:174px;padding:34px 10px 5px;border-radius:15px}
.how-number{left:10px;top:5px;width:45px;height:27px;font-size:.9rem}
.how-card h3{left:64px;top:9px;font-size:.86rem}
.how-card p{font-size:.69rem}
.how-scene{height:119px}
.how-tile{width:72px;height:72px}
.how-tile strong{font-size:1rem}
.how-tile small{left:12px;bottom:11px;font-size:.43rem}
.ghost-stack{grid-template-columns:repeat(3,52px)}
.ghost-stack i{width:52px;height:48px}
.pair-scene{gap:28px}
.pair-scene em{font-size:3.1rem}
.blocked-scene .how-tile{width:70px;height:70px}
.blocked-scene .lower.left{transform:translate(-43px,19px)}
.blocked-scene .lower.right{transform:translate(43px,19px)}
.blocked-scene .center{transform:translateY(-15px)}
.blocked-scene .top{transform:translateY(29px)}
.how-pyramid{width:170px;height:102px;transform:scale(.75)}
.archive-energy{margin-left:0}
.how-progress{right:12px;bottom:5px;width:125px;height:10px}
.how-bip-tip{min-height:42px;margin-top:5px;padding:3px 16px;font-size:.74rem}
.how-bip-sprite{width:37px}
.how-header{min-height:55px;padding:5px 13px}
.how-header h2{font-size:1.55rem}
.how-header p{font-size:.72rem}
.how-header .mahjong-close{width:44px;height:44px}
.how-back{height:43px!important}
.how-footer{min-height:58px;padding:5px 14px}
.how-footer .how-try{height:46px;font-size:1rem}
.how-footer input{width:18px;height:18px}
.how-footer label{font-size:.76rem}

@media(max-width:1000px){.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.how-card{min-height:170px}
.how-header{grid-template-columns:130px 1fr 44px}
.how-footer{min-height:58px}
}

@media(max-width:700px){.how-scroll{overflow:auto}
.how-grid{grid-template-columns:1fr}
}


/* The complete help board must remain visible without an internal scrollbar. */
.how-dialog{height:min(610px,96vh);min-height:0}
.how-scroll{overflow:hidden!important;padding:4px 9px 2px}
.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px}
.how-card{min-height:142px;padding:28px 7px 3px;border-radius:12px}
.how-number{left:7px;top:4px;width:37px;height:22px;border-radius:8px;font-size:.72rem}
.how-card h3{left:51px;top:7px;font-size:clamp(.6rem,.9vw,.75rem)}
.how-card p{font-size:.58rem;line-height:1.15}
.how-scene{height:94px}
.how-tile{width:58px;height:58px}
.how-tile strong{font-size:.78rem}
.how-tile small{left:9px;bottom:8px;font-size:.35rem}
.ghost-stack{grid-template-columns:repeat(3,41px);transform:translateY(11px)}
.ghost-stack i{width:41px;height:37px;border-width:2px}
.pair-scene{gap:20px}
.pair-scene em{font-size:2.4rem}
.blocked-scene .how-tile{width:56px;height:56px}
.blocked-scene .lower.left{transform:translate(-34px,15px)}
.blocked-scene .lower.right{transform:translate(34px,15px)}
.blocked-scene .center{transform:translateY(-12px)}
.blocked-scene .top{transform:translateY(23px)}
.how-pyramid{width:145px;height:86px;transform:scale(.6)}
.archive-energy{gap:4px;margin-left:-12px}
.archive-energy i{width:6px;height:6px}
.how-progress{right:8px;bottom:3px;width:100px;height:8px}
.how-bip-tip{min-height:31px;margin-top:3px;padding:2px 10px;font-size:.62rem;border-radius:11px}
.how-bip-sprite{width:27px}
.how-header{min-height:45px;padding:3px 9px;grid-template-columns:115px 1fr 38px}
.how-header h2{font-size:1.25rem}
.how-header p{font-size:.58rem}
.how-header .mahjong-close{width:36px;height:36px;font-size:1.35rem}
.how-back{height:36px!important;font-size:.66rem!important}
.how-footer{min-height:48px;padding:3px 10px;gap:20px}
.how-footer .how-try{height:38px;width:min(340px,43vw);font-size:.82rem}
.how-footer input{width:15px;height:15px}
.how-footer label{font-size:.64rem}

@media(max-width:700px){.how-dialog{width:99vw}
.how-card h3{font-size:.54rem}
.how-card p{font-size:.5rem}
.how-scene{height:88px}
.how-footer{gap:8px}
.how-footer .how-try{width:48vw}
}


/* Dense help cards leave room for the complete power-up legend. */
.how-grid{align-content:start;grid-template-rows:repeat(2,124px)}
.how-card{height:124px;min-height:124px;max-height:124px;padding-top:25px}
.how-scene{height:78px}
.how-tile{width:50px;height:50px}
.how-tile strong{font-size:.7rem}
.how-tile small{bottom:7px}
.ghost-stack{grid-template-columns:repeat(3,35px)}
.ghost-stack i{width:35px;height:32px}
.pair-scene{gap:17px}
.pair-scene em{font-size:2rem}
.blocked-scene .how-tile{width:48px;height:48px}
.blocked-scene .lower.left{transform:translate(-29px,12px)}
.blocked-scene .lower.right{transform:translate(29px,12px)}
.blocked-scene .center{transform:translateY(-10px)}
.blocked-scene .top{transform:translateY(19px)}
.how-pyramid{transform:scale(.5)}
.how-card p{position:absolute;left:6px;right:6px;bottom:3px}

.how-powerups{max-width:1240px;margin:5px auto 0;padding:4px 8px 6px;border:1px solid #238cbc;border-radius:12px;background:#041633e8}
.how-powerups>h3{margin:0 0 3px;color:#69eaff;font-size:.68rem;letter-spacing:.08em;text-align:center}
.how-powerups>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.how-powerups article{display:flex;align-items:center;min-width:0;height:48px;padding:3px 6px;border:1px solid #236e9d;border-radius:9px;background:#071e41}
.how-powerups article i{flex:0 0 auto;width:42px;height:42px;background-image:url('assets-web/mahjong/powerups/mahjong-powerups.webp');background-size:400% 300%;filter:drop-shadow(0 0 6px #2ddfff)}
.how-powerups article i.scanner{background-position:0 0}
.how-powerups article i.impulse{background-position:100% 0}
.how-powerups article i.shuffle{background-position:33.333% 0}
.how-powerups article i.shield{background-position:66.666% 50%}
.how-powerups article span{min-width:0;text-align:left}
.how-powerups article b{display:block;color:#fff;font-size:.63rem;white-space:nowrap}
.how-powerups article small{display:block;color:#8dc8e6;font-size:.48rem;line-height:1.1}
.how-bip-tip{margin-top:4px}

@media(max-width:800px){.how-grid{grid-template-rows:repeat(2,116px)}
.how-card{height:116px;min-height:116px;max-height:116px}
.how-scene{height:70px}
.how-powerups article{height:43px;padding:2px}
.how-powerups article i{width:34px;height:34px}
.how-powerups article b{font-size:.53rem}
.how-powerups article small{font-size:.42rem}
}


/* Tabbed tutorial: one rule slide or the separate bonus grid. */
.how-dialog{width:min(1120px,calc(100vw - 48px));height:auto;max-height:calc(100vh - 48px);grid-template-rows:auto auto minmax(0,1fr) auto}
.how-tabs{display:flex;justify-content:center;gap:8px;padding:6px;background:#03132ee8}
.how-tabs button{min-width:180px;height:40px;border:0;background:transparent url('assets-web/mahjong/ui/crops/button-blue.webp') center/100% 100% no-repeat;color:#9ccbe5;font-size:.82rem;font-weight:900;cursor:pointer}
.how-tabs button.active{color:#fff;filter:brightness(1.25) drop-shadow(0 0 8px #43ddff)}
.how-scroll{min-height:0;overflow-y:auto!important;padding:10px 14px}
.how-grid{display:block!important;max-width:none}
.how-card[hidden],.how-powerups[hidden]{display:none!important}
.how-card.is-active{display:grid!important;grid-template-columns:minmax(0,62fr) minmax(260px,38fr);grid-template-rows:48px minmax(0,1fr);column-gap:18px;width:100%;height:clamp(310px,47vh,410px);min-height:310px;max-height:410px;padding:10px 14px 14px}
.how-card .how-number{position:static;grid-column:1;grid-row:1;align-self:center;width:60px;height:35px;font-size:1rem}
.how-card h3{position:static;grid-column:1/3;grid-row:1;align-self:center;margin-left:75px;font-size:clamp(1rem,1.45vw,1.3rem);white-space:normal}
.how-card .how-scene{grid-column:1;grid-row:2;width:100%;height:100%;min-height:245px}
.how-card .how-copy{grid-column:2;grid-row:2;display:grid;align-content:center;gap:14px;padding:20px;border-left:1px solid #286d9a;text-align:left}
.how-card .how-copy p{position:static;margin:0;font-size:1rem;line-height:1.45}
.how-card .how-copy strong{padding:12px;border:1px solid currentColor;border-radius:10px;color:#71edff;font-size:.86rem;line-height:1.3}
.how-card.violet .how-copy strong{color:#d38cff}
.how-card.magenta .how-copy strong{color:#ff84db}
.how-card.gold .how-copy strong{color:#ffe071}
.how-card .how-copy small{color:#ffdb77;font-size:.8rem;line-height:1.35}
.how-card .how-tile{width:104px;height:104px}
.how-card .how-tile strong{font-size:1.3rem}
.how-card .how-tile small{left:17px;bottom:16px;font-size:.52rem}
.how-card .ghost-stack{grid-template-columns:repeat(3,72px)}
.how-card .ghost-stack i{width:72px;height:66px}
.how-card .pair-scene{gap:42px}
.how-card .pair-scene em{font-size:4rem}
.how-card .blocked-scene .how-tile{width:94px;height:94px}
.how-card .blocked-scene .lower.left{transform:translate(-58px,26px)}
.how-card .blocked-scene .lower.right{transform:translate(58px,26px)}
.how-card .blocked-scene .center{transform:translateY(-21px)}
.how-card .blocked-scene .top{transform:translateY(40px)}
.how-card .how-pyramid{transform:scale(.9)}

.how-powerups{max-width:none;margin:0;padding:0;border:0;background:none}
.how-powerups>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.how-powerups article{display:grid;grid-template-columns:82px 1fr auto;gap:12px;align-items:center;height:clamp(145px,19vh,175px);padding:14px;border:1px solid #318ac0;border-radius:16px;background:linear-gradient(145deg,#092c59,#04142f);box-shadow:inset 0 1px #fff2,0 0 13px #21bfff33}
.how-powerups article i{width:72px;height:72px}
.how-powerups article b{font-size:.95rem;color:#75eaff}
.how-powerups article p{margin:7px 0;color:#dceeff;font-size:.78rem;line-height:1.35}
.how-powerups article small{font-size:.7rem;color:#ffdf73}
.how-powerups article button{min-width:112px;height:42px;font-size:.68rem}
.how-powerups article.empty{opacity:.68}
.how-powerups article.active{border-color:#ffd95d;box-shadow:0 0 18px #ffc53466}
.how-powerups article button:disabled{opacity:.65}

.how-footer{display:grid;grid-template-columns:minmax(230px,1fr) auto minmax(170px,1fr);min-height:80px;height:auto;gap:12px}
.how-mini-bip{display:flex;align-items:center;gap:8px;min-width:0;color:#72eaff;font-size:.68rem;text-align:left}
.how-mini-bip .how-bip-sprite{width:54px}
.how-navigation{display:flex;align-items:center;justify-content:center;gap:7px}
.how-navigation>button{height:42px;min-width:100px;font-size:.7rem}
.how-navigation .how-try{width:170px}
.how-navigation>div{display:flex;gap:4px}
.how-navigation>div button{width:38px;height:34px;min-height:0;padding:0;border-radius:8px;font-size:.65rem;opacity:.58}
.how-navigation>div button.active{opacity:1;filter:brightness(1.25) drop-shadow(0 0 6px #42eaff)}
.how-footer>label{justify-self:end;white-space:nowrap}

@media(max-width:1400px){.how-dialog{width:min(1040px,calc(100vw - 32px));max-height:calc(100vh - 24px)}
.how-card.is-active{height:clamp(310px,44vh,350px);min-height:310px}
.how-card .how-scene{min-height:225px}
.how-powerups article{height:145px}
.how-card .how-copy p{font-size:.9rem}
}

@media(max-width:800px){.how-card.is-active{grid-template-columns:1fr;grid-template-rows:42px 175px auto;height:auto;max-height:none}
.how-card h3{grid-column:1}
.how-card .how-scene{grid-column:1;grid-row:2;min-height:170px}
.how-card .how-copy{grid-column:1;grid-row:3;border-left:0;border-top:1px solid #286d9a;padding:10px}
.how-powerups>div{grid-template-columns:1fr}
.how-footer{grid-template-columns:1fr auto}
.how-mini-bip{display:none}
.how-footer>label{grid-column:1/-1;justify-self:center}
.how-navigation>button{min-width:78px}
}


/* Illustrated How to Play */
.how-overlay{padding:10px;background:rgba(1,5,18,.92)}

.how-dialog{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1450px,98vw);height:min(920px,96vh);max-height:96vh;padding:0;overflow:hidden;border-color:#43dcff;background:linear-gradient(rgba(2,12,35,.88),rgba(2,7,25,.96)),url('assets-web/mahjong/backgrounds/archive-gameplay-background.webp') center/cover}

.how-header{position:relative;z-index:3;display:grid;grid-template-columns:190px 1fr 56px;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #1e85b6;background:#03132ee8}
.how-header h2{margin:0;font-size:clamp(1.7rem,3vw,2.8rem)}
.how-header p{margin:0;color:#40e5ff;font-size:clamp(.75rem,1.2vw,1.15rem);font-weight:900;letter-spacing:.06em}
.how-back{height:52px!important}
.how-header .mahjong-close{position:static;width:52px;height:52px;padding:0!important;font-size:2rem}

.how-scroll{min-height:0;overflow:auto;padding:12px 17px 8px}
.how-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1240px;margin:auto}
.how-card{position:relative;min-height:260px;padding:44px 14px 10px;border:2px solid #32d8ff;border-radius:22px;background:linear-gradient(145deg,rgba(5,43,78,.91),rgba(3,14,38,.96));box-shadow:inset 0 0 24px #17cfff22,0 0 14px #16cfff33;overflow:hidden}
.how-card.violet{border-color:#b755ff;box-shadow:inset 0 0 24px #9d35ff22,0 0 14px #8f35ff44}
.how-card.magenta{border-color:#ff57c8;box-shadow:inset 0 0 24px #ff31bd22,0 0 14px #ff37c944}
.how-card.gold{border-color:#ffd23c;box-shadow:inset 0 0 24px #ffbf2022,0 0 14px #ffc02744}
.how-number{position:absolute;left:14px;top:8px;display:grid;width:58px;height:35px;place-items:center;border:2px solid currentColor;border-radius:12px;background:#073052;color:#78edff;font-size:1.2rem}
.violet .how-number{color:#d38cff}
.magenta .how-number{color:#ff84db}
.gold .how-number{color:#ffe071}
.how-card h3{position:absolute;left:86px;right:10px;top:13px;margin:0;color:#dffbff;font-size:clamp(.86rem,1.25vw,1.12rem);white-space:nowrap}
.how-card p{margin:2px 0 0;color:#f3f8ff;font-size:.84rem;font-weight:800;text-align:center}

.how-scene{position:relative;display:flex;align-items:center;justify-content:center;height:184px;border-radius:14px;background:radial-gradient(ellipse at center,#154b783d,transparent 68%)}
.how-tile{position:relative;display:grid;width:104px;height:104px;place-items:center;border:0!important;padding:0!important;background-image:url('assets-web/mahjong/tiles/mahjong-tile-states.webp')!important;background-size:400% 300%!important;background-repeat:no-repeat!important;color:#073a55!important;filter:drop-shadow(5px 8px 5px #0009);font:inherit}
.how-tile.v1{background-position:0 0!important}
.how-tile.v2{background-position:33.333% 0!important;color:#60229a!important}
.how-tile strong{font-size:1.35rem;text-transform:lowercase}
.how-tile small{position:absolute;bottom:17px;left:18px;font-size:.55rem}
.how-tile.free{animation:how-free 1.7s ease-in-out infinite}
.ghost-stack{position:absolute;display:grid;grid-template-columns:repeat(3,75px);gap:2px;opacity:.35;transform:translateY(18px)}
.ghost-stack i{width:75px;height:70px;border-radius:10px;background:#d6d1ba;border:4px solid #405766}
.ghost-stack i:nth-child(4){grid-column:2}
.ghost-stack i:nth-child(5){grid-column:3}
.pair-scene{gap:44px}
.pair-scene em{color:#72eaff;font-size:4.5rem;font-style:normal;text-shadow:0 0 18px #31cfff;animation:question-glow 1.5s ease-in-out infinite}
.blocked-scene .how-tile{position:absolute;width:96px;height:96px}
.blocked-scene .lower.left{transform:translate(-58px,27px);filter:saturate(.65) brightness(.75)}
.blocked-scene .lower.right{transform:translate(58px,27px);filter:saturate(.65) brightness(.75)}
.blocked-scene .center{transform:translateY(-22px);filter:saturate(.7) brightness(.78)}
.blocked-scene .top{z-index:3;transform:translateY(41px);animation:none}
.how-pyramid{position:relative;width:230px;height:145px}
.how-pyramid span{position:absolute;width:49px;height:45px;border:2px solid #78dfff;border-radius:6px;background:#e6daba;box-shadow:3px 5px 0 #335068}
.how-pyramid span:nth-child(1){left:0;bottom:4px}
.how-pyramid span:nth-child(2){left:46px;bottom:4px}
.how-pyramid span:nth-child(3){left:92px;bottom:4px}
.how-pyramid span:nth-child(4){left:138px;bottom:4px}
.how-pyramid span:nth-child(5){left:184px;bottom:4px}
.how-pyramid span:nth-child(6){left:31px;bottom:45px}
.how-pyramid span:nth-child(7){left:77px;bottom:45px}
.how-pyramid span:nth-child(8){left:123px;bottom:45px}
.how-pyramid span:nth-child(9){left:169px;bottom:45px}
.how-pyramid span:nth-child(10){left:92px;bottom:87px;animation:archive-particle 2s ease-in-out infinite}
.archive-energy{display:flex;gap:7px;margin-left:24px}
.archive-energy i{width:9px;height:9px;border:1px solid #7ff5ff;transform:rotate(45deg);animation:energy-fly 1.6s ease-in-out infinite}
.archive-energy i:nth-child(2){animation-delay:.3s}
.archive-energy i:nth-child(3){animation-delay:.6s}
.how-progress{position:absolute;right:22px;bottom:12px;width:170px;height:13px;border:2px solid #53eaff;border-radius:8px;background:#020a20}
.how-progress i{display:block;width:70%;height:100%;border-radius:6px;background:linear-gradient(90deg,#06a9e4,#69f8ff);box-shadow:0 0 10px #36e9ff}

.how-bip-tip{display:flex;align-items:center;justify-content:center;gap:12px;max-width:1100px;min-height:66px;margin:10px auto 0;padding:6px 24px;border:1px solid #29cfff;border-radius:18px;background:#061b3fe8;color:#71eaff;font-weight:900}
.how-bip-sprite{flex:0 0 auto;width:56px;height:auto;aspect-ratio:713/1103;background:url('assets-web/mahjong/characters/bip-reactions.webp');background-size:400% 200%;background-position:33.333% 0;filter:drop-shadow(0 0 8px #43eaff);animation:bip-appear .45s ease-out both}
.how-footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:35px;min-height:82px;padding:9px 18px;border-top:1px solid #1f85ae;background:#03132ef2}
.how-footer .how-try{width:min(440px,48vw);height:64px;font-size:1.45rem}
.how-footer label{display:flex;align-items:center;gap:9px;color:#71e9ff;font-weight:800}
.how-footer input{width:23px;height:23px;accent-color:#18cfff}

.mahjong-training{position:absolute;z-index:10;inset:72px 18px 88px;display:none;place-content:center;justify-items:center;padding:25px;border:2px solid #42e6ff;border-radius:20px;background:linear-gradient(#061b43f5,#020b21f8),url('assets-web/mahjong/backgrounds/archive-gameplay-background.webp') center/cover;text-align:center}
.mahjong-training.open{display:grid}
.mahjong-training h3{margin:0;color:#65edff;font-size:2rem}
.mahjong-training p{min-height:30px;font-size:1.05rem}
.training-board{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin:25px}
.training-board .how-tile{cursor:pointer}
.training-board .how-tile.selected{filter:drop-shadow(0 0 22px #ffe76a);transform:translateY(-8px)}
.training-board .how-tile.matched{animation:training-match .7s forwards}
.training-board .how-tile.error{animation:tile-error .3s 2;filter:drop-shadow(0 0 17px #ff486b)}

@keyframes how-free{50%{transform:translateY(-7px);filter:drop-shadow(0 0 15px #5cecff)}
}
@keyframes question-glow{50%{opacity:.65;transform:scale(1.08)}
}
@keyframes archive-particle{60%,100%{opacity:0;transform:translate(85px,-28px) scale(.3)}
}
@keyframes energy-fly{to{opacity:0;transform:translate(65px,-20px) rotate(225deg)}
}
@keyframes bip-appear{from{opacity:0;transform:translateX(-20px)}
}
@keyframes training-match{50%{transform:translateY(-20px) scale(1.1);filter:drop-shadow(0 0 25px #63f5ff)}
to{opacity:0;transform:translateY(-35px) scale(.5)}
}

@media(max-width:1000px){.how-dialog{height:96vh}
.how-grid{grid-template-columns:1fr}
.how-card{min-height:245px}
.how-header{grid-template-columns:145px 1fr 48px}
.how-back{font-size:.75rem}
.how-footer{min-height:72px}
.how-footer .how-try{height:55px;font-size:1.15rem}
}

@media(max-height:780px){.how-dialog{height:98vh;max-height:98vh}
.how-header{padding-block:5px}
.how-header h2{font-size:1.55rem}
.how-scroll{padding-top:7px}
.how-card{min-height:225px}
.how-scene{height:155px}
.how-footer{min-height:64px}
.how-footer .how-try{height:50px}
.how-bip-tip{min-height:54px}
}

@media(prefers-reduced-motion:reduce){.how-tile.free,.pair-scene em,.how-pyramid span,.archive-energy i,.how-bip-sprite{animation:none!important}
}


/* Static illustrated help poster. These rules intentionally override the old
   card-based tutorial until its legacy markup is removed from index.html. */
.mahjong-picture-help{position:fixed!important;inset:0!important;z-index:10000!important;display:none!important;place-items:center;padding:18px!important;background:rgba(1,5,20,.88)!important;backdrop-filter:blur(8px)}

.mahjong-picture-help.open{display:grid!important}

.mahjong-picture-help__window{position:relative;width:min(1510px,96vw);max-height:96vh}

.mahjong-picture-help__image{display:block;width:100%;height:auto;max-height:96vh;margin:auto;object-fit:contain;user-select:none;filter:drop-shadow(0 0 24px rgba(38,215,255,.35)) drop-shadow(0 18px 45px rgba(0,0,0,.7))}

.mahjong-picture-help__close{position:absolute;top:16px;right:16px;z-index:2;display:grid;width:54px;height:54px;place-items:center;padding:0;border:2px solid #62eaff;border-radius:14px;background:linear-gradient(145deg,#114e8b,#061b43);color:#fff;box-shadow:inset 0 0 12px rgba(93,234,255,.35),0 0 18px rgba(33,211,255,.45);font-size:32px;font-weight:900;line-height:1;cursor:pointer}

.mahjong-picture-help__close:hover,.mahjong-picture-help__close:focus-visible{transform:scale(1.07);border-color:#fff;box-shadow:inset 0 0 14px rgba(255,255,255,.3),0 0 24px #32dfff;outline:0}

@media(max-width:800px){.mahjong-picture-help{padding:8px!important}
.mahjong-picture-help__window{width:99vw}
.mahjong-picture-help__image{max-height:98vh}
.mahjong-picture-help__close{top:8px;right:8px;width:44px;height:44px;font-size:26px}
}


/* Mission 2: Time Runner */
.runner-screen{padding:0!important;background:#010615}
.runner-stage{position:relative;width:100vw;height:100dvh;max-width:1920px;max-height:1080px;margin:auto;overflow:hidden;outline:0;aspect-ratio:16/9;background:#03102d;touch-action:none}
.runner-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.runner-hud{position:absolute;z-index:5;left:1.5%;right:1.5%;top:1.5%;display:grid;grid-template-columns:1fr minmax(320px,.8fr) 1fr;align-items:center;gap:14px;min-height:7.5%;padding:7px 12px;border:1px solid #32dfff;border-radius:17px;background:linear-gradient(180deg,#092f69e8,#030e2ce8);box-shadow:inset 0 0 18px #26dfff24,0 4px 18px #0008;color:#e9fbff}
.runner-hud>div{display:flex;align-items:center;gap:10px}
.runner-hud>div:last-child{justify-content:flex-end}
.runner-hud button,.runner-panel button{border:1px solid #4ee8ff;border-radius:10px;background:linear-gradient(#164e91,#08204e);color:#fff;font-weight:900;cursor:pointer}
.runner-hud button{height:34px;padding:0 10px}
.runner-hud b{font-size:clamp(.65rem,1vw,1rem);white-space:nowrap}
.runner-progress{position:relative;justify-content:center;height:24px;border:2px solid #34dfff;border-radius:15px;background:#02091f;overflow:hidden}
.runner-progress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#25abff,#a048ff);box-shadow:0 0 16px #34dfff}
.runner-progress span,.runner-progress b{position:relative;z-index:1}
.runner-progress b{margin-left:auto;margin-right:8px}
.runner-progress>span{margin-left:8px}
.runner-alert{position:absolute;z-index:5;top:11%;left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:12px;background:#061b46d9;color:#65edff;font-weight:900;letter-spacing:.08em;text-shadow:0 0 12px #19d8ff}
.runner-countdown{position:absolute;z-index:20;inset:0;display:none;place-items:center;color:#fff;font-size:clamp(6rem,15vw,12rem);font-weight:1000;text-shadow:0 0 28px #3ce6ff}
.runner-countdown.show{display:grid}
.runner-overlay{position:absolute;z-index:15;inset:0;display:grid;place-items:center;padding:20px;background:rgba(1,5,20,.68);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:.2s}
.runner-overlay.open{opacity:1;visibility:visible}
.runner-panel{width:min(780px,92vw);max-height:90vh;padding:clamp(20px,3vw,36px);overflow:hidden;border:2px solid #4ce7ff;border-radius:28px;background:linear-gradient(155deg,#123b78f5,#07112ff8 66%);color:#fff;text-align:center;box-shadow:0 0 45px #22cfff66}
.runner-panel h2{margin:12px 0 22px;font-size:clamp(1.5rem,3vw,2.6rem)}
.question-panel small{color:#6feaff;font-weight:900;letter-spacing:.14em}
.runner-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.runner-options button{min-height:66px;font-size:1.15rem;text-transform:uppercase}
.runner-options button.correct{border-color:#7cffbc;background:#16704f}
.runner-options button.wrong{border-color:#ff6a84;background:#79243e}
.runner-feedback{display:grid;gap:6px;min-height:34px;margin:16px 0}
.runner-feedback b{color:#7dffcf;font-size:1.2rem}
.runner-feedback span{font-weight:900}
.question-panel>button,.runner-panel>button{min-height:48px;padding:8px 20px}
.question-panel footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px;color:#82b9dd}
.question-panel footer button{width:38px;height:38px}
.runner-help{text-align:left}
.runner-help h2{text-align:center}
.runner-help li{margin:10px 0;color:#d9f7ff}
.runner-help>button{display:block;margin:20px auto 0}
.runner-panel button:hover,.runner-panel button:focus-visible,.runner-hud button:hover,.runner-hud button:focus-visible{filter:brightness(1.25);outline:2px solid #fff;outline-offset:2px}

@media(max-width:900px),(max-height:650px){.runner-hud{grid-template-columns:1fr 1fr;gap:5px;padding:5px 8px}
.runner-hud>div:first-child{grid-column:1}
.runner-hud>div:nth-child(2){grid-column:1/-1;grid-row:2;height:18px}
.runner-hud>div:last-child{grid-column:2;grid-row:1}
.runner-hud #runner-help,.runner-hud #runner-power{display:none}
.runner-panel{max-height:94vh;padding:16px}
.runner-panel h2{margin:6px 0 12px}
.runner-options button{min-height:48px}
.runner-alert{top:13%}
}


/* Runner UI atlas skins */
.runner-hud{border:0;background:linear-gradient(180deg,rgba(3,16,47,.92),rgba(1,7,25,.82));box-shadow:0 6px 20px #000a,inset 0 -2px #1abfe0}

.runner-hud button{overflow:hidden;border:0;background-color:transparent;background-image:url('assets-web/runner/ui/runner-ui-kit.webp');background-repeat:no-repeat;color:transparent;text-shadow:none;box-shadow:none}

#runner-pause{width:58px;height:58px;padding:0;background-size:960px 640px;background-position:-568px -211px}

#runner-sound,#runner-question-sound{width:58px;height:58px;padding:0;background-size:960px 640px;background-position:-655px -211px}

#runner-help{width:66px;height:58px;padding:0;background-size:960px 640px;background-position:-840px -194px}

.runner-hud button:hover,.runner-hud button:focus-visible{filter:brightness(1.28) drop-shadow(0 0 8px #35dfff);transform:scale(1.05)}

.runner-lives{display:flex;gap:3px}
.runner-lives i{display:block;width:36px;height:36px;background:url('assets-web/runner/ui/runner-ui-kit.webp') no-repeat;background-size:526px 351px;background-position:-390px -26px;filter:drop-shadow(0 0 5px #3de7ff);transition:.2s}
.runner-lives i.lost{filter:grayscale(1) brightness(.35);opacity:.5}

.runner-panel{position:relative;isolation:isolate;border:0;background:none;box-shadow:none}
.runner-panel:before{content:none}
.question-panel:before{inset:-9% -7%;background-image:url('assets-web/runner/ui/runner-ui-kit.webp');background-size:156.5% 294%;background-position:0 64%;filter:drop-shadow(0 0 28px #1bcfff)}

.runner-panel button,.runner-options button{position:relative;overflow:hidden;border:0;background:linear-gradient(#168fe0cc,#063a83dd);box-shadow:inset 0 0 0 2px #62eaff,0 0 12px #19cfff88;color:#fff;text-shadow:0 2px 2px #00194a}
.runner-panel button:before,.runner-options button:before{content:"";position:absolute;z-index:-1;inset:0;background:url('assets-web/runner/ui/runner-ui-kit.webp') 100% 86%/540% 1400% no-repeat;opacity:.94}
.runner-options button:nth-child(2n):before{background-position:100% 96%}
.runner-options button.correct{box-shadow:inset 0 0 0 3px #6dff9e,0 0 20px #32ff83}
.runner-options button.wrong{box-shadow:inset 0 0 0 3px #ff5574,0 0 20px #ff315c}

@media(max-width:900px),(max-height:650px){#runner-pause,#runner-sound{width:43px;height:43px;background-size:720px 480px}
#runner-pause{background-position:-426px -158px}
#runner-sound{background-position:-491px -158px}
.runner-lives i{width:28px;height:28px;background-size:410px 273px;background-position:-304px -20px}
}


/* Compact portal question: sentence and answers only */
#runner-question{padding:12px;overflow:hidden}

#runner-question{background:rgba(1,5,20,.88);backdrop-filter:blur(10px) brightness(.42)}

#runner-question .question-panel{display:grid;width:min(870px,94vw);max-height:none;padding:clamp(36px,5vw,58px) clamp(38px,5vw,64px);overflow:visible;place-items:stretch;border-radius:24px}

#runner-question .question-panel:before{inset:0;background:url('assets-web/runner/ui/runner-question-frame.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 22px #20d8ff) drop-shadow(0 18px 28px #000b)}

#runner-question-kicker,#runner-question .runner-feedback,#runner-question .question-panel>button,#runner-question .question-panel>footer{display:none!important}

#runner-question .question-panel h2{margin:0 0 25px;color:#fff;font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.12;text-align:center;overflow-wrap:anywhere;text-shadow:0 3px 3px #001331,0 0 12px #36dfff66}

#runner-question .runner-options{width:100%;gap:14px}

#runner-question .runner-options button{min-width:0;min-height:68px;font-size:clamp(.9rem,2vw,1.22rem)}

#runner-question .runner-options button:before{display:none}

#runner-question .runner-options button{background:linear-gradient(180deg,#168ed8,#07509b 58%,#062b69);box-shadow:inset 0 0 0 2px #69edff,inset 0 0 18px #47dfff44,0 0 12px #16bfff88}

#runner-question .runner-options button.correct{background:linear-gradient(#1a9b69,#0b6649);box-shadow:inset 0 0 0 3px #6dff9e,0 0 20px #32ff83}

#runner-question .runner-options button.wrong{background:linear-gradient(#9e3150,#681b38);box-shadow:inset 0 0 0 3px #ff5574,0 0 20px #ff315c}

@media(max-width:650px){#runner-question .question-panel{padding:24px 18px}
#runner-question .runner-options{grid-template-columns:1fr;gap:9px}
#runner-question .runner-options button{min-height:50px}
#runner-question .question-panel h2{margin-bottom:18px}
}


/* Keep every HUD control fully inside the top panel */
.runner-hud{left:1.25%;right:1.25%;grid-template-columns:minmax(250px,1fr) minmax(280px,.78fr) minmax(330px,1fr);column-gap:clamp(8px,1.1vw,20px);padding:8px clamp(12px,1.1vw,22px);overflow:visible}

.runner-hud>div{min-width:0;overflow:visible}
.runner-hud>div:first-child{justify-content:flex-start}
.runner-hud>div:last-child{padding-right:2px;white-space:nowrap}

.runner-hud button{flex:0 0 auto;background-origin:border-box;background-clip:border-box}

.runner-lives{flex:0 0 auto;overflow:visible}
.runner-lives i{flex:0 0 39px;width:39px;height:39px;background-image:url('assets-web/runner/powerups/runner-powerups.webp');background-size:400% 400%;background-position:0 33.333%;filter:drop-shadow(0 0 5px #3de7ff)}

#runner-power{min-width:0;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1250px){.runner-hud{grid-template-columns:minmax(225px,1fr) minmax(240px,.72fr) minmax(290px,1fr)}
.runner-lives i{flex-basis:32px;width:32px;height:32px}
.runner-hud b{font-size:.72rem}
#runner-help{width:56px}
}

@media(max-width:900px),(max-height:650px){.runner-hud{left:1%;right:1%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-inline:12px}
.runner-hud>div:last-child{padding-right:0}
.runner-lives i{flex-basis:28px;width:28px;height:28px;background-size:400% 400%;background-position:0 33.333%}
}


/* Uncropped HUD controls */
.runner-hud{grid-template-columns:minmax(390px,1.1fr) minmax(280px,.8fr) minmax(350px,1fr)}

#runner-pause,#runner-sound{width:62px;height:62px;padding:0;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:contain;overflow:visible}

#runner-pause{background-image:url('assets-web/runner/ui/runner-pause-button.webp')}

#runner-sound{background-image:url('assets-web/runner/ui/runner-sound-button.webp')}

#runner-help{width:clamp(118px,9vw,156px);height:48px;padding:0 16px;border:0;border-radius:0;background:transparent url('assets-web/mahjong/ui/crops/button-purple.webp') center/100% 100% no-repeat;color:#fff;font-size:clamp(.62rem,.75vw,.82rem);letter-spacing:.025em;text-shadow:0 1px 3px #19002c;white-space:nowrap;overflow:visible}

#runner-level-name{min-width:0;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1250px){.runner-hud{grid-template-columns:minmax(315px,1fr) minmax(225px,.72fr) minmax(285px,1fr)}
#runner-pause,#runner-sound{width:52px;height:52px;background-size:contain}
#runner-help{width:112px;height:43px;padding-inline:9px}
}

@media(max-width:900px),(max-height:650px){.runner-hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#runner-pause,#runner-sound{width:44px;height:44px;background-position:center;background-size:contain}
#runner-help{display:block!important;width:104px;height:40px;font-size:.58rem}
.runner-hud>div:first-child{gap:6px}
}


/* Image-only help for missions 2 and 3 */
.picture-help-overlay{position:fixed;z-index:10000;inset:0;display:none;place-items:center;padding:20px;background:rgba(1,5,20,.88);backdrop-filter:blur(8px)}

.picture-help-overlay.open{display:grid}
.picture-help-window{position:relative;width:fit-content;max-width:96vw;max-height:94vh}
.picture-help-window img{display:block;width:auto;height:auto;max-width:96vw;max-height:94vh;margin:auto;object-fit:contain;user-select:none;filter:drop-shadow(0 0 24px rgba(38,215,255,.32)) drop-shadow(0 18px 45px rgba(0,0,0,.72))}

.picture-help-close{position:absolute;z-index:2;top:14px;right:14px;display:grid;width:56px;height:56px;place-items:center;padding:0;border:2px solid #62eaff;border-radius:14px;background:linear-gradient(145deg,#114e8b,#061b43);color:#fff;box-shadow:inset 0 0 12px rgba(93,234,255,.35),0 0 18px rgba(33,211,255,.45);font-size:34px;font-weight:900;line-height:1;cursor:pointer}
.picture-help-close:hover,.picture-help-close:focus-visible{transform:scale(1.07);border-color:#fff;outline:0;box-shadow:0 0 24px #32dfff}

.battle-how-button{margin-left:auto;padding:11px 18px;border:1px solid #c66aff;border-radius:12px;background:linear-gradient(#7b31b9,#36105f);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 0 15px #a94cff66}

@media(max-width:800px){.picture-help-overlay{padding:8px}
.picture-help-window{width:99vw}
.picture-help-window img{max-height:98vh}
.picture-help-close{top:8px;right:8px;width:44px;height:44px;font-size:27px}
.battle-how-button{padding:9px 11px;font-size:.7rem}
}


/* Mission 3: tactical battle */
.battle-screen{padding:0!important;background:#050317}
.battle-stage{position:relative;width:100vw;height:100dvh;max-width:1920px;max-height:1080px;margin:auto;overflow:hidden;background:url('assets-web/battle/backgrounds/chronos-arena-background-symmetric.webp') center/cover no-repeat;color:#fff}
.battle-stage:after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(#03061acc,transparent 18%,transparent 78%,#03061add);pointer-events:none}
.battle-hud{position:absolute;z-index:5;top:1.2%;left:1.3%;right:1.3%;height:8.5%;display:grid;grid-template-columns:1fr .8fr 1fr;align-items:center;gap:12px;padding:7px 14px;border:1px solid #d2a83f;border-radius:16px;background:linear-gradient(180deg,#09112df2,#030718e8);box-shadow:inset 0 -2px #5bdfff55,0 5px 18px #0009}
.battle-hud>div{display:flex;align-items:center;gap:10px;min-width:0}
.battle-hud>div:nth-child(2){justify-content:center}
.battle-hud>div:last-child{justify-content:flex-end}
.battle-hud button{flex:0 0 auto;min-height:40px;border:1px solid #dfb84f;border-radius:10px;background:linear-gradient(#4e3476,#1f103d);color:#fff;font-weight:900;cursor:pointer}
.battle-hud .back-button{position:static}
.battle-impulse{width:min(210px,13vw);height:15px;border:1px solid #55eaff;border-radius:9px;background:#020718;overflow:hidden}
.battle-impulse i{display:block;width:0;height:100%;background:linear-gradient(90deg,#24bfff,#a854ff);transition:.3s}
.battle-main{position:absolute;z-index:2;left:1%;right:1%;top:10.5%;bottom:12.5%;display:grid;grid-template-columns:11% minmax(0,60%) minmax(200px,29%);align-items:center}
.battle-commanders{align-self:end;text-align:center}
.battle-kosmo,.battle-bip,.battle-chronos{background-repeat:no-repeat;filter:drop-shadow(0 0 15px #49dfff)}
.battle-kosmo{height:clamp(150px,27vh,290px);background-image:url('assets-web/battle/characters/friendly-unit-states.webp');background-size:400% 300%;background-position:0 0}
.battle-bip{height:clamp(90px,16vh,170px);margin-top:-45px;background-image:url('assets-web/battle/characters/friendly-unit-states.webp');background-size:400% 300%;background-position:33.333% 0}
.battle-commanders p{padding:7px;border:1px solid #42dbff;border-radius:10px;background:#061735e8;color:#8befff;font-size:.7rem}








.battle-unit.friendly{background-image:url('assets-web/battle/characters/friendly-unit-states.webp');background-position:66.666% 0}
.battle-unit.enemy{background-image:url('assets-web/battle/characters/enemy-and-boss-states.webp');background-position:0 0}
.battle-unit.guardian{filter:drop-shadow(0 0 12px #ffd83d)}
.battle-unit.shielded:after{content:"";position:absolute;inset:-8%;border:3px solid #62eaff;border-radius:50%;box-shadow:0 0 16px #42dfff}
.battle-unit.selected{transform:translateY(-10%) scale(1.08);filter:drop-shadow(0 0 15px #6df5ff)}
.battle-boss{height:100%;display:grid;align-content:center;justify-items:center}
.battle-chronos{width:min(27vw,390px);height:min(52vh,560px);background-image:url('assets-web/battle/characters/enemy-and-boss-states.webp');background-size:400% 300%;background-position:0 50%;filter:drop-shadow(0 0 20px #a73eff)}
.battle-chronos[data-state="attack"]{background-position:33.333% 50%}
.battle-chronos[data-state="core"]{background-position:66.666% 50%}
.battle-boss h2{margin:-45px 0 8px;color:#e29bff;text-shadow:0 0 14px #aa2cff}
.boss-bars{display:grid;width:75%;gap:6px}
.boss-bars i{display:block;height:12px;border-radius:8px;transition:.35s}
.boss-bars i:first-child{background:linear-gradient(90deg,#ff314f,#b7167b)}
.boss-bars i:last-child{background:linear-gradient(90deg,#a744ff,#5c1db5)}
.battle-abilities{position:absolute;z-index:5;left:1.5%;right:1.5%;bottom:1%;height:10%;display:flex;justify-content:center;align-items:center;gap:10px;padding:7px 15px;border:1px solid #5e59b2;border-radius:16px;background:#050b25ed}
.battle-abilities button{position:relative;display:grid;grid-template-columns:46px 1fr 24px;align-items:center;min-width:175px;height:62px;border:1px solid #4cdfff;border-radius:12px;background:#091b42;color:#fff;font-size:.68rem;font-weight:900;cursor:pointer}
.battle-abilities button i{height:44px;background:url('assets-web/battle/abilities/battle-ability-icons.webp');background-size:400% 400%}
.battle-abilities button:nth-child(2) i{background-position:33.333% 0}
.battle-abilities button:nth-child(3) i{background-position:66.666% 0}
.battle-abilities button:nth-child(4) i{background-position:100% 0}
.battle-abilities button:after{content:attr(data-tip);position:absolute;bottom:110%;left:50%;width:220px;padding:8px;border:1px solid #53eaff;border-radius:8px;background:#03112ef5;opacity:0;pointer-events:none;transform:translateX(-50%)}
.battle-abilities button:hover:after,.battle-abilities button:focus-visible:after{opacity:1}
.battle-abilities button:disabled{filter:grayscale(1);opacity:.45}
.battle-abilities>strong{min-width:130px;color:#6feaff;text-align:center}
.battle-modal{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:15px;background:#020516cc;backdrop-filter:blur(7px);opacity:0;visibility:hidden}
.battle-modal.open{opacity:1;visibility:visible}
.battle-dialog{width:min(820px,94vw);max-height:92vh;padding:28px;border:2px solid #51e6ff;border-radius:25px;background:linear-gradient(155deg,#102f69f5,#070b25fb),url('assets-web/battle/ui/battle-ui-kit.webp') center/cover;color:#fff;text-align:center;box-shadow:0 0 40px #24cfff66}
.battle-dialog h2{margin:0 0 8px;color:#72ebff}
.battle-words{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:22px 0}
.battle-words button{min-width:82px;padding:14px;border:1px solid #5276a8;border-radius:9px;background:#0b1d42;color:#fff;font:inherit;cursor:pointer}
.battle-words button.correct{border-color:#68ffbb;background:#126447}
.battle-words button.wrong{animation:tile-error .25s 2;border-color:#ff5574}
.battle-correction{display:flex;align-items:center;justify-content:center;gap:10px}
.battle-correction input{width:230px;padding:13px;border:2px solid #52dfff;border-radius:10px;background:#020a20;color:#fff;text-transform:uppercase}
.battle-correction input.wrong{border-color:#ff5072}
.battle-dialog button{padding:12px 17px;border:1px solid #5ceaff;border-radius:10px;background:linear-gradient(#174e91,#071d4b);color:#fff;font-weight:900;cursor:pointer}
.pause-dialog,.result-dialog{display:grid;gap:10px;width:min(480px,92vw)}
#battle-result-stars{color:#ffd43d;font-size:2.6rem}
.battle-how-button{white-space:nowrap}
@keyframes battle-danger{to{filter:brightness(1.45) saturate(1.5)}
}

@media(max-width:1400px){
.battle-chronos{width:270px;height:400px}
.battle-abilities button{min-width:145px;grid-template-columns:38px 1fr 20px}
.battle-hud{font-size:.75rem}
.battle-how-button{padding-inline:9px}
.battle-kosmo{height:190px}
.battle-bip{height:115px}
}

@media(max-width:900px),(max-height:700px){.battle-hud{grid-template-columns:1fr 1fr;height:11%;padding:4px 8px}
.battle-hud>div:nth-child(2){position:absolute;left:35%;right:35%;bottom:3px}
.battle-hud>div:last-child{grid-column:2}
.battle-main{top:12%;bottom:14%;grid-template-columns:8% 67% 25%}
.battle-commanders{display:none}
.battle-chronos{width:210px;height:310px}
.battle-abilities{height:12%;gap:5px}
.battle-abilities button{min-width:0;flex:1;height:54px;grid-template-columns:32px 1fr 18px;font-size:.55rem}
.battle-abilities button i{height:34px}
.battle-abilities>strong{min-width:82px;font-size:.65rem}
}


/* Battle layout: HUD 9%, arena 79%, abilities 12%; layers never overlap. */
.battle-stage{display:grid;grid-template-rows:9% minmax(0,79%) 12%;overflow:hidden}

.battle-stage:after{z-index:0}

.battle-hud,.battle-main,.battle-abilities{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;min-height:0}

.battle-hud{grid-row:1;z-index:8;margin:7px 14px 2px;padding:4px 10px;background:url('assets-web/battle/ui/battle-ui-kit.webp') 2% 1%/145% auto no-repeat}

.battle-hud button{width:48px;height:48px;min-height:0;padding:0;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;color:transparent}

.battle-hud .back-button{background-image:url('assets-web/battle/ui/buttons/back.webp')}

#battle-pause{background-image:url('assets-web/battle/ui/buttons/pause.webp')}

#battle-sound{background-image:url('assets-web/battle/ui/buttons/sound-on.webp')}

#battle-help{background-image:url('assets-web/battle/ui/buttons/help.webp')}

.battle-hud button:hover,.battle-dialog button:hover{filter:brightness(1.12) drop-shadow(0 0 7px #67eaff)}

.battle-hud button:active,.battle-dialog button:active{transform:scale(.97)}

.battle-hud button:focus-visible,.battle-dialog button:focus-visible,.battle-abilities button:focus-visible{outline:3px solid #fff;outline-offset:2px}

.battle-main{grid-row:2;z-index:2;display:grid;grid-template-columns:minmax(120px,14%) minmax(0,56%) minmax(220px,30%);align-items:center;gap:0;padding:5px 1.2% 9px}















.battle-unit.friendly{filter:drop-shadow(0 0 8px #42eaff)}

.battle-unit.enemy{filter:drop-shadow(0 0 8px #ff397d)}

.battle-unit.selected{transform:translateY(-7%) scale(1.04);filter:drop-shadow(0 0 16px #87ffff)}

.battle-unit.frozen{filter:hue-rotate(145deg) brightness(1.35) drop-shadow(0 0 13px #7eeaff)}

.battle-commanders{height:100%;align-self:center;display:grid;align-content:end;overflow:visible}

.battle-kosmo{height:min(39dvh,390px);background-size:400% 300%;background-position:0 0}

.battle-bip{justify-self:center;width:min(10.5dvh,105px);height:min(14dvh,140px);aspect-ratio:3/4;margin-top:min(-3dvh,-18px);background-size:400% 300%;background-position:33.333% 0}

.battle-boss{height:100%;align-content:center;overflow:visible}

.battle-chronos{width:min(27vw,390px);height:min(54dvh,540px);max-height:72%;background-size:400% 300%}

.battle-boss h2{margin:-22px 0 5px}
.boss-bars{width:min(82%,330px)}

.battle-abilities{grid-row:3;z-index:8;margin:2px 14px 7px;padding:5px 12px;gap:8px;background:url('assets-web/battle/ui/battle-ui-kit.webp') 50% 99%/120% auto no-repeat;border:0}

.battle-abilities button{min-width:0;max-width:220px;flex:1;height:min(8.2dvh,78px);border:0;border-radius:0;background:url('assets-web/battle/ui/buttons/button-blue.webp') center/100% 100% no-repeat}

.battle-abilities button:nth-child(2){background-image:url('assets-web/battle/ui/buttons/button-purple.webp')}

.battle-abilities button:nth-child(3){background-image:url('assets-web/battle/ui/buttons/button-gold.webp')}

.battle-abilities button:nth-child(4){background-image:url('assets-web/battle/ui/buttons/button-red.webp')}

.battle-abilities button:active{transform:scale(.97)}
.battle-abilities button:disabled{filter:grayscale(1);opacity:.42}

.battle-dialog button{border:0;background:transparent url('assets-web/battle/ui/buttons/button-blue.webp') center/100% 100% no-repeat}

.result-dialog{background:rgba(5,10,34,.95) url('assets-web/battle/ui/battle-result-panels.webp') center/contain no-repeat}

@media(max-width:1400px){.battle-main{grid-template-columns:13% 58% 29%}
.battle-kosmo{height:min(34dvh,270px)}
.battle-bip{height:min(14dvh,120px)}
.battle-chronos{width:min(25vw,300px);height:min(49dvh,410px)}
.battle-abilities button{grid-template-columns:36px 1fr 18px;font-size:.57rem}
}

@media(max-height:740px){.battle-hud{margin-top:3px}
.battle-hud button{width:40px;height:40px}
.battle-main{grid-template-columns:12% 61% 27%;padding-block:2px 6px}
.battle-kosmo{height:29dvh}
.battle-bip{height:12dvh}
.battle-chronos{height:43dvh}
.battle-abilities{margin-bottom:3px}
.battle-abilities button{height:8dvh}
.battle-abilities>strong{min-width:95px;font-size:.6rem}
}


/* Final battle arena: one contiguous isometric 6x6 object. */











.battle-unit.friendly{background-image:url('assets-web/battle/characters/friendly-unit-states.webp');background-position:66.666% 0;filter:drop-shadow(0 0 7px #34eaff)}
.battle-unit.enemy{background-image:url('assets-web/battle/characters/enemy-and-boss-states.webp');background-position:0 0;filter:drop-shadow(0 0 7px #ff397d)}
.battle-unit.selectable{filter:drop-shadow(0 0 11px #66f7ff)}
.battle-unit.selected{transform:translateY(-7px) scale(1.04);filter:drop-shadow(0 0 17px #8fffff)}
.battle-unit.selected:after{content:"";position:absolute;inset:46% 8% 3%;border:3px solid #63f4ff;border-radius:50%;box-shadow:0 0 12px #52ecff}

.battle-boss{grid-template-columns:minmax(150px,1fr) minmax(125px,.72fr);align-items:center;align-content:center}
.battle-chronos{grid-column:1}
.battle-boss-status{grid-column:2;align-self:center;width:100%;padding:10px 4px}
.battle-boss-status h2{margin:0 0 14px;color:#efa2ff}
.battle-boss-status label{display:flex;justify-content:space-between;margin:7px 0 3px;color:#d9e9ff;font-size:.72rem;font-weight:900}
.boss-bar{position:relative;height:14px;border:1px solid #7ca8d5;border-radius:8px;background:#020718;overflow:hidden}
.boss-bar i{display:block;height:100%;transition:width .42s ease}
.boss-bar.armor i{background:linear-gradient(90deg,#ff3156,#d02b98)}
.boss-bar.core i{background:linear-gradient(90deg,#a744ff,#5521bf)}
.boss-bar span{display:none;position:absolute;inset:0;place-items:center;font-size:.48rem}
.boss-bar.protected{filter:grayscale(1) brightness(.52)}
.boss-bar.protected span{display:grid}
.battle-impulse i.ready{animation:impulse-ready .65s infinite alternate}

.battle-fx{position:absolute;z-index:30;inset:0;pointer-events:none;display:grid;place-items:center;color:#fff;font-size:clamp(1rem,2vw,2rem);font-weight:1000;text-shadow:0 0 12px currentColor;opacity:0;background-image:url('assets-web/battle/effects/battle-effects.webp');background-size:400% 400%;background-repeat:no-repeat}
.battle-fx.player-shot.active{animation:player-shot .72s ease-in-out}
.battle-fx.boss-shot.active{animation:boss-shot .72s ease-in-out}
.battle-chronos.hit{animation:boss-hit .42s}
.battle-chronos.armor-break{animation:armor-break .65s}
.battle-chronos.battle-defeated{animation:boss-defeated .8s forwards}
.battle-stage.friendly-hit{animation:friendly-hit .35s}
.battle-unit.battle-move,.battle-unit.battle-enemy-move{z-index:20;animation:battle-piece-move 380ms cubic-bezier(.22,.72,.25,1) both;pointer-events:none}
.battle-unit.battle-move.battle-capture-move,.battle-unit.battle-enemy-move.battle-capture-move{animation-name:battle-piece-capture}

.battle-dialog h2{color:#7df2ff;text-shadow:0 0 10px #2ddfff}
.battle-words{width:94%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-content:stretch;gap:1.25%;margin:clamp(28px,5vh,52px) auto 0}
.battle-words button{min-width:0;width:100%;padding:10px 2px;border:0;background:none!important;box-shadow:none;color:#fff;font-size:clamp(.58rem,1.1vw,.9rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-correction{margin-top:clamp(38px,7vh,70px)}
.battle-correction button{background-image:url('assets-web/battle/ui/buttons/button-confirm.webp')}
.pause-dialog,.result-dialog{min-height:0;padding:60px;background-image:url('assets-web/battle/ui/battle-result-panels.webp')}

.battle-hud .battle-bridge-button{width:118px;height:42px;padding:0 10px;background-image:url('assets-web/battle/ui/buttons/button-blue.webp');background-size:100% 100%;color:#fff;font-size:.62rem}
.battle-hud #battle-help{width:118px;height:42px;padding:0 9px;background-image:url('assets-web/battle/ui/buttons/button-purple.webp');background-size:100% 100%;color:#fff;font-size:.6rem}
.battle-hud>div:first-child{min-width:300px}
.battle-hud>div:last-child{gap:7px}

@keyframes player-shot{0%{opacity:0;background-position:0 66%;transform:translateX(-22%)}
35%{opacity:1}
75%{opacity:1;transform:translateX(22%)}
100%{opacity:0;transform:translateX(27%)}
}
@keyframes boss-shot{0%{opacity:0;background-position:33% 66%;transform:translateX(25%)}
35%{opacity:1}
75%{opacity:1;transform:translateX(-24%)}
100%{opacity:0;transform:translateX(-28%)}
}
@keyframes boss-hit{50%{filter:brightness(2.2) drop-shadow(0 0 30px #ff58de);transform:translateX(5px)}
}
@keyframes armor-break{50%{filter:brightness(2.5) saturate(2);transform:scale(1.06)}
}
@keyframes friendly-hit{50%{filter:brightness(1.6) sepia(.4)}
}
@keyframes battle-piece-move{0%{transform:translate(calc(-50% + var(--move-from-x)),calc(-57% + var(--move-from-y))) scale(1)}55%{filter:brightness(1.16) drop-shadow(0 9px 8px rgba(0,0,0,.72)) drop-shadow(0 0 14px rgba(94,239,255,.82))}100%{transform:translate(-50%,-57%) scale(1)}}
@keyframes battle-piece-capture{0%{transform:translate(calc(-50% + var(--move-from-x)),calc(-57% + var(--move-from-y))) scale(1)}50%{transform:translate(calc(-50% + var(--move-half-x)),calc(-57% + var(--move-half-y) - 14px)) scale(1.08)}100%{transform:translate(-50%,-57%) scale(1)}}
@keyframes impulse-ready{to{filter:brightness(1.8);box-shadow:0 0 15px #8c5cff}
}
@keyframes boss-defeated{to{opacity:.2;filter:brightness(2) blur(3px);transform:scale(.82)}
}

@media(max-width:1450px){.battle-main{grid-template-columns:12% 59% 29%}
.battle-boss{grid-template-columns:1fr 120px}
.battle-hud{font-size:.66rem}
.battle-hud .battle-bridge-button,.battle-hud #battle-help{width:100px}
.battle-hud>div:first-child{min-width:265px}
}

@media(max-height:740px){

.battle-dialog{min-height:64vh;padding:45px 75px}
.battle-words{margin-top:26px}
.battle-correction{margin-top:34px}
.battle-boss-status{padding:3px}
.battle-boss-status h2{margin-bottom:5px}
.battle-hud .battle-bridge-button,.battle-hud #battle-help{height:37px}
}


/* Screenshot correction pass: keep the arena and task controls inside their frames. */
.battle-correction[hidden]{display:none!important}

.battle-main{grid-template-columns:minmax(150px,16%) minmax(0,52%) minmax(260px,32%);overflow:hidden}

.battle-commanders{position:relative;z-index:4;width:100%;justify-items:center;overflow:hidden}

.battle-kosmo{width:min(15vw,230px)}

.battle-boss{position:relative;z-index:4;width:100%;grid-template-columns:minmax(130px,58%) minmax(105px,42%);overflow:hidden}

.battle-chronos{grid-column:1;width:min(18vw,220px);height:min(47dvh,470px)}

.battle-boss-status{min-width:0}

.battle-words{align-items:stretch}

.battle-words button{display:flex;align-items:center;justify-content:center;min-height:clamp(54px,8vh,78px);padding:2px;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}

.battle-words:has(>:nth-child(6):last-child)>:first-child{grid-column-start:1}

.battle-words:has(>:nth-child(5):last-child)>:first-child{grid-column-start:2}

.battle-words:has(>:nth-child(4):last-child)>:first-child{grid-column-start:3}

.battle-words:has(>:nth-child(3):last-child)>:first-child{grid-column-start:3}

@media(max-width:1450px){.battle-main{grid-template-columns:minmax(135px,16%) minmax(0,52%) minmax(235px,32%)}
.battle-boss{grid-template-columns:minmax(120px,58%) minmax(100px,42%)}
.battle-chronos{width:min(17vw,190px);height:min(44dvh,400px)}
}

@media(max-height:740px){.battle-main{grid-template-columns:minmax(120px,16%) minmax(0,52%) minmax(210px,32%)}
.battle-kosmo{width:min(14vw,170px);height:27dvh}
.battle-chronos{width:min(16vw,175px);height:39dvh}
}


/* Requested battle composition: offset board, floating Bip and full-width Chronos. */
.battle-main{grid-template-columns:minmax(170px,17%) minmax(0,51%) minmax(270px,32%)}

.battle-commanders{position:relative;align-content:end;overflow:visible}

.battle-bip{position:absolute;z-index:6;left:0;top:0;width:min(21dvh,210px);height:min(28dvh,280px);margin:0;animation:bip-hover 2.8s ease-in-out infinite;filter:drop-shadow(0 12px 12px #0009) drop-shadow(0 0 18px #51eaff)}

.battle-boss{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-content:stretch;justify-items:stretch;padding:0 1%;overflow:visible}

.battle-chronos{grid-column:1;grid-row:1;width:100%;height:100%;max-height:none;background-size:400% 300%;background-repeat:no-repeat;background-position:0 50%;filter:drop-shadow(0 0 25px #a73eff)}

.battle-boss-status{grid-column:1;grid-row:2;width:min(94%,520px);justify-self:center;align-self:end;padding:4px 8px 8px}

.battle-boss-status h2{margin:0 0 5px}
.battle-boss-status label{margin-top:3px}
.boss-bar{height:12px}

@keyframes bip-hover{0%,100%{transform:translateY(0) rotate(-1deg)}
50%{transform:translateY(-16px) rotate(1deg)}
}


/* Task panel: no empty slots; every word owns a tile, correction lives below. */
/* Legacy grammar layout disabled after switching to battle-grammar-panel-clean-v2.png.
.battle-dialog:not(.pause-dialog):not(.result-dialog){position:relative;width:min(920px,94vw);min-height:0;max-height:88vh;padding:clamp(45px,6vh,70px) clamp(55px,6vw,90px) clamp(38px,5vh,58px);display:flex;flex-direction:column;align-items:center;overflow:hidden}
.battle-dialog:not(.pause-dialog):not(.result-dialog)::before{content:"";position:absolute;z-index:0;inset:11% 6.5% 7%;border-radius:18px;background:linear-gradient(180deg,rgba(5,18,48,.98),rgba(2,8,29,.98));box-shadow:inset 0 0 28px rgba(36,51,111,.38)}
.battle-dialog:not(.pause-dialog):not(.result-dialog)>*{position:relative;z-index:1}
.battle-dialog:not(.pause-dialog):not(.result-dialog) h2{margin:0}
#battle-grammar-instruction{position:relative;z-index:3;margin:12px auto 0;color:#e6f8ff;font-size:clamp(17px,1.35vw,22px);font-weight:600;line-height:1.3;text-align:center;text-decoration:none;border:0}
#battle-grammar-instruction::before,#battle-grammar-instruction::after{content:none}

.battle-words{position:relative;z-index:2;width:min(84%,820px)!important;display:flex!important;flex-wrap:nowrap!important;justify-content:center;align-items:center;gap:12px!important;margin:24px auto 0!important;padding:0!important}

.battle-words:before{content:none}

.battle-words.words-short{width:min(90%,980px);display:flex;flex-wrap:nowrap}
.battle-words.words-medium{width:min(88%,850px);display:grid;grid-template-columns:repeat(5,minmax(105px,145px));gap:10px 12px}
.battle-words.words-long{width:min(90%,900px);display:grid;grid-template-columns:repeat(6,minmax(90px,130px));gap:9px 10px}
.battle-words:not(.words-short):not(.words-medium):not(.words-long){width:min(90%,900px);display:grid;grid-template-columns:repeat(6,minmax(90px,130px));gap:9px 10px}
.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(3):last-child),.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(4):last-child),.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(5):last-child),.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(6):last-child),.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(7):last-child){width:min(90%,980px);display:flex;flex-wrap:nowrap}
.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(8):last-child),.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(9):last-child),.battle-words:not(.words-short):not(.words-medium):not(.words-long):has(>:nth-child(10):last-child){width:min(88%,850px);display:grid;grid-template-columns:repeat(5,minmax(105px,145px));gap:10px 12px}

.battle-words button{position:relative;isolation:isolate;flex:1 1 115px;min-width:115px;max-width:160px;width:auto;height:54px;min-height:54px;margin:0;padding:0 14px!important;display:inline-grid;place-items:center;border:1px solid rgba(196,119,255,.78);border-radius:8px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);background:radial-gradient(circle at 50% 20%,rgba(193,113,255,.22),transparent 54%),linear-gradient(180deg,rgba(105,51,155,.98),rgba(46,21,88,.98))!important;box-shadow:inset 0 2px rgba(228,174,255,.2),inset 0 -4px 6px rgba(18,4,42,.55),0 5px 7px rgba(0,0,0,.48),0 0 9px rgba(165,74,255,.26);color:#fff;font-size:clamp(14px,1.15vw,18px);font-weight:900;line-height:1;text-align:center;text-shadow:0 2px 2px rgba(0,0,0,.9),0 0 5px rgba(255,255,255,.22);white-space:nowrap;cursor:pointer;overflow:hidden;transform:none;transition:transform 150ms ease,filter 150ms ease,box-shadow 150ms ease}
.battle-words button::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:4px;border:1px solid rgba(222,169,255,.22);border-radius:5px;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.battle-words button::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:8px;right:8px;bottom:3px;height:2px;background:linear-gradient(90deg,transparent,rgba(195,102,255,.8),rgba(84,225,255,.6),transparent);opacity:.65}
.battle-words button:hover{transform:translateY(-3px);filter:brightness(1.14);box-shadow:inset 0 2px rgba(238,201,255,.26),inset 0 -4px 6px rgba(18,4,42,.5),0 7px 10px rgba(0,0,0,.52),0 0 13px rgba(177,82,255,.68)}
.battle-words button:active{transform:translateY(0) scale(.97)}
.battle-words button.long-word{max-width:180px;font-size:clamp(12px,1vw,16px)}
.battle-words button.wrong{transform:none;border-color:rgba(255,87,113,.95);background:radial-gradient(circle at 50% 20%,rgba(255,111,133,.22),transparent 54%),linear-gradient(180deg,rgba(159,44,67,.98),rgba(83,15,39,.98))!important;box-shadow:inset 0 2px rgba(255,190,199,.2),inset 0 -4px 6px rgba(49,2,14,.55),0 5px 7px rgba(0,0,0,.48),0 0 13px rgba(255,47,94,.72);animation:battle-word-error 260ms ease 2}
.battle-words button.correct{transform:none;border-color:rgba(100,239,255,.96);background:radial-gradient(circle at 50% 20%,rgba(101,239,255,.23),transparent 54%),linear-gradient(180deg,rgba(36,116,151,.98),rgba(16,50,100,.98))!important;box-shadow:inset 0 2px rgba(187,250,255,.22),inset 0 -4px 6px rgba(2,29,63,.5),0 5px 7px rgba(0,0,0,.48),0 0 14px rgba(62,225,255,.8);filter:none}
.battle-words button.error-found{border-color:#ff657d;background:radial-gradient(circle at 50% 20%,rgba(255,114,133,.24),transparent 55%),linear-gradient(180deg,rgba(159,45,68,.98),rgba(79,14,37,.98))!important;box-shadow:inset 0 2px rgba(255,202,209,.18),inset 0 -4px 6px rgba(52,2,18,.5),0 0 14px rgba(255,60,101,.76);filter:none}
.battle-grammar.is-correcting .battle-words button:not(.error-found){opacity:.55;filter:saturate(.7);pointer-events:none}
@keyframes battle-word-error{0%,100%{translate:0}35%{translate:-4px 0}70%{translate:4px 0}}

.battle-words:has(>:nth-child(n))>:first-child{grid-column-start:auto}

.battle-grammar-steps{width:min(78%,680px);height:42px;margin:24px auto 0;display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;gap:10px}
.grammar-step{display:flex;align-items:center;justify-content:center;gap:8px;color:#7287aa;font-size:.75rem}.grammar-step span{display:grid;width:28px;height:28px;place-items:center;border:1px solid #52658d;border-radius:50%}.grammar-step.active{color:#7ef3ff}.grammar-step.active span{border-color:#5ceeff;background:#126482;box-shadow:0 0 10px #4deaff}.grammar-step.completed{color:#9cf8da}.grammar-step.completed span{border-color:#57e9ae;background:#126b55}.battle-grammar-steps>i{height:2px;background:linear-gradient(90deg,#42ddff,#574c9b)}
.battle-correction{position:relative;z-index:4;width:min(82%,760px);min-height:76px;margin:22px auto 0;padding:10px 16px;display:grid;grid-template-columns:minmax(105px,auto) 28px minmax(220px,1fr) 175px;align-items:center;gap:14px;background:rgba(2,8,29,.92);border:1px solid rgba(104,95,190,.62);border-radius:15px;box-shadow:0 12px 24px rgba(0,0,0,.4),inset 0 0 18px rgba(62,40,135,.25)}
#battle-error-word{min-width:100px;color:#ff899a;font-size:19px;font-weight:900;text-align:right;text-shadow:0 0 8px rgba(255,70,103,.45)}
.battle-correction .correction-arrow{color:#d8e9ff;font-size:22px;text-align:center}
#battle-replacement{width:100%;height:52px;min-width:0;padding:0 16px;border:2px solid #6fe9ff;border-radius:10px;background:rgba(1,7,24,.98);color:#fff;font-size:19px;font-weight:700;text-transform:none}
#battle-correct-submit{width:175px;height:52px;margin:0;padding:0 18px;border:0;background:transparent url('assets-web/battle/ui/buttons/button-confirm.webp') center/100% 100% no-repeat;color:#fff;font-weight:900}
#battle-grammar-feedback{position:relative;width:min(82%,760px);min-height:24px;left:auto;right:auto;bottom:auto;margin:9px auto 0;color:#8df4ff;text-align:center}

@media(max-width:1450px){.battle-main{grid-template-columns:minmax(145px,17%) minmax(0,51%) minmax(230px,32%)}
.battle-bip{width:min(19dvh,175px);height:min(26dvh,235px)}
.battle-chronos{width:100%;height:100%}
}

@media(max-height:740px){
.battle-bip{width:min(18dvh,150px);height:min(25dvh,205px)}
.battle-dialog:not(.pause-dialog):not(.result-dialog){padding-block:42px}
.battle-words{margin-top:18px}
.battle-grammar-steps{margin-top:16px}.battle-correction{margin-top:14px}
}
*/

/* Canonical grammar window for mission 3. */
.battle-dialog:not(.pause-dialog):not(.result-dialog){position:relative;width:min(1080px,92vw,156.35vh);height:auto;aspect-ratio:1672/941;min-height:0;max-height:88vh;margin:0;padding:0;border:0;border-radius:0;background:transparent url('assets-web/battle/ui/battle-grammar-panel-clean-v2.webp') center/100% 100% no-repeat;box-shadow:none;overflow:hidden}
.battle-dialog:not(.pause-dialog):not(.result-dialog)::before{content:none}
.battle-grammar-content{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.battle-grammar-layout{position:absolute;z-index:3;left:9%;right:7%;top:8%;bottom:7%;display:grid;grid-template-rows:14% 10% minmax(70px,1fr) 9% auto auto;align-items:center;background:transparent;overflow:hidden}
.battle-grammar-layout.is-finding{grid-template-rows:14% 12% minmax(90px,1fr) 13%}
.battle-grammar-layout h2{grid-row:1;align-self:center;margin:0;padding:0 11% 0 14%;color:#75efff;font-size:clamp(23px,2vw,34px);font-weight:1000;line-height:1;text-align:center;text-shadow:0 0 10px rgba(52,220,255,.82),0 3px 3px rgba(0,0,0,.78)}
#battle-grammar-instruction{grid-row:2;position:relative;align-self:end;margin:0;padding:0;color:#eef8ff;font-size:clamp(16px,1.35vw,21px);font-weight:700;line-height:1.25;text-align:center;text-decoration:none;border:0}
#battle-grammar-instruction::before,#battle-grammar-instruction::after{content:none}
.battle-words,.battle-words.words-short,.battle-words.words-medium,.battle-words.words-long,.battle-words:not(.words-short):not(.words-medium):not(.words-long){grid-row:3;position:relative;align-self:center;width:min(88%,870px);display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:12px;margin:0 auto;padding:10px 0;overflow:visible}
.battle-words::before{content:none}.battle-words button{position:relative;isolation:isolate;flex:1 1 115px;min-width:105px;max-width:165px;width:auto;height:54px;min-height:54px;margin:0;padding:0 13px;display:inline-grid;place-items:center;border:1px solid rgba(196,119,255,.78);border-radius:8px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);background:radial-gradient(circle at 50% 20%,rgba(193,113,255,.22),transparent 54%),linear-gradient(180deg,rgba(105,51,155,.98),rgba(46,21,88,.98));box-shadow:inset 0 2px rgba(228,174,255,.2),inset 0 -4px 6px rgba(18,4,42,.55),0 5px 7px rgba(0,0,0,.48),0 0 9px rgba(165,74,255,.26);color:#fff;font-size:clamp(14px,1.15vw,18px);font-weight:900;line-height:1;text-align:center;text-shadow:0 2px 2px rgba(0,0,0,.9);white-space:nowrap;cursor:pointer;overflow:hidden;transform:none;transition:transform 150ms ease,filter 150ms ease,box-shadow 150ms ease}
.battle-words button::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:4px;border:1px solid rgba(222,169,255,.22);border-radius:5px;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}.battle-words button::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:8px;right:8px;bottom:3px;height:2px;background:linear-gradient(90deg,transparent,rgba(195,102,255,.8),rgba(84,225,255,.6),transparent);opacity:.65}
.battle-words button:hover{transform:translateY(-3px);filter:brightness(1.14)}.battle-words button:active{transform:translateY(0) scale(.97)}.battle-words button.wrong{border-color:#ff5771;animation:battle-word-error 260ms ease 2}.battle-words button.error-found{border-color:#ff657d;background:radial-gradient(circle at 50% 20%,rgba(255,111,132,.22),transparent 55%),linear-gradient(180deg,rgba(159,43,67,.98),rgba(79,13,37,.98));box-shadow:inset 0 2px rgba(255,198,206,.2),inset 0 -4px 6px rgba(48,2,16,.5),0 0 14px rgba(255,52,94,.76);transform:none}.battle-words button.correct{border-color:#64efff;background:linear-gradient(180deg,rgba(36,116,151,.98),rgba(16,50,100,.98));box-shadow:0 0 14px rgba(62,225,255,.8)}
.battle-grammar-layout.is-correcting .battle-words button:not(.error-found):not(.correct){opacity:.5;filter:saturate(.65);pointer-events:none}
.battle-grammar-steps{grid-row:4;width:min(520px,65%);height:42px;display:grid;grid-template-columns:minmax(150px,1fr) 62px minmax(150px,1fr);align-items:center;gap:0;margin:0 auto;pointer-events:none}.grammar-step{display:flex;align-items:center;justify-content:center;gap:8px;color:#7287aa;font-size:.75rem}.grammar-step span{display:grid;width:28px;height:28px;place-items:center;border:1px solid #52658d;border-radius:50%}.grammar-step.active{color:#7ef3ff}.grammar-step.active span{border-color:#5ceeff;background:#126482;box-shadow:0 0 10px #4deaff}.grammar-step.completed{color:#9cf8da}.grammar-step.completed span{border-color:#57e9ae;background:#126b55}.battle-grammar-steps>i{height:2px;background:linear-gradient(90deg,#42ddff,#574c9b)}
.battle-correction{grid-row:5;position:relative;width:min(82%,760px);min-height:70px;margin:10px auto 0;padding:8px 14px;display:grid;grid-template-columns:minmax(100px,auto) 26px minmax(210px,1fr) 170px;align-items:center;gap:13px;border:1px solid rgba(105,98,186,.62);border-radius:13px;background:linear-gradient(180deg,rgba(3,12,39,.9),rgba(2,7,27,.94));box-shadow:inset 0 0 15px rgba(76,49,150,.2),0 8px 16px rgba(0,0,0,.32)}.battle-correction[hidden]{display:none!important}
#battle-error-word{min-width:100px;color:#ff899a;font-size:19px;font-weight:900;text-align:right;text-shadow:0 0 8px rgba(255,70,103,.45)}.battle-correction .correction-arrow{color:#d8e9ff;font-size:22px;text-align:center}#battle-replacement{width:100%;min-width:0;height:50px;padding:0 15px;border:2px solid #72eaff;border-radius:9px;background:rgba(1,7,24,.96);color:#fff;font-size:18px;text-transform:none}#battle-correct-submit{width:170px;height:50px;margin:0;padding:0 16px;border:0;background:transparent url('assets-web/battle/ui/buttons/button-confirm.webp') center/100% 100% no-repeat;color:#fff;font-weight:900}
#battle-grammar-feedback{grid-row:6;position:relative;width:min(82%,760px);min-height:22px;margin:7px auto 0;left:auto;right:auto;bottom:auto;color:#8df4ff;font-size:14px;text-align:center}#battle-grammar-feedback:empty{display:none}
@keyframes battle-word-error{0%,100%{translate:0}35%{translate:-4px 0}70%{translate:4px 0}}


/* Keep the complete square Chronos sprite frame visible. */
.battle-boss{padding-inline:4%;overflow:hidden}

.battle-chronos{justify-self:center;align-self:center;width:min(100%,58dvh);height:auto;aspect-ratio:1;max-width:100%;max-height:100%;background-size:400% 300%;background-position:0 50%}

@media(max-height:740px){
.battle-chronos{width:min(100%,52dvh);height:auto}
}


/* Single source of truth for the battle-board container. */
.battle-main{grid-template-columns:minmax(145px,15%) minmax(0,55%) minmax(260px,30%);align-items:center;overflow:hidden}

.battle-commanders{grid-column:1}



.battle-boss{grid-column:3}



@media(max-width:1450px){
}

@media(max-height:740px){
}

/* Battle interface scale and status layout. */
.battle-stage{grid-template-rows:10% 90%}
.battle-main{grid-row:2;padding-bottom:12px}


.battle-unit.selected{transform:translateY(-7px) scale(1.08)}
.battle-unit.selected:after{inset:55% 15% 4%}
.battle-boss{grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) auto minmax(170px,auto);align-content:stretch;padding:0 2%;overflow:hidden}
.battle-chronos{grid-column:1;grid-row:1;align-self:end;justify-self:center;width:min(100%,52dvh);height:auto;aspect-ratio:1;background-size:400% 300%;background-position:0 50%;background-repeat:no-repeat}
.battle-boss-status{grid-column:1;grid-row:2;width:96%;justify-self:center;padding:2px 6px 8px}
.battle-boss-status h2{margin:0 0 3px}.battle-boss-status label{margin:2px 0}.boss-bar{height:11px}
.battle-abilities{position:absolute;z-index:8;right:1.2%;left:auto;top:66%;bottom:auto;width:28.5%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,66px) auto;gap:7px;margin:0;padding:0;border:0;background:none!important;overflow:visible}
.battle-abilities button{width:100%;max-width:none;height:66px;min-width:0;grid-template-columns:34px 1fr 20px;font-size:.58rem}
.battle-abilities>strong{grid-column:1/-1;min-width:0;padding:5px;background:#070d2dcc;border:1px solid #5748a0;border-radius:8px}
.battle-team-status{position:relative;z-index:7;width:96%;margin:8px auto 4px;padding:8px;border-radius:10px;background:#050b27e8;color:#dffbff;font-size:.62rem;font-weight:900;text-align:left}
.battle-team-status label{display:flex;justify-content:space-between;gap:5px}.battle-team-bar{height:14px;margin-top:5px;border:1px solid #67eaff;border-radius:8px;background:#020718;overflow:hidden}.battle-team-bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#2ee5ff,#446dff);transition:width .35s}
.battle-commanders p{margin:4px 0;padding:5px}
.battle-hud button{width:64px;height:64px}.battle-hud .battle-bridge-button,.battle-hud #battle-help{width:150px;height:56px;font-size:.72rem}
.result-dialog{display:grid;gap:18px;width:min(520px,92vw);min-height:0;padding:38px;background:#07112ef7!important;border:2px solid #59e6ff;border-radius:20px;box-shadow:0 0 35px #35cfff66}
.result-dialog:before,.result-dialog:after,#battle-result-stars,#battle-result[data-outcome="victory"] #battle-result-copy{display:none!important}
.result-dialog h2{margin:0;font-size:clamp(1.4rem,3vw,2.2rem)}
.result-dialog button{min-height:58px;font-size:1rem}
@media(max-width:1450px){.battle-abilities{top:65%;width:29%;grid-template-rows:repeat(2,58px) auto}.battle-abilities button{height:58px}.battle-hud button{width:56px;height:56px}.battle-hud .battle-bridge-button,.battle-hud #battle-help{width:132px;height:50px}.battle-chronos{width:min(100%,48dvh)}}
@media(max-height:740px){.battle-abilities{top:63%;grid-template-rows:repeat(2,52px) auto;gap:4px}.battle-abilities button{height:52px}.battle-team-status{padding:5px}.battle-chronos{width:min(100%,43dvh)}}

/* Interactive daily reward launcher and calendar. */
.daily-launcher{position:relative;display:grid;grid-template-columns:52px 1fr;grid-template-rows:1fr 1fr;align-items:center;width:210px;height:62px;padding:5px 28px 5px 6px;border:1px solid #5de8ff;border-radius:16px;background:linear-gradient(135deg,#132b65,#35166d);color:#fff;text-align:left;box-shadow:0 0 16px #25bfff55;cursor:pointer}
.daily-launcher .daily-launcher-chest{position:static;grid-row:1/3;width:48px;height:48px;background:url('assets-web/ui/daily-reward-launcher-first.webp') center/contain no-repeat}
.daily-launcher b{font-size:.65rem;color:#ffe990}.daily-launcher small{font-size:.57rem;color:#78ecff}.daily-launcher i{position:absolute;right:7px;top:7px;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:#e72e45;color:#fff;font-size:.72rem;font-style:normal;box-shadow:0 0 8px #ff3856}
.daily-launcher i[hidden]{display:none!important}
.daily-launcher.available .daily-launcher-chest{animation:daily-launcher-hop 1.8s ease-in-out infinite}.daily-launcher.claimed{filter:none;opacity:.75}.daily-launcher.claimed .daily-launcher-chest{animation:none;filter:grayscale(.55)}
.daily-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;box-sizing:border-box;padding:24px;overflow:hidden;background:rgba(1,6,25,.84);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.22s}.daily-modal.open{opacity:1;visibility:visible}
.daily-modal__window{position:relative;width:min(1240px,calc(100vw - 48px),calc((100vh - 48px)*1.7768));aspect-ratio:1672/941;overflow:visible}.daily-modal__background{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.daily-modal__content{position:absolute;z-index:2;left:39%;right:6%;top:9%;bottom:9%;display:grid;grid-template-rows:auto auto 1fr auto;align-items:center;gap:clamp(8px,1.5vh,20px);box-sizing:border-box;padding:clamp(10px,1.8vw,26px);text-align:center;overflow:hidden;color:#fff}.daily-modal__header h2{margin:0;color:#f7d663;font-size:clamp(22px,3vw,48px);line-height:1;text-transform:uppercase;text-shadow:0 0 12px rgba(255,208,65,.85),0 3px 0 #573300}.daily-modal__subtitle{margin:8px 0 0;color:#bdeeff;font-size:clamp(11px,1.2vw,18px)}#daily-preview-note{margin:5px 0 0;color:#fff0a8;font-size:clamp(9px,.8vw,12px);font-weight:900}
.daily-modal__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,.65vw,10px);width:100%;overflow-x:auto;overflow-y:hidden}.daily-day{position:relative;min-width:0;min-height:86px;padding:8px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;border:1px solid rgba(53,221,255,.45);border-radius:12px;background:rgba(3,18,54,.86);color:#d9f6ff}.daily-day__icon{display:grid;place-items:center;width:34px;height:34px;font-size:25px;line-height:1}.daily-day__number,.daily-day__amount{white-space:nowrap;font-size:clamp(8px,.65vw,11px);font-weight:900}.daily-day.is-claimed{opacity:.72;border-color:#48eeb2}.daily-day.is-claimed:after{content:"✓";position:absolute;top:4px;right:5px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#19c879;font-weight:900}.daily-day.is-current{border-color:#ffd84d;background:rgba(74,47,4,.82);box-shadow:0 0 14px rgba(255,210,50,.65),inset 0 0 15px rgba(255,196,25,.16)}.daily-day.is-future{opacity:.48}
.daily-modal__current-reward{align-self:center;display:flex;align-items:center;justify-content:center;gap:14px;min-height:100px;padding:12px 22px;border-radius:18px;background:rgba(2,12,43,.78);border:1px solid rgba(74,225,255,.5)}.daily-current-icon{display:grid;place-items:center;width:clamp(56px,6vw,82px);height:clamp(56px,6vw,82px);font-size:clamp(38px,4vw,60px)}.daily-modal__current-reward div{display:grid;gap:5px;text-align:left}.daily-modal__current-reward strong{color:#ffe26e;font-size:clamp(13px,1.3vw,20px)}.daily-modal__current-reward span{font-size:clamp(10px,1vw,15px)}
.daily-modal__footer{display:grid;justify-items:center;gap:7px}.daily-modal__timer{color:#79eaff;font-size:clamp(10px,1vw,15px)}.daily-modal__claim{width:min(270px,70%);height:68px;border:0;color:#fff;font:inherit;font-size:20px;font-weight:900;text-transform:uppercase;cursor:pointer;background:transparent url('assets-web/battle/ui/buttons/button-gold.webp') center/100% 100% no-repeat;text-shadow:0 2px 2px #4b2600}.daily-modal__claim:disabled{filter:grayscale(.6) brightness(.65);cursor:default}
.daily-modal__close{position:absolute;z-index:5;top:5.5%;right:4.5%;width:44px;height:44px;display:grid;place-items:center;border:2px solid #73ecff;border-radius:50%;background:#071a43;color:#fff;font-size:1.8rem;cursor:pointer}.daily-modal__burst{position:absolute;z-index:3;left:22%;top:48%;pointer-events:none}.daily-modal__burst i{position:absolute;color:#ffe04c;font-size:1.8rem;font-style:normal;animation:daily-particle .9s ease-out forwards}.daily-modal__burst i:nth-child(2){--dx:80px;color:#55eaff}.daily-modal__burst i:nth-child(3){--dx:-85px}.daily-modal__burst i:nth-child(4){--dx:50px;color:#a979ff}.daily-modal__burst i:nth-child(5){--dx:-50px}@keyframes daily-particle{to{transform:translate(var(--dx,0),-110px) rotate(180deg);opacity:0}}@keyframes daily-launcher-hop{50%{transform:translateY(-4px);filter:drop-shadow(0 0 10px #ffd43d)}}
@media(max-width:1366px){.daily-launcher{width:178px;height:56px;grid-template-columns:44px 1fr}.daily-launcher .daily-launcher-chest{width:42px;height:42px}}@media(max-width:850px){.daily-modal__content{left:36%;right:5%;top:8%;bottom:8%;padding:10px;gap:8px}.daily-day{min-height:66px;padding:5px 2px}.daily-day__icon{width:26px;height:26px;font-size:20px}.daily-day__amount{font-size:9px}.daily-modal__current-reward{min-height:70px}.daily-modal__claim{height:52px}}@media(prefers-reduced-motion:reduce){.daily-modal *{animation:none!important;transition-duration:.01ms!important}}

.battle-unit.friendly{inset:8% 12% 10%;background-size:400% 300%}
.battle-unit.friendly.selected{transform:translateY(-5px) scale(1.04)}
.battle-abilities button{font-size:.76rem;line-height:1.15}.battle-abilities button span{font-weight:1000}.battle-abilities button:after{width:260px;padding:11px;font-size:.76rem;line-height:1.35}
@media(max-width:1450px){.battle-unit.friendly{inset:10% 14% 12%}.battle-abilities button{font-size:.7rem}}
@media(max-height:740px){.battle-unit.friendly{inset:12% 16% 14%}.battle-abilities button{font-size:.64rem}}

/* Mission navigation matches games 1 and 2; both armies share one safe scale. */
.battle-hud .battle-bridge-button{width:clamp(132px,9vw,160px);height:52px;padding:0 16px;border:0;border-radius:0;background:transparent url('assets-web/mahjong/ui/crops/button-blue.webp') center/100% 100% no-repeat;color:#fff;font-size:clamp(.68rem,.78vw,.86rem);text-shadow:0 1px 3px #00152b;box-shadow:none}
.battle-unit.friendly,.battle-unit.enemy{inset:4% 8% 6%;transform-origin:center bottom}
.battle-unit.friendly.selected,.battle-unit.enemy.selected{transform:translateY(-5px) scale(1.06)}
@media(max-width:1450px){.battle-unit.friendly,.battle-unit.enemy{inset:6% 10% 8%}.battle-hud .battle-bridge-button{width:140px;height:48px}}
@media(max-height:740px){.battle-unit.friendly,.battle-unit.enemy{inset:8% 12% 10%}.battle-hud .battle-bridge-button{width:128px;height:44px}}

/* Mission 3 symmetric arena layout */
.battle-stage{position:relative;width:100vw;height:100dvh;max-width:1920px;max-height:1080px;margin:0 auto;overflow:hidden;background-image:url('assets-web/battle/backgrounds/chronos-arena-background-symmetric.webp');background-position:center center;background-repeat:no-repeat;background-size:cover;color:#fff;filter:none;transform:none}
.battle-main{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;padding:0;overflow:hidden}
.battle-board{--board-size:min(36vw,64vh,610px);position:absolute;z-index:3;left:50%;top:49%;width:var(--board-size);height:var(--board-size);aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:3px;margin:0;padding:7px;transform:translate(-50%,-50%);transform-origin:center;box-sizing:border-box;border:2px solid rgba(214,167,69,.72);border-radius:8px;background:linear-gradient(145deg,rgba(5,11,34,.7),rgba(22,10,51,.62));box-shadow:0 22px 42px rgba(0,0,0,.62),0 0 0 2px rgba(75,43,126,.55),0 0 18px rgba(65,213,255,.16),inset 0 0 22px rgba(9,3,31,.82);overflow:visible}
.battle-board::after{content:"";position:absolute;z-index:5;pointer-events:none;inset:3px;border:1px solid rgba(88,222,255,.25);border-radius:5px}
.battle-cell{position:relative;width:auto;height:auto;min-width:0;min-height:0;margin:0;padding:0;border:1px solid rgba(102,151,198,.3);border-radius:4px;overflow:visible;cursor:default;transform:none;clip-path:none;background:radial-gradient(circle at 45% 35%,rgba(72,104,151,.2),transparent 48%),linear-gradient(145deg,rgba(31,49,82,.96),rgba(9,20,45,.98));box-shadow:inset 1px 1px rgba(114,181,224,.16),inset -2px -2px 4px rgba(0,0,15,.42);opacity:1;pointer-events:auto;transition:border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease}
.battle-cell.light{background:radial-gradient(circle at 45% 35%,rgba(60,105,150,.14),transparent 50%),linear-gradient(145deg,rgba(29,48,77,.98),rgba(8,20,43,.99));border-color:rgba(75,137,179,.22);box-shadow:inset 1px 1px rgba(112,172,209,.12),inset -2px -2px 5px rgba(0,4,20,.55);cursor:default}
.battle-cell.dark{background:radial-gradient(circle at 45% 35%,rgba(190,101,255,.2),transparent 50%),linear-gradient(145deg,rgba(105,53,153,.98),rgba(47,24,89,.99));border-color:rgba(187,113,235,.38);box-shadow:inset 1px 1px rgba(225,165,255,.2),inset -2px -2px 5px rgba(20,2,42,.55)}
.battle-cell.non-playable:disabled{opacity:1;filter:none;pointer-events:none}
.battle-cell.playable{pointer-events:auto}
.battle-cell::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:7%;background:linear-gradient(90deg,transparent 48%,rgba(104,188,225,.06) 49%,rgba(104,188,225,.06) 51%,transparent 52%),linear-gradient(transparent 48%,rgba(104,188,225,.05) 49%,rgba(104,188,225,.05) 51%,transparent 52%);border:1px solid rgba(119,173,208,.05);border-radius:2px}
.battle-cell.available{cursor:pointer;border-color:#55edff;box-shadow:inset 0 0 16px rgba(56,223,255,.46),0 0 10px rgba(56,223,255,.5)}
.battle-cell.available::after{content:"";position:absolute;inset:34%;border-radius:50%;background:#7cf5ff;box-shadow:0 0 14px #43eaff}
.battle-cell.capture{border-color:#ffd755;box-shadow:inset 0 0 18px rgba(255,196,53,.55),0 0 12px rgba(255,196,53,.5)}
.battle-cell.danger{border-color:#ff3b92;box-shadow:inset 0 0 18px rgba(255,44,141,.55),0 0 12px rgba(255,44,141,.5)}
.battle-cell.selected-cell{border-color:#fff;box-shadow:inset 0 0 18px rgba(91,239,255,.68),0 0 14px rgba(91,239,255,.72)}
.battle-unit{position:absolute;z-index:3;left:50%;top:50%;width:auto;height:148%;aspect-ratio:3/4;inset:auto;transform:translate(-50%,-57%);transform-origin:center;background-repeat:no-repeat;background-size:400% 300%;pointer-events:none;clip-path:none}
.battle-unit.friendly,.battle-unit.enemy{left:50%;top:50%;width:auto;height:148%;aspect-ratio:3/4;inset:auto;transform:translate(-50%,-57%)}
.battle-unit.enemy{filter:drop-shadow(0 4px 5px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(255,57,125,.88))}
.battle-unit.friendly{filter:drop-shadow(0 4px 5px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(66,234,255,.9))}
.battle-unit.selectable{filter:drop-shadow(0 4px 5px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(87,247,255,.92))}
.battle-unit.selected,.battle-unit.friendly.selected,.battle-unit.enemy.selected{transform:translate(-50%,-63%) scale(1.08);filter:brightness(1.15) drop-shadow(0 5px 6px rgba(0,0,0,.75)) drop-shadow(0 0 17px #8fffff)}
.battle-unit.selected::after{content:"";position:absolute;z-index:-1;left:15%;right:15%;bottom:3%;height:24%;border:3px solid #63f4ff;border-radius:50%;box-shadow:0 0 10px #52ecff,inset 0 0 10px rgba(82,236,255,.45)}
.battle-commanders,.battle-boss{position:absolute;z-index:4;top:52%;width:23%;height:68%;max-width:430px;max-height:720px;margin:0;padding:10px;box-sizing:border-box;transform:translateY(-50%);overflow:visible}
.battle-commanders{left:4%;display:block}.battle-boss{left:auto;right:4%;display:block}
.battle-kosmo{position:absolute;z-index:3;left:50%;top:2%;width:auto;height:70%;aspect-ratio:3/4;margin:0;transform:translateX(-50%);background-position:0 0;background-repeat:no-repeat;background-size:400% 300%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.65)) drop-shadow(0 0 16px rgba(61,228,255,.58))}
.battle-bip{position:absolute;z-index:5;right:2%;left:auto;top:43%;width:auto;height:48%;aspect-ratio:3/4;margin:0;background-position:33.333% 0;background-repeat:no-repeat;background-size:400% 300%;animation:bip-hover 2.8s ease-in-out infinite}
.battle-chronos,.battle-chronos[data-state="attack"],.battle-chronos[data-state="core"]{position:absolute;z-index:3;left:50%;top:0;width:100%;height:78%;max-width:none;transform:translateX(-50%);background-image:url('assets-web/battle/characters/standalone/chronos-x-fullbody-platform.webp');background-position:center bottom!important;background-repeat:no-repeat;background-size:contain!important;filter:drop-shadow(0 12px 12px rgba(0,0,0,.72)) drop-shadow(0 0 21px rgba(182,68,255,.67))}
.battle-team-status,.battle-boss-status{position:absolute;left:50%;right:auto;bottom:0;width:92%;margin:0;padding:7px 10px;box-sizing:border-box;transform:translateX(-50%)}
.battle-boss-status h2{margin:0 0 8px;color:#e08cff;font-size:clamp(21px,1.7vw,31px);text-align:center}.battle-commanders p{position:absolute;left:4%;right:4%;bottom:-44px;width:auto;min-height:34px;margin:0;padding:7px 10px;box-sizing:border-box;transform:none;border-radius:10px;text-align:center}
.battle-hud{position:absolute;z-index:10;top:6px;left:12px;right:12px;width:auto;height:72px;min-height:72px;margin:0;padding:6px 14px;display:grid;grid-template-columns:minmax(390px,1.15fr) minmax(390px,1fr) minmax(600px,1.45fr);align-items:center;gap:16px;border:1px solid rgba(214,174,67,.82);border-radius:18px;background:linear-gradient(180deg,rgba(5,12,36,.97),rgba(2,7,25,.96))!important;box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 -2px rgba(76,208,255,.2);font-size:initial;overflow:hidden}
.battle-hud-left{min-width:0;display:flex;align-items:center;gap:14px}.battle-stage-info{min-width:0;display:flex;align-items:center;gap:12px;white-space:nowrap}.battle-stage-info #battle-stage-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:clamp(15px,1.05vw,20px)}.battle-stage-info>span{flex:0 0 auto;color:#dce8ff;font-size:15px}
.battle-hud-center{min-width:0;display:grid;grid-template-columns:auto minmax(140px,1fr) auto;align-items:center;gap:12px}.battle-impulse-copy,.battle-streak{display:flex;align-items:center;gap:6px;white-space:nowrap}.battle-impulse-copy span,.battle-streak span{color:#e3edff;font-size:clamp(12px,.82vw,15px);font-weight:800}.battle-impulse-copy b{color:#74ecff;font-size:15px}.battle-streak b{color:#ffd85c;font-size:17px}
.battle-impulse{width:100%;min-width:140px;height:16px;border:1px solid #55eaff;border-radius:9px;background:rgba(1,7,24,.95);overflow:hidden;box-shadow:inset 0 0 7px rgba(0,0,0,.8),0 0 8px rgba(65,224,255,.14)}.battle-impulse>i{display:block;height:100%;background:linear-gradient(90deg,#2fcaff,#8b55ff);transition:width 300ms ease}
.battle-hud-right{min-width:0;display:flex;justify-content:flex-end;align-items:center;gap:10px;white-space:nowrap}.battle-stat{min-width:64px;height:48px;display:grid;grid-template-rows:auto auto;place-items:center;padding:4px 9px;border-left:1px solid rgba(102,160,215,.24)}.battle-stat span{color:#aebed8;font-size:10px;font-weight:800;letter-spacing:.06em}.battle-stat b{color:#fff;font-size:19px;line-height:1}.team-stat b{color:#63ecff}.armor-stat b{color:#ffcf57}.core-stat b{color:#d98cff}
.battle-hud .battle-bridge-button{position:static;flex:0 0 150px;width:150px;height:54px;min-height:0;margin:0;padding:0 18px;border:0;border-radius:0;background:transparent url('assets-web/mahjong/ui/crops/button-blue.webp') center/100% 100% no-repeat;color:#fff;font-size:clamp(.68rem,.78vw,.86rem);text-align:center;white-space:nowrap}.battle-hud #battle-sound,.battle-hud #battle-pause{flex:0 0 52px;width:52px;height:52px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background-color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat;color:transparent}.battle-hud #battle-help{flex:0 0 174px;width:174px;height:52px;min-height:0;margin:0 2px 0 4px;padding:0 20px 0 28px;border:0;border-radius:0;background:transparent url('assets-web/battle/ui/buttons/button-purple.webp') center/100% 100% no-repeat;color:#fff;font-size:13px;font-weight:900;white-space:nowrap;text-align:center}
.battle-abilities{position:absolute;z-index:8;left:1%;right:1%;bottom:1%;top:auto;width:auto;height:10%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr;gap:8px;margin:0;padding:6px 14px;background:#050b25f2!important;border:1px solid #5e59b2;border-radius:16px;overflow:visible}
.battle-abilities button{width:100%;height:100%;min-width:0;max-width:none;margin:0}.battle-abilities>strong{display:none}
@media(max-width:1200px){.battle-board{--board-size:min(58vw,60vh,560px)}}
@media(max-width:800px){.battle-board{--board-size:min(88vw,58vh,500px);top:50%}}

/* Mission 2 universal result dialog */
.runner-dialog{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;box-sizing:border-box;padding:24px;overflow:hidden;background:rgba(1,6,25,.82);backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease,visibility 180ms ease}
.runner-dialog.open{opacity:1;visibility:visible;pointer-events:auto}
.runner-dialog__window{position:relative;width:min(800px,calc(100vw - 48px),calc((100vh - 48px) * 1.5633));aspect-ratio:1568/1003;max-height:calc(100vh - 48px);overflow:hidden}
.runner-dialog__frame{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.runner-dialog__content{position:absolute;z-index:1;inset:9% 8%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;gap:clamp(8px,1.5vh,16px);padding:clamp(12px,2vw,26px);overflow:hidden;text-align:center}
.runner-dialog__icon{display:none;width:54px;height:54px}
.runner-dialog__title{margin:0;color:#fff;font-size:clamp(26px,3vw,44px);font-weight:1000;line-height:1;text-transform:uppercase;text-shadow:0 0 10px rgba(50,220,255,.9),0 3px 0 rgba(16,35,90,.9)}
.runner-dialog__subtitle{max-width:600px;margin:0;color:#ccecff;font-size:clamp(14px,1.5vw,20px);font-weight:800;line-height:1.3}
.runner-dialog__stats,.runner-dialog__rewards{max-width:620px;color:#fff;font-size:clamp(13px,1.25vw,18px);font-weight:800;line-height:1.35}
.runner-dialog__rewards{min-height:0;color:#ffe45f;font-size:clamp(20px,2.5vw,36px);text-shadow:0 0 14px rgba(255,180,30,.85)}
.runner-dialog__actions{width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:4px}
.runner-dialog__button{position:relative;width:min(220px,44%);min-width:170px;height:58px;padding:0 24px;border:0!important;border-radius:0!important;outline:0;background-color:transparent!important;background-image:url('assets-web/mahjong/ui/crops/button-blue.webp')!important;background-position:center!important;background-repeat:no-repeat!important;background-size:100% 100%!important;box-shadow:none!important;color:#fff;font:inherit;font-size:clamp(13px,1.2vw,17px);font-weight:900;text-transform:uppercase;text-shadow:0 2px 2px #00194a;cursor:pointer}
.runner-dialog__button:nth-child(even){background-image:url('assets-web/mahjong/ui/crops/button-purple.webp')!important}
.runner-dialog__button::before,.runner-dialog__button::after{content:none!important}
.runner-dialog__button:hover,.runner-dialog__button:focus-visible{filter:brightness(1.22) drop-shadow(0 0 8px #35dfff);transform:scale(1.03);outline:2px solid #fff;outline-offset:2px}
.runner-dialog__button[hidden],.runner-dialog [hidden]{display:none!important}
.runner-dialog__actions--three .runner-dialog__button{width:min(190px,30%);min-width:150px}
@media(max-width:650px){.runner-dialog{padding:12px}.runner-dialog__window{width:min(calc(100vw - 24px),calc((100vh - 24px) * 1.5633))}.runner-dialog__content{inset:8% 7%;gap:8px;padding:12px}.runner-dialog__actions{flex-direction:column;flex-wrap:nowrap;gap:6px}.runner-dialog__button,.runner-dialog__actions--three .runner-dialog__button{width:min(270px,100%);min-width:0;height:46px}}

/* Hub visual alignment fixes */
.home-header{display:flex;align-items:center;gap:16px;width:calc(100% - 48px);max-width:none;height:100%;margin-inline:auto;padding:8px 14px;box-sizing:border-box;overflow:visible}
.home-header .brand{flex:0 0 190px;min-width:0}
.home-header__profile{flex:0 0 270px;min-width:0}
.home-header__resources{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:8px;min-width:0;max-width:760px;border-radius:22px}
.home-header__actions{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:390px;height:100%;flex-shrink:0}
.home-header__actions .top-actions{display:flex;height:100%;align-items:center}
.daily-reward-trigger,.teacher-mode-button{position:relative!important;inset:auto!important;transform:none!important;flex-shrink:0}
.daily-reward-trigger{display:grid;width:210px;height:68px;padding:6px 34px 6px 8px;grid-template-columns:52px 1fr;grid-template-rows:1fr 1fr;align-items:center;border:1px solid #5de8ff;border-radius:16px;background:linear-gradient(135deg,#132b65,#35166d);color:#fff;text-align:left;filter:drop-shadow(0 0 10px rgba(255,190,39,.35))}
.daily-reward-trigger span{position:static;grid-row:1/3;width:50px;height:50px;background:url('assets-web/ui/daily-reward-launcher-first.webp') center/contain no-repeat}
.daily-reward-trigger b{display:block;color:#ffe990;font-size:.68rem}.daily-reward-trigger small{display:block;color:#78ecff;font-size:.58rem}
.teacher-mode-button{display:flex;width:168px;height:68px;align-items:center;justify-content:center;padding:7px 14px}
.daily-reward-trigger__badge{position:absolute!important;top:5px!important;right:6px!important;width:26px!important;height:26px!important;display:grid;place-items:center;border-radius:50%;z-index:2}
.daily-reward-trigger:hover{transform:translateY(-2px)!important}.daily-reward-trigger:active{transform:scale(.97)!important}
.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(24px,2vw,36px)}
.mission-card{position:relative;align-self:start;width:100%;height:auto;aspect-ratio:1086/1448;overflow:visible}
.mission-card .play-button{position:absolute!important;z-index:10!important;left:50%!important;bottom:4%!important;width:25%!important;height:auto!important;min-width:0!important;min-height:0!important;aspect-ratio:1;transform:translateX(-50%)!important;margin:0!important;padding:0;border:0}
.mission-card .mission-bottom{z-index:8!important}
.mission-card .stars-progress{transform:translateX(7%)}
.mission-card .stars-progress span:first-child{transform:translateX(12px) scale(1.24)}
.mission-card .stars-progress span:nth-child(2){transform:translateX(6px) scale(1.24)}
.mission-card .stars-progress span:last-child{transform:scale(1.24)}
.mission-card .play-button:not(:disabled):hover{transform:translateX(-50%) scale(1.06)!important}.mission-card .play-button:not(:disabled):active,.mission-card .play-button.launching{transform:translateX(-50%) scale(.94)!important}
.mission-card.runner:not(.locked)::after,.mission-card.battle:not(.locked)::after{content:"";position:absolute;z-index:5;left:50%;bottom:19.2%;width:36%;height:14px;box-sizing:border-box;transform:translateX(-50%);border:0;border-radius:2px;background:#060d25;box-shadow:none;pointer-events:none}
.mission-card__status{position:absolute!important;top:8.4%!important;right:6.5%!important;z-index:10;width:40%;min-width:108px;height:30px;padding:0 12px;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;border-radius:15px;font-size:12px!important;font-weight:900;line-height:1;white-space:nowrap}
.mission-card.is-available .mission-card__status{color:#bfffff;background:rgba(0,93,125,.94);border:1px solid #36e8ff;box-shadow:0 0 12px rgba(54,232,255,.45)}
.mission-card.is-completed .mission-card__status{color:#eafff5;background:rgba(7,105,67,.96);border:1px solid #55f2ae;box-shadow:0 0 12px rgba(55,235,155,.42)}
.mission-card.is-locked .mission-card__status{color:#ffd5ef;background:rgba(90,14,67,.94);border:1px solid #ff59ba}
.achievements-panel{box-sizing:border-box;overflow:hidden!important}
.achievements-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:6px;width:auto;max-width:100%;padding:0;box-sizing:border-box;overflow:hidden!important}
.achievements-list .achievement-card{position:relative;justify-self:start;align-self:start;width:62%;height:82%;min-width:0;aspect-ratio:auto;overflow:visible}
.achievement-card{position:relative}
.achievement-card.is-locked .achievement-card__art{filter:brightness(.7) saturate(.55)}
.achievement-card::after{content:"";position:absolute;z-index:5;right:-2.5%;bottom:.5%;width:21px;height:21px;border-radius:50%;background:#07142d;box-shadow:none;pointer-events:none}
.achievement-card:first-child::after,.achievement-card:last-child::after{right:-7%;bottom:1.5%;width:25px;height:18px;border-radius:9px}
.achievement-card:first-child::after{right:-30%;width:42px}
.achievement-card:nth-child(2)::after{right:-20%;width:34px;height:18px;border-radius:9px}
.achievement-card__status-icon{position:absolute;z-index:6;right:1.5%;bottom:3.5%;width:clamp(15px,16%,17px);height:auto;max-width:17px;max-height:17px;aspect-ratio:1;object-fit:contain;filter:none;opacity:1;pointer-events:none;user-select:none}
.achievements-panel .achievement-counter{min-width:46px;height:17px;padding:0 7px;display:grid;place-items:center;box-sizing:border-box;border:0;border-radius:3px;background:#07142d;color:#69efff;line-height:1;box-shadow:none}
@media(max-width:1450px){.home-header{gap:10px}.home-header .brand{flex-basis:145px}.home-header__profile{flex-basis:200px}.home-header__resources{grid-template-columns:repeat(3,minmax(105px,1fr))}.home-header__actions{min-width:358px}.daily-reward-trigger{width:190px}.teacher-mode-button{width:156px}.mission-grid{gap:clamp(12px,1.4vw,22px)}}
@media(max-width:1100px){.hub-shell{grid-template-rows:auto minmax(0,1fr)}.home-header{height:auto;flex-wrap:wrap}.home-header__resources{max-width:none}.home-header__actions{width:100%;min-width:0;height:58px;justify-content:flex-end}.daily-reward-trigger{width:190px;height:58px}.teacher-mode-button{width:155px;height:58px}}
@media(max-width:1500px){.battle-hud{grid-template-columns:minmax(320px,1fr) minmax(315px,.95fr) minmax(500px,1.35fr);gap:9px;padding-inline:9px}.battle-hud-left,.battle-hud-center,.battle-hud-right{gap:7px}.battle-hud .battle-bridge-button{flex-basis:126px;width:126px}.battle-hud #battle-help{flex-basis:142px;width:142px;font-size:11px}.battle-hud #battle-sound,.battle-hud #battle-pause{flex-basis:46px;width:46px;height:46px}.battle-stat{min-width:52px;padding-inline:5px}}
@media(max-width:1280px){.battle-hud{grid-template-columns:minmax(280px,.9fr) minmax(280px,.9fr) minmax(450px,1.25fr);gap:6px;padding-inline:7px}.battle-stage-info>span{font-size:0}.battle-stage-info>span b{font-size:14px}.battle-impulse-copy span{font-size:0}.battle-impulse-copy span::after{content:'ИМПУЛЬС';font-size:11px}.battle-hud .battle-bridge-button{flex-basis:112px;width:112px;padding-inline:10px}.battle-hud #battle-help{flex-basis:128px;width:128px;padding-inline:20px}.battle-stat{min-width:46px;padding-inline:3px}.battle-stat span{font-size:9px}}
/* Unified mission HUD ----------------------------------------------------- */
.game-hud {
  --hud-accent: #34d9ff;
  position: absolute;
  z-index: 120;
  top: 10px;
  left: 18px;
  right: 18px;
  width: auto;
  min-height: 84px;
  max-height: 96px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(330px, 1.05fr) minmax(300px, 1.15fr) auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 28px);
  padding: 10px 14px;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--hud-accent) 75%, transparent);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8,25,55,.98), rgba(2,12,34,.98));
  box-shadow: 0 0 22px color-mix(in srgb, var(--hud-accent) 22%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--hud-accent) 60%, transparent);
  overflow: visible;
}
.game-hud[data-mission="runner"] { --hud-accent: #ff4ea3; }
.game-hud[data-mission="boss"] { --hud-accent: #9f65ff; }
.game-hud__left,.game-hud__center,.game-hud__right { display:flex; align-items:center; min-width:0; }
.game-hud__left { gap:12px; }
.game-hud__center { justify-content:center; gap:14px; }
.game-hud__right { justify-content:flex-end; gap:10px; }
.game-hud__mission { display:flex; align-items:center; gap:10px; min-width:0; }
.game-hud__mission-number { display:grid; place-items:center; flex:0 0 52px; height:52px; border:2px solid var(--hud-accent); border-radius:50%; background:#06152f; color:#fff; font:900 22px/1 system-ui,sans-serif; box-shadow:0 0 14px color-mix(in srgb,var(--hud-accent) 55%,transparent); }
.game-hud__title,.game-hud__subtitle { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-hud__title { color:#fff; font:900 clamp(15px,1.15vw,21px)/1.05 system-ui,sans-serif; letter-spacing:.02em; }
.game-hud__subtitle { margin-top:4px; color:#9fdff5; font:700 11px/1 system-ui,sans-serif; }
.hud-progress { flex:1 1 360px; max-width:520px; min-width:200px; }
.hud-progress__labels { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:#9fdff5; font:800 12px/1 system-ui,sans-serif; letter-spacing:.06em; }
.hud-progress__labels b { color:#fff; font-size:14px; letter-spacing:0; }
.hud-progress__track { display:block; height:14px; padding:2px; box-sizing:border-box; border:1px solid #4adfff; border-radius:999px; background:#020b22; overflow:hidden; }
.hud-progress__fill { display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#35dfff,var(--hud-accent)); box-shadow:0 0 12px var(--hud-accent); transition:width .25s ease; }
.hud-vital { flex:0 0 auto; min-width:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#9fdff5; font:800 11px/1 system-ui,sans-serif; }
.hud-vital b { color:#fff; font-size:18px; }
.hud-button,.hud-icon-button { position:relative; flex:0 0 auto; min-width:0; margin:0; border:0; color:#fff; cursor:pointer; font:900 13px/1 system-ui,sans-serif; text-shadow:0 2px 2px #001; }
.hud-button { width:142px; height:54px; padding:0 17px; background:transparent center/100% 100% no-repeat; }
.hud-button--bridge { background-image:url('assets-web/mahjong/ui/crops/button-blue.webp'); }
.hud-button--help { background-image:url('assets-web/mahjong/ui/crops/button-purple.webp'); }
.hud-icon-button { width:56px; height:56px; padding:0; border-radius:50%; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:contain; font-size:0; }
.hud-sound-button { background-image:url('assets-web/runner/ui/runner-sound-button.webp'); }
.hud-pause-button { background-image:url('assets-web/runner/ui/runner-pause-button.webp'); }
.hud-button:hover,.hud-icon-button:hover { filter:brightness(1.16); transform:translateY(-1px); }
.hud-button:focus-visible,.hud-icon-button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.hud-sound-button[aria-pressed="true"] { filter:saturate(.35) brightness(.75); }
.game-hud__legacy[hidden] { display:none !important; }
.game-hud .runner-lives { display:flex; gap:3px; }
.game-hud .runner-lives i { width:22px; height:22px; margin:0; background-size:contain; }
.mahjong-screen { position:relative; }
.mahjong-screen .mahjong-round-title { margin-top:104px; }
.mahjong-header.game-hud,.runner-hud.game-hud,.battle-hud.game-hud { grid-template-columns:minmax(330px,1.05fr) minmax(300px,1.15fr) auto; padding:10px 14px; transform:none; }
.game-hud .battle-hud-left,.game-hud .battle-hud-center,.game-hud .battle-hud-right { display:contents; }

@media (max-width: 1450px) {
  .game-hud { left:10px; right:10px; gap:10px; grid-template-columns:minmax(280px,1fr) minmax(250px,1fr) auto; }
  .game-hud__mission-number { flex-basis:46px; height:46px; font-size:19px; }
  .game-hud__title { font-size:15px; }
  .hud-button { width:124px; height:50px; font-size:12px; }
  .hud-icon-button { width:50px; height:50px; }
}
@media (max-width: 1100px) {
  .game-hud { min-height:126px; max-height:136px; grid-template-columns:1fr auto; grid-template-rows:auto auto; }
  .game-hud__subtitle,.hud-vital span { display:none; }
  .hud-button { width:108px; padding:0 10px; }
  .game-hud__left { gap:7px; }
  .game-hud > .game-hud__left { grid-column:1; grid-row:1; }
  .game-hud > .game-hud__right { grid-column:2; grid-row:1; }
  .game-hud > .game-hud__center { grid-column:1 / -1; grid-row:2; width:100%; }
}

/* Neutralize legacy per-game HUD positioning without touching game content. */
.mahjong-header.game-hud,.runner-hud.game-hud,.battle-hud.game-hud {
  position:absolute; inset:auto 18px auto 18px; top:10px; width:auto; height:auto; min-height:84px; max-height:96px; margin:0;
  background:linear-gradient(180deg,rgba(8,25,55,.98),rgba(2,12,34,.98)) !important;
  overflow:visible;
}
.game-hud > .game-hud__left,.game-hud > .game-hud__center,.game-hud > .game-hud__right {
  position:static; inset:auto; grid-row:1; min-width:0; height:auto; padding:0; overflow:visible;
}
.game-hud > .game-hud__left { grid-column:1; justify-content:flex-start; }
.game-hud > .game-hud__center { grid-column:2; justify-content:center; }
.game-hud > .game-hud__right { grid-column:3; justify-content:flex-end; }
.game-hud .hud-button { width:142px; height:54px; min-height:0; padding:0 17px; border:0; border-radius:0; color:#fff; font-size:13px; background-position:center; background-size:100% 100%; background-repeat:no-repeat; }
.game-hud .hud-icon-button { width:56px; height:56px; min-height:0; padding:0; border:0; border-radius:50%; color:transparent; background-position:center; background-size:contain; background-repeat:no-repeat; }
.game-hud .hud-button--bridge { background-image:url('assets-web/mahjong/ui/crops/button-blue.webp'); }
.game-hud .hud-button--help { background-image:url('assets-web/mahjong/ui/crops/button-purple.webp'); }
.game-hud .hud-sound-button { background-image:url('assets-web/runner/ui/runner-sound-button.webp'); }
.game-hud .hud-pause-button { background-image:url('assets-web/runner/ui/runner-pause-button.webp'); }
@media (max-width:1450px){
  .mahjong-header.game-hud,.runner-hud.game-hud,.battle-hud.game-hud{left:10px;right:10px}
  .game-hud .hud-button{width:124px;height:50px;font-size:12px}.game-hud .hud-icon-button{width:50px;height:50px}
}
@media (max-width:1100px){
  .mahjong-header.game-hud,.runner-hud.game-hud,.battle-hud.game-hud{min-height:126px;max-height:136px}
  .game-hud .hud-button{width:108px;height:46px;padding-inline:10px}.game-hud .hud-icon-button{width:46px;height:46px}
}

/* Player XP and rank system. */
.player-profile{position:relative;display:flex;align-items:center;gap:12px;min-width:320px;height:82px;padding:4px 14px 4px 6px;border:1px solid #3479c4;border-radius:22px;background:linear-gradient(180deg,rgba(15,42,95,.96),rgba(5,17,48,.96));color:#fff;text-align:left;cursor:pointer;box-shadow:0 8px 24px #0007}
.player-profile__rank-icon{flex:0 0 auto;width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(45,224,255,.65))}
.player-profile__info{display:flex;flex-direction:column;align-items:flex-start;min-width:220px}.player-profile__name{color:#fff;font-size:24px;line-height:1}.player-profile__rank{margin-top:5px;color:#aeefff;font-size:15px;font-weight:800}
.player-xp{--xp-progress:0%;position:relative;width:220px;height:17px;margin-top:8px;overflow:hidden;border:1px solid #35dcff;border-radius:999px;background:rgba(0,7,31,.9)}.player-xp__fill{display:block;width:var(--xp-progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,#18caff,#4cf0bd);box-shadow:0 0 10px rgba(41,229,255,.75);transition:width .5s ease}.player-xp__value{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900;text-shadow:0 1px 3px #00112e}
.home-header__profile{flex:0 0 320px}.home-header__resources{grid-template-columns:repeat(2,minmax(150px,1fr));max-width:530px}
.player-level-tooltip{position:absolute;z-index:400;left:210px;top:94px;display:none;width:360px;padding:20px;border:2px solid #56eaff;border-radius:20px;background:linear-gradient(160deg,#092c61f7,#040d27fa);color:#dffaff;text-align:center;box-shadow:0 18px 40px #000b,0 0 28px #25dfff55}.player-level-tooltip.open{display:block}.player-level-tooltip h2{margin:0 0 12px;color:#77efff}.player-level-tooltip p{margin:9px 0}.player-level-tooltip__icons{display:flex;align-items:center;justify-content:center;gap:15px;font-size:30px}.player-level-tooltip__icons img{width:80px;height:80px;object-fit:contain}
.level-up-modal{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:20px;background:#010516dc;backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none}.level-up-modal.open{opacity:1;visibility:visible;pointer-events:auto}.level-up-dialog{display:grid;justify-items:center;width:min(520px,calc(100vw - 40px));padding:30px;border:2px solid #62eaff;border-radius:26px;background:linear-gradient(155deg,#103a78,#070d2d);color:#fff;text-align:center;box-shadow:0 0 45px #26dfff77}.level-up-dialog h2{margin:0;color:#75f1ff;font-size:clamp(26px,4vw,42px)}.level-up-dialog__icon{width:clamp(120px,18vw,190px);height:auto;object-fit:contain;filter:drop-shadow(0 0 18px #4deaff)}#level-up-rank{font-size:clamp(20px,3vw,30px);color:#ffe179}#level-up-claim{width:200px;height:58px;border:0;background:transparent url('assets-web/mahjong/ui/crops/button-blue.webp') center/100% 100% no-repeat;color:#fff;font-weight:900;cursor:pointer}
@media(max-width:1366px){.player-profile{min-width:280px;height:70px}.player-profile__rank-icon{width:60px;height:60px}.player-profile__info{min-width:190px}.player-profile__name{font-size:20px}.player-profile__rank{font-size:12px}.player-xp{width:190px}.home-header__profile{flex-basis:280px}.player-level-tooltip{left:170px;top:82px}}

/* Final HUD consistency and safe in-game notifications. */
#mahjong-help.hud-button--help,
#runner-help.hud-button--help,
#battle-help.hud-button--help {
  flex:0 0 142px;
  width:142px;
  height:54px;
  min-height:0;
  margin:0;
  padding:0 17px;
  border:0;
  border-radius:0;
  background:transparent url('assets-web/mahjong/ui/crops/button-purple.webp') center/100% 100% no-repeat !important;
  color:#fff;
  font:900 13px/1 system-ui,sans-serif;
  letter-spacing:0;
  text-align:center;
  text-shadow:0 2px 2px #160025;
}

.game-hud .runner-lives i {
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:1px solid #6af5ff;
  border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#86fbff 0 12%,#13bfe3 34%,#0751a5 70%,#031a4a 100%) !important;
  box-shadow:inset 0 0 7px #d6ffff,0 0 8px #32dcff;
  filter:none;
  transition:opacity .2s,filter .2s,transform .2s;
}
.game-hud .runner-lives i::before {
  content:'♥';
  color:#fff;
  font:900 17px/1 Arial,sans-serif;
  text-shadow:0 1px 2px #004780,0 0 5px #fff;
}
.game-hud .runner-lives i.lost {
  opacity:.3;
  filter:grayscale(1) brightness(.55);
  box-shadow:none;
}

.runner-alert {
  z-index:121;
  top:112px;
  width:max-content;
  max-width:min(760px,calc(100vw - 32px));
  box-sizing:border-box;
  padding:9px 18px;
  line-height:1.25;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
.mahjong-bip .bip-message {
  box-sizing:border-box;
  width:min(340px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  height:auto;
  max-height:none;
  white-space:normal;
  overflow:visible;
  overflow-wrap:anywhere;
}
#battle-tip {
  left:2%;
  right:2%;
  bottom:2%;
  width:auto;
  max-width:96%;
  min-height:34px;
  box-sizing:border-box;
  white-space:normal;
  overflow:visible;
  overflow-wrap:anywhere;
}
.toast {
  box-sizing:border-box;
  width:max-content;
  max-width:calc(100vw - 32px);
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
@media (max-width:1450px){
  #mahjong-help.hud-button--help,#runner-help.hud-button--help,#battle-help.hud-button--help{flex-basis:124px;width:124px;height:50px;font-size:12px}
}
@media (max-width:1100px){
  #mahjong-help.hud-button--help,#runner-help.hud-button--help,#battle-help.hud-button--help{flex-basis:108px;width:108px;height:46px;font-size:11px}
  .runner-alert{top:146px;max-width:calc(100vw - 24px)}
}

/* Main bridge: one coherent status HUD. Kept at the end to retire legacy header layouts. */
.bridge-status-bar {
  --bridge-line:rgba(82,207,255,.5);
  position:relative!important;
  z-index:60;
  display:grid!important;
  grid-template-columns:minmax(330px,390px) 1px minmax(360px,1fr) 1px minmax(430px,500px)!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:14px!important;
  width:calc(100% - 40px)!important;
  max-width:none!important;
  min-height:88px!important;
  height:auto!important;
  margin:10px auto 0!important;
  padding:8px 14px!important;
  box-sizing:border-box;
  overflow:visible!important;
  border:1px solid var(--bridge-line)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(10,31,71,.98),rgba(4,14,42,.98))!important;
  box-shadow:0 10px 30px rgba(0,0,0,.42),inset 0 1px rgba(167,236,255,.14),0 0 22px rgba(26,154,255,.12)!important;
}
.bridge-status-bar>.brand { display:none!important; }
.bridge-divider {
  align-self:stretch;
  width:1px;
  margin-block:8px;
  background:linear-gradient(transparent,var(--bridge-line),transparent);
}
.bridge-profile {
  position:static!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr);
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  height:70px!important;
  margin:0!important;
  padding:2px 8px 2px 2px!important;
  transform:none!important;
  border:0!important;
  border-radius:16px!important;
  background:linear-gradient(90deg,rgba(15,53,103,.42),rgba(6,24,59,.15))!important;
  box-shadow:none!important;
}
.bridge-profile:hover { background:linear-gradient(90deg,rgba(22,73,136,.58),rgba(6,24,59,.22))!important; }
.bridge-profile__emblem {
  width:66px!important;
  height:66px!important;
  min-width:66px!important;
  margin:0!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 8px rgba(48,222,255,.55))!important;
}
.bridge-profile__info {
  display:flex!important;
  min-width:0!important;
  width:100%!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
.bridge-profile__name {
  overflow:hidden;
  color:#fff!important;
  font-size:20px!important;
  line-height:1.05!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bridge-profile__rank {
  margin-top:3px!important;
  overflow:hidden;
  color:#9feaff!important;
  font-size:12px!important;
  line-height:1.15!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bridge-xp {
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:14px!important;
  margin-top:6px!important;
  overflow:hidden!important;
  border:1px solid #37d7fa!important;
  border-radius:999px!important;
  background:#020b25!important;
}
.bridge-xp__fill { height:100%!important; }
.bridge-xp__value { font-size:9px!important; }
.bridge-resources {
  position:static!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border:0!important;
  background:none!important;
}
.bridge-resources .resource-chip {
  position:static!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:9px!important;
  flex:1 1 0;
  width:min(210px,48%)!important;
  max-width:210px!important;
  min-width:145px!important;
  height:62px!important;
  margin:0!important;
  padding:7px 12px!important;
  box-sizing:border-box;
  border:1px solid rgba(77,171,244,.42)!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,rgba(16,51,102,.88),rgba(5,22,57,.92))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 5px 13px rgba(0,0,0,.22)!important;
}
.resource-chip__icon {
  grid-row:auto!important;
  width:38px!important;
  height:38px!important;
  margin:0!important;
  overflow:visible;
  fill:#ffd33d;
  stroke:#fff1a0;
  filter:drop-shadow(0 0 7px rgba(255,205,52,.6));
}
.bridge-resources .crystal .resource-chip__icon {
  fill:rgba(38,215,255,.36);
  stroke:#6ff5ff;
  filter:drop-shadow(0 0 7px rgba(30,213,255,.7));
}
.resource-chip>span { display:flex;min-width:0;flex-direction:column;align-items:flex-start; }
.resource-chip__value { color:#fff!important;font-size:22px!important;line-height:1!important; }
.resource-chip__label { margin-top:3px;color:#89c9ef!important;font-size:9px!important;font-weight:800;letter-spacing:.04em;white-space:nowrap; }
.bridge-actions {
  position:static!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:minmax(195px,1fr) minmax(205px,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  transform:none!important;
}
.bridge-actions>.top-actions {
  position:static!important;
  display:grid!important;
  grid-template-columns:52px minmax(145px,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  height:64px!important;
  margin:0!important;
}
.bridge-actions .daily-reward-trigger {
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 22px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  height:64px!important;
  margin:0!important;
  padding:6px 7px!important;
  transform:none!important;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(255,199,67,.7)!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,#183a78,#0a2152)!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 0 14px rgba(255,184,44,.12)!important;
}
.bridge-actions .daily-reward-trigger:hover { transform:translateY(-1px)!important;filter:brightness(1.08); }
.bridge-actions .daily-reward-trigger__icon {
  position:static!important;
  grid-row:auto!important;
  width:44px!important;
  height:44px!important;
  background-size:contain!important;
}
.bridge-actions .daily-reward-trigger>span:not(.daily-reward-trigger__icon) {
  position:static!important;
  display:flex!important;
  grid-row:auto!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  background:none!important;
}
.daily-reward-trigger__title { overflow:hidden;color:#ffe18b!important;font-size:10px!important;line-height:1.15!important;text-overflow:ellipsis;white-space:nowrap; }
.daily-reward-trigger__status { margin-top:4px;color:#8eeaff!important;font-size:9px!important;line-height:1!important;white-space:nowrap; }
.bridge-actions .daily-reward-trigger__badge {
  position:static!important;
  display:grid;
  width:21px!important;
  height:21px!important;
  place-items:center;
  margin:0!important;
  border-radius:50%;
}
.bridge-actions .daily-reward-trigger__badge[hidden] { display:none!important; }
.teacher-mode-trigger {
  position:static!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  height:64px!important;
  margin:0!important;
  padding:7px 12px!important;
  transform:none!important;
  box-sizing:border-box;
  border:1px solid rgba(255,198,70,.75)!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,#173b79,#0a2457)!important;
  color:#ffe69b!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 13px rgba(255,187,43,.1)!important;
}
.teacher-mode-trigger:hover { transform:translateY(-1px)!important;filter:brightness(1.1); }
.teacher-mode-trigger__icon { width:36px!important;height:36px!important;fill:none!important;stroke:#ffd65f!important;stroke-width:1.8!important;filter:drop-shadow(0 0 5px rgba(255,198,61,.35)); }
.teacher-mode-trigger__text { display:block!important;overflow:hidden;font-size:10px!important;font-weight:900;line-height:1.15;text-align:left;text-overflow:ellipsis;white-space:nowrap; }
.bridge-status-bar .player-level-tooltip { z-index:90; }

@media (min-width:1101px) {
  #screen-hub .hub-shell { grid-template-rows:108px minmax(0,1fr)!important; }
}

@media (max-width:1450px) {
  .bridge-status-bar {
    grid-template-columns:minmax(290px,330px) 1px minmax(310px,1fr) 1px minmax(370px,440px)!important;
    gap:10px!important;
    width:calc(100% - 24px)!important;
    padding-inline:10px!important;
  }
  .bridge-profile { grid-template-columns:58px minmax(0,1fr); }
  .bridge-profile__emblem { width:58px!important;height:58px!important;min-width:58px!important; }
  .bridge-resources .resource-chip { min-width:135px!important;height:58px!important;padding-inline:9px!important; }
  .bridge-actions { grid-template-columns:minmax(170px,1fr) minmax(185px,1fr)!important;gap:7px!important; }
  .bridge-actions>.top-actions { grid-template-columns:48px minmax(130px,1fr)!important;gap:6px!important; }
  .bridge-actions .home-sound-button { width:48px!important;height:48px!important;min-width:48px!important; }
  .daily-reward-trigger__title,.teacher-mode-trigger__text { font-size:9px!important; }
}
@media (max-width:1100px) {
  .hub-shell { grid-template-rows:auto minmax(0,1fr)!important; }
  .bridge-status-bar {
    grid-template-columns:minmax(280px,.8fr) minmax(330px,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:8px 14px!important;
    min-height:154px!important;
    margin-top:6px!important;
    padding:8px 12px!important;
  }
  .bridge-divider { display:none!important; }
  .bridge-profile { grid-column:1;grid-row:1; }
  .bridge-resources { grid-column:2;grid-row:1; }
  .bridge-actions { grid-column:1/-1;grid-row:2;justify-self:end!important;width:min(100%,650px)!important; }
  .bridge-actions .daily-reward-trigger,.teacher-mode-trigger,.bridge-actions>.top-actions { height:58px!important; }
}
@media (max-width:720px) {
  .bridge-status-bar {
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    width:calc(100% - 12px)!important;
    min-height:0!important;
    border-radius:16px!important;
  }
  .bridge-profile,.bridge-resources,.bridge-actions { grid-column:1!important;grid-row:auto!important;width:100%!important; }
  .bridge-actions { grid-template-columns:1fr!important; }
  .bridge-actions>.top-actions { grid-template-columns:48px 1fr!important; }
}

/* Locked mission launchers: keep the requirement caption above the button readable. */
.mission-card .play-button:disabled {
  bottom:6%!important;
  width:18%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1;
}
.mission-card .play-button:disabled .lock-icon {
  width:30%!important;
  height:30%!important;
}

/* Mission 3 grammar card: always fit the complete frame inside the viewport. */
#battle-grammar {
  box-sizing:border-box;
  padding:88px 16px 12px!important;
  overflow:hidden;
}
#battle-grammar>.battle-dialog:not(.pause-dialog):not(.result-dialog) {
  width:min(1080px,calc(100vw - 32px),calc((100dvh - 100px) * 1.7768))!important;
  height:auto!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 100px)!important;
  aspect-ratio:1672/941!important;
  flex:none!important;
  background-size:100% 100%!important;
  overflow:hidden!important;
}
#battle-grammar .battle-grammar-layout h2 {
  transform:translateY(-7px);
}
#battle-grammar .battle-words button {
  border-color:#c473ff!important;
  background:
    radial-gradient(circle at 50% 15%,rgba(225,167,255,.35),transparent 52%),
    linear-gradient(180deg,#7b35ae 0%,#552080 48%,#2c1053 100%)!important;
  box-shadow:
    inset 0 2px rgba(244,210,255,.3),
    inset 0 -5px 8px rgba(24,3,52,.65),
    0 5px 9px rgba(0,0,0,.5),
    0 0 12px rgba(184,75,255,.5)!important;
}
#battle-grammar .battle-words button:hover {
  background:
    radial-gradient(circle at 50% 15%,rgba(241,202,255,.44),transparent 52%),
    linear-gradient(180deg,#9145c7 0%,#672895 48%,#381460 100%)!important;
}
#battle-grammar .battle-words button.wrong,
#battle-grammar .battle-words button.error-found {
  background:radial-gradient(circle at 50% 20%,rgba(255,111,132,.25),transparent 55%),linear-gradient(180deg,#a52e4c,#541027)!important;
}
#battle-grammar .battle-words button.correct {
  background:linear-gradient(180deg,#287b9f,#123764)!important;
}

/* Mission 3 abilities belong beside Chronos, never in a clipped bottom strip. */
#screen-mission-3 .battle-abilities {
  position:absolute!important;
  z-index:8!important;
  left:auto!important;
  right:3.5%!important;
  top:64%!important;
  bottom:auto!important;
  width:min(25%,420px)!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,56px)!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#screen-mission-3 .battle-abilities button {
  width:100%!important;
  height:56px!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}
#screen-mission-3 .battle-abilities>strong { display:none!important; }
@media (max-height:740px) {
  #screen-mission-3 .battle-abilities {
    top:62%!important;
    grid-template-rows:repeat(2,48px)!important;
    gap:5px!important;
  }
  #screen-mission-3 .battle-abilities button { height:48px!important; }
}

/* Shared victory dialog for all missions. */
.mission-result-dialog{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;box-sizing:border-box;padding:24px;overflow:hidden;background:rgba(1,6,25,.84);backdrop-filter:blur(9px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease,visibility 180ms ease}
.mission-result-dialog.open{opacity:1;visibility:visible;pointer-events:auto}
.mission-result-dialog__window{--result-accent:#ff57ba;--result-accent-2:#8658ff;--result-glow:rgba(255,78,180,.42);position:relative;width:min(820px,calc(100vw - 48px),calc((100dvh - 48px) * 1.5633));aspect-ratio:1568/1003;overflow:hidden}
.mission-result-dialog__window[data-mission="mahjong"]{--result-accent:#39e3ff;--result-accent-2:#198fff;--result-glow:rgba(52,222,255,.45)}
.mission-result-dialog__window[data-mission="boss"]{--result-accent:#c66cff;--result-accent-2:#ffc94d;--result-glow:rgba(194,95,255,.45)}
.mission-result-dialog__frame{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.mission-result-dialog__content{position:absolute;z-index:1;inset:8.5% 8.5% 9%;display:grid;grid-template-rows:auto auto auto auto minmax(0,auto) auto;align-content:center;gap:clamp(6px,1.15vh,12px);padding:clamp(8px,1.4vw,20px);box-sizing:border-box;text-align:center;overflow:hidden}
.mission-result-dialog__mission{display:block;margin-bottom:4px;color:var(--result-accent);font-size:clamp(10px,1vw,13px);font-weight:900;letter-spacing:.14em}
.mission-result-dialog__title{margin:0;color:#fff;font-size:clamp(25px,3vw,42px);line-height:1;font-weight:950;text-transform:uppercase;text-shadow:0 0 12px var(--result-accent),0 3px 0 rgba(6,22,69,.95)}
.mission-result-dialog__subtitle{margin:6px 0 0;color:#c8edff;font-size:clamp(13px,1.3vw,18px);line-height:1.2}
.mission-result-dialog__stars{display:flex;justify-content:center;align-items:center;gap:10px;min-height:48px}.result-star{width:clamp(34px,4.5vw,52px);height:clamp(34px,4.5vw,52px);display:grid;place-items:center;font-size:clamp(34px,4.5vw,51px);line-height:1}.result-star.is-earned{color:#ffd84d;filter:drop-shadow(0 0 8px rgba(255,207,50,.8))}.result-star.is-empty{color:transparent;-webkit-text-stroke:2px #46628f}
.mission-result-dialog__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%}.result-stat{min-width:0;padding:8px 6px;box-sizing:border-box;border:1px solid rgba(77,210,255,.38);border-radius:13px;background:rgba(3,16,52,.8)}.result-stat__value{display:block;color:#fff;font-size:clamp(17px,1.8vw,24px);font-weight:900}.result-stat__label{display:block;margin-top:3px;color:#92ccec;font-size:clamp(8px,.8vw,11px);font-weight:800;text-transform:uppercase}
.mission-result-dialog__rewards{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;min-height:0}.result-reward{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 11px;box-sizing:border-box;border:1px solid var(--result-accent);border-radius:999px;color:#fff;background:rgba(3,15,47,.88);font-size:12px;font-weight:900}.result-reward>span{color:#ffd84d;font-size:20px}
.mission-result-dialog__unlock{min-height:18px;margin:0;color:var(--result-accent);font-size:clamp(10px,1.05vw,14px);font-weight:900;text-transform:uppercase;text-shadow:0 0 8px var(--result-glow)}
.mission-result-dialog__actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;width:100%}.mission-result-button{width:min(190px,30%);min-width:145px;height:48px;padding:0 14px;border:0;color:#fff;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 100%;font:inherit;font-size:clamp(10px,.9vw,13px);font-weight:900;text-transform:uppercase;cursor:pointer;text-shadow:0 2px 2px #00143c}.mission-result-button--primary{background-image:url('assets-web/mahjong/ui/crops/button-blue.webp');filter:brightness(1.16)}.mission-result-button--retry{background-image:url('assets-web/mahjong/ui/crops/button-purple.webp')}.mission-result-button--bridge{background-image:url('assets-web/mahjong/ui/crops/button-blue.webp')}.mission-result-button:hover,.mission-result-button:focus-visible{filter:brightness(1.2) drop-shadow(0 0 8px var(--result-accent));outline:2px solid #fff;outline-offset:2px}
.mission-result-dialog.is-opening .mission-result-dialog__window{animation:resultWindowAppear 320ms ease-out}@keyframes resultWindowAppear{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:650px){.mission-result-dialog{padding:12px}.mission-result-dialog__window{width:min(calc(100vw - 24px),calc((100dvh - 24px) * 1.5633))}.mission-result-dialog__content{inset:7.5% 7%;gap:5px;padding:8px}.mission-result-dialog__title{font-size:clamp(20px,6vw,30px)}.mission-result-dialog__stats{gap:5px}.result-stat{padding:6px 3px}.mission-result-dialog__actions{gap:5px}.mission-result-button{min-width:0;width:calc(50% - 4px);height:42px}}

/* Keep Bip's speech inside the left crew lane and clear of the mahjong tiles. */
#screen-mission-1 .mahjong-bip .bip-message {
  left:-96px!important;
  width:300px!important;
  box-sizing:border-box;
}
@media(max-width:1400px) {
  #screen-mission-1 .mahjong-bip .bip-message {
    left:-100px!important;
    width:245px!important;
  }
}
@media(max-width:900px) {
  #screen-mission-1 .mahjong-bip .bip-message {
    left:-106px!important;
    width:205px!important;
  }
}

/* The top HUD owns progress; only the selected pair panel remains below the board. */
#screen-mission-1 .selected-pair-panel {
  bottom:78px!important;
}
@media(max-width:1400px) {
  #screen-mission-1 .selected-pair-panel { bottom:74px!important; }
}
@media(max-width:900px) {
  #screen-mission-1 .selected-pair-panel { bottom:68px!important; }
}

/* Space Academy story intro. */
.story-video-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;box-sizing:border-box;padding:24px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.story-video-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.story-video-backdrop{position:absolute;inset:0;background:rgba(2,8,28,.88);backdrop-filter:blur(10px)}
.story-video-dialog{position:relative;z-index:1;width:min(1200px,92vw,calc((100dvh - 48px) * 1.7778));aspect-ratio:16/9;overflow:hidden;border:2px solid #39ddff;border-radius:24px;background:#020817;box-shadow:0 0 24px rgba(44,218,255,.65),0 0 80px rgba(89,64,255,.35)}
.story-video{display:block;width:100%;height:100%;object-fit:contain;background:#020817;cursor:pointer}
.story-skip-button,.story-start-button{z-index:2;height:48px;padding:0 22px;border:1px solid #64ebff;border-radius:12px;background:linear-gradient(180deg,#174e91,#071d4b);color:#fff;font-size:13px;font-weight:900;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 15px rgba(40,213,255,.4)}
.story-skip-button{position:absolute;top:18px;right:18px}.story-start-button{position:absolute;left:50%;top:50%;height:64px;padding-inline:34px;transform:translate(-50%,-50%);font-size:16px}.story-start-button[hidden]{display:none}
.story-history-button{position:static;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;height:56px;padding:0 10px;border:1px solid #4bdfff;border-radius:15px;background:linear-gradient(180deg,#173f7e,#092456);color:#dffaff;font-size:10px;font-weight:900;white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.15),0 0 12px rgba(31,195,255,.16)}
.story-history-button span{color:#65ecff;font-size:13px}.story-history-button:hover{filter:brightness(1.14);transform:translateY(-1px)}
.bridge-actions>.top-actions{grid-template-columns:48px minmax(92px,110px) minmax(138px,1fr)!important}
.bridge-actions{grid-template-columns:minmax(185px,.9fr) minmax(300px,1.35fr)!important}
.bridge-status-bar{grid-template-columns:minmax(330px,390px) 1px minmax(330px,1fr) 1px minmax(500px,560px)!important}
.teacher-intro-setting{display:inline-flex;align-items:center;gap:7px;color:#bdeeff;font-size:11px;font-weight:800;white-space:nowrap}.teacher-intro-setting input{accent-color:#35dcff}.teacher-save-state #teacher-intro-reset{border-color:#6edfff;background:#0a2859;color:#dffaff}
@media(max-width:1450px){.bridge-status-bar{grid-template-columns:minmax(270px,310px) 1px minmax(280px,1fr) 1px minmax(450px,500px)!important}.bridge-actions{grid-template-columns:minmax(165px,.8fr) minmax(275px,1.3fr)!important}.story-history-button{height:52px;font-size:9px}.bridge-actions>.top-actions{grid-template-columns:46px minmax(82px,96px) minmax(125px,1fr)!important}}
@media(max-width:1100px){.bridge-status-bar{grid-template-columns:minmax(280px,.8fr) minmax(330px,1fr)!important}.bridge-actions{grid-template-columns:minmax(170px,.8fr) minmax(300px,1.25fr)!important}}
@media(max-width:720px){.story-video-modal{padding:10px 8px 70px}.story-video-dialog{width:min(96vw,calc((100dvh - 90px) * 1.7778));border-radius:16px}.story-skip-button{top:auto;right:50%;bottom:-58px;transform:translateX(50%);height:44px}.story-start-button{height:52px;font-size:12px}.bridge-actions{grid-template-columns:1fr!important}.bridge-actions>.top-actions{grid-template-columns:46px minmax(86px,105px) 1fr!important}}