:root {
  --bg: #0f1124;
  --panel: rgba(28, 31, 62, .92);
  --panel-2: #222651;
  --text: #f7f4ff;
  --muted: #aab0d2;
  --cyan: #53f0dc;
  --purple: #8b6dff;
  --danger: #ff5e7d;
  --portrait-stage-width: min(100vw, calc(100dvh * 941 / 1672));
  --portrait-stage-height: min(100dvh, calc(100vw * 1672 / 941));
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% 0, #28295d, var(--bg) 55%); color: var(--text); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { display: flex; justify-content: center; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.home-screen { position:fixed; inset:0; z-index:50; display:grid; place-items:center; overflow:hidden; background:#078cf2; }
.home-screen[hidden], .game-shell[hidden] { display:none !important; }
.home-art-wrap { position:relative; width:min(100vw, calc(100dvh * 882 / 1568)); height:min(100dvh, calc(100vw * 1568 / 882)); aspect-ratio:882 / 1568; overflow:hidden; background:#078cf2; box-shadow:0 0 70px rgba(0,40,130,.3); }
.home-art-wrap > img { width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
.home-start { position:absolute; z-index:2; left:17%; right:17%; top:72%; height:14%; border-radius:28px; background:transparent; box-shadow:0 0 0 0 rgba(255,255,255,.55); animation:homePulse 1.8s ease-in-out infinite; }
.home-start:active { scale:.96; background:rgba(255,255,255,.08); }
.home-progress { position:absolute; z-index:3; left:25%; right:25%; top:87%; min-height:6.8%; display:grid; place-items:center; border-radius:999px; border:4px solid white; background:linear-gradient(180deg,#29a8ff,#0873df); color:white; font-size:clamp(20px,6vw,31px); font-weight:950; text-shadow:0 3px 0 #2450a7; box-shadow:0 5px 0 #134da1,0 8px 18px rgba(0,48,145,.35); }

@keyframes homePulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.48); } 50% { box-shadow:0 0 0 8px rgba(255,255,255,0); } }

.game-shell { width: min(100%, 520px); min-height: 100vh; padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
.top-actions { display:flex; align-items:center; gap:8px; }
.restart-mini { width:42px; height:42px; border-radius:14px; border:1px solid #4f5795; background:#1c2045; color:var(--cyan); font-size:23px; font-weight:900; }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 3px 0 0; font-size: 24px; }
.counter { min-width: 78px; text-align: center; padding: 8px 12px; border: 1px solid #4f5795; border-radius: 15px; background: #1c2045; box-shadow: inset 0 0 16px rgba(83,240,220,.08); }
.counter span { display: block; color: var(--muted); font-size: 10px; }
.counter strong { font-size: 22px; }
.level-strip { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:0 2px 10px; }
.level-strip::-webkit-scrollbar { display:none; }
.level-chip { flex:0 0 auto; min-width:34px; height:30px; border-radius:10px; background:#20244a; border:1px solid #424a82; color:#9fa6cc; font-size:11px; font-weight:850; }
.level-chip.active { color:#11152b; border-color:var(--cyan); background:linear-gradient(135deg,var(--cyan),#7191ff); box-shadow:0 0 14px rgba(83,240,220,.27); }

.board-wrap { position: relative; aspect-ratio: 1 / .88; overflow: hidden; border: 2px solid #555ca1; border-radius: 23px; background: linear-gradient(180deg, #1a1d43, #151832); box-shadow: 0 18px 50px rgba(0,0,0,.32), inset 0 0 38px rgba(93,112,255,.08); }
.board-wrap::before { content:""; position:absolute; inset:0; opacity:.18; background-image: linear-gradient(#596098 1px, transparent 1px), linear-gradient(90deg, #596098 1px, transparent 1px); background-size: 20px 20px; }
#board { position: relative; width: 100%; height: 100%; display: block; }
.toast { position:absolute; left:50%; bottom:15px; translate:-50% 12px; width:max-content; max-width:calc(100% - 28px); opacity:0; pointer-events:none; white-space:normal; text-align:center; line-height:1.35; padding:8px 13px; border-radius:18px; background:rgba(5,7,20,.82); color:#fff; font-size:12px; transition:.2s ease; }
.toast.show { opacity:1; translate:-50% 0; }
.mascot { position:absolute; width:30px; height:30px; border-radius:55% 45% 48% 52%; background:var(--unit-color, #fff); border:3px solid #fff; box-shadow:0 0 18px var(--unit-color, #fff); translate:-50% -50%; transition:left .08s linear, top .08s linear; pointer-events:none; z-index:3; }
.mascot::before, .mascot::after { content:""; position:absolute; top:3px; width:6px; height:9px; border-radius:50%; background:#fff; box-shadow:0 2px 0 #18203b; }
.mascot::before { left:6px; }.mascot::after { right:5px; }
.mascot i { position:absolute; left:8px; bottom:4px; width:11px; height:5px; border-radius:0 0 10px 10px; background:#19203a; }

.dock-panel, .queue-panel { margin-top: 12px; padding: 11px; border: 1px solid #393e76; border-radius: 17px; background: var(--panel); }
.section-title { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.section-title span { font-size:14px; font-weight:850; }
.section-title small { color:var(--muted); font-size:9px; }
.slots { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:7px; }
.slot { min-width:0; aspect-ratio:1; border-radius:15px; border:2px dashed #484f84; display:flex; align-items:center; justify-content:center; color:#70779f; background:#171a37; }
.slot.filled { border-style:solid; border-color:var(--unit-color); background:color-mix(in srgb, var(--unit-color) 15%, #171a37); box-shadow:inset 0 0 12px color-mix(in srgb, var(--unit-color) 24%, transparent); animation:pop .24s ease; }
.unit-face { width:72%; aspect-ratio:1; border-radius:50% 45% 48% 52%; display:grid; place-items:center; position:relative; background:var(--unit-color); color:#15172a; font-weight:950; text-shadow:0 1px 0 rgba(255,255,255,.55); box-shadow:inset -5px -7px 0 rgba(0,0,0,.13); }
.unit-face::before { content:"••"; letter-spacing:3px; position:absolute; top:8%; font-size:9px; color:white; text-shadow:0 2px 0 #202445; }

.queue { display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; overflow:hidden; padding:2px; }
.queue.free-pick-expanded { max-height:190px; overflow:auto; }
.queue-column { min-width:0; display:flex; flex-direction:column; gap:6px; padding:5px; border-radius:16px; background:rgba(12,14,35,.38); border:1px solid #303668; }
.queue-unit { min-width:0; aspect-ratio:1.22; padding:5px; border-radius:13px; background:#151832; border:1px solid #40477c; display:flex; align-items:center; justify-content:center; transition:.18s ease; }
.queue-unit.ready { border-color:var(--unit-color); box-shadow:0 0 12px color-mix(in srgb, var(--unit-color) 45%, transparent); translate:0 -2px; }
.queue-unit.locked { opacity:.48; filter:saturate(.55); }
.queue-unit.free-target { opacity:1; border-color:#f7dc67; box-shadow:0 0 12px rgba(247,220,103,.34); }
.queue-unit:disabled { opacity:.42; filter:saturate(.4); cursor:default; }

.tools { position:sticky; bottom:max(8px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:12px; padding:8px; border:1px solid #3d447c; border-radius:18px; background:rgba(17,19,43,.94); backdrop-filter:blur(12px); }
.tool-btn { min-width:0; min-height:70px; padding:6px 3px; border-radius:14px; background:#292d59; border:1px solid #50578f; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-weight:850; }
.tool-btn b { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#5ef0d9,#6484ff); color:#151832; font-size:18px; box-shadow:0 5px 14px rgba(83,240,220,.22); }
.tool-btn span { font-size:11px; white-space:nowrap; }
.tool-btn.active { border-color:#f7dc67; background:#4a3f37; box-shadow:0 0 16px rgba(247,220,103,.25); }
.tool-btn:disabled { opacity:.38; cursor:default; }
.card button { min-height:46px; border-radius:14px; font-weight:850; }
.secondary { background:#292d59; border:1px solid #50578f; }
.primary { background:linear-gradient(135deg, var(--purple), #5578ff); box-shadow:0 9px 24px rgba(95,91,255,.28); }
.wide { width:100%; }

.modal { display:none; position:fixed; inset:0; z-index:20; place-items:center; padding:24px; overflow:auto; background:rgba(6,7,20,.78); backdrop-filter:blur(10px); }
.modal.show { display:grid; }
.card { width:min(100%, 390px); border:1px solid #555d9d; border-radius:25px; padding:26px; background:linear-gradient(160deg, #2b3063, #181b3b); box-shadow:0 30px 80px rgba(0,0,0,.48); text-align:center; }
.card h2 { margin:12px 0 10px; font-size:25px; }
.card p { color:#c4c8e4; line-height:1.65; font-size:14px; }
.card .tip { color:#ffe293; font-size:12px; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(83,240,220,.13); color:var(--cyan); font-size:11px; font-weight:850; }
.result-icon { width:78px; height:78px; margin:auto; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg, #54f0dc, #6d83ff); color:#10132a; font-size:38px; box-shadow:0 0 36px rgba(83,240,220,.35); }

/* Bright toy-stage theme: the cover art stays behind opaque gameplay cards. */
.game-shell { position:relative; isolation:isolate; color:#173367; }
.game-shell::before { content:""; position:fixed; inset:-28px; z-index:-2; background:url("./asset-home-cover-pacnova-en.webp") center / cover no-repeat; filter:blur(18px) saturate(1.15); opacity:.68; transform:scale(1.05); }
.game-shell::after { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(2,139,244,.78),rgba(42,176,255,.63) 42%,rgba(255,211,72,.62)); }
.game-shell .topbar { margin-bottom:7px; padding:9px 10px; border:3px solid rgba(255,255,255,.88); border-radius:21px; background:linear-gradient(180deg,rgba(16,149,250,.96),rgba(5,102,218,.96)); box-shadow:0 7px 0 #0755ad,0 13px 28px rgba(0,48,128,.28),inset 0 3px 0 rgba(255,255,255,.32); }
.game-shell .eyebrow { color:#d9fbff; text-shadow:0 2px 0 #0753a7; }
.game-shell h1 { color:#ffd92e; font-size:27px; letter-spacing:.04em; text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 5px 0 #bc6411,0 8px 12px rgba(0,43,118,.38); }
.game-shell .restart-mini { border:3px solid white; background:linear-gradient(180deg,#43c5ff,#0783e9); color:white; box-shadow:0 4px 0 #0757af,inset 0 2px 0 rgba(255,255,255,.38); }
.game-shell .restart-mini.muted { opacity:.62; filter:grayscale(.7); }
.game-shell .counter { border:3px solid white; background:linear-gradient(180deg,#ffde43,#ffae18); color:#153873; box-shadow:0 4px 0 #bd650e,inset 0 2px 0 rgba(255,255,255,.45); }
.game-shell .counter span { color:#724600; font-weight:850; }
.game-shell .level-strip { padding:3px 4px 11px; }
.game-shell .level-chip { border:2px solid rgba(255,255,255,.9); background:linear-gradient(180deg,#48c9ff,#087fe6); color:white; box-shadow:0 3px 0 #0755aa;text-shadow:0 1px 0 #0751a7; }
.game-shell .level-chip.active { color:#154070; border-color:white; background:linear-gradient(180deg,#fff459,#ffc321); box-shadow:0 4px 0 #bd7000,0 0 18px rgba(255,239,77,.52); text-shadow:none; }
.game-shell .board-wrap { border:4px solid white; border-radius:27px; background:linear-gradient(180deg,rgba(239,250,255,.97),rgba(194,231,255,.96)); box-shadow:0 8px 0 #0870c7,0 18px 36px rgba(0,48,125,.28),inset 0 0 34px rgba(35,157,255,.13); }
.game-shell .board-wrap::before { opacity:.24; background-image:linear-gradient(#69b9ec 1px,transparent 1px),linear-gradient(90deg,#69b9ec 1px,transparent 1px); }
.game-shell .dock-panel,.game-shell .queue-panel { border:4px solid white; border-radius:23px; background:linear-gradient(180deg,rgba(250,254,255,.97),rgba(214,238,255,.97)); box-shadow:0 7px 0 #0870c7,0 14px 28px rgba(0,53,135,.25),inset 0 2px 0 white; }
.game-shell .section-title span { color:#0957ae; font-size:15px; text-shadow:0 1px 0 white; }
.game-shell .section-title small { color:#3973aa; font-weight:700; }
.game-shell .slot { color:#6ca5d2; border-color:#71a9d5; background:rgba(255,255,255,.72); box-shadow:inset 0 3px 10px rgba(58,133,194,.14); }
.game-shell .slot.filled { border-color:white; background:color-mix(in srgb,var(--unit-color) 28%,white); box-shadow:0 4px 0 color-mix(in srgb,var(--unit-color) 70%,#3a6195),inset 0 2px 0 rgba(255,255,255,.7); }
.game-shell .queue-column { border:2px solid #8dc3e9; background:rgba(255,255,255,.66); box-shadow:inset 0 3px 10px rgba(52,132,195,.1); }
.game-shell .queue-unit { border:2px solid #9abfe0; background:linear-gradient(180deg,#f8fcff,#d7ebfa); box-shadow:0 3px 0 #78a6cc; }
.game-shell .queue-unit.ready { border-color:white; background:color-mix(in srgb,var(--unit-color) 20%,white); box-shadow:0 4px 0 color-mix(in srgb,var(--unit-color) 72%,#42658b),0 0 14px color-mix(in srgb,var(--unit-color) 48%,transparent); }
.game-shell .queue-unit.locked { opacity:.55; }
.game-shell .queue-unit.free-target { opacity:1; border-color:#ffbd18; box-shadow:0 4px 0 #d77b00,0 0 16px rgba(255,197,33,.5); }
.game-shell .tools { border:4px solid white; border-radius:23px; background:linear-gradient(180deg,rgba(248,253,255,.98),rgba(196,230,255,.98)); box-shadow:0 7px 0 #0870c7,0 14px 28px rgba(0,50,130,.28); }
.game-shell .tool-btn { color:white; border:2px solid white; background:linear-gradient(180deg,#31baff,#087cde); box-shadow:0 4px 0 #0755aa,inset 0 2px 0 rgba(255,255,255,.34); text-shadow:0 2px 0 #0750a5; }
.game-shell .tool-btn:nth-child(2) { background:linear-gradient(180deg,#68df56,#24ac35); box-shadow:0 4px 0 #167f2a,inset 0 2px 0 rgba(255,255,255,.35); text-shadow:0 2px 0 #137026; }
.game-shell .tool-btn:nth-child(3) { background:linear-gradient(180deg,#ffd84b,#f39a12); box-shadow:0 4px 0 #bb6408,inset 0 2px 0 rgba(255,255,255,.38); text-shadow:0 2px 0 #a45905; }
.game-shell .tool-btn:nth-child(4) { background:linear-gradient(180deg,#ff78b7,#e64183); box-shadow:0 4px 0 #a92361,inset 0 2px 0 rgba(255,255,255,.35); text-shadow:0 2px 0 #a21f5d; }
.game-shell .tool-btn b { background:white; color:#0874d4; box-shadow:0 3px 0 rgba(0,62,136,.28); text-shadow:none; }
.game-shell .tool-btn.active { border-color:#fff67a; filter:saturate(1.2) brightness(1.04); box-shadow:0 4px 0 #ad6900,0 0 18px rgba(255,240,45,.62); }
.game-shell .toast { border:2px solid white; background:rgba(3,87,174,.92); box-shadow:0 4px 0 rgba(0,43,99,.55); }
.modal { background:rgba(0,93,180,.68); }
.card { color:#173367; border:4px solid white; background:linear-gradient(180deg,#f8fdff,#d8efff); box-shadow:0 8px 0 #0870c7,0 30px 80px rgba(0,47,119,.45); }
.card p { color:#35658e; }
.card .tip { color:#a75e00; }
.badge { background:#d6f8ff; color:#0871c9; }
.result-icon { border:4px solid white; background:linear-gradient(180deg,#ffe94d,#ffae17); color:#17427a; box-shadow:0 6px 0 #be680a,0 0 28px rgba(255,208,50,.5); }
.primary { background:linear-gradient(180deg,#48cfff,#087cde); box-shadow:0 5px 0 #0754aa,0 10px 22px rgba(0,77,173,.26); }

@keyframes pop { 0% { scale:.7; } 70% { scale:1.08; } 100% { scale:1; } }
@media (max-width:390px) { .queue { gap:5px; }.queue-column { padding:3px; gap:4px; }.section-title small { display:none; }.game-shell { padding-inline:9px; }.tool-btn span { font-size:10px; } }
@media (max-height:620px) { .modal { place-items:start center; }.card { margin-block:auto; padding:18px; }.card h2 { margin-block:8px; }.card p { margin-block:7px; line-height:1.45; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* Space neon edition — original sci-fi styling built from CSS shapes and light. */
:root { --space:#050522; --space-panel:rgba(8,14,62,.94); --space-line:#42e8ff; --space-violet:#b545ff; --space-gold:#ffd83d; }
html,body { background:#050522; color:#f5f7ff; }
.home-screen { background:
  radial-gradient(circle at 18% 22%,rgba(64,57,255,.42),transparent 30%),
  radial-gradient(circle at 82% 66%,rgba(188,31,255,.34),transparent 35%),
  linear-gradient(180deg,#020318,#08083b 58%,#15074a); }
.home-screen::before,.home-screen::after { content:""; position:absolute; inset:0; pointer-events:none; }
.home-screen::before { opacity:.78; background-image:
  radial-gradient(circle,#fff 0 1px,transparent 1.7px),
  radial-gradient(circle,#52dfff 0 1.2px,transparent 1.8px),
  radial-gradient(circle,#e268ff 0 1px,transparent 1.7px); background-size:47px 47px,83px 83px,121px 121px; background-position:7px 11px,19px 31px,55px 9px; }
.home-screen::after { background:linear-gradient(90deg,transparent,rgba(49,219,255,.12),transparent); animation:spaceScan 7s linear infinite; }
.home-art-wrap { width:min(100vw,620px); height:100dvh; aspect-ratio:auto; border-inline:1px solid rgba(80,224,255,.2); background:linear-gradient(180deg,rgba(7,8,49,.2),rgba(11,5,61,.72)); box-shadow:0 0 90px rgba(53,39,255,.4),inset 0 0 80px rgba(55,224,255,.08); }
.home-nebula { position:absolute; inset:0; background:
  radial-gradient(ellipse at 50% 43%,rgba(30,151,255,.28),transparent 31%),
  radial-gradient(ellipse at 33% 62%,rgba(180,47,255,.22),transparent 35%),
  linear-gradient(155deg,transparent 28%,rgba(42,24,124,.24) 55%,transparent 72%); }
.home-logo { position:absolute; z-index:2; top:7.5%; left:7%; right:7%; text-align:center; }
.home-logo::before { content:""; display:block; width:38%; height:4px; margin:0 auto 15px; border-radius:99px; background:linear-gradient(90deg,transparent,#44eaff,transparent); box-shadow:0 0 15px #3bdfff; }
.home-logo small { color:#66ecff; font-size:clamp(10px,2.6vw,15px); font-weight:900; letter-spacing:.24em; text-shadow:0 0 12px #1cbfff; }
.home-logo h1 { margin:7px 0 2px; color:#ffe146; font-size:clamp(47px,12vw,73px); line-height:1.08; font-weight:1000; letter-spacing:.04em; text-shadow:0 3px 0 #9a3b00,0 0 12px #ffae00,0 0 35px rgba(255,123,0,.72); }
.home-logo p { margin:8px 0; color:#fff; font-size:clamp(15px,4vw,23px); font-weight:850; letter-spacing:.18em; text-shadow:0 0 14px #3bdfff; }
.orbit-stage { position:absolute; z-index:2; top:30%; left:6%; right:6%; height:37%; border-radius:50%; background:radial-gradient(circle at 50% 50%,rgba(61,225,255,.16),transparent 58%); }
.orbit-stage::before { content:""; position:absolute; inset:7% 2%; border:2px solid rgba(66,228,255,.35); border-radius:50%; box-shadow:0 0 22px rgba(67,220,255,.25),inset 0 0 35px rgba(153,54,255,.12); transform:rotate(-12deg); }
.orbit-ring { position:absolute; left:50%; top:50%; border:2px solid; border-radius:50%; translate:-50% -50%; transform:rotate(-17deg); }
.ring-one { width:84%; height:34%; border-color:#57ddff transparent #974dff; box-shadow:0 0 16px #315dff; }
.ring-two { width:60%; height:78%; border-color:transparent #ad4aff #45e7ff transparent; transform:rotate(28deg); }
.mini-moon { position:absolute; width:clamp(43px,12vw,65px); aspect-ratio:1; border-radius:50%; box-shadow:0 0 24px currentColor; }
.moon-a { left:5%; top:18%; color:#a349ff; background:radial-gradient(circle at 35% 30%,#efb4ff,#8225cf 58%,#31106e); }
.moon-b { right:2%; bottom:13%; color:#2ee4ff; background:radial-gradient(circle at 35% 30%,#d3ffff,#19b8e7 58%,#1555ad); }
.home-start { top:71%; left:15%; right:15%; height:10.5%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid #86f4ff; border-radius:22px; background:linear-gradient(180deg,#196aff,#1633ae 55%,#49149e); color:#fff; box-shadow:0 0 0 5px #111765,0 0 25px #26ddff,inset 0 3px 0 rgba(255,255,255,.45); animation:spaceButton 1.8s ease-in-out infinite; }
.home-start b { font-size:clamp(25px,7vw,40px); letter-spacing:.08em; text-shadow:0 3px 0 #101059,0 0 10px #fff; }
.home-start span { margin-top:2px; color:#8af5ff; font-size:clamp(8px,2.3vw,12px); font-weight:900; letter-spacing:.18em; }
.home-start:active { scale:.97; background:linear-gradient(180deg,#155be1,#2c148e); }
.home-progress { top:84.5%; left:28%; right:28%; min-height:6.5%; border:2px solid #ca76ff; background:rgba(7,13,70,.88); color:#ffe44d; text-shadow:0 0 10px #ffb300; box-shadow:0 0 0 4px #24208c,0 0 20px #a73dff,inset 0 0 18px rgba(58,218,255,.24); }

.game-shell { color:#f4f7ff; }
.game-shell::before { inset:0; background:
  radial-gradient(circle at 18% 15%,rgba(40,94,255,.42),transparent 24%),
  radial-gradient(circle at 85% 62%,rgba(164,31,255,.34),transparent 30%),
  radial-gradient(circle,#fff 0 1px,transparent 1.6px),#050523; background-size:auto,auto,54px 54px; filter:none; opacity:1; transform:none; }
.game-shell::after { background:linear-gradient(180deg,rgba(3,5,38,.22),rgba(8,4,55,.45)); }
.game-shell .topbar,.game-shell .dock-panel,.game-shell .queue-panel,.game-shell .tools { border:2px solid #344fe4; background:linear-gradient(180deg,rgba(12,24,91,.96),rgba(6,10,54,.96)); box-shadow:0 0 0 2px rgba(78,232,255,.28),0 0 20px rgba(60,107,255,.38),inset 0 0 24px rgba(73,41,182,.32); }
.game-shell .topbar { border-radius:8px 22px 8px 22px; padding:11px 12px; }
.game-shell .eyebrow { color:#8feeff; text-shadow:0 0 9px #24ceff; }
.game-shell h1 { color:#ffe043; font-size:27px; text-shadow:0 2px 0 #b14600,0 0 12px #ff9700,0 0 25px rgba(255,162,0,.55); }
.game-shell .restart-mini { border:2px solid #b351ff; border-radius:8px 15px; background:linear-gradient(160deg,#173aa7,#381278); color:#fff; box-shadow:0 0 0 2px rgba(81,226,255,.25),0 0 13px rgba(191,55,255,.65),inset 0 2px 0 rgba(255,255,255,.27); }
.game-shell .counter { border:2px solid #ffc932; border-radius:8px 16px; background:linear-gradient(160deg,#122778,#07114e); color:#ffe34a; box-shadow:0 0 0 2px #174cc0,0 0 17px rgba(255,174,0,.55),inset 0 0 15px rgba(42,123,255,.28); }
.game-shell .counter span { color:#fff; }
.game-shell .level-chip { min-width:38px; height:34px; border:2px solid #2faee7; border-radius:0; clip-path:polygon(17% 0,83% 0,100% 28%,91% 100%,9% 100%,0 28%); background:linear-gradient(180deg,#162677,#091143); color:#dbe8ff; box-shadow:none; text-shadow:0 0 8px #4acfff; }
.game-shell .level-chip.active { color:#fff; border-color:#ffcf35; background:linear-gradient(180deg,#ffbd19,#e65a00); box-shadow:none; text-shadow:0 1px 0 #7c2800,0 0 8px #fff; }
.game-shell .board-wrap { border:3px solid #6578ff; border-radius:20px 6px; background:#050a35; box-shadow:0 0 0 4px #172469,0 0 0 6px rgba(73,225,255,.5),0 0 28px rgba(98,51,255,.52),inset 0 0 42px rgba(35,78,210,.45); }
.game-shell .board-wrap::before { opacity:.18; background-image:linear-gradient(#4f70ff 1px,transparent 1px),linear-gradient(90deg,#4f70ff 1px,transparent 1px); }
.game-shell .section-title span { color:#8ceeff; text-shadow:0 0 10px #24cfff; }
.game-shell .section-title small { color:#a9b9f2; }
.game-shell .slot { color:#52eaff; border-color:#3fdaff; border-radius:13px 4px; background:rgba(5,16,72,.72); box-shadow:inset 0 0 16px rgba(36,197,255,.14),0 0 8px rgba(34,177,255,.18); }
.game-shell .slot.filled { border-color:var(--unit-color); background:color-mix(in srgb,var(--unit-color) 22%,#071044); box-shadow:0 0 16px color-mix(in srgb,var(--unit-color) 55%,transparent),inset 0 0 14px rgba(255,255,255,.15); }
.game-shell .queue-column { border:1px solid #3346a8; border-radius:10px 3px; background:rgba(4,9,49,.7); }
.game-shell .queue-unit { border:2px solid #485cc6; border-radius:9px 3px; background:linear-gradient(160deg,#17236b,#080e3c); box-shadow:inset 0 0 13px rgba(66,105,255,.2); }
.game-shell .queue-unit.ready { border-color:var(--unit-color); background:color-mix(in srgb,var(--unit-color) 18%,#071044); box-shadow:0 0 15px color-mix(in srgb,var(--unit-color) 62%,transparent),inset 0 0 10px rgba(255,255,255,.12); }
.game-shell .tools { border-radius:16px 5px; }
.game-shell .tool-btn { border:2px solid #38cfff; border-radius:11px 3px; background:linear-gradient(180deg,#176cdb,#073688); box-shadow:0 0 13px rgba(30,194,255,.45),inset 0 2px 0 rgba(255,255,255,.2); text-shadow:0 0 7px #43dfff; }
.game-shell .tool-btn:nth-child(2) { border-color:#56f39b; background:linear-gradient(180deg,#19a95f,#07643f); box-shadow:0 0 13px rgba(40,255,141,.38); }
.game-shell .tool-btn:nth-child(3) { border-color:#ffd34a; background:linear-gradient(180deg,#e99118,#8e3d08); box-shadow:0 0 13px rgba(255,173,40,.44); }
.game-shell .tool-btn:nth-child(4) { border-color:#e26cff; background:linear-gradient(180deg,#a83ad6,#571188); box-shadow:0 0 13px rgba(212,67,255,.48); }
.game-shell .tool-btn b { background:rgba(5,9,48,.82); color:#fff; border:1px solid currentColor; box-shadow:inset 0 0 10px rgba(255,255,255,.14),0 0 9px currentColor; }
.game-shell .tool-btn.active { border-color:#fff36b; box-shadow:0 0 18px #ffd62d,inset 0 0 16px rgba(255,219,55,.22); }
.game-shell .toast { border:1px solid #55ebff; background:rgba(4,9,48,.94); box-shadow:0 0 17px rgba(56,224,255,.48); }
.modal { background:rgba(2,3,27,.82); }
.card { color:#f5f7ff; border:2px solid #4ce7ff; border-radius:20px 5px; background:linear-gradient(155deg,#17256d,#080b38 72%); box-shadow:0 0 0 3px rgba(112,61,255,.42),0 0 40px rgba(52,174,255,.35),inset 0 0 28px rgba(98,51,216,.3); }
.card p { color:#c6d4ff; }.card .tip { color:#ffe06a; }.badge { background:rgba(55,222,255,.13); color:#62efff; border:1px solid #35dfff; }
.result-icon { border:2px solid #ffe45a; background:linear-gradient(145deg,#ffe85d,#ff8a17); color:#18143f; box-shadow:0 0 25px #ffbd23; }
.primary { border:1px solid #68edff; background:linear-gradient(180deg,#176ee1,#3920a1); box-shadow:0 0 16px rgba(60,217,255,.52),inset 0 2px 0 rgba(255,255,255,.25); }

@keyframes spaceScan { from { translate:-100% 0; } to { translate:100% 0; } }
@keyframes spaceButton { 0%,100% { box-shadow:0 0 0 5px #111765,0 0 20px #26ddff,inset 0 3px 0 rgba(255,255,255,.45); } 50% { box-shadow:0 0 0 5px #281b80,0 0 36px #c348ff,inset 0 3px 0 rgba(255,255,255,.45); } }
@media (max-width:390px) { .game-shell .topbar { padding-inline:8px; }.game-shell h1 { font-size:20px; }.top-actions { gap:4px; }.game-shell .restart-mini { width:36px; height:38px; }.game-shell .counter { min-width:65px; padding-inline:8px; } }

/* Starship gameplay interior. */
.game-shell .topbar { min-height:88px; }
.game-shell .top-actions { gap:6px; }
.game-shell .restart-mini { width:44px; height:57px; padding:3px 2px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.game-shell .restart-mini b { font-size:25px; line-height:1; }
.game-shell .restart-mini span { color:#dffaff; font-size:9px; font-weight:900; line-height:1; text-shadow:0 0 7px #5cecff; }
.game-shell .restart-mini.muted span { color:#a2a8cf; text-shadow:none; }
.game-shell .counter { min-height:62px; display:grid; place-content:center; padding:5px 9px; }
.game-shell .level-strip { position:relative; margin-block:4px 8px; padding:2px 4px 5px; }
.game-shell .board-wrap { overflow:visible; }
.game-shell .board-wrap::after { content:""; position:absolute; inset:7px; z-index:4; pointer-events:none; border:1px solid rgba(102,239,255,.5); border-radius:14px 3px; box-shadow:inset 0 0 13px rgba(56,122,255,.5); clip-path:polygon(0 0,18% 0,21% 4px,79% 4px,82% 0,100% 0,100% 100%,82% 100%,79% calc(100% - 4px),21% calc(100% - 4px),18% 100%,0 100%); }
.game-shell .dock-panel,.game-shell .queue-panel { position:relative; overflow:hidden; padding:13px 12px; }
.game-shell .dock-panel::before,.game-shell .queue-panel::before { content:""; position:absolute; left:17%; right:3%; top:13px; height:1px; background:linear-gradient(90deg,#40e6ff,rgba(75,83,215,.28)); box-shadow:0 0 8px #42dcff; }
.game-shell .section-title { position:relative; z-index:1; }
.game-shell .dock-panel .section-title span::before { content:"✦ "; color:#5af1ff; }
.game-shell .queue-panel .section-title span::before { content:"◎ "; color:#a765ff; }
.game-shell .slot { position:relative; border-width:2px; border-style:dashed; box-shadow:inset 0 0 20px rgba(22,176,255,.15),0 0 10px rgba(48,198,255,.18); }
.game-shell .slot::after { content:""; position:absolute; inset:6px; pointer-events:none; border:1px solid rgba(86,223,255,.18); border-radius:9px 2px; }
.game-shell .slot:not(.filled) { font-size:25px; font-weight:300; text-shadow:0 0 12px #30dfff; }
.game-shell .slot.filled::after { border-color:color-mix(in srgb,var(--unit-color) 60%,white); }

.game-shell .queue { max-height:220px; gap:8px; padding:4px 3px 8px; }
.game-shell .queue-column { gap:8px; padding:5px; }
.game-shell .queue-unit { position:relative; aspect-ratio:.82; min-height:112px; padding:7px 5px 5px; flex-direction:column; justify-content:flex-start; gap:3px; overflow:hidden; }
.game-shell .queue-unit::before { content:""; position:absolute; inset:3px; border:1px solid rgba(99,223,255,.22); border-radius:6px 2px; pointer-events:none; }
.crew-portrait { width:76%; aspect-ratio:1; display:grid; place-items:center; position:relative; border:3px solid #d9f8ff; border-radius:50%; background:radial-gradient(circle at 50% 42%,rgba(113,237,255,.28),rgba(17,26,99,.92) 68%); box-shadow:0 0 0 3px #273d9d,0 0 14px color-mix(in srgb,var(--unit-color,#5de8ff) 55%,#4ee7ff); }
.crew-portrait::before,.crew-portrait::after { content:""; position:absolute; bottom:-10%; width:28%; height:30%; z-index:0; border:2px solid #bfefff; background:linear-gradient(180deg,#edf8ff,#6175d1); }
.crew-portrait::before { left:-7%; border-radius:70% 22% 45% 35%; rotate:18deg; }.crew-portrait::after { right:-7%; border-radius:22% 70% 35% 45%; rotate:-18deg; }
.crew-role-0 { --crew-color:#ffd132; }.crew-role-1 { --crew-color:#25d4ef; }.crew-role-2 { --crew-color:#ff72bf; }.crew-role-3 { --crew-color:#ff765b; }
.game-shell .queue-unit .unit-face { z-index:1; width:82%; border:0; border-radius:46% 46% 42% 42%; align-items:flex-end; padding-bottom:11%; color:#101946; font-size:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--crew-color,var(--unit-color)) 74%,white),var(--crew-color,var(--unit-color))); box-shadow:inset -6px -8px 0 rgba(0,0,0,.13),0 0 10px var(--crew-color,var(--unit-color)); }
.game-shell .queue-unit.crew-role-0 .unit-face { border-radius:50% 46% 48% 44%; }
.game-shell .queue-unit.crew-role-1 .unit-face { border-radius:48% 48% 34% 34%; }
.game-shell .queue-unit.crew-role-2 .unit-face { border-radius:44% 52% 38% 31%; }
.game-shell .queue-unit.crew-role-3 .unit-face { border-radius:52% 43% 31% 40%; }
.game-shell .queue-unit .unit-face::before { content:"•  •"; left:50%; top:12%; width:auto; translate:-50%; color:#10183f; font-size:17px; letter-spacing:5px; text-shadow:0 1px 0 white; white-space:nowrap; }
.game-shell .queue-unit .unit-face::after { content:""; position:absolute; left:23%; right:23%; bottom:31%; height:8%; border-radius:0 0 10px 10px; background:#44203e; box-shadow:inset 0 -2px 0 #ff7d75; }
.crew-status { z-index:2; display:block; color:#7cefff; font-size:6px; font-weight:950; line-height:1; letter-spacing:.08em; }
.crew-status::before { content:""; display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:var(--unit-color); box-shadow:0 0 6px var(--unit-color); }
.slot-crew { width:82%; aspect-ratio:1; display:grid; place-items:center; position:relative; }
.slot-crew .unit-face { width:100%; background:linear-gradient(145deg,color-mix(in srgb,var(--crew-color,var(--unit-color)) 76%,white),var(--crew-color,var(--unit-color))); border:2px solid #e9fbff; box-shadow:0 0 10px var(--crew-color,var(--unit-color)); }
.game-shell .queue-unit.locked .crew-status { opacity:.45; }
.game-shell .queue-unit.ready { translate:0 -2px; }
.game-shell .queue-unit.ready .crew-portrait { animation:crewReady 1.45s ease-in-out infinite; }
.game-shell .tools { padding:9px; }
.game-shell .tool-btn { min-height:78px; }
.game-shell .tool-btn b { width:38px; height:38px; font-size:20px; }
.game-shell .tool-btn span { font-size:12px; }
@keyframes crewReady { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.22); box-shadow:0 0 0 3px #334eb8,0 0 22px var(--unit-color); } }
@media (max-width:390px) {
  .game-shell .topbar { min-height:78px; }
  .game-shell .restart-mini { width:36px; height:49px; }
  .game-shell .restart-mini b { font-size:21px; }
  .game-shell .queue-unit { min-height:100px; padding-inline:3px; }
  .crew-status { font-size:5px; }
}

/* Grok asset edition — processed source art is stored in assets/v0.6.8/grok-ui. */
.home-art-wrap::before,.home-art-wrap::after { content:""; position:absolute; z-index:1; pointer-events:none; background-repeat:no-repeat; background-size:contain; filter:drop-shadow(0 0 18px rgba(61,220,255,.45)); }
.home-art-wrap::before { left:-5%; bottom:3%; width:34%; height:29%; background-image:url("./asset-grok-ui-plant.png"); background-position:left bottom; opacity:.78; }
.home-art-wrap::after { right:-7%; bottom:4%; width:42%; height:28%; background-image:url("./asset-grok-ui-console.png"); background-position:right bottom; opacity:.8; }
.home-logo::before { width:52%; height:12px; background:url("./asset-grok-ui-progress.png") center / 100% 100% no-repeat; box-shadow:none; filter:drop-shadow(0 0 10px #38dfff); }
.home-progress { border:0; background:rgba(6,12,62,.7) url("./asset-grok-ui-progress.png") center / 100% 100% no-repeat; box-shadow:none; }
.mini-moon.moon-a { background-image:url("./asset-grok-ui-orb-yellow.png"); background-size:contain; background-color:transparent; box-shadow:none; filter:hue-rotate(245deg) drop-shadow(0 0 16px #9d46ff); }
.mini-moon.moon-b { background-image:url("./asset-grok-ui-orb-yellow.png"); background-size:contain; background-color:transparent; box-shadow:none; filter:hue-rotate(150deg) drop-shadow(0 0 16px #3ce6ff); }

.game-shell .topbar { border-color:transparent; background:rgba(5,10,48,.84) url("./asset-grok-ui-panel-long.png") center / 100% 100% no-repeat; box-shadow:0 0 24px rgba(50,171,255,.42); }
.game-shell .dock-panel { border-color:transparent; background:rgba(5,10,48,.9) url("./asset-grok-ui-panel-main.webp") center / 100% 100% no-repeat; box-shadow:0 0 24px rgba(72,68,255,.4); }
.game-shell .queue-panel { border-color:transparent; background:rgba(5,10,48,.9) url("./asset-grok-ui-panel-corners.webp") center / 100% 100% no-repeat; box-shadow:0 0 24px rgba(99,55,255,.44); }
.game-shell .tools { border-color:transparent; background:rgba(5,10,48,.94) url("./asset-grok-ui-panel-long.png") center / 100% 100% no-repeat; box-shadow:0 0 22px rgba(67,171,255,.45); }
.game-shell .board-wrap { border:12px solid transparent; border-image:url("./asset-grok-ui-panel-stars.webp") 260 stretch; background:#050a35; box-shadow:0 0 30px rgba(84,66,255,.6),inset 0 0 35px rgba(28,75,215,.38); }
.game-shell .board-wrap::after { inset:-7px; border:0; background:url("./asset-grok-ui-star.png") 1% 1% / 22px 22px no-repeat,url("./asset-grok-ui-star.png") 99% 99% / 22px 22px no-repeat; box-shadow:none; clip-path:none; filter:drop-shadow(0 0 8px #ffe63a); }
.game-shell .slot:not(.filled) { color:transparent; background:rgba(5,16,72,.62) url("./asset-grok-ui-plus.png") center / 44% 44% no-repeat; }
.game-shell .slot { border-color:#33dbff; }
.crew-portrait { border:0; background:transparent url("./asset-grok-ui-avatar-ring.png") center / 116% 116% no-repeat; box-shadow:0 0 15px color-mix(in srgb,var(--unit-color,#5de8ff) 55%,#4ee7ff); }
.crew-role-0 .unit-face { background:transparent url("./asset-grok-ui-orb-yellow.png") center / 100% 100% no-repeat !important; box-shadow:none !important; }
.crew-role-2 .unit-face { background:transparent url("./asset-grok-ui-blob-pink.png") center / 100% 100% no-repeat !important; box-shadow:none !important; color:#172052 !important; }
.crew-role-2 .unit-face::before,.crew-role-2 .unit-face::after { display:none; }
.game-shell .tool-btn b { width:52px; height:47px; border:0; border-radius:0; background-color:transparent; background-position:center; background-size:contain; background-repeat:no-repeat; color:transparent; box-shadow:none; filter:drop-shadow(0 0 8px rgba(92,232,255,.5)); }
.game-shell .tool-btn:nth-child(1) b { background-image:url("./asset-grok-ui-rocket.png"); }
.game-shell .tool-btn:nth-child(2) b { background-image:url("./asset-grok-ui-plus.png"); }
.game-shell .tool-btn:nth-child(3) b { background-image:url("./asset-grok-ui-tap.png"); }
.game-shell .tool-btn:nth-child(4) b { background-image:url("./asset-grok-ui-shuffle.png"); }
.game-shell .tool-btn:nth-child(1)::after { content:"×2"; position:absolute; right:8px; top:7px; color:#fff; font-weight:1000; text-shadow:0 0 7px #48e7ff; }
.game-shell .tool-btn { position:relative; overflow:hidden; }
.game-shell .tool-btn::before { content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.26); border-radius:8px 2px; pointer-events:none; }
.card { background:#081047 url("./asset-grok-ui-panel-main.webp") center / 100% 100% no-repeat; border-color:transparent; }
.result-icon { background:#07104c url("./asset-grok-ui-star.png") center / contain no-repeat; color:transparent; border:0; box-shadow:none; }

/* Compact four-tool console, matching the approved blue/green/orange/purple layout. */
.game-shell .tools { gap:9px; padding:8px 10px 11px; }
.game-shell .tool-btn { min-height:68px; padding:7px 4px 5px; gap:2px; border:2px solid rgba(255,255,255,.82); border-radius:16px; overflow:visible; }
.game-shell .tool-btn::before { inset:3px; border:1px solid rgba(255,255,255,.34); border-radius:12px; box-shadow:inset 0 2px 0 rgba(255,255,255,.2); }
.game-shell .tool-btn:nth-child(1) { background:linear-gradient(180deg,#23a9ff,#0560c9 68%,#053e94); box-shadow:0 5px 0 #042d73,0 0 14px rgba(32,175,255,.5),inset 0 3px 0 rgba(255,255,255,.28); }
.game-shell .tool-btn:nth-child(2) { background:linear-gradient(180deg,#42d66c,#159a49 68%,#087137); box-shadow:0 5px 0 #07552a,0 0 14px rgba(46,225,115,.42),inset 0 3px 0 rgba(255,255,255,.27); }
.game-shell .tool-btn:nth-child(3) { background:linear-gradient(180deg,#ffc43d,#ee8518 68%,#b95009); box-shadow:0 5px 0 #8d3b06,0 0 14px rgba(255,171,40,.46),inset 0 3px 0 rgba(255,255,255,.3); }
.game-shell .tool-btn:nth-child(4) { background:linear-gradient(180deg,#db63f1,#a52ec7 68%,#75188f); box-shadow:0 5px 0 #57116f,0 0 14px rgba(211,75,255,.5),inset 0 3px 0 rgba(255,255,255,.28); }
.game-shell .tool-btn b { width:43px; height:31px; margin:0; filter:drop-shadow(0 2px 1px rgba(0,0,0,.22)); background-size:contain; }
.game-shell .tool-btn:nth-child(1) b { background-image:url("./asset-grok-ui-icon-rocket-white.svg"); }
.game-shell .tool-btn:nth-child(2) b { background-image:url("./asset-grok-ui-icon-box-white.svg"); }
.game-shell .tool-btn:nth-child(3) b { background-image:url("./asset-grok-ui-icon-hand-white.svg"); }
.game-shell .tool-btn:nth-child(4) b { background-image:url("./asset-grok-ui-icon-shuffle-white.svg"); }
.game-shell .tool-btn span { font-size:13px; font-weight:950; line-height:1.05; text-shadow:0 2px 1px rgba(0,0,0,.35); }
.game-shell .tool-btn:nth-child(1)::after { content:"×2"; right:9px; top:12px; color:#fff; font-size:19px; text-shadow:0 2px 1px rgba(0,0,0,.3); }
.game-shell .tool-btn:nth-child(2)::after { content:"+"; position:absolute; right:10px; top:11px; color:#fff; font-size:22px; font-weight:1000; text-shadow:0 2px 1px rgba(0,0,0,.3); }
.game-shell .tool-btn:active:not(:disabled) { translate:0 3px; filter:brightness(1.08); }
@media (max-width:390px) {
  .game-shell .tools { gap:6px; padding-inline:7px; }
  .game-shell .tool-btn { min-height:62px; border-radius:13px; }
  .game-shell .tool-btn b { width:36px; height:27px; }
  .game-shell .tool-btn span { font-size:11px; }
  .game-shell .tool-btn:nth-child(1)::after { right:6px; font-size:16px; }
  .game-shell .tool-btn:nth-child(2)::after { right:7px; font-size:18px; }
}

/* Final supplied tool-button artwork. */
.game-shell .tools { gap:7px; padding:8px 9px 11px; }
.game-shell .tool-btn { min-height:0; aspect-ratio:1.5; padding:0; border:0; border-radius:15px; background-color:transparent!important; background-position:center!important; background-size:100% 100%!important; background-repeat:no-repeat!important; box-shadow:0 5px 0 rgba(2,4,32,.75),0 0 11px rgba(72,181,255,.28); overflow:hidden; }
.game-shell .tool-btn:nth-child(1) { background-image:url("./asset-grok-ui-tool-speed.webp"); }
.game-shell .tool-btn:nth-child(2) { background-image:url("./asset-grok-ui-tool-capacity.webp"); }
.game-shell .tool-btn:nth-child(3) { background-image:url("./asset-grok-ui-tool-freepick.webp"); }
.game-shell .tool-btn:nth-child(4) { background-image:url("./asset-grok-ui-tool-shuffle.webp"); }
.game-shell .tool-btn b,.game-shell .tool-btn span,.game-shell .tool-btn::before,.game-shell .tool-btn::after { display:none; }
.game-shell .tool-btn.active { filter:brightness(1.14); outline:2px solid #fff37b; outline-offset:1px; box-shadow:0 4px 0 #6d4500,0 0 18px #ffe12e; }
.game-shell .tool-btn:disabled { opacity:.42; filter:grayscale(.4); }
.game-shell .tool-btn:active:not(:disabled) { translate:0 3px; }
@media (max-width:390px) {
  .game-shell .tools { gap:5px; padding-inline:6px; }
  .game-shell .tool-btn { min-height:0; border-radius:11px; }
}

/* English illustrated home cover. The controls remain live above the artwork. */
.home-screen { background:#050521; }
.home-art-wrap {
  width:var(--portrait-stage-width);
  height:var(--portrait-stage-height);
  aspect-ratio:941 / 1672;
  border:0;
  background:#060525;
  box-shadow:0 0 90px rgba(45,43,255,.38);
}
.home-art-wrap::before,.home-art-wrap::after { display:none; }
.home-cover-en { position:relative; z-index:2; width:100%; height:100%; display:block; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.home-art-fallback {
  position:absolute; inset:0; z-index:1; display:grid; place-content:center; gap:10px;
  padding-bottom:35%; text-align:center; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 30%,#3138a8 0,#111052 28%,#050521 68%);
}
.home-art-fallback::before { content:"✦  ·  ✧  ·  ✦"; color:#74efff; font-size:28px; letter-spacing:.35em; text-shadow:0 0 18px #43dfff; }
.home-art-fallback strong { color:#fff; font-size:clamp(38px,11vw,64px); letter-spacing:.02em; text-shadow:0 5px 0 #5d2ab2,0 0 22px #55eaff; }
.home-art-fallback span { color:#ffe548; font-size:clamp(12px,3.4vw,19px); font-weight:950; letter-spacing:.15em; }
.home-art-wrap.asset-fallback .home-cover-en { display:none; }
.home-art-wrap.asset-fallback .home-art-fallback { opacity:1; }
.home-art-wrap.asset-fallback .home-control { width:auto; min-width:88px; height:42px; aspect-ratio:auto; padding:0 12px; border:2px solid #62eaff; border-radius:999px; background:#142a82; color:#fff; font-weight:950; }
.home-art-wrap.asset-fallback .home-control span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
.home-art-wrap.asset-fallback .home-settings-hotspot { left:4%; }
.home-art-wrap.asset-fallback .home-audio-hotspot { right:4%; }
.home-image-hotspot > span { display:none; }
.home-art-wrap.asset-fallback .home-image-hotspot { left:18%; right:18%; top:70%; height:9%; display:grid; place-items:center; background:linear-gradient(90deg,#24d9e7,#6bd5ba 45%,#ffd83f); color:#fff; border:3px solid #fff; box-shadow:0 7px 0 #34267d,0 0 24px #47e8ff; }
.home-art-wrap.asset-fallback .home-image-hotspot > span { display:block; font-size:clamp(18px,5vw,28px); font-weight:1000; text-shadow:0 3px 0 #66329b; }
.home-image-hotspot {
  left:16%; right:16%; top:68.2%; height:13.3%;
  border:0; border-radius:22px; background:transparent; box-shadow:none;
  color:transparent; animation:homeCoverPulse 1.8s ease-in-out infinite;
}
.home-image-hotspot:hover { background:rgba(255,255,255,.035); }
.home-image-hotspot:active { scale:.97; background:rgba(255,255,255,.08); }
.home-control {
  position:absolute; z-index:4; top:2.2%; width:13.5%; aspect-ratio:1;
  border:0; border-radius:50%; background:transparent; color:transparent;
  -webkit-tap-highlight-color:transparent;
}
.home-control span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.home-control:focus-visible { outline:4px solid #fff45b; outline-offset:2px; box-shadow:0 0 24px #42eaff; }
.home-control:active { background:rgba(255,255,255,.14); scale:.94; }
.home-settings-hotspot { left:3.4%; }
.home-audio-hotspot { right:3.4%; }
.home-audio-menu {
  position:absolute; z-index:7; top:11.5%; right:3%; width:min(190px,58%);
  display:grid; grid-template-columns:1fr 54px 54px; align-items:center; gap:6px;
  padding:9px; border:2px solid #63eaff; border-radius:14px;
  background:linear-gradient(160deg,rgba(18,44,137,.98),rgba(23,12,91,.98));
  color:#fff; box-shadow:0 5px 0 #090846,0 0 24px rgba(58,224,255,.58);
}
.home-audio-menu[hidden] { display:none!important; }
.home-audio-menu > span { font-size:9px; font-weight:950; line-height:1.15; text-align:center; }
.home-audio-menu button {
  min-width:0; min-height:38px; padding:5px; border:2px solid #7084df; border-radius:9px;
  background:#162364; color:#dbe6ff; font-size:12px; font-weight:950;
}
.home-audio-menu button.selected { border-color:#fff36a; background:linear-gradient(180deg,#ffbf20,#e96808); color:#fff; box-shadow:0 0 12px rgba(255,205,39,.72); }
.player-chip {
  display:flex; align-items:center; gap:7px; min-width:0; padding:4px 8px 4px 5px;
  border:1px solid #65eaff; border-radius:999px; background:rgba(7,15,78,.88);
  color:#fff; box-shadow:0 0 12px rgba(73,224,255,.38);
}
.player-chip[hidden] { display:none!important; }
.player-avatar { flex:0 0 27px; width:27px; height:27px; display:grid; place-items:center; overflow:hidden; border:1px solid #ffe25b; border-radius:50%; background:#1b2a87; }
.player-avatar img { width:100%; height:100%; object-fit:cover; }
.player-avatar i { color:#ffe25b; font-size:14px; font-style:normal; }
.player-copy { min-width:0; display:grid; text-align:left; line-height:1.05; }
.player-copy strong { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.player-copy small { margin-top:2px; color:#6ff2ff; font-size:8px; font-weight:900; letter-spacing:.08em; }
.home-player-chip { position:absolute; z-index:5; left:50%; top:61.5%; translate:-50% 0; max-width:58%; }
.game-player-chip { width:max-content; max-width:118px; margin-top:4px; padding-block:2px; }
.game-player-chip .player-avatar { flex-basis:21px; width:21px; height:21px; }
.game-player-chip .player-copy strong { max-width:76px; font-size:8px; }
.game-player-chip .player-copy small { font-size:7px; }
.home-image-progress {
  left:31%; right:31%; top:83.2%; min-height:5.5%;
  border:0; border-radius:0;
  background:none;
  color:#fff; font-size:clamp(18px,5.3vw,28px); letter-spacing:.05em;
  text-shadow:0 3px 0 #5b2b9e,0 0 10px #fff;
  box-shadow:none;
}
@keyframes homeCoverPulse {
  0%,100% { box-shadow:0 0 0 rgba(81,231,255,0); }
  50% { box-shadow:0 0 28px rgba(81,231,255,.28); }
}

/* Original dark Holding Bay frame with seven overlaid gameplay slots. */
.game-shell .dock-panel {
  position:relative; aspect-ratio:2172 / 504; min-height:0; padding:0;
  border:0; border-radius:0; overflow:hidden;
  background:#071346 url("./asset-grok-ui-holding-bay-en.webp") center / 100% 100% no-repeat;
  box-shadow:0 0 24px rgba(63,119,255,.46);
}
.game-shell .dock-panel::before { display:none; }
.game-shell .dock-panel::after {
  content:""; position:absolute; z-index:1; left:6.4%; right:6.4%; top:29%; bottom:8%;
  border-radius:11px; background:linear-gradient(180deg,#07184e,#07123e);
  box-shadow:inset 0 0 22px rgba(27,119,255,.2); pointer-events:none;
}
.game-shell .dock-panel .section-title {
  position:absolute; width:1px; height:1px; overflow:hidden;
  opacity:0; pointer-events:none;
}
.game-shell .dock-panel .slots {
  position:absolute; z-index:2; left:7%; right:7%; top:31%; bottom:10%;
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1.4%;
}
.game-shell .dock-panel .slot {
  position:relative; min-width:0; min-height:0; aspect-ratio:auto;
  border:2px dashed #2cdcff; border-radius:10px; color:#5de9ff;
  background:rgba(5,17,67,.72); box-shadow:inset 0 0 16px rgba(21,173,255,.13);
}
.game-shell .dock-panel .slot.filled {
  border-style:solid; border-color:#8ef5ff;
  background:rgba(5,17,67,.82); box-shadow:inset 0 0 14px color-mix(in srgb,var(--unit-color) 35%,transparent);
}
.game-shell .dock-panel .locked-slot {
  border-style:solid; border-color:#506bac; overflow:hidden; cursor:pointer;
  background:linear-gradient(180deg,#334d92,#172d6d); color:white;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 2px 0 #071b50;
}
.game-shell .dock-panel .locked-slot:disabled { cursor:default; opacity:.55; }
.slot-lock { font-size:clamp(12px,3.2vw,18px); filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.slot-video {
  position:absolute; top:1px; right:1px; min-width:17px; height:14px; padding:0 3px;
  display:grid; place-items:center; border:2px solid white; border-radius:6px;
  background:#f04f8c; color:white; font-size:7px; line-height:1;
  box-shadow:0 2px 0 #9f2357,0 0 8px rgba(255,80,155,.55);
}
.game-shell .tools {
  gap:7px; padding:12px 16px 16px; border:0; border-radius:0;
  background:#071346 url("./asset-grok-ui-toolbar-frame-wide.webp") center / 100% 100% no-repeat;
  box-shadow:0 0 24px rgba(63,119,255,.46);
}
@media (max-width:390px) {
  .game-shell .dock-panel .slots { gap:1.1%; }
  .slot-video { top:1px; right:1px; min-width:15px; height:13px; }
  .game-shell .tools { gap:5px; padding:10px 12px 14px; }
}

/* Single-screen gameplay: only the FREE PICK dispatch list can scroll. */
html,body { height:100%; overflow:hidden; }
.game-shell {
  position:fixed; inset:0 auto 0 50%; margin:0; translate:-50% 0; width:min(100%,520px); height:100dvh; min-height:0;
  display:grid; grid-template-rows:auto auto minmax(0,1.45fr) auto minmax(0,.9fr) auto;
  gap:6px; padding:max(6px,env(safe-area-inset-top)) 4px max(6px,env(safe-area-inset-bottom));
  overflow:hidden;
}
.game-shell .topbar,.game-shell .level-strip,.game-shell .board-wrap,
.game-shell .dock-panel,.game-shell .queue-panel,.game-shell .tools { margin:0; min-width:0; }
.game-shell .topbar { min-height:72px; padding-block:6px; }
.game-shell .level-strip { min-height:34px; padding-block:0 3px; }
.game-shell .board-wrap { width:100%; height:100%; min-height:0; aspect-ratio:auto; }
.game-shell .queue-panel {
  min-height:0; display:flex; flex-direction:column; overflow:hidden;
  padding:11px 15px 13px; border:0; border-radius:0;
  background:#071346 url("./asset-grok-ui-toolbar-frame-wide.webp") center / 100% 100% no-repeat;
  box-shadow:0 0 24px rgba(63,119,255,.46);
}
.game-shell .queue-panel::before { display:none; }
.game-shell .queue-panel .section-title { flex:0 0 auto; margin:0 4px 6px; }
.game-shell .queue {
  flex:1 1 auto; min-height:0; max-height:none; overflow-x:hidden; overflow-y:auto;
  padding:2px 4px 8px; scrollbar-width:thin; scrollbar-color:#43dfff rgba(4,12,58,.7);
  overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch;
}
.game-shell .queue::-webkit-scrollbar { width:6px; }
.game-shell .queue::-webkit-scrollbar-track { background:rgba(4,12,58,.7); border-radius:99px; }
.game-shell .queue::-webkit-scrollbar-thumb { background:linear-gradient(#5df0ff,#665cff); border-radius:99px; }
.game-shell .queue-unit { min-height:88px; }
.game-shell .tools { position:relative; bottom:auto; margin:0; }
@media (max-height:760px) {
  .game-shell { grid-template-rows:auto auto minmax(0,1.35fr) auto minmax(0,.75fr) auto; gap:4px; padding-block:4px; }
  .game-shell .topbar { min-height:62px; }
  .game-shell .restart-mini { height:48px; }
  .game-shell .level-chip { height:28px; }
  .game-shell .dock-panel { max-height:86px; justify-self:stretch; }
  .game-shell .queue-unit { min-height:76px; }
  .game-shell .tools { padding-block:8px 11px; }
}

/* Unified bridge frames for the command bar and pixel-art viewport. */
.game-shell .topbar {
  border:0; border-radius:0; padding:8px 18px;
  background:#071346 url("./asset-grok-ui-toolbar-frame-wide.webp") center / 100% 100% no-repeat;
  box-shadow:0 0 24px rgba(63,119,255,.46);
}
.game-shell .board-wrap {
  border:11px solid transparent; border-radius:0;
  border-image-source:url("./asset-grok-ui-toolbar-frame-wide.webp");
  border-image-slice:54 82; border-image-width:11px; border-image-repeat:stretch;
  background:#050a35; box-shadow:0 0 26px rgba(63,119,255,.5),inset 0 0 28px rgba(29,77,210,.4);
}
.game-shell .board-wrap::after { display:none; }

/* Compact dispatch cards: two complete rows stay visible in the queue viewport. */
.game-shell .queue { align-items:start; }
.game-shell .queue-column { align-self:start; gap:6px; padding:4px; }
.game-shell .queue-unit {
  height:clamp(64px,8.2dvh,82px); min-height:0; aspect-ratio:auto;
  flex:0 0 clamp(64px,8.2dvh,82px); padding:3px; gap:1px;
}
.game-shell .queue-unit .crew-portrait { width:52%; max-width:58px; }
.game-shell .queue-unit .unit-face { padding-bottom:8%; font-size:11px; }
.game-shell .queue-unit .unit-face::before { top:8%; font-size:12px; letter-spacing:3px; }
.game-shell .queue-unit .unit-face::after { bottom:26%; }
.game-shell .queue-unit .crew-status { font-size:5px; }
@media (max-height:760px) {
  .game-shell .queue-unit { height:58px; flex-basis:58px; }
  .game-shell .queue-unit .crew-portrait { width:45%; max-width:46px; }
}

/* Dedicated 3:2 board frame: preserve the reference proportions without nine-slice stretching. */
.game-shell {
  grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
}
.game-shell .board-wrap {
  width:100%; height:auto; aspect-ratio:1539 / 1022; align-self:center;
  padding:5.2% 6.2%; border:0; border-image:none; border-radius:0;
  background:#050a35 url("./asset-grok-ui-board-frame-landscape.webp") center / 100% 100% no-repeat;
  box-shadow:0 0 26px rgba(63,119,255,.48);
}
.game-shell .board-wrap::before { inset:5.2% 6.2%; border-radius:3%; }
.game-shell #board { width:100%; height:100%; border-radius:2%; }
@media (max-height:760px) {
  .game-shell { grid-template-rows:auto auto auto auto minmax(138px,1fr) auto; }
}

/* Localized Holding Bay and tool-button artwork without changing geometry. */
.game-shell .tool-btn:nth-child(1) { background-image:url("./asset-grok-ui-tool-speed-en.webp"); }
.game-shell .tool-btn:nth-child(2) { background-image:url("./asset-grok-ui-tool-capacity-en.webp"); }
.game-shell .tool-btn:nth-child(3) { background-image:url("./asset-grok-ui-tool-freepick-en.webp"); }
.game-shell .tool-btn:nth-child(4) { background-image:url("./asset-grok-ui-tool-shuffle-en.webp"); }
body[data-language="zh-CN"] .game-shell .dock-panel {
  background-image:url("./asset-grok-ui-holding-bay-zh-CN.webp");
}
body[data-language="zh-CN"] .game-shell .tool-btn:nth-child(1) { background-image:url("./asset-grok-ui-tool-speed-zh-CN.webp"); }
body[data-language="zh-CN"] .game-shell .tool-btn:nth-child(2) { background-image:url("./asset-grok-ui-tool-capacity-zh-CN.webp"); }
body[data-language="zh-CN"] .game-shell .tool-btn:nth-child(3) { background-image:url("./asset-grok-ui-tool-freepick-zh-CN.webp"); }
body[data-language="zh-CN"] .game-shell .tool-btn:nth-child(4) { background-image:url("./asset-grok-ui-tool-shuffle-zh-CN.webp"); }

/* Supplied transparent chomper artwork, fitted separately to Queue and Holding Bay frames. */
.game-shell .queue-unit {
  background-color:#071344!important; background-position:center!important;
  background-size:auto 105%!important; background-repeat:no-repeat!important;
}
.game-shell .queue-unit::after {
  content:attr(data-count); position:absolute; z-index:3; right:4px; top:4px;
  min-width:22px; height:22px; display:grid; place-items:center; padding:0 4px;
  border:1px solid #8ef5ff; border-radius:99px; background:rgba(4,10,48,.9);
  color:#fff; font-size:10px; font-weight:950; text-shadow:0 0 6px #38dfff;
  box-shadow:0 0 9px rgba(55,224,255,.55);
}
.slot-card {
  position:absolute; inset:1px; width:auto; height:auto; display:block; overflow:hidden;
  border:1px solid #6fe9ff; border-radius:9px;
  background-color:#071344; background-position:center; background-size:auto 105%; background-repeat:no-repeat;
  box-shadow:0 0 10px color-mix(in srgb,var(--unit-color) 55%,#46eaff);
}
.slot-card::after {
  content:attr(data-count); position:absolute; right:3px; top:3px;
  min-width:19px; height:19px; display:grid; place-items:center; padding-inline:3px;
  border-radius:99px; background:rgba(4,10,48,.9); color:#fff; font-size:9px; font-weight:950;
}

/* One transparent supplied image family, recolored to match every target pixel color. */
.game-shell .queue-unit.crew-color-K,.slot-card.crew-color-K { background-image:url("./asset-grok-ui-crew-queue-K.webp")!important; }
.game-shell .queue-unit.crew-color-Y,.slot-card.crew-color-Y { background-image:url("./asset-grok-ui-crew-queue-Y.webp")!important; }
.game-shell .queue-unit.crew-color-G,.slot-card.crew-color-G { background-image:url("./asset-grok-ui-crew-queue-G.webp")!important; }
.game-shell .queue-unit.crew-color-R,.slot-card.crew-color-R { background-image:url("./asset-grok-ui-crew-queue-R.webp")!important; }
.game-shell .queue-unit.crew-color-O,.slot-card.crew-color-O { background-image:url("./asset-grok-ui-crew-queue-O.webp")!important; }
.game-shell .queue-unit.crew-color-B,.slot-card.crew-color-B { background-image:url("./asset-grok-ui-crew-queue-B.webp")!important; }
.game-shell .queue-unit.crew-color-C,.slot-card.crew-color-C { background-image:url("./asset-grok-ui-crew-queue-C.webp")!important; }
.game-shell .queue-unit.crew-color-P,.slot-card.crew-color-P { background-image:url("./asset-grok-ui-crew-queue-P.webp")!important; }
.game-shell .queue-unit.crew-color-T,.slot-card.crew-color-T { background-image:url("./asset-grok-ui-crew-queue-T.webp")!important; }
.game-shell .queue-unit.crew-color-M,.slot-card.crew-color-M { background-image:url("./asset-grok-ui-crew-queue-M.webp")!important; }

/* Narrow-phone command bar: keep the remaining counter inside the frame. */
@media (max-width:420px) {
  .game-shell .topbar {
    display:grid; grid-template-columns:minmax(86px,1fr) auto; align-items:center;
    gap:4px; padding:6px 11px; overflow:hidden;
  }
  .game-shell .topbar > div:first-child { min-width:0; }
  .game-shell .eyebrow {
    display:block; font-size:8px; line-height:1.25; letter-spacing:.05em;
    white-space:normal;
  }
  .game-shell h1 {
    max-width:104px; margin-top:3px; font-size:18px; line-height:1.08;
    overflow-wrap:normal;
  }
  .game-shell .top-actions { min-width:0; gap:3px; }
  .game-shell .restart-mini {
    flex:0 0 32px; width:32px; height:46px; padding:2px 1px 3px;
  }
  .game-shell .restart-mini b { font-size:19px; }
  .game-shell .restart-mini span { font-size:7px; letter-spacing:-.03em; }
  .game-shell .counter {
    flex:0 0 58px; width:58px; min-width:58px; min-height:54px;
    padding:4px 2px;
  }
  .game-shell .counter span { font-size:8px; }
  .game-shell .counter strong { font-size:18px; line-height:1; font-variant-numeric:tabular-nums; }
}

@media (max-width:340px) {
  .game-shell .topbar { grid-template-columns:minmax(74px,1fr) auto; padding-inline:9px; }
  .game-shell h1 { max-width:86px; font-size:16px; }
  .game-shell .top-actions { gap:2px; }
  .game-shell .restart-mini { flex-basis:29px; width:29px; }
  .game-shell .counter { flex-basis:53px; width:53px; min-width:53px; }
  .game-shell .counter strong { font-size:16px; }
}

.settings-modal { z-index:80; }
.settings-card { display:grid; gap:12px; }
.settings-card h2 { margin-block:4px 8px; }
.settings-card button { width:100%; padding:10px 14px; color:#fff; }
.settings-card .secondary { border:1px solid #6596ee; background:linear-gradient(180deg,#263b8d,#151d62); }
.settings-status { min-height:1.5em; margin:0!important; color:#70f3ff!important; font-size:12px!important; font-weight:850; }

/* First-run guidance for Levels 1–2. */
.tutorial { position:fixed; inset:0; z-index:60; background:rgba(2,4,30,.72); pointer-events:none; }
body.tutorial-active .game-shell { pointer-events:none; }
body.tutorial-active .tutorial-target { pointer-events:auto!important; }
.tutorial-card { pointer-events:auto; }
.tutorial[hidden] { display:none!important; }
.tutorial-focus { position:fixed; z-index:61; border:4px solid #65f3ff; border-radius:18px; pointer-events:none; box-shadow:0 0 0 3px rgba(255,225,61,.9),0 0 28px #36dcff,inset 0 0 18px rgba(81,238,255,.35); animation:tutorialPulse 1.25s ease-in-out infinite; }
.tutorial-card { position:fixed; z-index:62; width:min(330px,calc(100vw - 24px)); padding:18px 18px 16px; border:3px solid #fff; border-radius:20px; background:linear-gradient(180deg,#162f8d,#221264); color:#fff; text-align:center; box-shadow:0 7px 0 #080b45,0 18px 48px rgba(0,0,0,.5),0 0 24px rgba(65,226,255,.4); }
.tutorial-card h2 { margin:4px 0 8px; color:#ffe44d; font-size:20px; text-shadow:0 2px 0 #955000,0 0 10px rgba(255,217,40,.5); }
.tutorial-card p { margin:0 0 13px; color:#e9faff; font-size:14px; line-height:1.45; }
.tutorial-progress { display:inline-block; color:#6ff4ff; font-size:11px; font-weight:950; letter-spacing:.12em; }
.tutorial-card button { min-width:116px; min-height:44px; padding:8px 18px; border:2px solid white; border-radius:13px; font-weight:950; }
.tutorial-waiting .tutorial-card button { display:none; }
.tutorial-target { position:relative!important; z-index:63!important; pointer-events:auto!important; filter:brightness(1.14) saturate(1.16); }
.tutorial-target.queue-unit { box-shadow:0 0 0 3px #ffe44d,0 0 24px #4deaff!important; filter:brightness(1.22) saturate(1.2); }
@keyframes tutorialPulse { 50% { box-shadow:0 0 0 7px rgba(255,225,61,.22),0 0 38px #36dcff,inset 0 0 22px rgba(81,238,255,.5); } }
@media (max-width:390px) { .tutorial-card { padding:14px; }.tutorial-card h2 { font-size:18px; }.tutorial-card p { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { .tutorial-focus { animation:none!important; } }

/* Keep home and gameplay on the same proportional portrait stage. */
.game-shell {
  left:50%!important; right:auto!important; top:50%!important; bottom:auto!important;
  width:var(--portrait-stage-width)!important; height:var(--portrait-stage-height)!important;
  min-height:0; aspect-ratio:941 / 1672;
  margin:0!important; translate:none!important; transform:translate(-50%,-50%)!important;
}

/* Compact HUD with gameplay stacked upward and a bottom banner mount. */
.game-shell {
  grid-template-rows:auto auto auto auto auto 50px;
  align-content:space-between;
}
.game-shell .board-wrap { align-self:start; }
.banner-ad-slot {
  width:100%; height:50px; min-height:50px;
  align-self:end; justify-self:stretch; overflow:hidden;
  background:#000;
}
.game-shell .level-strip { display:none!important; }
.game-shell .topbar {
  min-height:64px;
  display:grid;
  grid-template-columns:minmax(112px,1fr) auto;
  align-items:center;
  gap:10px;
  padding:6px 16px;
  overflow:hidden;
}
.game-shell .mission-identity {
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-areas:"avatar level";
  align-items:center;
  gap:8px;
}
.game-shell .mission-identity .eyebrow {
  grid-area:level;
  display:block;
  color:#e7fbff;
  font-size:14px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  white-space:nowrap;
}
.game-shell .game-player-chip {
  grid-area:avatar;
  width:38px;
  height:38px;
  max-width:none;
  margin:0;
  padding:2px;
  display:grid;
  place-items:center;
  border:2px solid #6cecff;
  border-radius:50%;
  background:#10196a;
  box-shadow:0 0 0 2px rgba(116,78,255,.55),0 0 14px rgba(66,224,255,.7);
}
.game-shell .game-player-chip[hidden] { display:none!important; }
.game-shell .game-player-chip .player-avatar {
  width:31px;
  height:31px;
  flex-basis:31px;
  border:1px solid #ffe25b;
}
.game-shell .top-actions { min-width:0; gap:7px; }
.game-shell .restart-mini {
  flex:0 0 42px;
  width:42px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:10px 15px;
}
.game-shell .restart-mini b { font-size:27px; line-height:1; }
.game-shell .restart-mini span { display:none!important; }
.game-shell .counter {
  flex:0 0 74px;
  width:74px;
  min-width:74px;
  min-height:50px;
  padding:4px 8px;
}
@media (max-width:420px) {
  .game-shell .topbar {
    min-height:58px;
    grid-template-columns:minmax(94px,1fr) auto;
    gap:5px;
    padding:6px 11px;
  }
  .game-shell .mission-identity { grid-template-columns:34px minmax(0,1fr); gap:6px; }
  .game-shell .game-player-chip { width:34px; height:34px; padding:1px; }
  .game-shell .game-player-chip .player-avatar { width:28px; height:28px; flex-basis:28px; }
  .game-shell .mission-identity .eyebrow { font-size:10px; letter-spacing:.03em; }
  .game-shell .top-actions { gap:4px; }
  .game-shell .restart-mini { flex-basis:36px; width:36px; height:40px; }
  .game-shell .restart-mini b { font-size:21px; }
  .game-shell .counter { flex-basis:62px; width:62px; min-width:62px; min-height:46px; }
}
@media (max-width:340px) {
  .game-shell .topbar { grid-template-columns:minmax(82px,1fr) auto; padding-inline:8px; }
  .game-shell .restart-mini { flex-basis:32px; width:32px; }
  .game-shell .counter { flex-basis:56px; width:56px; min-width:56px; }
}
.game-shell .queue {
  flex:0 0 auto;
  max-height:none;
  overflow:hidden;
  touch-action:none;
}
.game-shell .queue.free-pick-expanded {
  flex:1 1 auto;
  max-height:190px;
  overflow-x:hidden;
  overflow-y:auto;
  touch-action:pan-y;
}

/* Compact fixed rows keep the enlarged board clear on short portrait stages. */
@media (max-height:800px), (max-width:420px) {
  .game-shell {
    gap:3px;
    padding-top:max(3px,env(safe-area-inset-top));
    padding-bottom:max(3px,env(safe-area-inset-bottom));
  }
  .game-shell .topbar { min-height:52px; padding-block:4px; }
  .game-shell .dock-panel {
    height:clamp(72px,23.2vw,92px); max-height:92px; aspect-ratio:auto;
  }
  .game-shell .queue-panel { padding:7px 12px 8px; }
  .game-shell .queue-panel .section-title { margin-bottom:3px; }
  .game-shell .queue-column { padding:3px; }
  .game-shell .queue-unit { height:clamp(62px,8dvh,70px); flex-basis:clamp(62px,8dvh,70px); }
  .game-shell .tools { padding:5px 7px 7px; }
  .game-shell .tool-btn { min-height:48px; aspect-ratio:1.7; }
}