/* Europa Defence UI. Look C: soft low-poly world, so the UI is soft too: rounded, solid, high contrast on top of
   a pastel scene. Tokens first; every colour comes from them. */
:root {
  --ink: #241a52;
  --ink-2: #4a3f86;
  --paper: #fbf8ff;
  --paper-2: #efe9ff;
  --panel: rgba(36, 26, 82, 0.86);
  --panel-line: rgba(233, 153, 255, 0.42);
  --lilac: #e999ff;
  --violet: #a640ff;
  --deep: #7800e0;
  --gold: #f6c766;
  --gold-deep: #d99a3a;
  --mint: #a8f0d8;
  --coral: #ff8f8f;
  --white: #ffffff;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #241a52; overflow: hidden; }
body { font-family: var(--sans); color: var(--white); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
button:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }

/* ---------- HUD: the top row (wave panel, shield, purse and tools) ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; }
.hud-wave { display: grid; gap: 2px; justify-self: start; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 8px 12px; min-width: 112px; }
.hud-wave__n { display: flex; align-items: center; gap: 7px; font-weight: 750; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.hud-wave__s { font-size: 13px; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }
.hud-diff { padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; background: rgba(233, 153, 255, 0.2); color: #f3c6ff; }
.hud-diff--cadet { background: rgba(168, 240, 216, 0.18); color: #c6ffe9; }
.hud-diff--admiral { background: rgba(255, 143, 143, 0.22); color: #ffc9c9; }
.hud-array { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 7px 12px; }
.hud-array__icon { width: 16px; height: 16px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0 22%, var(--lilac) 23% 60%, var(--violet) 61%); }
.hud-array__bar { width: clamp(64px, 22vw, 180px); height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.hud-array__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #d9fff1); transition: width 0.25s ease; }
.hud-array__bar i.low { background: linear-gradient(90deg, var(--coral), #ffc0b0); }
.hud-right { justify-self: end; display: grid; justify-items: end; gap: 8px; }
.hud-coins { position: relative; display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 7px 14px 7px 9px; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.hud-coins.short { animation: coinshort 0.45s ease; border-color: rgba(255, 143, 143, 0.85); }
@keyframes coinshort { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.hud-need { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); z-index: 1; padding: 4px 10px; border-radius: 999px; background: #ffe1dc; color: #8c1d37; font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgba(20, 10, 60, 0.3); }
.coin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff6d8 0 18%, var(--gold) 19% 62%, var(--gold-deep) 63%); box-shadow: inset 0 0 0 1.5px rgba(160, 100, 20, 0.35); flex: none; }
.coin--bump { animation: coinbump 0.25s ease; }
@keyframes coinbump { 50% { transform: scale(1.3); } }
.hud-tools { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.hud-speed { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-line); }
.hud-speed button { min-width: 34px; height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, 0.78); font-weight: 800; font-size: 13.5px; letter-spacing: -0.02em; }
.hud-speed button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe9a6, var(--gold)); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(217, 154, 58, 0.6); }
.hud-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--panel-line); background: var(--panel); display: grid; place-items: center; padding: 0; }
.hud-btn svg { width: 20px; height: 20px; fill: var(--white); stroke: var(--white); }
.hud-btn.muted .wave1, .hud-btn.muted .wave2 { display: none; }
@media (prefers-reduced-motion: reduce) { .hud-coins.short { animation: none; } }

/* ---------- things on the ice: floating numbers, coins on their way to the purse ---------- */
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float-num { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 17px; color: #fff; text-shadow: 0 0 2px #241a52, 0 0 2px #241a52, 0 2px 0 #241a52, 0 0 12px rgba(36, 26, 82, 0.55); white-space: nowrap; will-change: transform, opacity; pointer-events: none; }
.float-num.gold { color: #ffe08a; font-size: 19px; }
.float-num.mint { color: #c6ffe9; }
.float-num.lilac { color: #f3c6ff; }
.float-num.bad { color: #ffb4b4; }
.coin-fly { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.coin-fly .coin { width: 17px; height: 17px; box-shadow: inset 0 0 0 1.5px rgba(160, 100, 20, 0.35), 0 0 10px rgba(255, 214, 110, 0.85); }

/* ---------- comms: Juno and The Algorithm during play, one typed line at a time ---------- */
.comms { position: absolute; z-index: 3; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 86px); transform: translateX(-50%); display: flex; align-items: center; gap: 11px; width: max-content; max-width: min(500px, calc(100vw - 320px)); padding: 8px 14px 8px 8px; border-radius: 18px; background: rgba(251, 248, 255, 0.97); color: var(--ink); box-shadow: 0 0 0 1.5px rgba(166, 64, 255, 0.45), 0 12px 28px rgba(20, 10, 60, 0.35); pointer-events: auto; cursor: pointer; }
.comms[hidden] { display: none; }
.comms img { width: 48px; height: 48px; border-radius: 12px; flex: none; object-fit: cover; background: var(--paper-2); }
.comms__body { min-width: 0; }
.comms__body b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--deep); }
.comms__body p { margin: 1px 0 0; font-size: 15px; line-height: 1.35; font-weight: 650; min-height: 1.35em; }
.comms__rest { visibility: hidden; }
.comms.in { animation: commsin 0.32s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes commsin { from { opacity: 0; transform: translate(-50%, -8px) scale(0.96); } }
.comms--algo { background: rgba(31, 12, 39, 0.96); color: #ffe1e6; box-shadow: 0 0 0 1.5px rgba(255, 120, 140, 0.6), 0 12px 28px rgba(20, 0, 30, 0.45); }
.comms--algo .comms__body b { color: #ff9fb0; }
.comms--algo img { background: #1b0f3d; }
.comms--algo.in { animation: commsin 0.32s cubic-bezier(0.2, 1.3, 0.4, 1), glitch 0.4s steps(3) 0.32s 2; }
@keyframes glitch { 33% { transform: translateX(calc(-50% + 3px)); filter: hue-rotate(40deg); } 66% { transform: translateX(calc(-50% - 2px)); } }
.comms__side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-left: 4px; flex: none; }
.comms__dots { display: flex; gap: 4px; }
.comms__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(76, 0, 143, 0.18); }
.comms__dots i.on { background: var(--deep); }
.comms__skip { border: 0; border-radius: 999px; padding: 6px 12px; font: 750 12.5px/1 var(--sans); background: var(--paper-2); color: var(--ink-2); cursor: pointer; }
.comms--sticky { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(246, 199, 102, 0.45), 0 12px 28px rgba(20, 10, 60, 0.35); cursor: default; }
/* on a phone, under the top row, which grows with the wave panel's lines (--hud-edge: its measured bottom, from main) */
@media (max-width: 600px) {
  .comms { left: 12px; right: 76px; transform: none; width: auto; max-width: none; top: max(calc(env(safe-area-inset-top, 0px) + 166px), calc(var(--hud-edge, 0px) + 8px)); padding: 7px 12px 7px 7px; gap: 9px; }
  .comms.low { top: max(calc(env(safe-area-inset-top, 0px) + 236px), calc(var(--hud-edge, 0px) + 64px)); }
  .comms img { width: 42px; height: 42px; }
  .comms__body p { font-size: 14.5px; }
  .comms.in { animation-name: commsinm; }
  .comms--algo.in { animation: commsinm 0.32s cubic-bezier(0.2, 1.3, 0.4, 1), glitchm 0.4s steps(3) 0.32s 2; }
}
@keyframes commsinm { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
/* aiming a power (#app.aiming, from main): Juno's box lets taps through to the ground under it and fades so the drones
   it covers show (on a short phone it sits over the middle of the map); Skip still takes a tap */
#app.aiming .comms { pointer-events: none; opacity: 0.6; transition: opacity 0.2s; }
#app.aiming .comms__skip { pointer-events: auto; }
@keyframes glitchm { 33% { transform: translateX(3px); filter: hue-rotate(40deg); } 66% { transform: translateX(-2px); } }

/* ---------- joystick ---------- */
#joy { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
#joy.on { opacity: 1; }
.joy-base { position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 2px solid rgba(255, 255, 255, 0.45); }
.joy-knob { position: absolute; left: 34px; top: 34px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(20, 10, 60, 0.35); }

/* ---------- dialogue ---------- */
#dialogue { position: absolute; inset: 0; pointer-events: auto; background: linear-gradient(180deg, rgba(20, 12, 50, 0) 45%, rgba(20, 12, 50, 0.55)); }
.dlg-skip { position: absolute; right: 14px; top: calc(env(safe-area-inset-top, 0px) + 14px); border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(36, 26, 82, 0.7); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 15px; }
.dlg-portrait { position: absolute; left: max(12px, calc(50% - 260px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); width: min(46vw, 230px); aspect-ratio: 1; pointer-events: none; }
.dlg-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; border: 3px solid var(--paper); box-shadow: 0 12px 30px rgba(20, 10, 60, 0.4); background: var(--paper-2); }
.dlg-portrait.enter img { animation: portraitin 0.35s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes portraitin { from { transform: translateY(18px) scale(0.94); opacity: 0; } }
.dlg-box { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); max-width: 560px; margin-inline: auto; min-height: 136px; padding: 18px 20px 20px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 14px 36px rgba(20, 10, 60, 0.45); }
.dlg-name { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--deep); margin-bottom: 6px; }
.dlg-name.villain { color: #c0274e; }
.dlg-text { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 550; min-height: 50px; }
.dlg-next { position: absolute; right: 18px; bottom: 14px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 11px solid var(--ink-2); animation: nudge 0.9s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* ---------- screens ---------- */
#screens { position: absolute; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 16px; pointer-events: auto; background: radial-gradient(ellipse at 50% 45%, rgba(36, 26, 82, 0.05), rgba(20, 12, 50, 0.42)); }
/* a card taller than the window (a phone on its side, a long game over) scrolls inside it */
.card { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 26px 24px 24px; border-radius: 26px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 20px 60px rgba(20, 10, 60, 0.5); }
.card h1 { margin: 0; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); }
.card h2 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.card p { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.card .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 4px; }
.card .stat { background: var(--paper-2); border-radius: 14px; padding: 10px 6px; }
.card .stat b { display: block; font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.card .stat span { font-size: 13px; color: var(--ink-2); }
.btn { display: block; width: 100%; margin-top: 18px; border: 0; border-radius: 999px; padding: 15px 20px; font-weight: 800; font-size: 17px; color: var(--white); background: linear-gradient(180deg, #b25cff, var(--deep)); box-shadow: 0 6px 0 #4c008f, 0 12px 24px rgba(76, 0, 143, 0.35); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #4c008f; }
.btn--ghost { color: var(--ink); background: var(--paper-2); box-shadow: none; margin-top: 10px; font-weight: 700; font-size: 15px; padding: 12px 18px; }
.card .best { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.card .hint { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.title-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 12px; background: radial-gradient(circle at 38% 32%, #ffe9d2 0 14%, #f0c49c 15% 34%, #d39b70 35% 52%, #f3e1c6 53% 70%, #c58b62 71%); box-shadow: 0 0 0 6px rgba(166, 64, 255, 0.18); }
@media (prefers-reduced-motion: reduce) { .comms.in, .comms--algo.in, .dlg-portrait.enter img, .dlg-next { animation: none; } }

/* ---------- banner ---------- */
/* over Juno's comms box (z-index 4) for its moment; the dialogue and the screens still cover it */
.banner { position: absolute; z-index: 5; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 96px); transform: translate(-50%, -10px); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 26px rgba(20, 10, 60, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.banner.on { opacity: 1; transform: translate(-50%, 0); }
.banner.boss { background: #2a0f2e; color: #ffd5dc; box-shadow: 0 0 0 1px rgba(255, 120, 140, 0.6), 0 10px 26px rgba(20, 10, 60, 0.4); }
.banner.good { background: linear-gradient(180deg, #f4fffa, #cdf8e8); }
.banner.warn { background: linear-gradient(180deg, #fff8e6, #ffe3a6); }

/* ---------- the villain's dialogue, and the intro's name question ---------- */
#dialogue.villain .dlg-box { background: #1f0c27; color: #ffe1e6; box-shadow: 0 0 0 1px rgba(255, 120, 140, 0.5), 0 14px 36px rgba(20, 10, 60, 0.5); }
#dialogue.villain .dlg-portrait img { border-color: #ff8a9a; background: #1b0f3d; }
#dialogue.villain .dlg-portrait.enter img { animation: portraitin 0.35s cubic-bezier(0.2, 1.2, 0.4, 1), glitchimg 0.5s steps(4) 0.35s 2; }
#dialogue.villain .dlg-next { border-top-color: #ff9fb0; }
@keyframes glitchimg { 25% { transform: translateX(4px); filter: hue-rotate(50deg) saturate(1.6); } 50% { transform: translateX(-3px); } 75% { transform: translateX(2px); filter: none; } }
.card .best .new { color: var(--deep); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .banner { transition: none; } #dialogue.villain .dlg-portrait.enter img { animation: none; } }

/* ---------- level-up card ---------- */
.lvcard { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 84px); width: min(340px, calc(100vw - 32px)); transform: translateX(-50%); padding: 14px 18px 16px; border-radius: 20px; text-align: center; color: #fff; background: linear-gradient(160deg, #8d5cff, #4c008f 70%); box-shadow: 0 0 0 2px var(--gold), 0 0 32px rgba(246, 199, 102, 0.55), 0 18px 40px rgba(20, 10, 60, 0.5); overflow: hidden; pointer-events: none; animation: lvin 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); }
.lvcard::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: shine 1.1s ease 0.25s; }
.lvcard__lv { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ffe08a; }
.lvcard__lv b { font-size: 34px; letter-spacing: -0.02em; margin-left: 4px; vertical-align: -5px; color: #fff; }
.lvcard__title { margin-top: 2px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.lvcard__stats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; font-weight: 650; }
.lvcard__stats li { background: rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 5px 10px; }
.lvcard__stats li span { color: #c6ffe9; font-weight: 700; }
.lvcard.out { animation: lvout 0.35s ease forwards; }
@keyframes lvin { from { transform: translateX(-50%) scale(0.6); opacity: 0; } }
@keyframes lvout { to { transform: translateX(-50%) translateY(-16px) scale(0.92); opacity: 0; } }
@keyframes shine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .lvcard, .lvcard::after, .lvcard.out { animation: none; } }

/* ---------- the next wave's line-up ---------- */
.hud-next { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; max-width: 150px; }
.hud-next .chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px 2px 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-next .chip svg { width: 14px; height: 14px; fill: #c9b9ff; }
.hud-next .chip.boss { background: rgba(255, 120, 140, 0.28); }

/* ---------- round 3: rank, medals, badges, Hangar, toasts ---------- */
@media (max-width: 600px) { .lvcard { top: calc(env(safe-area-inset-top, 0px) + 206px); } }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.row2 .btn { margin-top: 0; }
.btn--link { background: none; box-shadow: none; color: var(--deep); font-weight: 700; font-size: 14.5px; padding: 10px; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; }
.btn--link:active { transform: none; box-shadow: none; }
.card--wide { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.rank { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; padding: 10px 12px; border-radius: 16px; background: var(--paper-2); text-align: left; }
.rank__badge { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #b25cff, var(--deep)); color: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 0 0 2px var(--gold); font-variant-numeric: tabular-nums; }
.rank__body { flex: 1; min-width: 0; }
.rank__label { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.rank__bar { position: relative; height: 9px; margin: 5px 0 3px; border-radius: 999px; background: rgba(36, 26, 82, 0.12); overflow: hidden; }
.rank__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--lilac)); }
.rank__next { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.medal { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; margin-left: 4px; border-radius: 999px; background: var(--paper-2); font-weight: 750; font-size: 13px; color: var(--ink); }
.medal::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--m) 20%); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12); }
.hangar__row { margin-top: 14px; text-align: left; }
.hangar__label { font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.hangar__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.swatch { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 14px; border: 2px solid transparent; background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 13px; }
.swatch i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(36, 26, 82, 0.18), 0 2px 6px rgba(36, 26, 82, 0.15); }
.swatch.on { border-color: var(--violet); background: #fff; }
.swatch.locked { opacity: 0.55; cursor: not-allowed; }
.swatch small { font-size: 11.5px; color: var(--ink-2); font-weight: 650; }
.badges { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; text-align: left; }
.badge { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: start; padding: 9px 10px; border-radius: 14px; background: var(--paper-2); opacity: 0.6; }
.badge.got { opacity: 1; background: linear-gradient(180deg, #fffaf0, #fff0c8); }
.badge__icon { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #c9c3f2 20%); }
.badge.got .badge__icon { background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--gold) 20% 64%, var(--gold-deep) 66%); box-shadow: 0 0 10px rgba(246, 199, 102, 0.7); }
.badge b { font-size: 13.5px; color: var(--ink); line-height: 1.25; }
.badge small { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.toast { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 150px); transform: translate(-50%, -8px); display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px; background: linear-gradient(180deg, #fff6d8, #ffe39a); color: var(--ink); font-weight: 800; font-size: 14.5px; box-shadow: 0 10px 26px rgba(20, 10, 60, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) {
  .toast { top: calc(env(safe-area-inset-top, 0px) + 212px); max-width: calc(100vw - 32px); white-space: normal; border-radius: 18px; line-height: 1.25; }
  .toast i { flex: none; }
  .toast small { display: block; }
}
.toast i { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--gold) 20% 64%, var(--gold-deep) 66%); }
.toast small { font-weight: 650; color: var(--ink-2); }
.hud-medal { font-size: 11px; color: rgba(255, 255, 255, 0.78); margin-top: 3px; white-space: nowrap; }
.hud-medal i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--m); margin-right: 4px; vertical-align: -1px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.screen--low { align-items: end; background: linear-gradient(180deg, transparent 30%, rgba(20, 12, 50, 0.38)); }
/* on a screen wider than tall the card stands beside the commander, as the Hangar's camera frames them (a phone on
   its side included) */
@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
  .screen--low { align-items: center; justify-items: end; padding-right: max(32px, 7vw); background: linear-gradient(90deg, transparent 45%, rgba(20, 12, 50, 0.32)); }
  /* beside the commander the card may be the screen's height (the rule below, for a card under them, used to win) */
  .screen--low > .card--hangar { width: min(530px, 46vw); max-height: calc(100dvh - 64px); }
}
.card--hangar { max-height: min(62dvh, 560px); padding-top: 20px; }
.card--hangar h2 { margin-top: 0; }
@media (max-width: 600px) { .card--hangar { max-height: 58dvh; } .card--hangar .hangar__items { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } }
/* Done stays in reach on long lists */
.card--wide .btn[data-back] { position: sticky; bottom: 6px; margin-top: 16px; box-shadow: 0 6px 0 #4c008f, 0 12px 24px rgba(76, 0, 143, 0.35), 0 -12px 16px 6px var(--paper); }

/* ---------- announcements, the boss bar, new-enemy cards, the alarm ---------- */
.announce { position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%); width: min(92vw, 720px); text-align: center; pointer-events: none; opacity: 0; color: #fff; }
.announce.on { animation: annIn 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
.announce.on.out { animation: annOut 0.45s ease forwards; }
.announce__title { font-weight: 900; font-size: clamp(34px, 7vw, 68px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; text-shadow: 0 3px 0 rgba(60, 20, 120, 0.55), 0 0 28px rgba(190, 140, 255, 0.85); }
.announce__sub { margin-top: 10px; font-weight: 750; font-size: clamp(15px, 2.4vw, 20px); letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(30, 10, 70, 0.8); }
.announce.boss .announce__title { color: #ffe3ec; text-shadow: 0 3px 0 rgba(120, 0, 40, 0.6), 0 0 32px rgba(255, 70, 120, 0.95); }
.announce.boss::before, .announce.boss::after { content: ""; display: block; height: 14px; margin: 0 auto 14px; width: min(100%, 560px); background: repeating-linear-gradient(-45deg, #ff4f7e 0 14px, #2a0f3a 14px 28px); border-radius: 3px; opacity: 0.9; }
.announce.boss::after { margin: 14px auto 0; }
.announce.gold .announce__title { color: #fff4cf; text-shadow: 0 3px 0 rgba(120, 70, 0, 0.55), 0 0 28px rgba(255, 200, 80, 0.95); }
.announce.good .announce__title { color: #e9fff8; text-shadow: 0 3px 0 rgba(0, 80, 60, 0.45), 0 0 26px rgba(120, 255, 210, 0.85); }
@keyframes annIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); filter: blur(6px); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }
@keyframes annOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -62%) scale(0.92); } }
.vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s; background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 40, 90, 0.38) 100%); }
.vignette.on { opacity: 0.75; animation: alarm 1.6s ease-in-out infinite; }
.vignette.pulse { animation: alarmHard 0.5s ease-in-out 4; opacity: 1; }
@keyframes alarm { 50% { opacity: 0.35; } }
@keyframes alarmHard { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.boss-bar__name { font-weight: 900; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: #ffe3ec; text-shadow: 0 2px 6px rgba(80, 0, 30, 0.8); margin-bottom: 5px; }
.boss-bar__track { position: relative; height: 14px; border-radius: 999px; background: rgba(30, 10, 50, 0.72); box-shadow: 0 0 0 2px rgba(255, 120, 160, 0.55), 0 6px 18px rgba(30, 0, 30, 0.45); overflow: hidden; }
.boss-bar__track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 1) * 100%); background: linear-gradient(90deg, #ff3f73, #ff8fb3); transition: width 0.15s; }
.boss-bar__track b { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); background: linear-gradient(90deg, rgba(150, 235, 255, 0.85), rgba(210, 250, 255, 0.95)); mix-blend-mode: screen; transition: width 0.15s; }
.enemy-card { z-index: 2; }
.enemy-card.on { opacity: 1; transform: translate(-50%, 0); }
.enemy-card__name { font-weight: 900; font-size: 16px; color: #ffd6e5; }
.enemy-card__line { margin: 3px 0 0; font-size: 14px; color: #efe9ff; line-height: 1.35; }
@media (max-width: 600px) {
  .enemy-card__line { font-size: 13px; }
  .toast { top: calc(env(safe-area-inset-top, 0px) + 236px); }
}
.hud-next .chip.boss { color: #fff; background: linear-gradient(90deg, #ff3f73, #c2185b); font-weight: 800; padding-right: 9px; }
@media (prefers-reduced-motion: reduce) { .announce.on, .announce.on.out, .vignette.on, .vignette.pulse { animation: none; } .announce.on { opacity: 1; } .announce.on.out { opacity: 0; } }
/* the Hangar's tabs and item drawings; the next reward */
/* every tab in view: one row on a laptop, wrapping onto a second on a phone */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.tab { flex: none; padding: 7px 10px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 750; font-size: 13.5px; }
.tab.on { background: linear-gradient(180deg, #b25cff, var(--deep)); color: #fff; box-shadow: 0 3px 0 #4c008f; }
.card--hangar .hangar__items { margin-top: 10px; }
.swatch svg { width: 30px; height: 30px; fill: currentColor; color: var(--deep); }
.swatch.on svg { color: #a640ff; }
.next-reward { margin: 10px 0 0; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
/* the Locker's tiles: a picture of the item on the concepts' lavender (a silhouette while locked), its name, and for a
   shop item its rarity as a coloured edge along the bottom */
.swatch__pic { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 12px; background: radial-gradient(circle at 50% 42%, #f4f0ff, #e2dafa 72%); }
.swatch__art--pic { width: 66px; height: 66px; object-fit: contain; }
.swatch.locked { opacity: 0.8; }
.swatch.locked .swatch__art--pic { filter: brightness(0) saturate(0); opacity: 0.32; }
.swatch.locked svg.swatch__art { opacity: 0.4; }
.swatch__name { font-size: 12.5px; line-height: 1.2; text-align: center; }
.swatch.rar { --rar: #8fd9bf; box-shadow: inset 0 -4px 0 var(--rar); }
.swatch.rar--rare { --rar: #6fb6ff; }
.swatch.rar--epic { --rar: #b06bff; }
.swatch.rar--legendary { --rar: #f6c766; }
.swatch__art--words { display: block; padding: 6px 10px; border-radius: 999px; background: linear-gradient(180deg, #fff6d8, #ffe39a); color: #5a3300; font-weight: 800; font-size: 12.5px; line-height: 1.2; text-align: center; }
.hangar__items--words { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hangar__items--words .swatch__pic { width: auto; height: auto; padding: 6px; background: none; }
.hangar__items--words .swatch__name { display: none; }
.swatch.locked .swatch__art--words { filter: grayscale(1); opacity: 0.55; }
.callsign__title { display: inline-block; margin-top: 2px; padding: 2px 10px; border-radius: 999px; background: linear-gradient(180deg, #fff6d8, #ffe39a); color: #5a3300; font-weight: 800; font-size: 12.5px; }
.hangar__review { margin: 6px 0 0; font-size: 12.5px; font-weight: 750; color: #7800e0; }
.hangar__note { margin: 10px 0 0; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.tabs--locker .tab { padding: 7px 9px; font-size: 13px; }
.rep-item .rep-item__art--pic { width: 52px; height: 52px; object-fit: contain; fill: none; filter: drop-shadow(0 3px 4px rgba(10, 6, 30, 0.45)); }
.rep-item .rep-item__art--words { width: auto; height: auto; padding: 4px 8px; border-radius: 999px; background: linear-gradient(180deg, #fff6d8, #ffe39a); color: #5a3300; font-size: 11.5px; font-weight: 800; line-height: 1.15; text-align: center; }
@media (max-width: 600px) { .swatch__pic, .swatch__art--pic { width: 56px; height: 56px; } .rep-item .rep-item__art--pic { width: 42px; height: 42px; } }
.badge__gift { grid-column: 2; margin-top: 3px; font-style: normal; font-size: 11.5px; font-weight: 750; color: #7800e0; }

/* slow motion while choosing in a wave: a soft violet edge */
.slowmo-edge { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s; background: radial-gradient(ellipse at center, transparent 58%, rgba(120, 60, 220, 0.34) 100%); }
.slowmo-edge.on { opacity: 1; }
/* ---------- the break: the Launch button with its draining bonus, and where the next wave comes from ---------- */
.call-btn { overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 13px 18px 15px; }
.call-btn b { margin-left: 0; color: #6a3c00; }
.call-btn b:empty { display: none; }
.call-key { display: none; font: 700 10.5px/1 var(--sans); padding: 3px 6px; border-radius: 6px; background: rgba(36, 26, 82, 0.1); border: 1px solid rgba(36, 26, 82, 0.2); color: var(--ink-2); }
@media (pointer: fine) { .call-key { display: inline-block; } }
/* a laptop narrower than 1320: the key hint goes, so a late wave's longer Launch keeps clear of the tray */
@media (pointer: fine) and (max-width: 1320px) { .call-key { display: none; } }
.call-drain { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 3px; border-radius: 999px; background: rgba(36, 26, 82, 0.14); }
.call-drain::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); border-radius: inherit; background: var(--deep); }
.call-btn.lit { box-shadow: 0 6px 0 var(--gold-deep), 0 0 0 4px rgba(246, 199, 102, 0.55), 0 0 26px 8px rgba(246, 199, 102, 0.5); }
.am { position: absolute; left: 0; top: 0; display: grid; justify-items: center; pointer-events: none; will-change: transform; }
.am .pin { display: flex; align-items: center; gap: 5px; padding: 5px 11px 5px 6px; border-radius: 999px; background: #2b2163; border: 1.5px solid #ff8fb0; color: #fff; font-size: 15px; box-shadow: 0 0 18px rgba(255, 110, 160, 0.55); white-space: nowrap; }
.am .pin svg { width: 19px; height: 19px; fill: #ffc4d6; color: #ffc4d6; }
.am .pin b { font-weight: 850; }
.am .pin small { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.am .stem { width: 2px; height: 18px; background: linear-gradient(#ff8fb0, rgba(255, 143, 176, 0.2)); }
.am .dot { width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #ff8fb0; box-shadow: 0 0 0 4px rgba(255, 143, 176, 0.3); animation: amdot 1.4s ease-in-out infinite; }
@keyframes amdot { 50% { box-shadow: 0 0 0 7px rgba(255, 143, 176, 0.12); } }
.am.air .pin { border-color: #9fe8ff; box-shadow: 0 0 18px rgba(140, 220, 255, 0.55); }
.am.air .pin svg { fill: #cdf3ff; color: #cdf3ff; }
.am.air .stem { background: linear-gradient(#9fe8ff, rgba(159, 232, 255, 0.2)); }
.am.air .dot { background: #9fe8ff; box-shadow: 0 0 0 4px rgba(159, 232, 255, 0.3); }
.am.moved .stem, .am.moved .dot { visibility: hidden; }
/* a path's pin: its ground drones, then its flyers (in the flyers' colour) */
.am__g, .am__a { display: inline-flex; align-items: center; gap: 5px; }
.am__g[hidden], .am__a[hidden] { display: none; }
.am__g + .am__a { margin-left: 4px; }
.am .am__a svg { fill: #cdf3ff; color: #cdf3ff; }
.hud-wave.tappable { pointer-events: auto; cursor: pointer; }
.hud-wave .guide-link { display: none; justify-self: start; align-items: center; gap: 4px; margin-top: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(168, 240, 216, 0.16); color: #d6fff1; font-size: 11.5px; font-weight: 750; box-shadow: 0 0 0 1px rgba(168, 240, 216, 0.45); }
.hud-wave.tappable .guide-link { display: inline-flex; }
.guide-link svg { width: 12px; height: 12px; fill: none; stroke: var(--mint); stroke-width: 2.4; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .am .dot { animation: none; } }
/* ---------- the intro's name question ---------- */
.dlg-ask { margin-top: 12px; display: grid; gap: 10px; }
.dlg-ask[hidden] { display: none; }
.dlg-ask__row { display: flex; gap: 8px; }
.dlg-ask input { flex: 1; min-width: 0; border: 2px solid rgba(120, 0, 224, 0.35); border-radius: 14px; padding: 11px 14px; font: 700 17px/1.2 var(--sans); color: var(--ink); background: #fff; }
.dlg-ask input:focus { outline: none; border-color: var(--deep); box-shadow: 0 0 0 4px rgba(166, 64, 255, 0.18); }
.dlg-dice { flex: none; width: 48px; border: 0; border-radius: 14px; background: var(--paper-2); color: var(--deep); display: grid; place-items: center; cursor: pointer; }
.dlg-dice svg { width: 26px; height: 26px; fill: currentColor; }
.dlg-ok { border: 0; border-radius: 999px; padding: 13px 18px; font: 800 16px/1 var(--sans); color: #fff; background: linear-gradient(180deg, #b25cff, var(--deep)); box-shadow: 0 5px 0 #4c008f; cursor: pointer; }
.dlg-ok:active { transform: translateY(3px); box-shadow: 0 2px 0 #4c008f; }
.dlg-err { margin: 0; font-size: 14px; font-weight: 700; color: #c0274e; }
.dlg-err[hidden] { display: none; }
#dialogue.asking .dlg-next { display: none; }
/* on a phone the keyboard covers the bottom of the screen: the question moves up */
@media (max-width: 600px) {
  #dialogue.asking .dlg-box { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 64px); }
  #dialogue.asking .dlg-portrait { display: none; }
}
/* ---------- the Hangar's call sign, the game over name ---------- */
.callsign { margin: 14px 0 4px; text-align: left; }
.callsign label { display: block; font-size: 13px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.callsign__row { display: flex; gap: 8px; }
.callsign__row input { flex: 1; min-width: 0; border: 2px solid rgba(120, 0, 224, 0.28); border-radius: 12px; padding: 9px 12px; font: 700 16px/1.2 var(--sans); color: var(--ink); background: #fff; }
.callsign__row input:focus { outline: none; border-color: var(--deep); box-shadow: 0 0 0 4px rgba(166, 64, 255, 0.16); }
.callsign__dice { flex: none; width: 42px; border: 0; border-radius: 12px; background: var(--paper-2); color: var(--deep); display: grid; place-items: center; cursor: pointer; }
.callsign__dice svg { width: 22px; height: 22px; fill: currentColor; }
.callsign__save { flex: none; border: 0; border-radius: 12px; padding: 0 14px; font: 800 14px/1 var(--sans); color: #fff; background: var(--deep); cursor: pointer; }
.callsign__msg { display: block; min-height: 1.2em; margin-top: 5px; font-size: 13px; font-weight: 700; color: #1d8a64; }
.callsign__msg.bad { color: #c0274e; }
/* ---------- the tutorial: the ghost thumb or keys under the astronaut, the dim round Launch, the wreck count ---------- */
.tut-hint { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; will-change: transform; }
.tut-hint[hidden] { display: none; }
.tut-thumb { position: relative; display: block; width: 130px; height: 60px; }
.tut-thumb::before { content: ""; position: absolute; left: 50px; top: 27px; width: 52px; height: 0; border-top: 3px dashed rgba(76, 0, 143, 0.45); border-radius: 2px; }
.tut-thumb i { position: absolute; left: 30px; top: 9px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 3px rgba(120, 0, 224, 0.6), 0 0 0 9px rgba(166, 64, 255, 0.22), 0 6px 16px rgba(20, 10, 60, 0.4); animation: tutdrag 1.8s ease-in-out infinite; }
@keyframes tutdrag { 0% { transform: translate(0, 0) scale(1.15); opacity: 0.2; } 15% { opacity: 1; transform: scale(0.92); } 70% { transform: translate(52px, 0) scale(0.92); opacity: 1; } 88%, 100% { transform: translate(52px, 0) scale(1.1); opacity: 0.2; } }
.tut-keys { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: 34px 34px; gap: 5px; }
.tut-keys kbd { display: grid; place-items: center; border-radius: 8px; background: rgba(251, 248, 255, 0.92); color: var(--ink); font: 800 15px/1 var(--sans); box-shadow: 0 3px 0 rgba(76, 0, 143, 0.35), 0 8px 16px rgba(20, 10, 60, 0.25); animation: tutkey 2.4s ease-in-out infinite; }
.tut-keys .w { grid-column: 2; grid-row: 1; }
.tut-keys .a { grid-column: 1; grid-row: 2; animation-delay: 0.6s; }
.tut-keys .s { grid-column: 2; grid-row: 2; animation-delay: 1.2s; }
.tut-keys .d { grid-column: 3; grid-row: 2; animation-delay: 1.8s; }
@keyframes tutkey { 0%, 30%, 100% { transform: none; background: rgba(251, 248, 255, 0.92); } 12% { transform: translateY(3px); background: #d9fff1; box-shadow: 0 0 0 rgba(76, 0, 143, 0.35), 0 4px 10px rgba(20, 10, 60, 0.25); } }
.tut-hint.again .tut-thumb, .tut-hint.again .tut-keys { animation: tutagain 0.7s ease 2; }
@keyframes tutagain { 50% { transform: scale(1.25); filter: drop-shadow(0 0 12px rgba(168, 255, 224, 0.9)); } }
.tut-dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--x, 80%) var(--y, 92%), transparent var(--r, 90px), rgba(16, 10, 44, 0.55) calc(var(--r, 90px) + 28px)); animation: tutdim 0.4s ease; }
.tut-dim[hidden] { display: none; }
.tut-dim.again { animation: tutdimagain 0.8s ease 2; }
@keyframes tutdim { from { opacity: 0; } }
@keyframes tutdimagain { 50% { background: radial-gradient(circle at var(--x, 80%) var(--y, 92%), transparent calc(var(--r, 90px) + 12px), rgba(16, 10, 44, 0.62) calc(var(--r, 90px) + 40px)); } }
.comms__badge { font: 800 12.5px/1 var(--sans); color: var(--deep); background: rgba(166, 64, 255, 0.12); border-radius: 999px; padding: 4px 9px; }
.comms__badge:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .tut-thumb i, .tut-keys kbd, .tut-dim, .tut-dim.again, .tut-hint.again .tut-thumb, .tut-hint.again .tut-keys { animation: none; } .tut-thumb i { transform: translate(23px, -3px); } }
.card .row-links { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; }
.card .row-links .btn--link { width: auto; }
/* ---------- the field guide ---------- */
.card--guide { width: min(880px, 100%); max-height: min(90dvh, 760px); display: flex; flex-direction: column; text-align: left; padding: 22px 22px 18px; }
.guide__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.guide__top .tabs { margin: 0; }
.guide__grid { display: grid; grid-template-columns: 212px 1fr; gap: 16px; margin-top: 14px; min-height: 0; flex: 1; }
.guide__list { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; overflow: auto; }
.gl { width: 100%; border: 0; border-radius: 14px; padding: 6px 4px 7px; background: var(--paper-2); color: var(--ink); display: grid; justify-items: center; gap: 2px; font: 750 12.5px/1.15 var(--sans); cursor: pointer; }
.gl img { width: 64px; height: 64px; object-fit: contain; }
.gl.on { background: #fff; box-shadow: 0 0 0 2px var(--deep), 0 6px 14px rgba(76, 0, 143, 0.2); }
.gl.unmet span { color: var(--ink-2); }
.guide__detail { overflow: auto; padding-right: 4px; min-width: 0; }
.gd-head { display: flex; gap: 14px; align-items: center; }
.gd-head img { width: 112px; height: 112px; flex: none; object-fit: contain; background: radial-gradient(circle at 50% 60%, #efe9ff, rgba(239, 233, 255, 0) 70%); border-radius: 18px; }
.gd-head h3 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
.gd-head h3 em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; background: #c0274e; border-radius: 999px; padding: 3px 8px; vertical-align: middle; margin-left: 6px; }
.gd-head p { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.gd-opens { font-weight: 750; color: var(--deep) !important; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gd-chips span { font-size: 12.5px; font-weight: 750; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); }
.gd-chips--hit span { background: #dcfbef; color: #11613f; }
.gd-chips--miss span { background: #ffe3e8; color: #8c1d37; }
/* the buildings that answer a drone best (info.js BEST) */
.gd-chips--best span { background: #fff1c9; color: #7a4a00; }
.guide__detail h4 { margin: 16px 0 6px; font-size: 14px; color: var(--ink-2); }
.gd-path { display: grid; gap: 8px; }
.gd-step { display: flex; gap: 10px; align-items: center; background: var(--paper-2); border-radius: 14px; padding: 8px 12px 8px 8px; }
.gd-step img { width: 58px; height: 58px; flex: none; object-fit: contain; }
.gd-step b { font-size: 15px; }
.gd-step p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.gd-price { margin-left: 8px; font-size: 13px; font-weight: 800; color: #8a5a00; }
.gd-price .coin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; background: radial-gradient(circle at 35% 35%, #fff4c9, #f6c766 55%, #d99a3a); }
.gd-fork { display: grid; gap: 8px; border-left: 3px solid rgba(166, 64, 255, 0.35); padding-left: 10px; }
.gd-fork small { font-size: 12.5px; font-weight: 750; color: var(--ink-2); }
.gd-brs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.gd-br { display: grid; gap: 8px; }
.gd-br .gd-step { align-items: flex-start; }
.gd-br .gd-step img { width: 50px; height: 50px; }
.gd-br .gd-step b { font-size: 14px; }
.gd-br .gd-step p { font-size: 13px; }
.gd-idea { margin: 0; padding: 6px 10px; border-radius: 12px; font-size: 13px; color: var(--ink-2); background: rgba(166, 64, 255, 0.08); border-top: 3px solid #9ff0ff; }
.gd-br.b1 .gd-idea { border-top-color: #ff8f8f; }
.gd-idea b { display: block; font-size: 14px; color: var(--ink); }
.gd-ab { margin-top: 5px !important; padding: 5px 8px; border-radius: 10px; background: rgba(166, 64, 255, 0.1); }
.gd-ab b { font-size: 13px !important; color: #7a2fd0; }
.gd-step--top { box-shadow: inset 0 0 0 1.5px rgba(217, 154, 58, 0.55); background: linear-gradient(180deg, rgba(255, 233, 166, 0.35), rgba(255, 233, 166, 0) 70%), var(--paper-2); }
.gd-one { font-size: 12px !important; font-weight: 750; color: #8a5a00 !important; }
@media (max-width: 640px) { .gd-brs { grid-template-columns: 1fr; } }
.gd-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 0; }
.gd-stats div { background: var(--paper-2); border-radius: 12px; padding: 8px 12px; }
.gd-stats dt { font-size: 12.5px; font-weight: 750; color: var(--ink-2); }
.gd-stats dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; }
.gd-stats dd small { display: block; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.gd-tip { display: flex; gap: 10px; align-items: center; margin-top: 14px !important; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px rgba(166, 64, 255, 0.35); }
.gd-tip img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.gd-tip b { display: block; font-size: 12px; color: var(--deep); }
.gd-tip span { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.card--guide .btn { margin-top: 14px; flex: none; }
@media (max-width: 640px) {
  .card--guide { padding: 16px 14px 14px; max-height: 92dvh; }
  .guide__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; }
  .guide__list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; gap: 6px; scroll-snap-type: x proximity; }
  .guide__list li { flex: none; width: 82px; scroll-snap-align: center; }
  .gl img { width: 52px; height: 52px; }
  .gd-head img { width: 84px; height: 84px; }
  .gd-head h3 { font-size: 19px; }
}
/* the Commander tab: no list, his powers, then a table of levels */
.guide__grid--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .guide__grid--solo { grid-template-rows: 1fr; } }
.gd-head--hero img { border-radius: 50%; background: radial-gradient(circle at 50% 36%, #6d52dc, #2a1d6b 72%); box-shadow: 0 0 0 3px rgba(166, 64, 255, 0.25); }
.gd-pws { display: grid; gap: 8px; }
.gd-pw { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: start; padding: 10px 12px 11px 10px; border-radius: 14px; background: var(--paper-2); }
.gd-pw__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(180deg, #8d5cff, var(--deep)); box-shadow: 0 3px 0 #4c008f; }
.gd-pw__icon svg { width: 20px; height: 20px; fill: #fff; stroke: #fff; }
.gd-pw b { font-size: 15px; }
.card .gd-pw kbd { margin-left: 7px; vertical-align: 1px; color: var(--ink); background: #fff; border-color: rgba(36, 26, 82, 0.3); }
.gd-pw__when { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 750; color: var(--deep); }
.gd-pw p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.gd-pw p.gd-pw__nums { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.card p.gd-note { margin: 0 0 6px; font-size: 13.5px; }
.gd-levels { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--ink); }
.gd-levels th, .gd-levels td { padding: 7px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(36, 26, 82, 0.09); }
.gd-levels thead th { padding-top: 2px; font-size: 12px; font-weight: 750; color: var(--ink-2); }
.gd-levels tbody th { width: 52px; font-weight: 850; color: var(--deep); font-variant-numeric: tabular-nums; }
.gd-levels .gd-xp { width: 74px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gd-gain { display: block; font-weight: 750; }
.gd-gain--dmg { font-weight: 600; color: var(--ink-2); }
.gd-levels tr.got th { color: #11613f; }
.gd-levels tr.now th, .gd-levels tr.now td { background: rgba(166, 64, 255, 0.08); }
/* the Modes tab: a capture beside each step's lines, stacked on a phone */
.guide__list:has(.gl--mode) { grid-template-columns: minmax(0, 1fr); }
.gl--mode img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; }
.gd-play__intro h3 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
.card .gd-play__intro p { margin: 4px 0 12px; font-size: 15px; color: var(--ink-2); }
.gd-play { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gd-play__step { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: var(--paper-2); }
.gd-play__step img { display: block; width: auto; height: auto; max-width: 100%; max-height: 380px; justify-self: center; border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(36, 26, 82, 0.12); }
.gd-play__step b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.gd-play__n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: linear-gradient(180deg, #8d5cff, var(--deep)); color: #fff; font-size: 13px; font-weight: 850; }
.card .gd-play__step p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
@media (max-width: 640px) {
  .gd-play__step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* a phone on its side: the modes by name only, smaller captures, so the page keeps the room */
@media (max-height: 500px) and (min-width: 641px) {
  .guide__grid:has(.gl--mode) { grid-template-columns: 112px minmax(0, 1fr); }
  .gl--mode img { display: none; }
  .gl--mode { padding: 10px 4px; font-size: 13.5px; }
  .gd-play__step { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .gd-play__step img { max-height: 190px; }
}
/* a phone on its side: a smaller picture at the top of each tab, so more of the guide shows at once */
@media (max-height: 500px) {
  .card.card--guide { padding: 14px 18px 12px; }
  .guide__grid { margin-top: 10px; }
  .gd-head img { width: 64px; height: 64px; }
  .gd-head h3 { font-size: 18px; }
  .gd-head p { font-size: 13.5px; }
}

/* ---------- Europa Defence interface: glass tokens ---------- */
:root {
  --glass: linear-gradient(170deg, rgba(60, 42, 128, 0.9), rgba(27, 18, 68, 0.93));
  --glass-line: rgba(233, 153, 255, 0.36);
  --glass-shadow: 0 14px 34px rgba(12, 6, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --tile: radial-gradient(ellipse 72% 60% at 50% 44%, rgba(176, 140, 255, 0.42), rgba(176, 140, 255, 0) 72%), linear-gradient(180deg, #3d2d8c, #251a60);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --cmd-w: 252px;
  --act-w: 236px;
}
.hud-next .chip img { width: 14px; height: 14px; object-fit: contain; }

/* ---------- the bottom bar: commander chip, tray, Launch and the view button ---------- */
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px calc(var(--safe-b) + 12px); display: grid; grid-template-columns: minmax(var(--cmd-w), 1fr) minmax(0, max-content) minmax(var(--act-w), 1fr); grid-template-areas: "cmd tray act"; align-items: end; gap: 12px; pointer-events: none; }
.hud-cmd { grid-area: cmd; justify-self: start; pointer-events: auto; }
.hud-tray { grid-area: tray; min-width: 0; max-width: 100%; justify-self: center; pointer-events: auto; }
.hud-act { grid-area: act; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hud-act > * { pointer-events: auto; }
.hud-view:empty { display: none; }

/* Launch: the gold button, with the bonus that drains away */
.call-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 13px 18px 15px; font-weight: 800; font-size: 16px; white-space: nowrap; color: var(--ink); background: linear-gradient(180deg, #ffe9a6, var(--gold)); box-shadow: 0 6px 0 var(--gold-deep), 0 10px 22px rgba(20, 10, 60, 0.35); }
.call-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--gold-deep), 0 6px 14px rgba(20, 10, 60, 0.35); }

/* the view button: Hero cam or Command view */
.view-btn { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); color: #fff; font-weight: 750; font-size: 13.5px; white-space: nowrap; }
.view-btn svg { width: 19px; height: 19px; fill: #fff; stroke: #fff; flex: none; }
.view-btn--hero { border-color: rgba(168, 240, 216, 0.6); }

/* keyboard hints, laptops only */
.pw kbd, .view-btn kbd, .sp-sell kbd, .hc-pw kbd, .pw-tip kbd, .gd-pw kbd { display: none; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; font: 700 10px/1 var(--sans); color: rgba(255, 255, 255, 0.92); background: rgba(20, 12, 50, 0.72); border: 1px solid rgba(255, 255, 255, 0.24); }
@media (pointer: fine) { .pw kbd, .view-btn kbd, .sp-sell kbd, .hc-pw kbd, .pw-tip kbd, .gd-pw kbd { display: inline-grid; } }

/* ---------- the tray ---------- */
.tray { position: relative; max-width: 100%; }
.tray__row { display: flex; gap: 6px; max-width: 100%; padding: 8px 8px 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 8px; scrollbar-width: none; touch-action: pan-x; border-radius: 20px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tray__row::-webkit-scrollbar { display: none; }
.tt { position: relative; flex: none; width: 74px; display: grid; justify-items: center; align-content: start; padding: 4px 2px 15px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, 0.09); background: var(--tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); scroll-snap-align: start; touch-action: pan-x; -webkit-touch-callout: none; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.tt img { width: 52px; height: 52px; display: block; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 3px 4px rgba(10, 6, 30, 0.45)); }
.tt__name { margin-top: -1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 750; white-space: nowrap; }
.tt__price, .tt__note { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; border-radius: 999px; background: #211852; border: 1.5px solid rgba(246, 199, 102, 0.9); color: #ffe08a; font-size: 11.5px; font-weight: 850; white-space: nowrap; box-shadow: 0 3px 6px rgba(10, 6, 30, 0.35); font-variant-numeric: tabular-nums; }
.tt__price .coin { width: 11px; height: 11px; }
.tt__note { display: none; padding: 2px 8px; }
.tt--on { border-color: var(--lilac); background: radial-gradient(ellipse 72% 60% at 50% 44%, rgba(244, 196, 255, 0.66), rgba(244, 196, 255, 0) 74%), linear-gradient(180deg, #7a48e8, #431fa2); box-shadow: 0 0 0 3px rgba(233, 153, 255, 0.26), 0 8px 18px rgba(10, 6, 30, 0.4); transform: translateY(-4px); }
@media (hover: hover) { .tt--ready:hover:not(.tt--on) { transform: translateY(-2px); border-color: rgba(233, 153, 255, 0.55); } }
.tt--short img, .tt--full img { opacity: 0.5; filter: saturate(0.55) drop-shadow(0 3px 4px rgba(10, 6, 30, 0.45)); }
.tt--short .tt__name, .tt--full .tt__name, .tt--locked .tt__name { color: rgba(255, 255, 255, 0.55); }
.tt--short .tt__price, .tt--full .tt__price, .tt--locked .tt__price { display: none; }
.tt--short .tt__note, .tt--full .tt__note, .tt--locked .tt__note { display: flex; }
.tt--short .tt__note { color: #ffc2b8; border-color: rgba(255, 143, 143, 0.85); }
.tt--full .tt__note, .tt--locked .tt__note { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.26); background: #261c5c; font-weight: 750; }
.tt--locked { background: linear-gradient(180deg, #2b2066, #1f1650); border-color: rgba(255, 255, 255, 0.05); box-shadow: none; }
.tt--nope { animation: ttnope 0.36s ease; }
@keyframes ttnope { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.tt__hand { display: none; position: absolute; right: -8px; bottom: -12px; width: 34px; height: 38px; z-index: 2; pointer-events: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'%3E%3Cpath d='M10 17V7.5a2 2 0 0 1 4 0V14l1-.4a2 2 0 0 1 2.4 1l.4.8 1.2-.4a2 2 0 0 1 2.5 1.3l.2.6 1-.2a2 2 0 0 1 2.3 1.8V24c0 3-2.4 5.5-5.5 5.5h-3.4a6 6 0 0 1-4.6-2.2L6.6 21a2 2 0 0 1 3-2.6z' fill='%23fff' stroke='%23241a52' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); animation: tthand 1.1s ease-in-out infinite; }
.tt--point .tt__hand { display: block; }
.tt--point { box-shadow: 0 0 0 3px rgba(246, 199, 102, 0.7), 0 0 22px rgba(246, 199, 102, 0.5); }
@keyframes tthand { 50% { transform: translate(-3px, -4px); } }
@media (prefers-reduced-motion: reduce) { .tt, .tt--nope, .tt__hand { animation: none; transition: none; } }

/* ---------- the commander chip ---------- */
.cmd { display: flex; align-items: center; gap: 11px; width: var(--cmd-w); padding: 8px 12px 8px 9px; border-radius: 24px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: box-shadow 0.2s, border-color 0.2s; }
.cmd--sel { border-color: var(--lilac); box-shadow: 0 0 0 2px rgba(233, 153, 255, 0.55), 0 0 26px rgba(233, 153, 255, 0.4), var(--glass-shadow); }
.cmd__face { position: relative; flex: none; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 36%, #6d52dc, #2a1d6b 72%); }
.cmd__xp { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--xp, 0) * 1turn), rgba(255, 255, 255, 0.16) 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3.5px)); mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3.5px)); }
.cmd__face img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block; pointer-events: none; }
.cmd__face--drawn::before { content: attr(data-initial); font-weight: 900; font-size: 26px; color: #fff; }
.cmd__lv { position: absolute; right: -5px; bottom: -4px; min-width: 24px; height: 24px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, #b25cff, var(--deep)); box-shadow: 0 0 0 2px var(--gold); font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.cmd__face.up { animation: cmdup 0.6s ease; }
@keyframes cmdup { 30% { transform: scale(1.18); } }
.cmd__body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cmd__name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 800; font-size: 14px; white-space: nowrap; }
.cmd__nm { overflow: hidden; text-overflow: ellipsis; }
.cmd__name small { flex: none; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.68); }
.cmd__hp { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.cmd__hp i { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 1) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--mint), #d9fff1); transition: width 0.2s; }
.cmd__hp.low i { background: linear-gradient(90deg, var(--coral), #ffc0b0); }
.cmd__down { display: none; }
.cmd--down .cmd__hp { height: 18px; background: rgba(255, 143, 143, 0.2); }
.cmd--down .cmd__down { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #ffd6d6; font-variant-numeric: tabular-nums; }
.cmd--down .cmd__face img { filter: grayscale(0.85) brightness(0.7); }
.cmd__powers { display: flex; gap: 6px; }
.pw { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: linear-gradient(180deg, #8d5cff, var(--deep)); box-shadow: 0 3px 0 #4c008f, 0 6px 14px rgba(20, 10, 60, 0.35); display: grid; place-items: center; }
.pw svg { position: relative; z-index: 1; width: 22px; height: 22px; fill: #fff; stroke: #fff; }
.pw__cd { position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: conic-gradient(rgba(20, 12, 50, 0.74) calc(var(--cd, 0) * 1turn), transparent 0); }
.pw__lock { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; border-radius: 50%; background: rgba(36, 26, 82, 0.82); font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.9); }
.pw kbd { position: absolute; right: -4px; bottom: -4px; z-index: 4; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9.5px; background: #1d1448; border-color: rgba(233, 153, 255, 0.5); }
.pw.locked { border-color: rgba(255, 255, 255, 0.32); box-shadow: none; }
.pw.locked .pw__lock { display: grid; }
.pw.off { opacity: 0.5; box-shadow: none; }
.pw.ready { animation: pwready 1.4s ease-in-out infinite; }
@keyframes pwready { 50% { box-shadow: 0 3px 0 #4c008f, 0 0 0 5px rgba(233, 153, 255, 0.35), 0 6px 14px rgba(20, 10, 60, 0.35); } }
.pw.aiming { border-color: #ffd0f2; box-shadow: 0 0 0 4px rgba(255, 154, 213, 0.55), 0 0 22px rgba(255, 154, 213, 0.6); animation: none; }
.pw:active:not(.locked):not(.off) { transform: translateY(2px); box-shadow: 0 1px 0 #4c008f; }
.pw.nope { animation: ttnope 0.36s ease; }
/* a power whose card is open, and one unlocked this run and not used yet (a gold spark on its corner) */
.pw.tipped { border-color: #ffe9a6; }
.pw { -webkit-touch-callout: none; }
.pw__new { position: absolute; right: -6px; top: -6px; z-index: 5; display: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #241a52; box-shadow: 0 0 0 1.5px var(--gold), 0 2px 6px rgba(10, 6, 30, 0.45); }
.pw__new svg { width: 11px; height: 11px; fill: var(--gold); }
.pw.new .pw__new { display: grid; }
@media (prefers-reduced-motion: reduce) { .pw.ready, .pw.nope, .cmd__face.up { animation: none; } }

/* ---------- a power's card over the chip (js/ui/commander.js places it over the button) ---------- */
.pw-tip { position: absolute; left: 0; top: 0; z-index: 5; width: min(276px, calc(100vw - 16px)); padding: 10px 12px 11px; border-radius: 16px; color: #fff; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; will-change: transform; }
.pw-tip__top { display: flex; align-items: center; gap: 7px; }
.pw-tip__icon, .hc-pw__icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); background: linear-gradient(180deg, #8d5cff, var(--deep)); }
.pw-tip__icon svg, .hc-pw__icon svg { width: 14px; height: 14px; fill: #fff; stroke: #fff; }
.pw-tip--locked .pw-tip__icon, .hc-pw.locked .hc-pw__icon { border-color: rgba(255, 255, 255, 0.32); background: #2b2066; }
.pw-tip--locked .pw-tip__icon svg, .hc-pw.locked .hc-pw__icon svg { opacity: 0.6; }
.pw-tip__top b { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.pw-tip__state { margin-left: auto; padding-left: 6px; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.72); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-tip__state.ready { color: var(--mint); }
.pw-tip--locked .pw-tip__state { color: var(--gold); }
.pw-tip__desc { margin: 7px 0 0; font-size: 13px; font-weight: 650; line-height: 1.38; }
.pw-tip__nums { margin: 4px 0 0; font-size: 12px; line-height: 1.38; color: rgba(255, 255, 255, 0.7); }

/* ---------- the commander's card: the select panel's hero kind ---------- */
.hc-face { position: relative; flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #6d52dc, #2a1d6b 72%); }
.hc-face__xp { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--xp, 0) * 1turn), rgba(255, 255, 255, 0.16) 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3.5px)); mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3.5px)); }
.hc-face .sp-img--face { width: 54px; height: 54px; border: 0; background: none; }
.hc-face--drawn::before { content: attr(data-initial); font-weight: 900; font-size: 24px; color: #fff; }
.hc-face__lv { position: absolute; right: -5px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, #b25cff, var(--deep)); box-shadow: 0 0 0 2px var(--gold); font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }
.sel--down .hc-face img { filter: grayscale(0.85) brightness(0.7); }
.hc-lv { color: #fff; font-weight: 800; }
.hc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.hc-stat { display: grid; align-content: start; gap: 2px; padding: 8px 9px 8px; border-radius: 13px; background: rgba(255, 255, 255, 0.07); }
.hc-stat b { font-size: 20px; font-weight: 850; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hc-stat span { font-size: 11px; font-weight: 650; line-height: 1.25; color: rgba(255, 255, 255, 0.7); }
.hc-stat--dps b { color: #d6fff1; }
.sel--oc .hc-stat--dps b { color: var(--gold); }
.hc-oc { margin: 8px 0 0; font-size: 12px; font-weight: 800; color: var(--gold); }
.hc-rows { display: grid; gap: 8px; margin: 12px 0 0; }
.hc-rows > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.hc-rows dt { font-size: 12px; font-weight: 650; color: rgba(255, 255, 255, 0.7); }
.hc-rows dd { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.38; color: #fff; }
.hc-rows dd small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.66); }
.hc-hpline { display: flex; align-items: center; gap: 9px; }
.hc-hpline > span:first-child { flex: none; font-variant-numeric: tabular-nums; }
.hc-hp { flex: 1; min-width: 40px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.hc-hp i { display: block; height: 100%; width: calc(var(--k, 1) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--mint), #d9fff1); }
.hc-hp.low i { background: linear-gradient(90deg, var(--coral), #ffc0b0); }
.sel--down .hc-hp { background: rgba(255, 143, 143, 0.25); }
.hc-powers { list-style: none; display: grid; gap: 7px; margin: 7px 0 0; padding: 0; }
.hc-pw { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 8px 10px 9px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.hc-pw__top { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.hc-pw__top b { font-size: 13px; font-weight: 800; }
.hc-pw__state { margin-left: auto; padding-left: 6px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.hc-pw.ready .hc-pw__state { color: var(--mint); }
.hc-pw.locked .hc-pw__state { color: var(--gold); }
.hc-pw p { margin: 2px 0 0; font-size: 12px; line-height: 1.36; color: rgba(255, 255, 255, 0.88); }
.hc-pw .hc-pw__nums { margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, 0.64); }
.hc-next .sp-nt b { font-size: 13px; }

/* ---------- a building's boost from a beacon, and a beacon's aura count ---------- */
.sp-boost { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 12.5px; font-weight: 750; color: #ffe9a6; }
/* switched off by a Jammer, the Auditor or the Leviathan */
.sp-off { margin: 10px 0 0; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; text-align: center; color: #ffd2c9; background: rgba(255, 95, 116, 0.14); box-shadow: inset 0 0 0 1.5px rgba(255, 95, 116, 0.5); }
.sp-off[hidden] { display: none; }
.sp-boost svg { flex: none; width: 15px; height: 15px; fill: var(--gold); filter: drop-shadow(0 0 4px rgba(246, 199, 102, 0.6)); }
.sp-aura { color: #ffe9a6; }

/* ---------- the select panel ---------- */
/* docked under the wave panel, reaching down to just above the commander chip and the tray (about 120 px tall). The
   head and Hold to sell stay put; the body between them scrolls when the panel would be taller than that */
.sel { --sel-pad: 13px; --sel-top: max(calc(env(safe-area-inset-top, 0px) + 150px), calc(var(--hud-top, 0px) + 10px)); position: absolute; z-index: 3; left: 12px; top: var(--sel-top); width: 340px; max-height: calc(100dvh - var(--sel-top) - 128px - var(--safe-b)); display: flex; flex-direction: column; overflow: hidden; padding: var(--sel-pad) var(--sel-pad) 12px; border-radius: 20px; color: #fff; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: auto; touch-action: pan-y; }
.sp-body { flex: 1 1 auto; min-height: 0; margin: 0 calc(-1 * var(--sel-pad)); padding: 0 var(--sel-pad); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(233, 153, 255, 0.4) transparent; }
/* more below the edge (js/ui/selectPanel.js): the body fades out there */
.sp-body.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.sel .coin { width: 13px; height: 13px; }
.sp-head { flex: none; display: flex; align-items: center; gap: 11px; }
.sp-img { width: 62px; height: 62px; flex: none; border-radius: 14px; background: var(--tile); border: 1.5px solid rgba(255, 255, 255, 0.12); }
.sp-img--face { border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 50% 36%, #6d52dc, #2a1d6b 72%); }
.sp-img--array { display: grid; place-items: center; }
.sp-img--array svg { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sp-img--debris { display: grid; place-items: center; }
.sp-img--debris svg { width: 38px; height: 38px; }
.sp-note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.sp-title { flex: 1; min-width: 0; }
.sel h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.sp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin-top: 5px; }
.sp-lvp { display: inline-flex; gap: 3px; }
.sp-lvp i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.sp-lvp i.on { background: linear-gradient(90deg, var(--lilac), #f8d8ff); box-shadow: 0 0 6px rgba(233, 153, 255, 0.5); }
.sp-tag { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; }
.sp-x { flex: none; align-self: flex-start; width: 32px; height: 32px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); }
.sp-x svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.sp-reach { display: grid; gap: 4px; margin-top: 11px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.sp-rp { display: grid; grid-template-columns: 76px 1fr 38px; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.sp-rp i { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--mint) calc(var(--k, 0) * 100%), rgba(255, 255, 255, 0.14) 0); }
.sp-rp b { text-align: right; color: #d6fff1; font-variant-numeric: tabular-nums; }
.sp-rp--none { display: block; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.sp-chip { padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 750; background: rgba(255, 255, 255, 0.1); color: #efe9ff; border: 1px solid rgba(255, 255, 255, 0.16); white-space: nowrap; }
.sp-chip.warm { background: rgba(255, 143, 143, 0.16); border-color: rgba(255, 143, 143, 0.55); color: #ffd6d6; }
.sp-chip.cool { background: rgba(168, 240, 216, 0.14); border-color: rgba(168, 240, 216, 0.55); color: #d6fff1; }
.sp-chip.dim { color: rgba(255, 255, 255, 0.72); border-style: dashed; }
.sp-pips { display: grid; grid-template-columns: 62px 1fr auto; gap: 6px 9px; align-items: center; margin-top: 10px; font-size: 12px; }
.sp-pl { color: rgba(255, 255, 255, 0.7); font-weight: 650; }
.sp-p5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.sp-p5 i { height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.13); }
.sp-p5 i.f { background: linear-gradient(180deg, #e4fff5, var(--mint)); box-shadow: 0 0 6px rgba(168, 240, 216, 0.4); }
.sp-p5 i.h { background: linear-gradient(90deg, #c8f8e7 0 50%, rgba(255, 255, 255, 0.13) 50%); }
.sp-pv { min-width: 74px; text-align: right; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-lines, .sp-perks { margin: 10px 0 0; padding: 0 0 0 16px; display: grid; gap: 3px; font-size: 12.5px; color: rgba(255, 255, 255, 0.86); }
.sp-nums { margin: 9px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.sp-say { margin: 10px 0 2px; font-size: 14px; font-weight: 700; color: #f3c6ff; }
.sp-hint { margin: 10px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.sel .up { color: #8ff0bd; font-weight: 800; }
.sel .down { color: #ffa6a6; font-weight: 800; }
.sp-next { margin-top: 11px; padding: 9px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); }
.sp-nt { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sp-nt img { width: 34px; height: 34px; margin: -6px 0 -6px -6px; }
.sp-next ul, .sp-br ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; }
.sp-sub { margin: 11px 0 0; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.sp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.sp-br { display: flex; flex-direction: column; padding: 7px 8px 8px; border-radius: 14px; border-top: 3px solid #9ff0ff; background: radial-gradient(ellipse 80% 38% at 50% 20%, rgba(176, 140, 255, 0.34), rgba(176, 140, 255, 0) 72%), rgba(255, 255, 255, 0.07); }
.sp-br.b1 { border-top-color: #ff8f8f; }
.sp-br img { display: block; width: 70px; height: 70px; margin: -4px auto 2px; filter: drop-shadow(0 3px 4px rgba(10, 6, 30, 0.45)); }
.sp-br b { font-size: 12.5px; font-weight: 800; }
.sp-br p { margin: 3px 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.8); }
.sp-br ul { font-size: 11px; gap: 2px; margin-bottom: 8px; }
.sp-br .sp-buy { margin-top: auto; }
.sp-buy { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; margin-top: 9px; padding: 8px 10px 8px 12px; border: 0; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--ink); background: linear-gradient(180deg, #ffe9a6, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.sp-buy__p { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.sp-buy:active:not(.short) { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-deep); }
.sp-buy.short { color: #ffd2c9; background: rgba(255, 143, 143, 0.14); box-shadow: inset 0 0 0 1.5px rgba(255, 143, 143, 0.6); cursor: not-allowed; }
.sp-buy.nope { animation: ttnope 0.36s ease; }
.sp-full { margin: 11px 0 0; font-size: 13px; font-weight: 800; color: var(--gold); }
.sp-prio { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.sp-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(10, 6, 30, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); }
.sp-seg button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, 0.78); font-weight: 750; font-size: 12.5px; }
.sp-seg button[aria-pressed="true"] { background: linear-gradient(180deg, #b25cff, var(--deep)); color: #fff; box-shadow: 0 2px 0 #4c008f; }
.sp-sell { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 11px; padding: 8px 12px 8px 8px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 12.5px; font-weight: 750; touch-action: none; }
.sp-sell b { color: #ffe08a; font-weight: 850; }
.sp-sell kbd { margin-left: auto; }
.sp-hold { width: 18px; height: 18px; border-radius: 50%; flex: none; background: conic-gradient(var(--coral) calc(var(--k, 0) * 1turn), rgba(255, 255, 255, 0.22) 0); -webkit-mask: radial-gradient(circle, transparent 0 5px, #000 6px); mask: radial-gradient(circle, transparent 0 5px, #000 6px); }
@media (prefers-reduced-motion: reduce) { .sp-buy.nope { animation: none; } }
/* five levels: what the next one adds, where a branch leads, a level 5 that is one of a kind */
.sp-adds { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.sp-next--top { background: radial-gradient(ellipse 90% 60% at 20% 0%, rgba(246, 199, 102, 0.2), rgba(246, 199, 102, 0) 70%), rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(246, 199, 102, 0.42); }
.sp-next--top .sp-nt b { color: #ffe9a6; }
.sp-na { margin: 7px 0 0; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.sp-na b { color: #ffe9a6; }
.sp-end { margin: 2px 0 6px !important; font-size: 10.5px !important; color: rgba(255, 255, 255, 0.66) !important; }
.sp-end b { font-size: 10.5px; color: #ffe9a6; }
.sp-lock { margin: 9px 0 0; padding: 7px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; text-align: center; color: #ffd2c9; background: rgba(255, 143, 143, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 143, 143, 0.45); }
/* its ability: state, what it does, Fire; a Refinery's vault and Cash out */
.sp-abil { margin-top: 11px; padding: 9px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(233, 153, 255, 0.28); }
.sp-abil.ready { box-shadow: inset 0 0 0 1.5px rgba(233, 153, 255, 0.7), 0 0 14px rgba(233, 153, 255, 0.25); }
.sp-abil__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.sp-abil__top b { color: #f3c6ff; }
.sp-abil__st { font-size: 11.5px; font-weight: 750; color: rgba(255, 255, 255, 0.7); }
.sp-abil.ready .sp-abil__st { color: #8ff0bd; }
.sp-abil p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.sp-fire { display: block; width: 100%; min-height: 40px; margin-top: 8px; padding: 8px 12px; border: 0; border-radius: 999px; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(180deg, #b25cff, var(--deep)); box-shadow: 0 3px 0 #4c008f; }
.sp-fire:active:not(.off) { transform: translateY(2px); box-shadow: 0 1px 0 #4c008f; }
.sp-fire.off { color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); cursor: not-allowed; }
.sp-fire.nope { animation: ttnope 0.36s ease; }
.sp-vault { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 8px 10px; border-radius: 14px; background: rgba(246, 199, 102, 0.1); box-shadow: inset 0 0 0 1px rgba(246, 199, 102, 0.4); font-size: 12.5px; font-weight: 800; color: #ffe9a6; font-variant-numeric: tabular-nums; }
.sp-vault span { flex: 1; }
.sp-vault .sp-fire { width: auto; margin: 0; padding: 7px 14px; }
@media (prefers-reduced-motion: reduce) { .sp-fire.nope { animation: none; } }

/* ---------- the towers' ability bar, above Launch ---------- */
.abil { position: relative; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; max-width: 168px; }
.abil[hidden] { display: none; }
.ab { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: radial-gradient(circle at 50% 35%, #6c4ad8, #2b1d6e 72%); box-shadow: 0 3px 0 #4c008f, 0 6px 14px rgba(20, 10, 60, 0.35); overflow: visible; display: grid; place-items: center; }
.ab img { width: 52px; height: 52px; margin-top: -4px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 2px 3px rgba(10, 6, 30, 0.5)); pointer-events: none; }
.ab__ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; background: conic-gradient(#ffe08a calc(var(--run, 0) * 1turn), transparent 0); -webkit-mask: radial-gradient(circle, transparent 0 26px, #000 27px); mask: radial-gradient(circle, transparent 0 26px, #000 27px); }
.ab.ready { animation: pwready 1.4s ease-in-out infinite; }
.ab.run { border-color: #ffe08a; }
.ab.off { opacity: 0.5; box-shadow: none; }
.ab:active:not(.off) { transform: translateY(2px); box-shadow: 0 1px 0 #4c008f; }
.ab.nope { animation: ttnope 0.36s ease; }
.ab-tip { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(260px, calc(100vw - 16px)); padding: 9px 11px 10px; border-radius: 14px; color: #fff; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; font-size: 12px; }
.ab-tip[hidden] { display: none; }
.ab-tip b { font-size: 13px; color: #f3c6ff; }
.ab-tip__st { float: right; font-weight: 750; color: rgba(255, 255, 255, 0.72); }
.ab-tip p { margin: 4px 0 3px; line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.ab-tip small { color: rgba(255, 255, 255, 0.6); }
@media (prefers-reduced-motion: reduce) { .ab.ready, .ab.nope { animation: none; } }

/* ---------- supply crate pins, and the arrow on the edge when a crate is out of view ---------- */
.cp { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.cp--tap .cp__body { pointer-events: auto; cursor: pointer; }
.cp__body { position: absolute; left: 0; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 3px; border-radius: 999px; background: linear-gradient(180deg, #fff6d8, #ffe39a); color: var(--ink); font-weight: 850; font-size: 13px; white-space: nowrap; box-shadow: 0 0 0 1.5px rgba(217, 154, 58, 0.7), 0 0 16px rgba(246, 199, 102, 0.55), 0 6px 14px rgba(20, 10, 60, 0.35); }
.cp__body svg { width: 18px; height: 18px; margin: 3px; fill: var(--gold); flex: none; }
.cp__ring { position: absolute; left: 1px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: conic-gradient(var(--gold-deep) calc(var(--k, 1) * 1turn), rgba(36, 26, 82, 0.14) 0); -webkit-mask: radial-gradient(circle, transparent 0 9.5px, #000 10px); mask: radial-gradient(circle, transparent 0 9.5px, #000 10px); }
.cp__stem { position: absolute; left: -1px; bottom: 2px; width: 2px; height: 14px; background: linear-gradient(#f6c766, rgba(246, 199, 102, 0.15)); }
.cp__stem::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(246, 199, 102, 0.3); }
.cp--late .cp__ring { background: conic-gradient(var(--coral) calc(var(--k, 1) * 1turn), rgba(36, 26, 82, 0.14) 0); }
.cp--late .cp__body { animation: cplate 0.8s ease-in-out infinite; }
@keyframes cplate { 50% { box-shadow: 0 0 0 1.5px rgba(255, 143, 143, 0.9), 0 0 22px rgba(255, 143, 143, 0.7), 0 6px 14px rgba(20, 10, 60, 0.35); } }
.cp__arrow { display: none; }
.cp--edge .cp__body { bottom: auto; top: 0; transform: translate(-50%, -50%); }
.cp--edge .cp__stem { display: none; }
.cp--edge .cp__arrow { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a, 0rad)) translateX(38px); }
.cp--edge .cp__arrow::before { content: ""; position: absolute; left: -7px; top: -8px; border-left: 12px solid var(--gold); border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 0 5px rgba(246, 199, 102, 0.8)); }
@media (prefers-reduced-motion: reduce) { .cp--late .cp__body { animation: none; } }

/* ---------- the boss bar sits under the shield; the new-enemy card above the bottom bar ---------- */
.boss-bar { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 62px); transform: translateX(-50%); width: min(520px, calc(100vw - 560px)); pointer-events: none; text-align: center; }
.comms.low { top: calc(env(safe-area-inset-top, 0px) + 118px); }
.enemy-card { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--safe-b) + 150px); transform: translate(-50%, 20px); display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 32px)); padding: 12px 16px 12px 12px; border-radius: 18px; background: linear-gradient(160deg, #3b1d6e, #1f1240); color: #fff; box-shadow: 0 0 0 2px #ff7aa6, 0 16px 36px rgba(20, 0, 40, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
.enemy-card__icon { flex: none; width: 48px; height: 48px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); }
.enemy-card__icon svg, .enemy-card__icon img { display: block; width: 100%; height: 100%; fill: #d9cdff; object-fit: contain; }

/* ---------- the difficulty screen: three looks (js/ui/screens.js, ?difflook=a|b|c), one card per difficulty with its
   rank insignia, what it changes and the current pick's gold check. Shared first, then each look ---------- */
.card--diff { width: min(820px, 100%); }
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; text-align: left; }
.diff { --rank: var(--deep); --edge: var(--lilac); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.diff--cadet { --rank: #1d8a64; --edge: #a8f0d8; }
.diff--admiral { --rank: #c0274e; --edge: #ff9a9a; }
.diff__badge { flex: none; display: grid; place-items: center; }
.diff__badge svg { display: block; }
.diff__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.diff__top { display: flex; align-items: center; gap: 7px; }
.diff__top b { font-size: 20px; font-weight: 850; letter-spacing: -0.015em; line-height: 1.1; }
.diff__check { width: 20px; height: 20px; flex: none; }
.diff__check circle { fill: var(--gold); stroke: #b77a1e; stroke-width: 1; }
.diff__check path { fill: none; stroke: #3d2400; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.diff__blurb { font-size: 14px; font-weight: 700; line-height: 1.3; }
.diff ul { margin: 3px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; line-height: 1.32; }
.diff li { position: relative; padding-left: 14px; }
.diff li::before { content: ""; position: absolute; left: 1px; top: 0.48em; width: 5px; height: 5px; border-radius: 1px; transform: rotate(45deg); background: var(--rank); }
.diff__best { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 750; }
.card--diff .btn[data-back] { position: static; width: auto; margin: 12px auto 0; padding: 8px 14px; box-shadow: none; }

/* A, rank cards: the light card; each difficulty's insignia on a navy medallion in a band across the top */
.diff-look-a .diff { padding: 0 14px 14px; border-radius: 20px; border: 2px solid transparent; background: var(--paper-2); color: var(--ink); }
.diff-look-a .diff__badge { margin: 0 -14px 12px; padding: 14px 0 12px; border-radius: 18px 18px 0 0; background: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(166, 64, 255, 0.35), rgba(166, 64, 255, 0) 70%), linear-gradient(180deg, #2b1f6e, #3d2b8f); }
.diff-look-a .diff__medal { width: 82px; height: 82px; filter: drop-shadow(0 5px 8px rgba(10, 6, 30, 0.45)); transition: transform 0.15s ease, filter 0.15s ease; }
.diff-look-a .diff__top b { color: var(--rank); }
.diff-look-a .diff__blurb { color: var(--ink-2); }
.diff-look-a .diff__best { color: var(--ink-2); }
.diff-look-a .diff.on { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246, 199, 102, 0.35), 0 10px 24px rgba(76, 0, 143, 0.14); }
.diff-look-a .diff:focus-visible { outline: none; transform: translateY(-4px); box-shadow: 0 0 0 3px var(--violet), 0 16px 30px rgba(76, 0, 143, 0.22); }
.diff-look-a .diff:focus-visible .diff__medal { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(246, 199, 102, 0.75)); }
@media (hover: hover) {
  .diff-look-a .diff:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(76, 0, 143, 0.22); }
  .diff-look-a .diff.on:hover { box-shadow: 0 0 0 3px rgba(246, 199, 102, 0.45), 0 16px 30px rgba(76, 0, 143, 0.22); }
  .diff-look-a .diff:hover .diff__medal { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(246, 199, 102, 0.75)); }
}

/* B, night glass: the HUD's dark glass under a few stars; the insignia large in gold on a soft glow, the rank's colour
   along each plate's top edge (as the select panel's level 3 choices carry theirs) */
.diff-look-b.card { color: #fff; border: 1px solid var(--glass-line); background: radial-gradient(1.2px 1.2px at 9% 14%, rgba(255, 255, 255, 0.85), transparent), radial-gradient(1px 1px at 23% 6%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1.4px 1.4px at 71% 9%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 88% 21%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.2px 1.2px at 94% 4%, rgba(255, 233, 166, 0.8), transparent), radial-gradient(1px 1px at 44% 3%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(ellipse 80% 50% at 50% 0%, rgba(166, 64, 255, 0.28), rgba(166, 64, 255, 0) 70%), var(--glass); box-shadow: var(--glass-shadow), 0 20px 60px rgba(10, 6, 34, 0.55); }
.diff-look-b h2 { color: #fff; }
.diff-look-b.card > p { color: #d9ccff; }
.diff-look-b .diff { padding: 14px 14px 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-top: 3px solid var(--edge); background: rgba(255, 255, 255, 0.055); color: #fff; }
.diff-look-b .diff__badge { width: 96px; height: 96px; margin: 0 auto 8px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 199, 102, 0.26), rgba(246, 199, 102, 0) 66%); transition: background 0.15s ease, transform 0.15s ease; }
.diff-look-b .diff__ins { width: 78px; height: 78px; filter: drop-shadow(0 4px 6px rgba(8, 4, 30, 0.55)); }
.diff-look-b .diff__blurb { color: #f3c6ff; }
.diff-look-b .diff ul { color: rgba(255, 255, 255, 0.86); }
.diff-look-b .diff li::before { background: var(--edge); }
.diff-look-b .diff__best { color: rgba(255, 255, 255, 0.6); }
.diff-look-b .diff.on { border-color: rgba(246, 199, 102, 0.85); border-top-color: var(--edge); box-shadow: 0 0 0 1px rgba(246, 199, 102, 0.55), 0 0 26px rgba(246, 199, 102, 0.18); }
.diff-look-b .diff:focus-visible { outline: none; transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); border-color: rgba(233, 153, 255, 0.7); border-top-color: var(--edge); }
.diff-look-b .diff:focus-visible .diff__badge { transform: scale(1.06); background: radial-gradient(circle, rgba(246, 199, 102, 0.5), rgba(246, 199, 102, 0) 68%); }
@media (hover: hover) {
  .diff-look-b .diff:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); border-color: rgba(233, 153, 255, 0.7); border-top-color: var(--edge); }
  .diff-look-b .diff.on:hover { border-color: rgba(246, 199, 102, 0.95); border-top-color: var(--edge); }
  .diff-look-b .diff:hover .diff__badge { transform: scale(1.06); background: radial-gradient(circle, rgba(246, 199, 102, 0.5), rgba(246, 199, 102, 0) 68%); }
}
.diff-look-b .btn--link, .diff-look-c .btn--link { color: #f3c6ff; }

/* C, mission patches: no card; the night sky darkens and each difficulty is an embroidered patch with its facts on a
   strip of glass below */
.screen--diff-c { background: radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 31% 9%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1.2px 1.2px at 62% 14%, rgba(255, 255, 255, 0.75), transparent), radial-gradient(1px 1px at 83% 31%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.4px 1.4px at 91% 72%, rgba(255, 233, 166, 0.7), transparent), radial-gradient(1px 1px at 7% 81%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(ellipse 90% 70% at 50% 40%, rgba(43, 28, 110, 0.82), rgba(12, 7, 36, 0.95)); }
.diff-look-c.card { width: min(1000px, 100%); padding: 10px 6px 8px; background: none; box-shadow: none; color: #fff; }
.diff-look-c h2 { color: #fff; font-size: 30px; text-shadow: 0 2px 14px rgba(10, 6, 40, 0.7); }
.diff-look-c.card > p { color: #d9ccff; }
.diff-look-c .diffs { gap: 20px; margin-top: 22px; }
.diff-look-c .diff { align-items: center; color: #fff; }
.diff-look-c .diff__badge { width: 136px; height: 136px; margin-bottom: 12px; border-radius: 50%; filter: drop-shadow(0 10px 16px rgba(4, 2, 20, 0.65)); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.diff-look-c .diff__patch { width: 100%; height: 100%; }
.diff-look-c .diff__text { align-items: center; width: 100%; }
.diff-look-c .diff__top b { font-size: 22px; text-shadow: 0 2px 10px rgba(10, 6, 40, 0.7); }
.diff-look-c .diff__blurb { color: #f3c6ff; text-align: center; }
.diff-look-c .diff ul { align-self: stretch; margin-top: 8px; padding: 11px 13px; border-radius: 16px; border: 1px solid rgba(233, 153, 255, 0.22); background: rgba(20, 12, 56, 0.66); color: rgba(255, 255, 255, 0.9); text-align: left; transition: background 0.15s ease, border-color 0.15s ease; }
.diff-look-c .diff li::before { background: var(--edge); }
.diff-look-c .diff__best { color: rgba(255, 255, 255, 0.66); }
/* ---------- the map choice: each map from above, on the patches' night sky. Three across, the map beside its
   name, tier and idea, so all nine fit a laptop screen; one column on a phone ---------- */
/* the map tiles: three across, as big as the screen's height allows so all nine show at once on a laptop; each is the
   map's picture with a glass name plate, framed in lilac, the pick in gold */
.card--maps { --gap: 14px; width: min(1180px, 100%, calc(1.6 * (100dvh - 196px) + 2 * var(--gap))); padding: 6px 4px 8px; background: none; box-shadow: none; color: #fff; }
.card--maps h2 { color: #fff; font-size: 32px; font-weight: 850; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(10, 6, 40, 0.8), 0 0 40px rgba(166, 64, 255, 0.35); }
.maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 18px; text-align: left; }
.mapc { --tier: #cfc6ff; --ring: rgba(233, 153, 255, 0.3); position: relative; display: block; min-width: 0; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #1c1446; color: #fff; text-align: left; isolation: isolate; box-shadow: 0 0 0 1.5px var(--ring), 0 12px 28px rgba(4, 2, 20, 0.55); transition: transform 0.18s ease, box-shadow 0.18s ease; }
/* a soft vignette and a glint along the top edge, over the picture and under the plate */
.mapc::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 46px rgba(14, 8, 44, 0.5); }
.mapc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease; filter: saturate(1.08) contrast(1.04); }
.mapc__plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 2px; padding: 16px 12px 8px; background: linear-gradient(180deg, rgba(14, 8, 44, 0), rgba(14, 8, 44, 0.74) 38%, rgba(14, 8, 44, 0.9)); }
.mapc__name { font-size: 17px; font-weight: 850; letter-spacing: -0.01em; line-height: 1.12; text-shadow: 0 1px 6px rgba(6, 3, 24, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapc__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mapc__tier { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--tier); white-space: nowrap; }
.mapc__pips { display: flex; gap: 3px; }
.mapc__pips i { width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.22); }
.mapc__pips i.lit { background: var(--tier); box-shadow: 0 0 6px var(--tier); }
.mapc__best { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.mapc__medal { position: absolute; left: 9px; top: 9px; z-index: 2; width: 30px; height: 30px; filter: drop-shadow(0 3px 5px rgba(6, 3, 24, 0.6)); }
.mapc__check { position: absolute; right: 9px; top: 9px; z-index: 2; width: 26px; height: 26px; filter: drop-shadow(0 3px 6px rgba(6, 3, 24, 0.6)); }
.mapc--beginner { --tier: var(--mint); }
.mapc--intermediate { --tier: var(--gold); }
.mapc--advanced { --tier: var(--coral); }
.mapc--expert { --tier: var(--lilac); }
.mapc--co-op { --tier: #9fe8ff; }
.mapc.on { --ring: var(--gold); box-shadow: 0 0 0 2.5px var(--gold), 0 0 30px rgba(246, 199, 102, 0.42), 0 12px 28px rgba(4, 2, 20, 0.55); }
.mapc:focus-visible { outline: none; --ring: var(--lilac); transform: translateY(-4px); box-shadow: 0 0 0 2.5px var(--ring), 0 0 26px rgba(233, 153, 255, 0.4), 0 18px 34px rgba(4, 2, 20, 0.6); }
.mapc.on:focus-visible { --ring: var(--gold); box-shadow: 0 0 0 2.5px var(--gold), 0 0 34px rgba(246, 199, 102, 0.55), 0 18px 34px rgba(4, 2, 20, 0.6); }
.mapc:focus-visible .mapc__img { transform: scale(1.06); filter: saturate(1.15) contrast(1.06) brightness(1.05); }
.mapc:active { transform: translateY(-1px) scale(0.985); }
@media (hover: hover) {
  .mapc:hover { --ring: rgba(233, 153, 255, 0.85); transform: translateY(-4px); box-shadow: 0 0 0 2px var(--ring), 0 0 26px rgba(233, 153, 255, 0.32), 0 18px 34px rgba(4, 2, 20, 0.6); }
  .mapc.on:hover { --ring: var(--gold); box-shadow: 0 0 0 2.5px var(--gold), 0 0 34px rgba(246, 199, 102, 0.55), 0 18px 34px rgba(4, 2, 20, 0.6); }
  .mapc:hover .mapc__img { transform: scale(1.06); filter: saturate(1.15) contrast(1.06) brightness(1.05); }
}
/* Back on the map and difficulty screens: a glass button (each screen keeps its own spacing) */
.card .btn.menu-back[data-back] { position: static; width: auto; min-width: 140px; min-height: 42px; padding: 9px 26px; font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); }
.card--maps .btn.menu-back[data-back] { margin: 16px auto 0; }
.card .btn.menu-back[data-back]:active { transform: translateY(2px); }
@media (hover: hover) { .card .btn.menu-back[data-back]:hover { border-color: rgba(233, 153, 255, 0.8); } }
@media (max-width: 980px) { .card--maps { width: min(760px, 100%); } .maps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .card--maps { --gap: 10px; }
  .card--maps h2 { font-size: 26px; }
  .maps { margin-top: 14px; }
  .mapc { border-radius: 13px; }
  .mapc__plate { gap: 1px; padding: 12px 8px 6px; }
  .mapc__name { font-size: 14px; }
  .mapc__tier { gap: 5px; font-size: 12px; }
  .mapc__pips { gap: 2px; }
  .mapc__pips i { width: 6px; height: 6px; }
  .mapc__best { display: none; }
  .mapc__medal { left: 6px; top: 6px; width: 24px; height: 24px; }
  .mapc__check { right: 6px; top: 6px; width: 22px; height: 22px; }
}
/* a phone on its side: four across, scrolling */
@media (max-height: 500px) and (min-width: 601px) { .card--maps { width: 100%; } .maps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .mapc__best { display: none; } .mapc__name { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .mapc, .mapc__img { transition: none; } }
.diff-look-c .diff.on .diff__badge { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(246, 199, 102, 0.45); }
.diff-look-c .diff:focus-visible { outline: none; }
.diff-look-c .diff:focus-visible .diff__badge { transform: rotate(-7deg) scale(1.07); box-shadow: 0 0 0 3px rgba(233, 153, 255, 0.8), 0 0 34px rgba(233, 153, 255, 0.5); }
.diff-look-c .diff.on:focus-visible .diff__badge { box-shadow: 0 0 0 3px var(--gold), 0 0 38px rgba(246, 199, 102, 0.65); }
.diff-look-c .diff:focus-visible ul { border-color: rgba(233, 153, 255, 0.75); background: rgba(34, 20, 90, 0.78); }
@media (hover: hover) {
  .diff-look-c .diff:hover .diff__badge { transform: rotate(-7deg) scale(1.07); box-shadow: 0 0 0 3px rgba(233, 153, 255, 0.8), 0 0 34px rgba(233, 153, 255, 0.5); }
  .diff-look-c .diff.on:hover .diff__badge { box-shadow: 0 0 0 3px var(--gold), 0 0 38px rgba(246, 199, 102, 0.65); }
  .diff-look-c .diff:hover ul { border-color: rgba(233, 153, 255, 0.6); background: rgba(34, 20, 90, 0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .diff, .diff__badge, .diff-look-a .diff__medal { transition: none; }
  .diff:hover, .diff:focus-visible, .diff:hover .diff__badge, .diff:focus-visible .diff__badge, .diff-look-a .diff:hover .diff__medal, .diff-look-a .diff:focus-visible .diff__medal { transform: none !important; }
}

/* ---------- laptops up to 1400 pixels: a narrower tray ---------- */
@media (max-width: 1400px) {
  .tt { width: 68px; }
  .tt img { width: 48px; height: 48px; }
  .tray__row { gap: 5px; }
}
/* ---------- tablets and small laptops: the boss bar fits between the panels ---------- */
@media (max-width: 1100px) {
  .boss-bar { width: min(420px, calc(100vw - 400px)); }
}
/* ---------- phones: two rows at the bottom (commander and actions, then the tray), the panel as a sheet ---------- */
@media (max-width: 700px) {
  :root { --cmd-w: 204px; }
  .hud-top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 0; column-gap: 6px; row-gap: 6px; }
  .hud-wave { grid-row: 1 / span 2; padding: 7px 10px; min-width: 0; }
  .hud-next { max-width: 132px; }
  .hud-array { justify-self: center; padding: 7px 9px; gap: 6px; }
  .hud-array__bar { width: clamp(40px, 16vw, 90px); }
  .hud-right { display: contents; }
  .hud-coins { grid-column: 3; grid-row: 1; justify-self: end; padding: 6px 12px 6px 7px; font-size: 16px; }
  .hud-tools { grid-column: 2 / span 2; grid-row: 2; justify-self: end; }
  .hud-speed button { min-width: 30px; height: 30px; padding: 0 6px; font-size: 12.5px; }
  .hud-btn { width: 38px; height: 38px; }
  .hud-bottom { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cmd act" "tray tray"; padding: 0 8px calc(var(--safe-b) + 8px); column-gap: 8px; row-gap: 8px; }
  .hud-tray { justify-self: stretch; }
  .tray__row { padding: 7px 7px 15px; border-radius: 18px; }
  .tt { width: 62px; padding: 3px 1px 14px; border-radius: 12px; }
  .tt img { width: 44px; height: 44px; }
  .tt__name { font-size: 10.5px; }
  .tt__price, .tt__note { font-size: 10.5px; bottom: -8px; padding: 1px 7px 1px 3px; }
  .tt__note { padding: 1px 6px; }
  .tt--on { transform: translateY(-2px); }
  .cmd { gap: 8px; padding: 6px 9px 6px 6px; border-radius: 20px; }
  .cmd__face { width: 52px; height: 52px; }
  .cmd__face img { width: 46px; height: 46px; }
  .cmd__lv { min-width: 20px; height: 20px; font-size: 11.5px; right: -4px; bottom: -3px; }
  .cmd__body { gap: 5px; }
  .cmd__name { font-size: 12.5px; }
  .cmd__name small { font-size: 10.5px; }
  .cmd__hp { height: 6px; }
  .cmd--down .cmd__hp { height: 16px; }
  .cmd--down .cmd__down { font-size: 10.5px; }
  .cmd__powers { gap: 5px; }
  .pw { width: 40px; height: 40px; }
  .pw svg { width: 20px; height: 20px; }
  .hud-act { gap: 8px; }
  .call-btn { padding: 11px 15px 13px; font-size: 15px; gap: 6px; }
  .call-n, .call-key { display: none !important; }
  .view-btn { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .view-btn span { display: none; }
  /* as tall as its content, up to the HUD's clear line (196 px, under the top row and the boss bar) */
  .sel { --sel-pad: 12px; left: 8px; right: 8px; top: auto; bottom: calc(var(--safe-b) + 8px); width: auto; max-height: calc(100dvh - 204px - env(safe-area-inset-top, 0px) - var(--safe-b)); padding: var(--sel-pad) var(--sel-pad) 11px; border-radius: 22px; }
  .sp-img { width: 54px; height: 54px; }
  .sp-br img { width: 46px; height: 46px; }
  .sp-head { gap: 9px; }
  .sp-reach, .sp-next { margin-top: 9px; }
  .sp-chips, .sp-pips { margin-top: 8px; }
  .sp-pips { grid-template-columns: 58px 1fr auto; }
  /* under the top row however tall the wave panel grows (--hud-edge, from main), and Juno's line under the bar */
  .boss-bar { top: max(calc(env(safe-area-inset-top, 0px) + 150px), calc(var(--hud-edge, 0px) + 8px)); width: calc(100vw - 48px); }
  .comms.low { top: max(calc(env(safe-area-inset-top, 0px) + 206px), calc(var(--hud-edge, 0px) + 64px)); }
  .enemy-card { bottom: calc(var(--safe-b) + 214px); }
  .diffs { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
}
/* the difficulty cards on a phone (rows) and on a phone on its side (three columns): the insignia beside the name, so
   all three fit without scrolling */
@media (max-width: 700px), (max-height: 500px) {
  .card--diff h2 { font-size: 22px; }
  .card--diff.card > p { margin-top: 4px; font-size: 14.5px; }
  .diff { flex-direction: row; align-items: flex-start; gap: 12px; }
  .diff__text { gap: 3px; }
  .diff__top b { font-size: 17px; }
  .diff__blurb { font-size: 13px; }
  .diff ul { font-size: 12.5px; gap: 2px; margin-top: 2px; }
  .diff__best { padding-top: 3px; }
  .diff-look-a .diff { padding: 0 12px 0 0; }
  .diff-look-a .diff__badge { align-self: stretch; margin: 0; padding: 0 9px; border-radius: 18px 0 0 18px; background: radial-gradient(ellipse 120% 70% at 100% 50%, rgba(166, 64, 255, 0.35), rgba(166, 64, 255, 0) 70%), linear-gradient(90deg, #2b1f6e, #3d2b8f); }
  .diff-look-a .diff__medal { width: 58px; height: 58px; }
  .diff-look-a .diff__text { padding: 10px 0 11px; }
  .diff-look-b .diff { padding: 10px 12px 11px 8px; border-top-width: 1px; border-left: 3px solid var(--edge); }
  .diff-look-b .diff.on { border-color: rgba(246, 199, 102, 0.85); border-left-color: var(--edge); }
  .diff-look-b .diff:focus-visible { border-color: rgba(233, 153, 255, 0.7); border-left-color: var(--edge); }
  .diff-look-b .diff__badge { width: 64px; height: 64px; margin: 0; }
  .diff-look-b .diff__ins { width: 54px; height: 54px; }
  .diff-look-c.card { padding: 4px 2px; }
  .diff-look-c h2 { font-size: 24px; }
  .diff-look-c .diffs { gap: 10px; margin-top: 14px; }
  .diff-look-c .diff { align-items: flex-start; }
  .diff-look-c .diff__badge { width: 78px; height: 78px; margin: 4px 0 0; }
  .diff-look-c .diff__text { align-items: stretch; }
  .diff-look-c .diff__blurb { text-align: left; }
  .diff-look-c .diff ul { margin-top: 4px; padding: 7px 10px; border-radius: 13px; }
}
/* a phone held upright: the best wave sits at the end of the name's row (under it when the row is too narrow) */
@media (max-width: 700px) and (min-height: 501px) {
  .diff__text, .diff-look-c .diff__text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 3px; }
  .diff__top { order: 0; flex: 0 1 auto; min-width: 0; }
  .diff__best { order: 1; margin: 0 0 0 auto; padding: 0; white-space: nowrap; }
  .diff__blurb { order: 2; flex: 0 0 100%; }
  .diff ul { order: 3; flex: 0 0 100%; line-height: 1.28; }
}
/* shorter phones (375x667, 360x640 to 360x800, 414x736): tighter, so all three still fit with every best wave shown */
@media (max-width: 700px) and (min-height: 501px) and (max-height: 800px) {
  .screen--diff { padding: 8px; }
  .card.card--diff { max-height: calc(100dvh - 16px); padding: 14px 12px 4px; }
  .card--diff h2, .diff-look-c h2 { font-size: 20px; }
  .card--diff.card > p { margin-top: 2px; font-size: 13px; }
  .diffs, .diff-look-c .diffs { margin-top: 10px; gap: 6px; }
  .diff { gap: 10px; }
  .diff__top b { font-size: 16px; }
  .diff__blurb { font-size: 12.5px; line-height: 1.25; }
  .diff ul { font-size: 12.5px; gap: 1px; line-height: 1.25; }
  .card--diff .btn[data-back] { margin-top: 2px; }
  .diff-look-a .diff { padding-right: 10px; }
  .diff-look-a .diff__badge { padding: 0 6px; }
  .diff-look-a .diff__medal { width: 50px; height: 50px; }
  .diff-look-a .diff__text { padding: 7px 0 8px; }
  .diff-look-b .diff { padding: 7px 10px 8px 6px; }
  .diff-look-b .diff__badge { width: 54px; height: 54px; }
  .diff-look-b .diff__ins { width: 46px; height: 46px; }
  .diff-look-c .diff__badge { width: 64px; height: 64px; margin-top: 2px; }
  .diff-look-c .diff ul { margin-top: 3px; padding: 5px 9px; }
}
/* a phone on its side (667x375 to 896x414): three columns, each with its insignia beside the name, the blurb and the
   best wave, and what changes underneath across the column's full width */
@media (max-height: 500px) and (min-width: 560px) {
  .screen--diff { padding: 8px; }
  .card.card--diff { max-height: calc(100dvh - 16px); padding: 10px 12px 4px; }
  .card--diff h2, .diff-look-c h2 { font-size: 20px; }
  .card--diff.card > p { margin-top: 1px; font-size: 13px; }
  .diffs, .diff-look-c .diffs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; gap: 8px; }
  .diff { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "badge top" "badge blurb" "badge best" "list list"; align-content: start; align-items: start; column-gap: 9px; row-gap: 1px; }
  .diff__text { display: contents; }
  .diff__badge { grid-area: badge; }
  .diff__top { grid-area: top; }
  .diff__top b { font-size: 16px; }
  .diff__blurb { grid-area: blurb; font-size: 12px; line-height: 1.25; }
  .diff__best { grid-area: best; margin: 0; padding: 0; }
  .diff ul { grid-area: list; margin-top: 6px; font-size: 12px; gap: 1px; line-height: 1.25; }
  .card--diff .btn[data-back] { margin-top: 2px; }
  .diff-look-a .diff { padding: 9px 10px 10px; }
  .diff-look-a .diff__badge { align-self: start; margin: 0; padding: 0; background: none; border-radius: 0; }
  .diff-look-a .diff__medal { width: 46px; height: 46px; }
  .diff-look-b .diff { padding: 8px 10px 9px 8px; }
  .diff-look-b .diff__badge { width: 46px; height: 46px; }
  .diff-look-b .diff__ins { width: 40px; height: 40px; }
  .diff-look-c .diff__badge { width: 50px; height: 50px; margin: 0; }
  .diff-look-c .diff ul { margin-top: 5px; padding: 5px 9px; }
}
@media (max-width: 420px) {
  #btnMute { display: none; }
}
/* ---------- short screens (a phone on its side): the panel runs the full height on the left ---------- */
@media (max-height: 560px) and (min-width: 701px) {
  .sel { top: calc(env(safe-area-inset-top, 0px) + 8px); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - var(--safe-b)); }
}
/* ---------- messages that come and go (Juno, the level card, toasts, the splash, a new enemy) show over the select
   panel, which on a small phone reaches up to them ---------- */
.comms, .lvcard, .toast, .announce, .enemy-card { z-index: 4; }
/* the dialogue and the screens (pause, the Hangar, game over) cover everything in play, the select panel included,
   which would otherwise draw over the pause card and take presses while paused */
#dialogue { z-index: 5; }
#screens { z-index: 6; }
/* ---------- phones: 'Need N' drops under the tools row, clear of the shield beside the purse ---------- */
@media (max-width: 700px) {
  .hud-need { right: 0; top: calc(100% + 58px); transform: none; }
}
/* short phones: the level 3 choices lose their pictures, so the sheet's buttons stay in view */
@media (max-width: 700px) and (max-height: 760px) {
  .sp-br img { display: none; }
}
/* most laptop windows (under 880 pixels tall): the panel drops the numbers sentence (the pips say it) and shrinks the
   level 3 pictures, so the level 3 buttons stay in view; under 760 the pictures go */
@media (min-width: 701px) and (max-height: 880px) {
  .sp-nums { display: none; }
  .sp-br img { width: 44px; height: 44px; margin: -2px auto 2px; }
}
@media (min-width: 701px) and (max-height: 760px) {
  .sp-br img { display: none; }
}
/* ---------- touch screens: every control at least 40 pixels for a finger ---------- */
@media (pointer: coarse) {
  .hud-speed { padding: 2px; }
  .hud-speed button { min-width: 40px; height: 40px; }
  .hud-btn { width: 42px; height: 42px; }
  .sp-x { width: 40px; height: 40px; margin: -6px -6px 0 0; }
  .sp-buy { min-height: 42px; }
  .sp-seg button { min-height: 40px; }
  .sp-sell { min-height: 44px; }
  .btn--link { min-height: 44px; }
  .comms__skip { min-height: 40px; padding: 0 16px; }
  .tab { min-height: 40px; }
  /* a crate pin's body is 30 pixels tall: its hit area reaches past it */
  .cp--tap .cp__body::after { content: ""; position: absolute; inset: -8px -4px; }
}

/* ---------- a building waiting on a phone: Build and a cross over it, above Juno's line (z-index 4) ---------- */
.ghost-act { position: absolute; left: 0; top: 0; display: flex; gap: 8px; align-items: center; pointer-events: auto; will-change: transform; z-index: 5; }
.ghost-act__build { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--ink); background: linear-gradient(180deg, #d9fff1, var(--mint)); box-shadow: 0 4px 0 #5fb79a, 0 8px 18px rgba(20, 10, 60, 0.35); }
.ghost-act__build .coin { width: 14px; height: 14px; }
.ghost-act__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--panel-line); background: var(--panel); }
.ghost-act__x svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.ghost-act.bad .ghost-act__build { opacity: 0.45; filter: grayscale(0.6); }

/* ---------- the placement ghost's label (main places it over the ghost): the share of each open path it reaches, or
   why the spot is refused; above Juno's line, never in the way of a press ---------- */
.ghost-tag { position: absolute; left: 0; top: 0; z-index: 5; padding: 4px 10px; border-radius: 999px; background: rgba(36, 26, 82, 0.9); border: 1.5px solid rgba(168, 240, 216, 0.55); color: var(--mint); font-size: 12.5px; font-weight: 800; white-space: pre; font-variant-numeric: tabular-nums; box-shadow: 0 6px 14px rgba(20, 10, 60, 0.35); pointer-events: none; will-change: transform; }
.ghost-tag.bad { color: var(--coral); border-color: rgba(255, 143, 143, 0.7); }

/* ---------- touch tablets (up to 900 wide): the phone's two bottom rows, so the tray has the width for every tile;
   the side panel stops above the taller bar (--hud-foot, which grows when the commander is down) ---------- */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 561px) and (pointer: coarse) {
  .hud-bottom { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cmd act" "tray tray"; }
  .sel { max-height: calc(100dvh - var(--sel-top) - var(--hud-foot, 228px) - 8px); }
  .enemy-card { bottom: calc(var(--hud-foot, 220px) + 12px); }
}
/* tablets and narrow laptops with a building selected: a new enemy's card sits right of the side panel, where it would
   otherwise be lifted over the panel's head and Juno's line */
@media (min-width: 701px) and (max-width: 1160px) {
  #app:has(#selPanel:not([hidden])) .enemy-card { left: 364px; width: min(440px, calc(100vw - 376px)); transform: translate(0, 20px); }
  #app:has(#selPanel:not([hidden])) .enemy-card.on { transform: none; }
}

/* ---------- phones: the banner just above the bottom bar (--hud-foot: its measured height, from the HUD), clear of
   the top row and Juno's line ---------- */
@media (max-width: 700px) {
  .banner { top: auto; bottom: calc(var(--hud-foot, 200px) + 10px); }
}
/* the sheet stops under Juno's slot (about 70 px tall, under the top row), so her line never covers its name */
@media (max-width: 600px) {
  .sel { max-height: calc(100dvh - 8px - var(--safe-b) - max(calc(env(safe-area-inset-top, 0px) + 244px), calc(var(--hud-edge, 0px) + 86px))); }
}

/* ---------- short screens (a phone on its side): one slim row along the top and one along the bottom, so the map
   keeps the middle; the select panel runs the full height on the left ---------- */
@media (max-height: 500px) {
  .hud-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto; column-gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 6px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); }
  .hud-wave { grid-row: auto; grid-template-columns: auto auto; grid-template-areas: "n guide" "s medal" "next next"; column-gap: 10px; min-width: 0; padding: 5px 10px 6px; border-radius: 12px; }
  .hud-wave__n { grid-area: n; font-size: 14px; }
  .hud-wave__s { grid-area: s; font-size: 12px; }
  .hud-next { grid-area: next; max-width: 260px; margin-top: 3px; }
  .hud-medal { grid-area: medal; margin-top: 0; justify-self: end; align-self: center; }
  .hud-wave .guide-link { grid-area: guide; margin-top: 0; justify-self: end; align-self: center; }
  .hud-array { justify-self: center; padding: 6px 10px; }
  .hud-array__bar { width: clamp(56px, 13vw, 150px); }
  .hud-right { display: flex; align-items: center; gap: 6px; }
  .hud-coins, .hud-tools { grid-column: auto; grid-row: auto; }
  .hud-coins { padding: 6px 12px 6px 7px; font-size: 15px; }
  .hud-need { right: 0; top: calc(100% + 8px); transform: none; }
  .hud-bottom { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cmd tray act"; column-gap: 8px; padding: 0 max(10px, env(safe-area-inset-right, 0px)) calc(var(--safe-b) + 6px) max(10px, env(safe-area-inset-left, 0px)); }
  .hud-tray { justify-self: center; }
  /* the chip on one line: portrait, name over health, then the powers */
  .cmd { width: auto; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 18px; }
  .cmd__face { width: 46px; height: 46px; }
  .cmd__face img { width: 40px; height: 40px; }
  .cmd__lv { min-width: 19px; height: 19px; font-size: 11px; right: -4px; bottom: -3px; }
  .cmd__body { grid-template-columns: minmax(0, 84px) auto; grid-template-areas: "name pw" "hp pw"; align-items: center; column-gap: 8px; row-gap: 5px; }
  .cmd__name { grid-area: name; font-size: 12px; }
  .cmd__name small { display: none; }
  .cmd__hp { grid-area: hp; height: 6px; }
  .cmd--down .cmd__hp { height: 16px; }
  .cmd__powers { grid-area: pw; gap: 5px; }
  .pw { width: 40px; height: 40px; }
  .pw svg { width: 20px; height: 20px; }
  .tray__row { padding: 5px 6px 12px; gap: 5px; border-radius: 16px; }
  .tt { width: 58px; padding: 2px 1px 12px; border-radius: 12px; }
  .tt img { width: 38px; height: 38px; }
  .tt__name { font-size: 10px; }
  .tt__price, .tt__note { font-size: 10px; bottom: -8px; padding: 1px 6px 1px 3px; }
  .tt__note { padding: 1px 6px; }
  .tt--on { transform: translateY(-2px); }
  /* the tray sits between the chip and Launch with ice above and beside it, so the tiles take every move themselves:
     js/ui/tray.js scrolls the row by hand, and a finger leaving it over the top drags that tile onto the ice */
  .tt { touch-action: none; }
  .hud-act { flex-direction: row; align-items: center; gap: 8px; }
  .call-btn { min-height: 42px; padding: 10px 14px 12px; font-size: 14.5px; gap: 6px; }
  .call-drain { bottom: 5px; }
  .view-btn { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .view-btn span, .view-btn kbd { display: none; }
  /* the select panel: a full-height side panel on the left at any width */
  .sel { --sel-pad: 12px; left: max(8px, env(safe-area-inset-left, 0px)); right: auto; top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: auto; width: 340px; max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - var(--safe-b)); padding: var(--sel-pad) var(--sel-pad) 11px; border-radius: 20px; }
  /* the boss bar under the top row (both panels are short in a wave), Juno's line under it */
  .boss-bar { top: calc(var(--hud-edge, 54px) + 4px); width: min(420px, calc(100vw - 32px)); }
  .comms.low { top: calc(var(--hud-edge, 54px) + 48px); }
  .enemy-card { bottom: calc(var(--hud-foot, 92px) + 8px); }
  .banner { top: auto; bottom: calc(var(--hud-foot, 92px) + 10px); }
  /* the cards (title, pause, game over) scroll; tighter, so the title's Play shows without scrolling */
  .card { padding: 16px 20px; }
  .title-mark { width: 40px; height: 40px; margin-bottom: 6px; box-shadow: 0 0 0 4px rgba(166, 64, 255, 0.18); }
  .card h1 { font-size: 30px; }
  .card p { margin-top: 6px; }
  .rank { margin: 10px 0 2px; }
  .card > .btn:not(.btn--ghost):not(.btn--link) { margin-top: 12px; padding: 12px 20px; }
}
/* narrow ones (a small phone on its side): the shield takes the room between the panels, and mute goes (the pause
   card has Sound off) */
@media (max-height: 500px) and (max-width: 760px) {
  .hud-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hud-next { max-width: 200px; }
  .hud-medal { display: none; }
  .hud-array__bar { width: clamp(40px, 8vw, 90px); }
  #btnMute { display: none; }
}
/* short screens with a building selected: Juno's line and a new enemy's card move right of the side panel instead of
   over it, and the boss bar too, which the panel would otherwise cover from the end its health drains towards */
@media (max-height: 560px) {
  #app:has(#selPanel:not([hidden])) .comms { left: calc(max(8px, env(safe-area-inset-left, 0px)) + 352px); right: auto; transform: none; width: max-content; max-width: calc(100vw - 364px - max(8px, env(safe-area-inset-left, 0px))); }
  #app:has(#selPanel:not([hidden])) .boss-bar { left: calc(max(8px, env(safe-area-inset-left, 0px)) + 352px); transform: none; width: min(420px, calc(100vw - 364px - max(8px, env(safe-area-inset-left, 0px)))); }
  #app:has(#selPanel:not([hidden])) .comms.in { animation-name: commsinm; }
  #app:has(#selPanel:not([hidden])) .comms--algo.in { animation: commsinm 0.32s cubic-bezier(0.2, 1.3, 0.4, 1), glitchm 0.4s steps(3) 0.32s 2; }
  #app:has(#selPanel:not([hidden])) .enemy-card { left: calc(max(8px, env(safe-area-inset-left, 0px)) + 352px); width: min(440px, calc(100vw - 364px - max(8px, env(safe-area-inset-left, 0px)))); transform: translate(0, 20px); }
  #app:has(#selPanel:not([hidden])) .enemy-card.on { transform: none; }
}
@media (max-height: 560px) and (prefers-reduced-motion: reduce) {
  #app:has(#selPanel:not([hidden])) .comms.in, #app:has(#selPanel:not([hidden])) .comms--algo.in { animation: none; }
}

/* a phone on its side: Juno's box tucks under the wave panel on the left, so the middle of the map stays clear to tap */
@media (max-height: 500px) and (min-width: 560px) {
  .comms, .comms.low { left: max(10px, env(safe-area-inset-left, 0px)); right: auto; transform: none; top: calc(var(--hud-edge, 60px) + 6px); width: auto; max-width: min(340px, 40vw); padding: 6px 10px 6px 6px; gap: 8px; }
  .comms img { width: 36px; height: 36px; border-radius: 10px; }
}

/* ---------- the end of a run (#app.ending, from main): the HUD has gone, so Juno's box rises to the top of the screen
   and, where the screen is tall enough for the mission report to leave her a band (--rep-band), stays over it ---------- */
#app.ending .comms, #app.ending .comms.low { top: calc(env(safe-area-inset-top, 0px) + 14px); }
@media (min-height: 561px) { #app.ending .comms { z-index: 7; } }
@media (max-width: 600px) { #app.ending .comms, #app.ending .comms.low { left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); } }
@media (max-height: 500px) and (min-width: 560px) { #app.ending .comms, #app.ending .comms.low { top: calc(env(safe-area-inset-top, 0px) + 8px); } }

/* ---------- the mission report (js/ui/screens.js report()): the end of a run on the patches' night sky. Every part is
   laid out from the start in its end state; while the ceremony plays (.rep--play) the parts still to come are hidden
   and each plays its entrance as it arrives (.in). With reduced motion it opens at its end state (.rep--done) ---------- */
.screen--report { padding: 0; place-items: stretch; background: radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 31% 9%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1.2px 1.2px at 62% 14%, rgba(255, 255, 255, 0.75), transparent), radial-gradient(1px 1px at 83% 31%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.4px 1.4px at 91% 72%, rgba(255, 233, 166, 0.7), transparent), radial-gradient(1px 1px at 7% 81%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1.2px 1.2px at 47% 93%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(ellipse 90% 70% at 50% 42%, rgba(43, 28, 110, 0.86), rgba(12, 7, 36, 0.96)); }
.screen--report.screen--play { animation: repfade 0.5s ease both; }
.card.rep { --rep-band: calc(env(safe-area-inset-top, 0px) + 92px); display: flex; flex-direction: column; width: 100%; height: 100%; max-height: none; padding: var(--rep-band) 16px 0; border-radius: 0; background: none; box-shadow: none; color: #fff; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(233, 153, 255, 0.4) transparent; outline: none; }
/* centred in the screen when it fits; from the top, scrolling, when it doesn't */
.rep__in { width: min(1000px, 100%); margin: auto; display: flex; flex-direction: column; gap: 16px; }
.card.rep .rep__title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 850; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 14px rgba(10, 6, 40, 0.7); }
.rep__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* nothing in the haul at all: the one column, centred */
.rep__body--solo { width: min(560px, 100%); margin: 0 auto; }
.rep__result { display: grid; gap: 14px; align-content: start; }
.rep__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 8px; }

/* the waves held, New best beside them (or the best on this difficulty under them), the commander and the difficulty */
.rep-waves { position: relative; display: grid; justify-items: center; align-content: center; }
.rep-waves__row { display: inline-flex; align-items: center; gap: 8px; }
.rep-waves__n { font-size: clamp(58px, 6.6vw, 92px); line-height: 0.95; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 0 rgba(60, 20, 120, 0.55), 0 0 30px rgba(190, 140, 255, 0.75); }
.rep-waves__l { margin-top: 2px; font-size: 16px; font-weight: 800; color: #f3c6ff; }
.rep-who { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 10px; font-size: 14px; font-weight: 750; color: rgba(255, 255, 255, 0.86); }
.rep-who__face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 50% 36%, #6d52dc, #2a1d6b 72%); box-shadow: 0 0 0 2px rgba(233, 153, 255, 0.55); }
.rep-who b { min-width: 0; font-weight: 850; color: #fff; overflow-wrap: anywhere; }
.rep-who__ins { width: 22px; height: 22px; margin-left: 4px; filter: drop-shadow(0 2px 3px rgba(4, 2, 20, 0.5)); }
.rep-who__t { font-style: normal; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(246, 199, 102, 0.18); color: #f6c766; }
.rep-who__d--cadet { color: #a8f0d8; }
.rep-who__d--commander { color: #f3c6ff; }
.rep-who__d--admiral { color: #ffb4b4; }
.rep-best { margin-top: 6px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.68); }
.rep-stamp { flex: none; padding: 5px 10px 6px; border-radius: 10px; border: 2.5px solid #ffd36b; background: rgba(40, 22, 86, 0.92); box-shadow: 0 0 0 2px rgba(20, 12, 56, 0.9), inset 0 0 0 2px rgba(255, 211, 107, 0.3), 0 8px 18px rgba(4, 2, 20, 0.5); color: #ffe39a; font-size: 15px; font-weight: 900; white-space: nowrap; text-shadow: 0 0 10px rgba(255, 211, 107, 0.45); transform: rotate(-11deg); }

/* the medal: a ribbon and a disc that spins on its own, a shine across it, sparkles round it */
.rep-medal { display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; }
.rep-medal__art { position: relative; width: clamp(92px, 9.5vw, 124px); aspect-ratio: 64 / 82; perspective: 600px; }
.rep-medal__ribbon { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.rep-medal__coin { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(0 8px 14px rgba(4, 2, 20, 0.55)); }
.rep-medal__disc, .rep-medal__ghost { display: block; width: 100%; height: 100%; }
.rep-medal--none .rep-medal__ghost { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.rep-medal__shine { position: absolute; inset: 4%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.rep-medal__shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 38%; transform: rotate(20deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); }
.rep-medal.in .rep-medal__shine::after { animation: repglint 5s ease-in-out 0.62s infinite both; }
.rep-spark { position: absolute; left: var(--x); top: var(--y); width: calc(16px * var(--s)); height: calc(16px * var(--s)); margin: calc(-8px * var(--s)) 0 0 calc(-8px * var(--s)); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.6 6.4 16 8 9.6 9.6 8 16 6.4 9.6 0 8 6.4 6.4z' fill='%23fff6d0'/%3E%3C/svg%3E"); opacity: 0; pointer-events: none; }
.rep-medal__name { font-size: 16px; font-weight: 850; color: #fff; }
.rep-medal__need { max-width: 180px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #d9ccff; }

/* the stats, on glass (the time's tile narrower, the commander's wider, so "wrecked by" and a call sign of two words
   take two lines like the others) */
.rep-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; }
.rep-stats li { display: grid; align-content: start; gap: 3px; padding: 10px 6px; border-radius: 14px; border: 1px solid rgba(233, 153, 255, 0.22); background: rgba(20, 12, 56, 0.66); }
.rep-stats b { font-size: 21px; font-weight: 850; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
/* (a long call sign in "wrecked by" breaks inside its box) */
.rep-stats span { font-size: 12px; font-weight: 700; line-height: 1.25; color: rgba(255, 255, 255, 0.74); overflow-wrap: anywhere; hyphens: auto; }

/* rank points into the rank bar, on glass under the stats */
.rep-rank { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(233, 153, 255, 0.22); background: rgba(20, 12, 56, 0.66); text-align: left; }
.rep-rank__badge { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #b25cff, var(--deep)); box-shadow: 0 0 0 2.5px var(--gold), 0 0 18px rgba(246, 199, 102, 0.35); font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rep-rank__badge::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid #ffe39a; opacity: 0; pointer-events: none; }
.rep-rank__body { flex: 1; min-width: 0; }
.rep-rank__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.rep-rank__name { font-size: 15px; font-weight: 800; }
.rep-rank__pts { font-size: 14px; font-weight: 800; color: #ffe39a; font-variant-numeric: tabular-nums; }
.rep-rank__bar { position: relative; height: 10px; margin: 7px 0 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.rep-rank__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--lilac) 70%, #fff3c4); box-shadow: 0 0 12px rgba(233, 153, 255, 0.6); }
.rep-rank__row--small { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.74); font-variant-numeric: tabular-nums; }
.rep-rank__row--small b { font-weight: 800; color: #fff; }
.rep-rank__from { color: #ffe39a; font-weight: 800; }
/* (the shop's phase 2) the run's Cryons under the rank: the total counted up, what paid it, the balance */
.rep-cr { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; border: 1px solid rgba(127, 227, 255, 0.3); background: rgba(20, 12, 56, 0.66); text-align: left; }
.rep-cr__gem { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, rgba(127, 227, 255, 0.3), rgba(127, 227, 255, 0) 70%); }
.rep-cr__gem .cr { width: 30px; height: 30px; }
.rep-cr__body { flex: 1; min-width: 0; }
.rep-cr__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.rep-cr__name { font-size: 15px; font-weight: 800; }
.rep-cr__pts { font-size: 14px; font-weight: 800; color: #7fe3ff; font-variant-numeric: tabular-nums; }
.rep-cr__row--small { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.74); font-variant-numeric: tabular-nums; }
.rep-cr__parts { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.rep-cr__bal b { font-weight: 800; color: #fff; }

/* the haul, on its own glass panel: the crate's stage */
.rep__gain { display: grid; align-content: start; padding: 16px 14px 14px; border-radius: 22px; border: 1px solid rgba(233, 153, 255, 0.24); background: radial-gradient(ellipse 60% 40% at 50% 18%, rgba(176, 140, 255, 0.22), rgba(176, 140, 255, 0) 70%), rgba(20, 12, 56, 0.62); box-shadow: 0 20px 50px rgba(4, 2, 20, 0.35); text-align: left; }
/* the supply crate: drops, shakes with light leaking out, and bursts open; rays behind it once open */
.rep-haul { display: grid; justify-items: center; gap: 12px; }
.rep-crate { position: relative; width: 168px; height: 146px; }
.rep-crate::before { content: ""; position: absolute; inset: -24% -34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 228, 140, 0.55), rgba(255, 228, 140, 0)); opacity: 0; pointer-events: none; }
.rep-crate.open::before { opacity: 0.7; }
.rep-crate .crate { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 14px rgba(4, 2, 20, 0.55)); }
.crate__rays { opacity: 0; transform-box: view-box; transform-origin: 60px 44px; }
.rep-crate.open .crate__rays { opacity: 1; animation: reprays 18s linear infinite; }
.crate__lid { transform-box: fill-box; transform-origin: 50% 100%; }
.rep-crate.open .crate__lid { opacity: 0; }
.rep-crate__flash { position: absolute; left: 50%; top: 40%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(#fff, rgba(255, 240, 190, 0.85) 40%, rgba(255, 220, 120, 0) 70%); opacity: 0; pointer-events: none; }
.rep-crate__spark { position: absolute; left: 50%; top: 40%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.6 6.4 16 8 9.6 9.6 8 16 6.4 9.6 0 8 6.4 6.4z' fill='%23fff6d0'/%3E%3C/svg%3E"); opacity: 0; pointer-events: none; }
.rep-crate--locked { width: 112px; height: 97px; }
.rep-crate--locked .crate { filter: saturate(0.7) brightness(0.85) drop-shadow(0 8px 12px rgba(4, 2, 20, 0.5)); }

/* the haul: each unlocked item a card with its picture, name and kind; each badge a patch with its name */
/* (over the crate's rays) */
.rep-loot { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.rep-item { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 8px 5px 9px; border-radius: 16px; border: 1.5px solid rgba(246, 199, 102, 0.6); background: var(--tile); box-shadow: 0 0 18px rgba(246, 199, 102, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); text-align: center; }
.rep-item__pic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%); }
.rep-item__art { width: 44px; height: 44px; fill: #efe6ff; color: #efe6ff; filter: drop-shadow(0 3px 4px rgba(10, 6, 30, 0.45)); }
.rep-item b { font-size: 13px; font-weight: 800; line-height: 1.2; color: #fff; overflow-wrap: break-word; hyphens: auto; }
.rep-item small { font-size: 12px; font-weight: 700; color: #d9ccff; }
.rep-badge { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 2px 2px 6px; text-align: center; }
.rep-patch { width: 66px; height: 66px; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 6px 10px rgba(4, 2, 20, 0.55)); }
.rep-badge b { font-size: 12.5px; font-weight: 800; line-height: 1.2; color: #fff; overflow-wrap: break-word; hyphens: auto; }
/* nothing unlocked: the locked crate beside the next rank's rewards and the points still to go */
.rep-haul--next { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; column-gap: 12px; }
.rep-haul--next > .rep-loot:not(.rep-loot--next) { grid-column: 1 / -1; }
.card.rep .rep-next p { display: grid; gap: 2px; margin: 0 0 8px; font-size: 13px; line-height: 1.3; color: #ffe39a; font-weight: 750; }
.card.rep .rep-next p b { font-size: 15px; font-weight: 850; color: #fff; }
.rep-loot--next { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.rep-item--next { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.rep-item--next .rep-item__art { opacity: 0.6; }

/* Play again first, then Try them on and Badges, held at the bottom while the report scrolls */
.rep-acts { position: sticky; bottom: 0; z-index: 2; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 18px); }
/* the report fading out under them, edge to edge, when it scrolls (.rep--scroll) */
.rep-acts::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50vw; right: -50vw; background: linear-gradient(180deg, rgba(12, 7, 36, 0), rgba(12, 7, 36, 0.92) 36%); opacity: 0; pointer-events: none; }
.rep--scroll .rep-acts::before { opacity: 1; }
.rep-btn { min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); color: #fff; font-weight: 800; font-size: 15px; }
.rep-btn--go { min-width: 220px; padding: 0 30px; border: 0; font-size: 17px; color: var(--ink); background: linear-gradient(180deg, #ffe9a6, var(--gold)); box-shadow: 0 6px 0 var(--gold-deep), 0 10px 26px rgba(246, 199, 102, 0.3); }
.rep-btn--go:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--gold-deep), 0 6px 16px rgba(246, 199, 102, 0.3); }

/* the ceremony: parts still to come are hidden; each plays its entrance as it arrives */
.rep--play [data-st]:not(.in), .rep--play .rep-cell:not(.in), .rep--play .rep-rank__from:not(.in) { visibility: hidden; }
.rep--play .rep__title.in, .rep--play .rep-best.in, .rep--play .rep-next.in, .rep--play .rep-medal--none.in, .rep--play .rep-crate--locked.in, .rep--play .rep__gain.in { animation: repfade 0.4s ease both; }
.rep--play .rep-waves.in { animation: repup 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.rep--play .rep-medal.in .rep-medal__art { animation: repdrop 0.62s cubic-bezier(0.3, 0.9, 0.4, 1.15) both; }
.rep--play .rep-medal.in .rep-medal__coin { animation: repspin 0.62s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
.rep--play .rep-medal.in .rep-medal__name { animation: repfade 0.3s ease 0.5s both; }
.rep--play .rep-medal.in .rep-spark { animation: repspark 0.9s ease calc(0.5s + var(--dl)) both; }
.rep--play .rep-stats.in li { animation: repup 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.rep--play .rep-stats.in li:nth-child(2) { animation-delay: 0.07s; }
.rep--play .rep-stats.in li:nth-child(3) { animation-delay: 0.14s; }
.rep--play .rep-stats.in li:nth-child(4) { animation-delay: 0.21s; }
.rep--play .rep-stamp.in { animation: repstamp 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.rep--play.rep--thump .rep__in { animation: repthump 0.3s ease; }
.rep--play .rep-rank.in { animation: repup 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.rep--play .rep-rank.pop .rep-rank__badge { animation: reppop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.rep--play .rep-rank.pop .rep-rank__badge::after { animation: repring 0.6s ease-out; }
.rep--play .rep-rank.pop .rep-rank__bar i { animation: repbar 0.5s ease; }
.rep--play .rep-rank__from.in { animation: repfade 0.3s ease both; }
.rep--play .rep-crate.in { animation: repcrate 0.45s cubic-bezier(0.3, 0.9, 0.4, 1) both; }
.rep--play .rep-crate.shake .crate { transform-origin: 50% 96%; animation: repshake 0.62s linear both; }
.rep--play .rep-crate.shake::before { animation: repleak 0.62s ease-in both; }
.rep--play .rep-crate.open .crate__lid { animation: replid 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.rep--play .rep-crate.open .crate__rays { animation: repfade 0.4s ease both, reprays 18s linear infinite; }
.rep--play .rep-crate.open .rep-crate__flash { animation: repburst 0.55s ease-out both; }
.rep--play .rep-crate.open .rep-crate__spark { animation: repfly 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.rep--play .rep-item.landed { animation: repland 0.5s ease; }
.rep--play .rep-badge.in .rep-patch { animation: reppatch 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.rep--play .rep-badge.in b { animation: repfade 0.3s ease 0.2s both; }
.rep--play .rep-acts.in > * { animation: repup 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.rep--play .rep-acts.in > :nth-child(2) { animation-delay: 0.07s; }
.rep--play .rep-acts.in > :nth-child(3) { animation-delay: 0.14s; }
@keyframes repfade { from { opacity: 0; } }
@keyframes repup { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes repdrop { 0% { opacity: 0; transform: translateY(-120px) scale(0.7); } 25% { opacity: 1; } 75% { transform: translateY(6px) scale(1.04); } 100% { transform: none; } }
@keyframes repspin { from { transform: rotateY(900deg); } to { transform: rotateY(0deg); } }
@keyframes repglint { 0% { left: -60%; } 14%, 100% { left: 130%; } }
@keyframes repspark { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 30% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(0.4) rotate(90deg); } }
@keyframes repstamp { 0% { opacity: 0; transform: rotate(-24deg) scale(2.4); } 60% { opacity: 1; transform: rotate(-9deg) scale(0.92); } 100% { transform: rotate(-11deg) scale(1); } }
@keyframes repthump { 20% { transform: translate(2px, 3px); } 45% { transform: translate(-2px, -1px); } 70% { transform: translate(1px, 1px); } }
@keyframes reppop { 40% { transform: scale(1.35); box-shadow: 0 0 0 3px #fff3c4, 0 0 34px rgba(246, 199, 102, 0.9); } }
@keyframes repring { from { opacity: 1; transform: scale(0.9); } to { opacity: 0; transform: scale(2.1); } }
@keyframes repbar { 30% { filter: brightness(1.8); } }
@keyframes repcrate { 0% { opacity: 0; transform: translateY(-260px); } 15% { opacity: 1; } 62% { transform: translateY(0) scale(1.08, 0.88); } 80% { transform: translateY(-8px) scale(0.97, 1.04); } 100% { transform: none; } }
@keyframes repshake { 0%, 100% { transform: none; } 10% { transform: rotate(-4deg); } 22% { transform: rotate(4deg); } 34% { transform: rotate(-6deg) translateY(-2px); } 46% { transform: rotate(6deg); } 58% { transform: rotate(-8deg) translateY(-4px); } 70% { transform: rotate(8deg) translateY(-3px); } 82% { transform: rotate(-9deg) translateY(-6px); } 94% { transform: rotate(5deg); } }
@keyframes repleak { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes replid { 0% { opacity: 1; transform: none; } 35% { opacity: 1; transform: translate(-10px, -34px) rotate(-18deg); } 100% { opacity: 0; transform: translate(-40px, -64px) rotate(-55deg) scale(0.85); } }
@keyframes reprays { to { transform: rotate(360deg); } }
@keyframes repburst { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(26); } }
@keyframes repfly { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(0.5); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1.3); } }
@keyframes repland { 35% { box-shadow: 0 0 0 3px rgba(255, 233, 166, 0.9), 0 0 30px rgba(246, 199, 102, 0.7); } }
@keyframes reppatch { 0% { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 20deg)) scale(2.3); } 65% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(0.9); } 100% { transform: rotate(var(--r, 0deg)) scale(1); } }

/* two columns where there is the width (and on a phone on its side): what the run did on the left, what it brought on
   the right */
@media (min-width: 900px), (max-height: 500px) and (min-width: 600px) {
  .rep__body { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 20px; align-items: center; }
  .rep__body--solo { grid-template-columns: minmax(0, 1fr); }
}
/* with the room, the next rank's crate stands over its rewards, as the open one does */
@media (min-width: 900px) and (min-height: 501px) {
  .rep-haul--next { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .rep-haul--next > .rep-next { justify-self: stretch; }
  .card.rep .rep-next p { justify-items: center; }
  .rep-loot--next { grid-template-columns: repeat(auto-fit, minmax(92px, 116px)); justify-content: center; }
}
/* phones: a first run's haul (the rank's three items, a badge or two) fits a 390x844 screen without scrolling, four to
   a row; a bigger one scrolls */
@media (max-width: 600px) {
  .card.rep { --rep-band: calc(env(safe-area-inset-top, 0px) + 80px); padding-left: 12px; padding-right: 12px; }
  .rep__in { gap: 10px; }
  .rep__body, .rep__result { gap: 8px; }
  .rep-waves__n { font-size: 56px; }
  .rep-waves__l { font-size: 15px; }
  .rep-who { margin-top: 6px; font-size: 13px; }
  .rep-who__face { width: 26px; height: 26px; }
  .rep-medal { gap: 4px; }
  .rep-medal__art { width: 66px; }
  .rep-medal__name { font-size: 15px; }
  .rep-stamp { font-size: 13.5px; padding: 4px 8px 5px; }
  .rep-stats { gap: 6px; }
  .rep-stats li { padding: 7px 3px; border-radius: 12px; }
  .rep-stats b { font-size: 18px; }
  .rep__gain { padding: 10px; border-radius: 20px; }
  .rep-rank, .rep-cr { padding: 8px 12px; }
  .rep-rank__badge { width: 40px; height: 40px; font-size: 18px; }
  .rep-cr__gem { width: 40px; height: 40px; }
  .rep-cr__gem .cr { width: 26px; height: 26px; }
  .rep-haul { gap: 8px; }
  .rep-crate { width: 112px; height: 97px; }
  .rep-crate--locked { width: 84px; height: 73px; }
  .rep-loot { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .rep-item { padding: 7px 3px 8px; }
  .rep-item__pic { width: 44px; height: 44px; }
  .rep-item__art { width: 36px; height: 36px; }
  .rep-item b { font-size: 12.5px; }
  .rep-patch { width: 54px; height: 54px; }
  .rep-badge b { font-size: 12px; }
  .rep-acts { padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 12px); gap: 8px; }
  .rep-btn--go { flex: 1 0 100%; min-width: 0; }
  .rep-btn:not(.rep-btn--go) { flex: 1 1 0; padding: 0 12px; }
  /* with nothing to try on, Play again and Badges share the row */
  .rep-acts--two .rep-btn--go { flex: 2 1 0; }
  /* the next rank's crate beside its rewards: a smaller crate, so each reward's name has the width */
  .rep-haul--next { column-gap: 8px; }
  .rep-haul--next .rep-crate--locked { width: 68px; height: 59px; }
  .rep-loot--next { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; }
  .rep-loot--next .rep-item { padding-left: 3px; padding-right: 3px; }
}
/* shorter phones (375x667 and the like): a little tighter, so a report with nothing unlocked, or one row of haul, fits */
@media (max-width: 600px) and (max-height: 720px) {
  .card.rep { --rep-band: calc(env(safe-area-inset-top, 0px) + 76px); }
  .rep__in, .rep__body, .rep__result { gap: 6px; }
  .card.rep .rep__title { font-size: 20px; }
  .rep-waves__n { font-size: 48px; }
  .rep-who { margin-top: 4px; }
  .rep-medal__art { width: 56px; }
  .rep-medal__name { font-size: 14px; }
  .rep-stats li { padding: 5px 3px; }
  .rep-stats b { font-size: 17px; }
  .rep-rank, .rep-cr { padding: 6px 12px; }
  .rep-rank__bar { margin: 5px 0 4px; }
  .rep-cr__row--small { margin-top: 2px; }
  .rep__gain { padding: 8px 10px; }
  .rep-crate { width: 84px; height: 73px; }
  .rep-item__pic { width: 40px; height: 40px; }
  .rep-item__art { width: 32px; height: 32px; }
  .rep-acts { padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .rep-btn { min-height: 44px; }
}
/* short screens (a phone on its side, a short laptop window): no band (Juno's box is covered by the report there), and
   everything a size smaller */
@media (max-height: 560px) {
  .card.rep { --rep-band: calc(env(safe-area-inset-top, 0px) + 10px); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .rep__in { gap: 8px; }
  .card.rep .rep__title { font-size: 20px; }
  .rep__body { gap: 10px; }
  .rep__result { gap: 8px; }
  .rep-waves__n { font-size: 46px; }
  .rep-waves__l { font-size: 14px; }
  .rep-who { margin-top: 4px; font-size: 13px; }
  .rep-medal { gap: 4px; }
  .rep-medal__art { width: 58px; }
  .rep-medal__name { font-size: 14px; }
  .rep-stats li { padding: 5px 3px; }
  .rep-stats b { font-size: 17px; }
  .rep__gain { padding: 10px 12px; }
  .rep-rank, .rep-cr { padding: 6px 12px; }
  .rep-rank__badge { width: 40px; height: 40px; font-size: 18px; }
  .rep-cr__gem { width: 40px; height: 40px; }
  .rep-cr__gem .cr { width: 26px; height: 26px; }
  .rep-rank__bar { margin: 5px 0 4px; }
  .rep-crate { width: 104px; height: 90px; }
  .rep-crate--locked { width: 84px; height: 73px; }
  .rep-loot { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
  .rep-item { padding: 6px 4px 7px; }
  .rep-item__pic { width: 42px; height: 42px; }
  .rep-item__art { width: 34px; height: 34px; }
  .rep-patch { width: 52px; height: 52px; }
  .rep-acts { padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .rep-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen--report, .rep, .rep *, .rep *::before, .rep *::after { animation: none !important; }
}

/* ---------- the tutorial's highlight (js/ui/tutorial.js puts it on whatever to press next: a tray tile, a power on the
   chip, Launch, a panel button, a crate pin). .tut-glow is a pulsing gold halo round the element, kept over its
   neighbours in the HUD and panels (z-index 4) and under the dialogue and the screens (#dialogue 5, #screens 6);
   .tut-glow--hand is the same with a small pointing hand at its lower right (either class alone, or both). Outline and
   a drop shadow, so the element keeps its own box shadow. On a crate pin (.cp) or an approach pin (.am) it lights the
   pin's body ---------- */
/* (doubled, to outrank the element's own animation: a ready power's pulse, say) */
:is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand), :is(.cp, .am):is(.tut-glow, .tut-glow--hand) :is(.cp__body, .pin) { outline: 3px solid #ffe08a; outline-offset: 3px; animation: tutglow 1.2s ease-in-out infinite; }
:is(.tut-glow, .tut-glow--hand) { z-index: 4; }
/* z-index needs a position: buttons and an approach pin's label are given one (the pins themselves are placed already) */
button:is(.tut-glow, .tut-glow--hand), .pin:is(.tut-glow, .tut-glow--hand), .am:is(.tut-glow, .tut-glow--hand) .pin { position: relative; }
:is(.cp, .am):is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand) { outline: 0; animation: none; }
/* the hand: on the element itself, or on a crate pin's body (whose ::after is its touch hit area, so the hand is ::before) */
.tut-glow--hand:not(.cp):not(.cp__body)::after, .cp.tut-glow--hand .cp__body::before, .cp__body.tut-glow--hand::before { content: ""; position: absolute; right: -16px; bottom: -20px; z-index: 6; width: 30px; height: 34px; pointer-events: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'%3E%3Cpath d='M10 17V7.5a2 2 0 0 1 4 0V14l1-.4a2 2 0 0 1 2.4 1l.4.8 1.2-.4a2 2 0 0 1 2.5 1.3l.2.6 1-.2a2 2 0 0 1 2.3 1.8V24c0 3-2.4 5.5-5.5 5.5h-3.4a6 6 0 0 1-4.6-2.2L6.6 21a2 2 0 0 1 3-2.6z' fill='%23fff' stroke='%23241a52' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 2px 4px rgba(20, 10, 60, 0.5)); animation: tthand 1.1s ease-in-out infinite; }
/* Launch clips what overflows it: the hand needs the room, and it stands against the screen's right edge, so its hand
   points from its lower left, held up a little (on a phone on its side Launch is a few pixels off the bottom). These
   moves carry :not(.cp) to be as specific as the hand's own rule above, which they follow */
.call-btn.tut-glow--hand { overflow: visible; }
.call-btn.tut-glow--hand:not(.cp)::after { right: auto; left: -18px; bottom: -8px; }
/* (on a phone on its side the commander's chip stands as close to the bottom: a power's hand is held up too) */
@media (max-height: 500px) { .pw.tut-glow--hand:not(.cp)::after { bottom: -12px; } }
/* a tray tile: the row clips anything past its padding (5 to 8 px over a tile, 12 to 16 under it), so the halo pulses
   closer in and the hand sits where the tray's own pointing hand does (.tt__hand) */
.tt:is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand) { outline-offset: 1px; animation-name: tutglowtt; }
.tt.tut-glow--hand:not(.cp)::after { right: -8px; bottom: -12px; width: 34px; height: 38px; }
/* (and Launch's halo on a phone on its side, where Launch stands 6 px off the bottom of the screen) */
@media (max-height: 500px) { .call-btn:is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand) { outline-offset: 1px; animation-name: tutglowtt; } }
/* in a building's panel the body scrolls and clips: a lit button is scrolled into view (by the tutorial) with room for
   its halo and hand, clear of the fade at the body's foot, and a body holding one leaves that room under its last row */
.sp-body :is(.tut-glow, .tut-glow--hand) { scroll-margin: 12px 0 34px; }
.sp-body .tut-glow--hand { scroll-margin-bottom: 42px; }
.sp-body:has(.tut-glow, .tut-glow--hand) { padding-bottom: 12px; }
.sp-body:has(.tut-glow--hand) { padding-bottom: 24px; }
@keyframes tutglow {
  0%, 100% { outline-offset: 2px; outline-color: #ffe08a; filter: drop-shadow(0 0 5px rgba(246, 199, 102, 0.9)); }
  50% { outline-offset: 6px; outline-color: rgba(255, 224, 138, 0.6); filter: drop-shadow(0 0 14px rgba(246, 199, 102, 0.95)); }
}
@keyframes tutglowtt {
  0%, 100% { outline-offset: 0px; outline-color: #ffe08a; filter: drop-shadow(0 0 4px rgba(246, 199, 102, 0.9)); }
  50% { outline-offset: 2px; outline-color: rgba(255, 224, 138, 0.6); filter: drop-shadow(0 0 9px rgba(246, 199, 102, 0.95)); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand), :is(.cp, .am):is(.tut-glow, .tut-glow--hand) :is(.cp__body, .pin), .tut-glow--hand:not(.cp):not(.cp__body)::after, .cp.tut-glow--hand .cp__body::before, .cp__body.tut-glow--hand::before { animation: none; }
  :is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand), :is(.cp, .am):is(.tut-glow, .tut-glow--hand) :is(.cp__body, .pin) { filter: drop-shadow(0 0 8px rgba(246, 199, 102, 0.9)); }
  :is(.cp, .am):is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand) { filter: none; }
  :is(.tt, .call-btn):is(.tut-glow, .tut-glow--hand):is(.tut-glow, .tut-glow--hand) { animation: none; filter: drop-shadow(0 0 6px rgba(246, 199, 102, 0.9)); }
}

/* laptops up to 1380 wide: eleven tray tiles fit between the commander chip and Launch (at 1280 they used to scroll the
   railgun out of sight) */
@media (min-width: 901px) and (max-width: 1380px) and (pointer: fine) {
  :root { --cmd-w: 228px; --act-w: 224px; }
  .tray__row { gap: 4px; }
  .tt { width: 65px; }
}

/* ---------- co-op (js/coop.js, js/ui/chat.js): the lobby cards, the chat, the partner's name plate, the waiting line
   and the Launch button waiting for the partner ---------- */
.btn--coop { margin-top: 10px; }
.card--coop { width: min(440px, 100%); }
.coop-join { margin-top: 18px; text-align: left; }
.coop-join label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.coop-join__row { display: flex; gap: 8px; align-items: stretch; }
.coop-join__row .btn { width: auto; margin: 0; flex: none; }
.coop-code { flex: 1; min-width: 0; border: 2px solid var(--paper-2); border-radius: 14px; padding: 10px 14px; font: 800 22px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); background: #fff; -webkit-user-select: text; user-select: text; }
.coop-code:focus { outline: none; border-color: var(--violet); }
.card p.coop-note { font-size: 13.5px; margin-top: 14px; }
.card p.coop-note--bad { color: #b0244a; font-weight: 700; }
.coop-room-code { display: inline-block; padding: 2px 10px; border-radius: 10px; background: var(--paper-2); letter-spacing: 0.16em; color: var(--deep); }
.card p.coop-room-sub { font-size: 14.5px; }
.coop-link { display: flex; gap: 8px; margin-top: 14px; }
.coop-link .btn { width: auto; margin: 0; flex: none; }
.coop-link__url { flex: 1; min-width: 0; border: 2px solid var(--paper-2); border-radius: 12px; padding: 8px 10px; font: 600 13px/1.2 var(--sans); color: var(--ink-2); background: #fff; -webkit-user-select: text; user-select: text; }
.coop-peers { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.coop-peer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); }
.coop-peer i { width: 18px; height: 18px; border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 0 2px var(--violet); }
.coop-peer b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-peer small { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.coop-peer--empty { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); background: none; border: 2px dashed var(--paper-2); }
.coop-diff, .coop-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.coop-mode { grid-template-columns: repeat(2, 1fr); }
.coop-diff__b, .coop-mode__b { border: 0; border-radius: 12px; padding: 10px 6px; font-weight: 750; font-size: 14px; color: var(--ink); background: var(--paper-2); }
.coop-diff__b.on, .coop-mode__b.on { color: #fff; background: var(--deep); }
.coop-diff__b:disabled, .coop-mode__b:disabled { cursor: default; }
.coop-diff__b:disabled:not(.on), .coop-mode__b:disabled:not(.on) { opacity: 0.55; }
/* the room's map: its road from above, its name and idea; the host's list to change it */
.coop-map { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 10px; border-radius: 16px; background: var(--paper-2); text-align: left; }
.coop-map__art { flex: none; width: 112px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #1c1446; box-shadow: 0 0 0 1px rgba(120, 0, 224, 0.25), 0 6px 14px rgba(20, 10, 60, 0.25); }
.coop-map__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coop-map__text { display: grid; gap: 3px; min-width: 0; }
.coop-map__name { font-size: 16px; font-weight: 850; color: var(--ink); }
.coop-map__tier { font-size: 12.5px; font-weight: 750; line-height: 1.35; color: var(--ink-2); }
.coop-map__pick { margin-top: 4px; width: 100%; border: 2px solid rgba(120, 0, 224, 0.28); border-radius: 10px; padding: 7px 9px; font: 700 14px/1.2 var(--sans); color: var(--ink); background: #fff; color-scheme: light; }
.card p.coop-wait-host { margin-top: 18px; font-weight: 700; color: var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* the chat, over the bottom bar on the left; its line opens with Enter (or the speech bubble on a phone) */
.chat { position: absolute; z-index: 3; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(var(--hud-foot, 132px) + 10px); width: min(340px, calc(100vw - 24px)); pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.chat__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat__line { max-width: 100%; padding: 5px 10px; border-radius: 12px; background: rgba(36, 26, 82, 0.78); font-size: 14px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; transition: opacity 0.4s; }
.chat__line b { font-weight: 800; color: #ffd29a; }
.chat__line--me b { color: var(--mint); }
.chat__line--game { color: rgba(255, 255, 255, 0.82); font-weight: 600; }
.chat__form { pointer-events: auto; width: 100%; display: grid; gap: 6px; }
.chat__pings { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__ping { border: 0; border-radius: 999px; padding: 7px 12px; font-weight: 750; font-size: 13.5px; color: var(--ink); background: var(--paper); box-shadow: 0 4px 12px rgba(20, 10, 60, 0.3); }
.chat__ping--give { background: linear-gradient(180deg, #fff1c6, var(--gold)); }
.chat__row { display: flex; gap: 6px; }
.chat__input { flex: 1; min-width: 0; border: 2px solid var(--lilac); border-radius: 12px; padding: 9px 12px; font: 600 15px/1.2 var(--sans); color: var(--ink); background: var(--paper); -webkit-user-select: text; user-select: text; }
.chat__input:focus { outline: none; border-color: var(--violet); }
.chat__send { border: 0; border-radius: 12px; padding: 0 14px; font-weight: 800; font-size: 14.5px; color: #fff; background: var(--deep); }
.chat__btn { pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--panel); box-shadow: 0 0 0 1px var(--panel-line); }
.chat__btn svg { width: 22px; height: 22px; fill: #fff; }
@media (max-width: 600px) { .chat { bottom: calc(var(--hud-foot, 200px) + 58px); width: calc(100vw - 24px); } }

/* the partner's name plate over his commander, and the line while the game waits for his input (above the bottom
   bar, clear of Juno's box at the top) */
.coop-plate { position: absolute; left: 0; top: 0; z-index: 2; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 2px 6px; padding: 4px 8px 5px; border-radius: 10px; background: rgba(36, 26, 82, 0.8); pointer-events: none; white-space: nowrap; will-change: transform; }
.coop-plate b { font-size: 13px; font-weight: 800; color: #ffd29a; }
.coop-plate__lv { font-size: 11.5px; font-weight: 750; color: rgba(255, 255, 255, 0.78); }
.coop-plate__ping { font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.coop-plate__ping:empty { display: none; }
.coop-plate__ping[data-q="slow"] { color: #ffc970; }
.coop-plate__ping[data-q="bad"] { color: #ff8a9a; }
.coop-plate__hp { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.coop-plate__hp > i { display: block; height: 100%; width: 100%; background: var(--mint); }
.coop-plate small { grid-column: 1 / -1; font-size: 11.5px; font-weight: 750; color: #ffc8e6; }
.coop-plate small:empty { display: none; }
.coop-plate--down { background: rgba(120, 20, 70, 0.85); }
.coop-wait { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--hud-foot, 132px) + 12px); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 800; font-size: 15px; box-shadow: 0 10px 26px rgba(20, 10, 60, 0.35); pointer-events: none; }

/* the Launch button in co-op: pressed, it waits for the partner; his ready lights it up */
.call-btn--waiting { color: var(--ink-2); background: linear-gradient(180deg, #f4efff, #ddd2ff); box-shadow: 0 6px 0 #a99bd6, 0 10px 22px rgba(20, 10, 60, 0.3); }
.call-btn--waiting b, .call-btn--waiting .call-drain { visibility: hidden; }
.call-btn--partner { animation: partnerready 1.1s ease-in-out infinite alternate; }
@keyframes partnerready { to { box-shadow: 0 6px 0 var(--gold-deep), 0 0 0 4px rgba(168, 240, 216, 0.8), 0 10px 22px rgba(20, 10, 60, 0.35); } }
@media (prefers-reduced-motion: reduce) { .call-btn--partner { animation: none; box-shadow: 0 6px 0 var(--gold-deep), 0 0 0 4px rgba(168, 240, 216, 0.8); } }

/* the chat's emoji button and palette (an emoji sends at once), and an emote popping up over a commander's head */
.chat__emo { flex: none; width: 42px; border: 0; border-radius: 12px; font-size: 21px; line-height: 1; background: var(--paper); }
.chat__emotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; border-radius: 14px; background: var(--paper); box-shadow: 0 6px 18px rgba(20, 10, 60, 0.35); pointer-events: auto; }
.chat__emote { border: 0; border-radius: 10px; padding: 5px 0; font-size: 24px; line-height: 1.15; background: none; }
.chat__emote:hover, .chat__emote:focus-visible { background: var(--paper-2); }
.emote { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform, opacity; }
.emote__face { display: block; padding: 5px 8px 6px; border-radius: 16px; font-size: 38px; line-height: 1; background: rgba(251, 248, 255, 0.94); box-shadow: 0 6px 18px rgba(20, 10, 60, 0.35); transform-origin: 50% 100%; }
.emote--in { animation: emotein 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes emotein { from { scale: 0.3; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .emote--in { animation: none; } }
/* a z while asleep (Leonardo: more subtle than a bubble): three small dark letters, each rising and fading after the
   last, a soft light edge so they read on a dark floor too */
.emote--z .emote__face { display: flex; align-items: flex-end; gap: 1px; padding: 0; border-radius: 0; background: none; box-shadow: none; font: italic 800 13px/1 var(--sans); color: #231a45; }
.emote--z .emote__face i { font-style: inherit; text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 1px rgba(255, 255, 255, 0.9); opacity: 0; animation: zrise 2.2s ease-out forwards; }
.emote--z .emote__face i:nth-child(2) { font-size: 16px; animation-delay: 0.3s; }
.emote--z .emote__face i:nth-child(3) { font-size: 20px; animation-delay: 0.6s; }
@keyframes zrise { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, -12px); } }
@media (prefers-reduced-motion: reduce) { .emote--z .emote__face i { animation: none; opacity: 1; } }

/* ---------- the corner's notes (hud.note): what isn't urgent, short and out of the middle of the view. Top right
   under the HUD on a laptop, bottom right over the bar on a phone; three at most, newest on top ---------- */
.notes { position: absolute; z-index: 4; right: max(12px, env(safe-area-inset-right, 0px)); top: calc(var(--hud-edge, 96px) + 10px); width: min(300px, 46vw); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.note { display: flex; align-items: center; gap: 9px; max-width: 100%; padding: 6px 12px; border-radius: 14px; background: rgba(36, 26, 82, 0.88); box-shadow: 0 0 0 1px var(--panel-line), 0 8px 20px rgba(20, 10, 60, 0.3); color: #fff; animation: notein 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); transition: opacity 0.35s, transform 0.35s; }
.note:has(.note__img) { padding-left: 6px; }
.note.out { opacity: 0; transform: translateX(16px); }
.note__img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: rgba(255, 255, 255, 0.14); flex: none; }
.note__medal { width: 22px; height: 22px; border-radius: 50%; background: var(--m); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16); flex: none; }
.note__t { display: grid; min-width: 0; }
.note__t b { font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.note__t small { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: rgba(255, 255, 255, 0.8); }
.note--gold { box-shadow: 0 0 0 1.5px rgba(246, 199, 102, 0.8), 0 8px 20px rgba(20, 10, 60, 0.3); }
.note--good b { color: #c6ffe9; }
.note--bad { box-shadow: 0 0 0 1.5px rgba(255, 143, 143, 0.75), 0 8px 20px rgba(20, 10, 60, 0.3); }
.note--enemy { box-shadow: 0 0 0 1.5px rgba(255, 122, 166, 0.8), 0 8px 20px rgba(20, 0, 40, 0.35); }
@keyframes notein { from { opacity: 0; transform: translateX(20px); } }
@media (max-width: 600px) {
  .notes { top: auto; bottom: calc(var(--hud-foot, 200px) + 10px); right: max(8px, env(safe-area-inset-right, 0px)); width: min(240px, 64vw); }
  .note__t b { font-size: 13.5px; }
  .note__img { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .note { animation: none; transition: none; } }
/* a phone with a card open (it is a sheet over the lower half): the notes go up under the HUD instead */
@media (max-width: 600px) { #app:has(#selPanel:not([hidden])) .notes { bottom: auto; top: calc(var(--hud-edge, 150px) + 8px); } }

/* ---------- what a building hits (js/ui/icons.js): the ground and flyer marks, as on the next wave's pins. On a tray
   tile a small pair in the top right corner, the one it can't hit struck through; on its card a chip for each ---------- */
.hits { position: absolute; right: 3px; top: 3px; display: flex; gap: 1px; padding: 2px 3px; border-radius: 8px; background: rgba(20, 12, 50, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); }
.hits i { position: relative; display: grid; place-items: center; width: 14px; height: 14px; color: #d6fff1; }
.hits svg { width: 13px; height: 13px; fill: currentColor; }
.tt--locked .hits { opacity: 0.5; }
.sp-chip { display: inline-flex; align-items: center; gap: 4px; }
.sp-chip svg { width: 13px; height: 13px; flex: none; }
.sp-chip--hit { background: rgba(168, 240, 216, 0.14); border-color: rgba(168, 240, 216, 0.55); color: #d6fff1; }
.sp-chip--hit svg { fill: currentColor; }
.sp-chip--hit svg + svg { margin-left: -2px; }
/* hitting only ground or only flyers is the limit worth seeing before buying it */
.sp-chip--hit.only { background: rgba(246, 199, 102, 0.14); border-color: rgba(246, 199, 102, 0.6); color: #ffe6a8; }

/* ---------- the tray's card (js/ui/tray.js): what a building is before it is bought, over its tile. The mouse's lets
   every press through; a tap's has Build */
.tcard { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 6; width: 238px; padding: 10px 12px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.16); background: #1e154a; box-shadow: 0 14px 34px rgba(10, 6, 30, 0.5); color: #fff; text-align: left; pointer-events: none; }
.tcard--tap { width: min(264px, calc(100vw - 16px)); pointer-events: auto; }
.tcard__head { display: grid; grid-template-columns: 40px 1fr auto; gap: 9px; align-items: center; }
.tcard__head img { width: 40px; height: 40px; display: block; filter: drop-shadow(0 2px 3px rgba(10, 6, 30, 0.45)); }
.tcard__t { display: grid; gap: 2px; min-width: 0; }
.tcard__t b { font-size: 14.5px; font-weight: 800; line-height: 1.15; }
.tcard__price { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: #ffe08a; font-variant-numeric: tabular-nums; }
.tcard__price .coin { width: 11px; height: 11px; }
.tcard kbd { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; font: 750 11px/1 var(--sans); color: rgba(255, 255, 255, 0.92); background: rgba(20, 12, 50, 0.72); border: 1px solid rgba(255, 255, 255, 0.24); }
.tcard .sp-chips { margin-top: 9px; }
.tcard .sp-pips { margin-top: 9px; grid-template-columns: 58px 1fr auto; font-size: 11.5px; }
.tcard .sp-pv { min-width: 50px; }
.tcard .sp-lines { margin-top: 8px; font-size: 12px; }
.tcard__when { margin: 9px 0 0; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.tcard__build { margin-top: 10px; min-height: 40px; }

/* ---------- phones (his co-op run on phones, 2026-10-12): a phone plays on its side, and what pops up keeps off the
   map. Held upright, a card over everything asks for the phone turned (js/ui/orient.js) ---------- */
.rotate { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)); background: radial-gradient(1.4px 1.4px at 14% 20%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1.2px 1.2px at 86% 64%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 24% 82%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.2px 1.2px at 52% 91%, rgba(255, 233, 166, 0.6), transparent), radial-gradient(ellipse 90% 70% at 50% 42%, #2e2170, #120b33); pointer-events: auto; touch-action: none; }
.rotate[hidden] { display: none; }
.rotate__card { display: grid; justify-items: center; }
.rotate__card h2 { margin-top: 16px; }
.rotate__card .btn--link { margin-top: 10px; }
.rotate__home { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); font-size: 14px; font-weight: 600; }
/* a phone held upright, turning on its side */
.rotate__phone { position: relative; width: 44px; height: 76px; border-radius: 11px; border: 3px solid var(--deep); animation: rotateme 2.6s ease-in-out infinite; }
.rotate__phone i { position: absolute; left: 50%; bottom: 5px; width: 12px; height: 3px; margin-left: -6px; border-radius: 2px; background: var(--deep); }
@keyframes rotateme { 0%, 22% { transform: rotate(0deg); } 50%, 78% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .rotate__phone { animation: none; } }

/* on its side: the boss's bar is a slim line under the shield's; Juno's box small under the wave's panel; the notes
   small on the right, two at most (js/ui/hud.js); the chat's two lines (js/ui/chat.js) small over the chip */
@media (max-height: 500px) {
  .boss-bar, #app:has(#selPanel:not([hidden])) .boss-bar { top: calc(var(--hud-edge, 54px) + 2px); width: min(300px, 34vw); }
  .boss-bar__name { font-size: 10.5px; letter-spacing: 0.1em; margin-bottom: 3px; }
  .boss-bar__track { height: 8px; box-shadow: 0 0 0 1.5px rgba(255, 120, 160, 0.55), 0 4px 10px rgba(30, 0, 30, 0.35); }
  .comms, .comms.low { top: calc(var(--hud-edge, 60px) + 4px); max-width: min(290px, 31vw); padding: 5px 9px 5px 5px; gap: 7px; border-radius: 14px; }
  .comms img { width: 30px; height: 30px; border-radius: 8px; }
  .comms__body b { font-size: 11px; }
  .comms__body p { font-size: 13px; line-height: 1.3; }
  .notes { top: calc(var(--hud-edge, 54px) + 4px); width: min(250px, 30vw); gap: 4px; }
  .note { padding: 4px 10px; gap: 7px; border-radius: 12px; }
  .note:has(.note__img) { padding-left: 4px; }
  .note__img { width: 28px; height: 28px; border-radius: 8px; }
  .note__medal { width: 18px; height: 18px; }
  .note__t b { font-size: 12.5px; }
  .note__t small { font-size: 11.5px; }
  .chat { width: min(300px, 34vw); gap: 4px; }
  .chat--open { width: min(420px, calc(100vw - 24px)); }
  .chat__line { font-size: 12.5px; padding: 3px 9px; border-radius: 10px; }
  .chat__btn { width: 38px; height: 38px; }
  .chat__btn svg { width: 19px; height: 19px; }
}
/* held upright anyway: the same, a little bigger, the boss's bar right under the top row and Juno's box under it */
@media (max-width: 600px) {
  .boss-bar { top: calc(var(--hud-edge, 120px) + 4px); width: calc(100vw - 32px); }
  .boss-bar__name { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 3px; }
  .boss-bar__track { height: 8px; }
  .comms.low { top: calc(var(--hud-edge, 120px) + 36px); }
  .comms img { width: 36px; height: 36px; }
  .comms__body p { font-size: 13.5px; }
  .chat__line { font-size: 13px; padding: 4px 9px; }
}
/* on a touch screen Juno's box lets every tap through to the building or the ice under it, as while aiming (her
   lines go on their own; the tutorial's Skip still takes a tap) */
@media (pointer: coarse) {
  .comms { pointer-events: none; }
  .comms__skip { pointer-events: auto; }
}
/* ---------- the first impression (step 1 of the ship plan): the boot layer, the title's words and menu over the live
   space scene (#app.space), the screens it opens as panels over that scene, Settings, and the flashes (the hit's, a dip
   to dark, the dive's) ---------- */
.boot { position: absolute; inset: 0; z-index: 12; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) 20px max(32px, env(safe-area-inset-bottom, 0px)); color: #fff; text-align: center; cursor: pointer; transition: opacity 0.6s; background: radial-gradient(1.4px 1.4px at 14% 20%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1.2px 1.2px at 86% 64%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 24% 82%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.2px 1.2px at 52% 91%, rgba(255, 233, 166, 0.6), transparent), radial-gradient(1px 1px at 38% 34%, rgba(255, 255, 255, 0.45), transparent), radial-gradient(1px 1px at 63% 70%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(ellipse 90% 70% at 50% 42%, #2a1e66, #0b0722 72%, #05030f); }
.boot[hidden] { display: none; }
.boot--out { opacity: 0; pointer-events: none; }
.boot__mark { display: grid; gap: clamp(12px, 2vh, 20px); align-self: center; }
.boot__title, .title-text__word { margin: 0; font: 800 clamp(56px, 8.4vw, 132px)/0.86 var(--sans); text-transform: uppercase; color: #fff; }
/* the name as one lockup (Leonardo's pick, 21 October 2026): EUROPA set wide over a heavy DEFENCE, in plain white */
.boot__title span, .title-text__word span { display: block; }
.boot__europa, .title-text__europa { font-size: max(12px, 0.205em); font-weight: 650; letter-spacing: 0.62em; color: #ddd3ff; margin: 0 0 0.55em 0.12em; }
.boot__defence, .title-text__defence { letter-spacing: -0.02em; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); }
.boot__europa { margin-right: -0.5em; }
.boot__tag, .title-text__tag { margin: 0; font: 550 clamp(14px, 1.25vw, 19px)/1.3 var(--sans); color: rgba(232, 224, 255, 0.86); }
.boot__go { display: grid; place-items: center; min-height: 56px; }
.boot__bar { display: block; width: 180px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.boot__bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #e999ff, #a640ff, transparent); animation: bootload 1.3s ease-in-out infinite; }
@keyframes bootload { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.boot--waiting .boot__bar i { animation-duration: 0.55s; }
.boot--ready .boot__bar { display: none; }
.boot__btn { border: 0; background: none; color: #fff; font: 750 18px/1 var(--sans); letter-spacing: 0.02em; padding: 16px 24px; border-radius: 999px; cursor: pointer; animation: bootpulse 2.2s ease-in-out infinite; }
.boot__btn:focus-visible { outline: 2px solid rgba(233, 153, 255, 0.8); outline-offset: 2px; }
@keyframes bootpulse { 50% { opacity: 0.5; } }
/* the title's words, top left over the scene: on the hit the word scales in with a streak of light across it */
/* the words and the menu as one column down the left, the words above the middle of the screen and the menu below it,
   over a dark falloff from the left edge that keeps them readable on any part of the sky */
#app { --split: 0px; }
#app:has(#menu li:nth-child(6)) { --split: 100px; }
.title-text { position: absolute; z-index: 3; left: max(clamp(28px, 5vw, 84px), calc(env(safe-area-inset-left, 0px) + 16px)); bottom: calc(50% + 40px + var(--split)); display: grid; gap: clamp(12px, 2vh, 20px); text-align: left; pointer-events: none; }
.title-text::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 3, 14, 0.78) 0%, rgba(4, 3, 14, 0.5) 24%, rgba(4, 3, 14, 0) 48%); }
.title-text.landed::before { animation: tagin 0.6s ease-out both; }
.title-text.still::before { animation: none; }
.title-text[hidden] { display: none; }
.title-text__word { position: relative; opacity: 0; }
.title-text__tag { opacity: 0; }
.title-text.landed .title-text__word { animation: titlein 0.6s cubic-bezier(0.18, 1.3, 0.4, 1) both; }
.title-text.tag .title-text__tag { animation: tagin 0.6s ease-out both; }
.title-text__word::after { content: ""; position: absolute; inset: -12% -10%; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%); opacity: 0; transform: translateX(-110%); pointer-events: none; }
.title-text.landed .title-text__word::after { animation: streak 0.9s 0.12s ease-out both; }
.title-text.still .title-text__word, .title-text.still .title-text__tag { animation: none; opacity: 1; }
.title-text.still .title-text__word::after { animation: none; }
@keyframes titlein { from { opacity: 0; transform: scale(1.3); filter: blur(6px) drop-shadow(0 0 30px #fff); } to { opacity: 1; transform: none; } }
@keyframes tagin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes streak { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 0; transform: translateX(110%); } }
/* the menu: a list down the left, the rank card top right */
.menu { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.menu[hidden] { display: none; }
.menu__list { position: absolute; left: max(clamp(28px, 5vw, 84px), calc(env(safe-area-inset-left, 0px) + 16px)); top: calc(50% - var(--split)); margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; width: min(320px, 40vw); pointer-events: auto; }
.menu__list li { animation: menuin 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes menuin { from { opacity: 0; transform: translateX(-18px); } }
.menu__item { position: relative; display: block; width: auto; min-height: 46px; border: 0; padding: 0 0 0 20px; text-align: left; font: 700 19px/1.2 var(--sans); color: rgba(240, 235, 255, 0.84); background: none; cursor: pointer; transition: transform 0.18s ease-out, color 0.18s; }
/* a row's bar at its left edge, lit mint when the pointer or the keys reach it */
.menu__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); transition: background 0.18s, height 0.18s, margin 0.18s, box-shadow 0.18s; }
.menu__item:focus-visible { outline: none; color: #fff; transform: translateX(6px); }
.menu__item:focus-visible::before { background: #7ff5d2; height: 30px; margin-top: -15px; box-shadow: 0 0 12px rgba(127, 245, 210, 0.7); }
@media (hover: hover) {
  .menu__item:hover { color: #fff; transform: translateX(6px); }
  .menu__item:hover::before { background: #7ff5d2; height: 30px; margin-top: -15px; box-shadow: 0 0 12px rgba(127, 245, 210, 0.7); }
  .menu__item--main:hover::after { transform: translateX(120%); transition: transform 0.6s ease-out; }
}
.menu__item:active { transform: translateX(6px) scale(0.98); }
/* Play: the one solid button, with the light sweeping across it */
.menu__item--main { overflow: hidden; width: 100%; min-height: 62px; margin-bottom: 14px; padding: 0 26px; border-radius: 14px; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #b25cff, var(--deep)); box-shadow: 0 5px 0 #4c008f, 0 16px 34px rgba(76, 0, 143, 0.5); }
.menu__item--main::before { display: none; }
.menu__item--main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.menu__item--main:focus-visible { outline: 2px solid rgba(233, 153, 255, 0.9); outline-offset: 3px; transform: none; }
.menu__item--link { min-height: 40px; margin-top: 8px; font-size: 14px; font-weight: 600; color: rgba(225, 216, 255, 0.7); text-decoration: underline; text-underline-offset: 3px; }
.menu__item--link::before { display: none; }
.menu__card { position: absolute; right: max(24px, calc(env(safe-area-inset-right, 0px) + 16px)); top: calc(env(safe-area-inset-top, 0px) + 24px); width: min(300px, 34vw); padding: 12px 14px; border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; pointer-events: auto; animation: menuin 0.4s 0.2s ease-out both; }
.menu__card .rank { margin: 0; background: rgba(255, 255, 255, 0.07); }
.menu__card .rank__label { color: #fff; }
.menu__card .rank__next, .menu__card .next-reward, .menu__card .best { color: rgba(236, 228, 255, 0.82); }
.menu__card .rank__bar { background: rgba(255, 255, 255, 0.16); }
.menu__card .next-reward { margin-top: 8px; font-size: 13px; }
.menu__card .best { margin-top: 6px; font-size: 13px; }
.menu__card .medal { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* the screens the title opens are panels over the live scene: a dimmed backdrop, sliding in from the right */
#app.space #screens { overflow: hidden; }
#app.space #screens .screen { background: rgba(8, 5, 26, 0.48); }
#app.space #screens .screen.screen--diff-c { background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(43, 28, 110, 0.5), rgba(8, 5, 26, 0.8)); }
#app.space #screens .screen > .card { animation: panelin 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes panelin { from { opacity: 0; transform: translateX(48px); } }
/* Settings */
.card--settings { display: grid; gap: 10px; text-align: left; }
.card--settings h2 { text-align: center; margin-bottom: 4px; }
.card--settings .btn { margin-top: 0; }
.card--settings .btn[data-back] { margin-top: 6px; }
.set-row { display: grid; grid-template-columns: 84px 1fr 32px; align-items: center; gap: 10px; font-weight: 750; font-size: 15px; color: var(--ink); }
.set-row input { width: 100%; min-height: 36px; accent-color: var(--deep); }
.set-row input:focus { outline: none; }
.set-row input:focus-visible { outline: 2px solid rgba(166, 64, 255, 0.7); outline-offset: 3px; border-radius: 8px; }
.set-row b { font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.card--settings .set-note { margin: -2px 0 0; font-size: 13px; text-align: center; }
/* the intro's letterbox: bars that frame it at 2 to 1, at most 12% of the height each, opening as the title lands
   (none on a screen wider than that) */
/* (clipped: parked off screen, the bars would otherwise give the page room to scroll, and a focus would scroll it) */
.bars { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.bars i { position: absolute; left: 0; right: 0; height: clamp(0px, calc((100dvh - 50vw) / 2), 12dvh); background: #000; transition: transform 0.8s cubic-bezier(0.6, 0, 0.2, 1); }
.bars i:first-child { top: 0; transform: translateY(-101%); }
.bars i:last-child { bottom: 0; transform: translateY(101%); }
.bars.on i { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .bars i { transition: none; } }
/* none on a screen taller than it is wide */
@media (max-aspect-ratio: 1/1) { .bars { display: none; } }
/* the flashes: the hit's pale burst, a dip to dark (a skip), a fade in from dark (reduced motion), the dive's */
.flash { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0; }
.flash--hit { background: radial-gradient(ellipse at 28% 18%, #ffffff, rgba(231, 218, 255, 0.85) 30%, rgba(169, 141, 255, 0.35) 70%); animation: flashhit 0.75s ease-out both; }
.flash--dip { background: #05030f; animation: flashdip 0.42s ease-in-out both; }
.flash--in { background: #05030f; animation: flashin 0.55s ease-out both; }
.flash--dive { background: radial-gradient(circle at 50% 50%, #ffffff, #d8ecff 45%, #a8c8ff); }
@keyframes flashhit { from { opacity: 0.6; } to { opacity: 0; } }
@keyframes flashdip { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }
@keyframes flashin { from { opacity: 1; } to { opacity: 0; } }
/* a phone on its side: smaller words, the list as two columns under Play */
@media (max-height: 500px) {
  .boot__title { font-size: 52px; }
  #app:has(#menu li:nth-child(6)) { --split: 30px; }
  .title-text { bottom: calc(50% + 32px + var(--split)); gap: 8px; left: max(22px, calc(env(safe-area-inset-left, 0px) + 12px)); }
  .title-text__word { font-size: 52px; }
  .title-text__tag { font-size: 13px; }
  .menu__list { top: calc(50% - 16px - var(--split)); left: max(22px, calc(env(safe-area-inset-left, 0px) + 12px)); width: 360px; grid-template-columns: auto auto; justify-content: start; gap: 0 26px; }
  .menu__list li:first-child, .menu__list li:has(.menu__item--link) { grid-column: 1 / -1; }
  .menu__item { min-height: 40px; padding-left: 14px; font-size: 15px; }
  .menu__item--main { width: 300px; min-height: 48px; margin-bottom: 8px; padding: 0 22px; font-size: 18px; }
  .menu__item--link { min-height: 40px; margin-top: 0; font-size: 12.5px; }
  .menu__card { width: min(250px, 30vw); padding: 9px 10px; top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .menu__card .next-reward { display: none; }
  .card--settings { gap: 6px; }
}
/* held upright: the words at the top, the rank card under them, the list across the bottom in two columns */
@media (max-width: 600px) {
  .title-text { left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 22px); bottom: auto; }
  .title-text__word { font-size: 46px; }
  .menu__card { left: 16px; right: 16px; width: auto; top: calc(env(safe-area-inset-top, 0px) + 136px); }
  .menu__card .next-reward { display: none; }
  .menu__list { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 16px; right: 16px; width: auto; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .menu__list li:first-child, .menu__list li:has(.menu__item--link) { grid-column: 1 / -1; }
  .menu__item { font-size: 16px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot__bar i, .boot__btn { animation: none; }
  .title-text.landed .title-text__word { animation: tagin 0.4s ease-out both; }
  .title-text.landed .title-text__word::after { animation: none; }
  .menu__list li, .menu__card, #app.space #screens .screen > .card { animation: none; }
  .menu__item, .menu__item::before, .menu__item::after { transition: none; }
  .title-text.landed::before { animation: none; }
}

/* ---------- aboard the Aegis-7 (step 2 of the ship plan): the ship's menu button, the first hint, and the screens it
   opens as panels over the deck, as over space ---------- */
.deck-hud { position: absolute; inset: 0; pointer-events: none; }
.deck-hud__menu { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 12px); top: calc(env(safe-area-inset-top, 0px) + 12px); pointer-events: auto; }
/* (the shop's phase 2) the Cryon balance aboard, left of the ship's menu, the card's pill in small; out of
   the way while a card is open over the deck (the card carries its own) */
.deck-cr { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 62px); top: calc(env(safe-area-inset-top, 0px) + 14px); display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; background: linear-gradient(180deg, #2c2470, #1b1650); color: #fff; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(127, 227, 255, 0.45), 0 4px 14px rgba(4, 2, 20, 0.35); }
.deck-cr .cr { width: 17px; height: 17px; }
.deck-cr.up { animation: deck-cr-up 0.6s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes deck-cr-up { 35% { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px rgba(127, 227, 255, 0.9), 0 0 18px rgba(127, 227, 255, 0.6); } }
.deck-hud:has(~ #screens .card) .deck-cr { visibility: hidden; }
/* (as wide as its words, never wider than the screen: on an upright phone it wraps, above the emote button; the shop's
   phase 3, the walking hint ran off both sides) */
.deck-hud__hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-line); font-size: 14px; font-weight: 600; width: max-content; max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); text-align: center; text-wrap: balance; transition: opacity 0.6s; }
@media (max-width: 640px) { .deck-hud__hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); border-radius: 18px; } }
.deck-hud__hint.gone { opacity: 0; }
#app.deck #screens { overflow: hidden; }
#app.deck #screens .screen { background: rgba(8, 5, 26, 0.48); }
#app.deck #screens .screen > .card { animation: panelin 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  #app.deck #screens .screen > .card { animation: none; }
  .deck-hud__hint { transition: none; }
}
/* the prompt over a station in reach (a press uses it; the key on a laptop) and the countdown over a pod */
.deck-prompt { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 7px; border-radius: 999px; border: 1px solid var(--panel-line); background: var(--panel); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 18px rgba(20, 10, 60, 0.35); }
.deck-prompt kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.92); color: #241a52; font: 800 13px/1 inherit; }
.deck-prompt.touch { padding: 8px 16px; min-height: 42px; }
/* the carry bar while the commander has the fire extinguisher: Spray and Drop, over the foot of the screen (on a phone
   two big buttons, the only way to spray or drop) */
.deck-hold { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; }
.deck-hold__btn { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 7px; border-radius: 999px; border: 1px solid var(--panel-line); background: var(--panel); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; box-shadow: 0 6px 18px rgba(20, 10, 60, 0.35); }
.deck-hold__btn kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.92); color: #241a52; font-family: inherit; font-weight: 800; font-size: 13px; line-height: 1; }
.deck-hold__btn[data-hold='spray'] { background: linear-gradient(180deg, #ef5560, #c93844); border-color: rgba(255, 190, 196, 0.6); }
.deck-hold.touch { bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); }
.deck-hold.touch .deck-hold__btn { min-height: 48px; padding: 8px 22px; font-size: 16px; }
.deck-hold.touch kbd { display: none; }
@media (hover: hover) { .deck-hold__btn:hover { filter: brightness(1.12); } }
/* the emote wheel (js/ui/emotes.js): its round button at the foot of the screen on the right (B on a laptop), and the
   wheel over the deck, each emote's picture in a light disc with its name and key */
.emote-btn { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); width: 54px; height: 54px; padding: 0; border-radius: 50%; border: 1px solid var(--panel-line); background: var(--panel); display: grid; place-items: center; pointer-events: auto; box-shadow: 0 6px 18px rgba(20, 10, 60, 0.35); }
.emote-btn svg { width: 28px; height: 28px; fill: #fff; stroke: #fff; }
.emote-btn kbd { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font: 800 11px/1 var(--sans); }
.emote-btn.on { background: #2fbf98; border-color: rgba(168, 240, 216, 0.8); }
.emote-btn.touch { width: 58px; height: 58px; }
/* (none while a screen is open over the deck: the Locker, Badges, the ship's menu) */
#app:has(#screens .card) .emote-btn { display: none; }
@media (hover: hover) { .emote-btn:hover { filter: brightness(1.15); } }
.ewheel { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: auto; background: rgba(10, 6, 30, 0.32); }
.ewheel__ring { position: relative; width: min(74vmin, 430px); aspect-ratio: 1; border-radius: 50%; background: rgba(31, 23, 72, 0.88); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 18px 50px rgba(10, 6, 30, 0.45); animation: ewheelin 0.22s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes ewheelin { from { transform: scale(0.82); opacity: 0; } }
.ewheel__slot { position: absolute; width: 22%; transform: translate(-50%, -46%); display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #fff; font: 750 12px/1.15 var(--sans); text-align: center; cursor: pointer; }
.ewheel__slot img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; background: #e9e4fb; border: 2px solid rgba(255, 255, 255, 0.3); transition: transform 0.12s, border-color 0.12s; }
.ewheel__slot kbd { position: absolute; top: -2px; right: 2px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: #fff; color: var(--ink); font: 800 10.5px/1 var(--sans); }
.ewheel__slot:focus-visible { outline: none; }
.ewheel__slot:focus-visible img { border-color: var(--mint); transform: scale(1.08); }
@media (hover: hover) { .ewheel__slot:hover img { border-color: var(--mint); transform: scale(1.08); } }
.ewheel__mid { position: absolute; left: 50%; top: 50%; width: 25%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: #2a1f5e; color: #fff; font: 800 14px/1 var(--sans); cursor: pointer; }
.ewheel.touch .ewheel__slot { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ewheel__ring { animation: none; } }
.deck-count { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; color: #fff; text-shadow: 0 2px 12px rgba(20, 10, 60, 0.7); pointer-events: none; }
.deck-count b { font-size: 46px; font-weight: 800; line-height: 1; }
.deck-count span { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
/* the Quartermaster's words: a white bubble over the robot, its tail pointing down at it (the inner span pops in, the
   outer one being placed by the deck) */
.deck-say { position: absolute; left: 0; top: 0; padding-bottom: 10px; pointer-events: none; }
.deck-say > span { position: relative; display: block; padding: 9px 14px; border-radius: 16px; background: #fbf8ff; color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1.3; white-space: nowrap; box-shadow: 0 0 0 1.5px rgba(166, 64, 255, 0.45), 0 10px 24px rgba(20, 10, 60, 0.35); transform-origin: 50% 100%; }
.deck-say > span::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fbf8ff; transform: rotate(45deg); box-shadow: 1.5px 1.5px 0 0 rgba(166, 64, 255, 0.45); border-radius: 0 0 3px 0; }
.deck-say.in > span { animation: sayin 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes sayin { from { opacity: 0; transform: translateY(6px) scale(0.85); } }
/* Juno aboard, in the top left corner, clear of the prompts and the Quartermaster's words */
#app.deck .comms { left: calc(env(safe-area-inset-left, 0px) + 14px); right: auto; top: calc(env(safe-area-inset-top, 0px) + 14px); transform: none; max-width: min(440px, calc(100vw - 100px)); }
#app.deck .comms.in { animation-name: commsinm; }
/* the Hangar aboard: the commander's side of the screen left clear */
#app.deck #screens .screen.screen--low { background: linear-gradient(180deg, transparent 30%, rgba(8, 5, 26, 0.4)); }
@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
  #app.deck #screens .screen.screen--low { background: linear-gradient(90deg, transparent 45%, rgba(8, 5, 26, 0.36)); }
}
@media (prefers-reduced-motion: reduce) { .deck-say.in > span { animation: none; } }
/* friends aboard (phase 4): the partner's name over their commander, a line under it when needed; the chat above the
   hint line; a pod's "Waiting for" as a pill */
.deck-mate { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; padding: 4px 9px 5px; border-radius: 10px; background: rgba(36, 26, 82, 0.8); white-space: nowrap; pointer-events: none; will-change: transform; }
.deck-mate b { font-size: 13px; font-weight: 800; color: #ffd29a; }
.deck-mate small { font-size: 11.5px; font-weight: 750; color: #ffc8e6; }
.deck-mate small:empty { display: none; }
.deck-mate i { font-style: normal; font-size: 11px; font-weight: 800; color: #f6c766; }
/* four players (20 October 2026): the name under each pod in a room, a line in its team's colour once we are in a pod
   (ours mint, theirs coral), Open where no one is (Versus) */
.pod-tag { position: absolute; left: 0; top: 0; padding: 3px 9px 4px; border-radius: 8px; background: rgba(36, 26, 82, 0.85); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; pointer-events: none; will-change: transform; }
.pod-tag--ours { box-shadow: inset 0 -3px 0 #a8f0d8; }
.pod-tag--theirs { box-shadow: inset 0 -3px 0 #ff8f8f; }
.pod-tag--open { background: rgba(36, 26, 82, 0.5); color: #d9d4ff; font-weight: 700; }
.deck-mate i:empty { display: none; }
#deckHud .chat { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); }
.deck-count span:only-child { padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-line); font-size: 14px; letter-spacing: 0; text-shadow: none; }

/* ---------- the mission report round the stage (screens.over with `stage`, js/render/stage.js behind it): the crew on
   their podiums of ice show through the gap; the run on a glass panel to the left, the rank and the haul on one to the
   right; the crew's plates (a name, and in co-op an award ribbon) over their podiums, placed by main. On a phone held
   upright the gap comes first, the panels under it ---------- */
.screen--report.screen--stage { background: linear-gradient(180deg, rgba(10, 6, 30, 0.55), rgba(10, 6, 30, 0) 18%, rgba(10, 6, 30, 0) 72%, rgba(10, 6, 30, 0.5)); }
.rep--stage .rep__in { width: min(1440px, 100%); }
.rep__body--stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rep--stage .rep__result, .rep__gain--stage { padding: 16px 14px 14px; border-radius: 22px; border: 1px solid rgba(233, 153, 255, 0.3); background: rgba(22, 13, 60, 0.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(4, 2, 20, 0.35); }
.rep__gain--stage { display: grid; gap: 14px; align-content: start; }
.rep--stage .rep-who__face { display: none; }
.rep--stage .rep-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rep-gap { order: -1; height: 46vh; min-height: 250px; }
/* where there is the width: the three columns, the panels as tall as each other, the gap between them */
@media (min-width: 900px), (max-height: 520px) and (min-width: 640px) {
  .rep__body--stage { grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
  .rep-gap { order: 0; height: auto; min-height: 56vh; }
}
@media (max-height: 520px) and (min-width: 640px) {
  .rep-gap { min-height: 64vh; }
  .rep--stage .rep__result, .rep__gain--stage { padding: 10px; }
}
.rep-plates { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.rep-plate { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 4px; opacity: 0; transition: opacity 0.5s ease; will-change: transform; }
.rep-plate.in { opacity: 1; }
.rep-plate b { padding: 5px 16px 6px; border-radius: 10px; border: 1.5px solid rgba(233, 153, 255, 0.75); background: rgba(22, 13, 60, 0.9); box-shadow: 0 0 16px rgba(190, 140, 255, 0.45), 0 6px 14px rgba(4, 2, 20, 0.45); color: #f3c6ff; font-size: 15px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.rep-plate__award { position: relative; padding: 4px 18px 5px; background: linear-gradient(180deg, #ffe9a8, #f6c766 55%, #d99a3a); clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%, 7% 50%); color: #4a2a00; font-size: 13px; font-weight: 850; white-space: nowrap; filter: drop-shadow(0 3px 5px rgba(4, 2, 20, 0.5)); }
.rep-plate small { max-width: 180px; font-size: 11.5px; font-weight: 750; line-height: 1.25; text-align: center; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 4px rgba(10, 6, 40, 0.9); }
@media (max-width: 600px) {
  .rep-plate b { padding: 4px 12px 5px; font-size: 13px; }
  .rep-plate__award { font-size: 11.5px; padding: 3px 14px 4px; }
  .rep-plate small { display: none; }
}
/* 2v2 (four players): four plates under four podiums, a little smaller so they keep apart */
.vsrep-plates--four .rep-plate b { padding: 4px 10px 5px; font-size: 12.5px; letter-spacing: 0.05em; }
@media (prefers-reduced-motion: reduce) { .rep-plate { transition: none; } }
/* ---------- the Quarters' tray (the home plan's step 1): beside the room while decorating, letting taps through to
   the room round it ---------- */
#app #screens .screen.screen--tray { pointer-events: none; background: none; padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
.screen--tray > .card { pointer-events: auto; }
.card--tray { width: min(560px, 100%); max-height: 42dvh; padding: 12px 12px 10px; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.card--tray [hidden] { display: none !important; }
@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
  #app #screens .screen.screen--tray { padding-right: max(12px, 1.5vw, env(safe-area-inset-right, 0px)); }
  .screen--low > .card--tray { width: min(300px, 34vw); max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px))); }
}
.tray__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tray__stars { color: var(--gold-deep); font-size: 17px; letter-spacing: 2px; white-space: nowrap; }
.tray__stars i { font-style: normal; color: rgba(207, 154, 62, 0.25); }
.tray__load { flex: 1; max-width: 130px; height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.tray__load i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4fe3bd, #2fbf98); }
.tray__load.full i { background: linear-gradient(90deg, #ff9a6e, #ff6b8a); }
.tray__sel { display: flex; align-items: center; gap: 6px; }
.tray__sel b { flex: 1; font-size: 14px; }
.tray__sel .btn { width: auto; margin: 0; padding: 8px 14px; font-size: 14px; box-shadow: 0 3px 0 #4c008f; }
.tray__why { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--ink-2); }
.tabs--tray { flex: none; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding-bottom: 2px; }
.tabs--tray .tab { font-size: 12.5px; padding: 6px 9px; }
.tray__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; overflow-y: auto; min-height: 0; flex: 1; }
.tray-item { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 4px; border: 0; border-radius: 12px; background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 12px; line-height: 1.2; text-align: center; }
.tray-item[disabled] { opacity: 0.45; }
/* (prices on, the shop's phase 3: a piece or finish for sale, its picture greyed and its price legible) */
.tray-item--sale[disabled] { opacity: 1; }
.tray-item--sale .tray-item__pic { filter: grayscale(0.85); opacity: 0.5; }
.tray-item--sale small, .tray__swatches .tray-item--sale .tray-item__name { color: #7800e0; }
/* (what is owned first, then what is for sale; the price over where to buy it, two short lines) */
.tray__items .tray-item--sale { order: 1; }
.tray-item--sale small { white-space: pre-line; }
.tray-item__pic { width: 46px; height: 34px; display: grid; place-items: center; }
.tray-item__pic i { background: var(--c); border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(36, 26, 82, 0.25); }
.tray-item small { color: var(--ink-2); font-weight: 650; font-size: 11.5px; }
/* a piece's picture, rendered from its model (img/furniture/, 4:3); smaller on a phone, where the tray is short */
.tray__items .tray-item { padding: 6px 4px 8px; }
.tray-item__pic--art { width: 100%; max-width: 92px; height: auto; aspect-ratio: 4 / 3; }
.tray-item__pic--art img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 520px), (max-height: 520px) { .tray-item__pic--art { max-width: 64px; } }
/* the Walls and floor view: a label and a row of swatches for each kind of finish (the furnishing spec, section 5) */
/* (each kind's label beside its row and the swatches small chips with a one-line name, so every finish and the four
   frames fit the card on a phone either way up: the final review, Review Focus 5) */
.tray__room { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 6px 8px; overflow-y: auto; min-height: 0; flex: 1; }
.tray__label { margin: 0 2px; font-size: 11.5px; font-weight: 750; color: var(--ink-2); white-space: nowrap; }
.tray__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.tray__swatches .tray-item { gap: 2px; padding: 4px 3px; border-radius: 9px; font-size: 10.5px; min-width: 0; }
.tray__swatches .tray-item__pic { width: 100%; height: 18px; }
.tray__swatches .tray-item__pic i { width: 100%; max-width: 44px; height: 16px; }
.tray__swatches .tray-item__name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray__swatches .tray-item.on { box-shadow: inset 0 0 0 2.5px var(--gold-deep); }
/* the four frames for paintings, and the paintings to pick from (the furnishing spec, section 6) */
.tray__frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tray-frame { aspect-ratio: 16 / 10; padding: 3px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #f0c768, #cf9a3e); display: grid; place-items: center; overflow: hidden; }
.tray-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.tray-frame span, .tray-frame__empty { color: var(--ink-2); font-weight: 700; font-size: 11.5px; }
.tray-frame span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 5px; background: var(--paper-2); }
.tray-frame.on { box-shadow: 0 0 0 2.5px var(--ink); }
.tray__picks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.tray__picks img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; display: block; }
/* the telescope's view (js/ui/scope.js; the Quarters spec, section 8): the painting and its stars inside a round
   eyepiece, black round it; Back and the arrows over it, inside a phone's safe area */
.scope { position: fixed; inset: 0; z-index: 60; pointer-events: auto; background: #04030c; touch-action: none; user-select: none; animation: scopeIn 0.45s ease-out; }
/* the eyepiece: a circle as wide as the screen allows, the painting inside it at its height (so the circle shows its
   middle, and a look round, the mouse or a drag, shows the rest), the edge darkening as a lens's does */
.scope__view { position: absolute; left: 50%; top: 50%; width: min(94vw, 94vh); height: min(94vw, 94vh); translate: -50% -50%; border-radius: 50%; overflow: hidden; }
.scope__view img { position: absolute; left: 50%; top: 50%; height: 104%; width: auto; aspect-ratio: 16 / 9; max-width: none; display: block; transform: translate(-50%, -50%); }
.scope__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope__ring { position: absolute; left: 50%; top: 50%; width: min(94vw, 94vh); height: min(94vw, 94vh); translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(4, 3, 12, 0.45) 84%, #04030c 100%); box-shadow: 0 0 0 1px rgba(243, 237, 227, 0.08), 0 0 60px 10px rgba(120, 90, 200, 0.12); }
.scope button { position: absolute; border: 0; background: rgba(243, 237, 227, 0.16); color: #f3ede3; font: inherit; font-weight: 750; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
.scope__back { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); padding: 10px 18px; font-size: 15px; }
.scope__arrow { top: 50%; translate: 0 -50%; width: 50px; height: 50px; font-size: 32px; line-height: 1; padding: 0 0 4px; }
.scope__arrow--prev { left: max(16px, env(safe-area-inset-left)); }
.scope__arrow--next { right: max(16px, env(safe-area-inset-right)); }
.scope__name { position: absolute; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); margin: 0; text-align: center; color: #f3ede3; font-weight: 750; letter-spacing: 0.02em; text-shadow: 0 1px 8px #04030c; pointer-events: none; }
@keyframes scopeIn { from { opacity: 0; } to { opacity: 1; } }
.tray__slots { display: grid; gap: 6px; }
.tray__slot { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.tray__slot span { flex: 1; font-weight: 700; }
.tray__slot .btn { width: auto; margin: 0; padding: 7px 11px; font-size: 13px; }
.tray__foot { display: flex; gap: 6px; }
.tray__foot .btn { margin: 0; width: auto; padding: 10px 12px; font-size: 14.5px; }
.tray__foot .btn[data-back] { flex: 1; box-shadow: 0 4px 0 #4c008f; }
/* ---- Versus: the rival's building in the select panel, read-only (js/ui/selectPanel.js rivalCard) */
.sp-owner { display: block; color: #ff8f8f; font-weight: 800; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.sp-chip { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.sp-chip--no { color: #ffc2b8; border-color: rgba(255, 143, 143, 0.6); }
/* ---- Versus on screen (js/versusPlay.js, js/ui/sendTab.js, js/ui/rival.js): one pace for both players, so no speed
   control; Crystals and the income beside the coins; the rival strip at the top; the Send tab beside the tray; Scout and your shield
   while across; the crater halves' labels */
#app.versus .hud-speed { display: none; }
/* the round trip to a friend on the rival's card (phase 2c): mint, amber, coral */
/* the Versus report (js/ui/vsReport.js), over the stage of js/render/stage.js: the two scores either side of the gap
   the podiums show through, the graphs, the sends and More stats under them; it scrolls when taller than the screen */
.screen--vsrep { padding: 0; place-items: stretch; background: linear-gradient(180deg, rgba(10, 6, 30, 0.6), rgba(10, 6, 30, 0) 20%, rgba(10, 6, 30, 0) 64%, rgba(10, 6, 30, 0.55)); }
.vsrep { width: 100%; max-width: none; max-height: 100%; overflow-y: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; border: 0; display: grid; grid-auto-rows: max-content; gap: 10px; justify-items: center; align-content: start; color: #fff; outline: none;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
/* a band at the top for Juno's line, as the mission report leaves her (#app.ending raises her box into it) */
@media (min-height: 561px) { .vsrep { padding-top: calc(env(safe-area-inset-top, 0px) + 92px); } }
.vsrep .rep-acts { justify-self: stretch; }
.vsrep__title { margin: 0; font-size: clamp(26px, 4vw, 40px); font-weight: 900; text-align: center; text-shadow: 0 2px 14px rgba(10, 6, 40, 0.85); }
.vsrep__sub { margin: -6px 0 0; font-weight: 700; color: #e7dcff; text-align: center; text-shadow: 0 1px 6px rgba(10, 6, 40, 0.9); max-width: 60ch; }
.vsrep__body { width: min(1100px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.vsrep .vsrep__gap { order: 0; height: 36vh; min-height: 200px; }
.vsrep__side { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; background: rgba(27, 18, 68, 0.84); box-shadow: 0 0 0 1.5px rgba(168, 240, 216, 0.55); }
.vsrep__side--rival { box-shadow: 0 0 0 1.5px rgba(255, 143, 143, 0.6); }
.vsrep__name { font-size: 15px; font-weight: 800; }
.vsrep__total { font-size: clamp(30px, 3.8vw, 44px); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; color: #a8f0d8; }
.vsrep__side--rival .vsrep__total { color: #ff8f8f; }
.vsrep__label { margin-top: -2px; font-size: 12px; font-weight: 700; color: #cfc4f5; }
.vsrep__parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.vsrep__parts li { display: flex; justify-content: space-between; gap: 12px; }
.vsrep__parts b { font-variant-numeric: tabular-nums; }
.vsrep__result b { color: #ffe08a; }
.vsrep__best { margin: 0; padding: 5px 14px; border-radius: 999px; font-weight: 900; letter-spacing: 0.04em; color: #241a52; background: #ffe08a; }
.vsrep__graphs { width: min(560px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vsrep-g { margin: 0; padding: 10px 12px 8px; border-radius: 16px; background: rgba(27, 18, 68, 0.84); }
.vsrep-g figcaption { font-size: 12px; font-weight: 800; color: #cfc4f5; margin-bottom: 4px; }
.vsrep-g svg { display: block; width: 100%; height: 56px; overflow: visible; }
.vsrep-g polyline { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vsrep-g__you { stroke: #a8f0d8; }
.vsrep-g__rival { stroke: #ff8f8f; }
.vsrep-g__mark { fill: #ffe08a; }
.vsrep__lead, .vsrep__note { margin: 0; font-size: 13px; font-weight: 700; color: #e7dcff; text-align: center; }
.vsrep__note { color: rgba(231, 220, 255, 0.75); }
/* (the shop's phase 2) the match's Cryons and the balance */
.vsrep__cr { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; font-weight: 800; color: #7fe3ff; font-variant-numeric: tabular-nums; }
.vsrep__cr .cr { width: 20px; height: 20px; }
.vsrep__cr span:last-child { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.74); }
.vsrep__acts { justify-content: center; }
/* the detailed stats' pop-up (js/ui/moreStats.js openStats, phase 2d): a card over the report, a tab a section, its panel
   scrolling inside; solid enough behind that every number reads */
.stats { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) max(16px, env(safe-area-inset-left, 0px)); background: rgba(8, 5, 26, 0.72); pointer-events: auto; }
.stats__card { display: flex; flex-direction: column; width: min(860px, 100%); max-height: 100%; border-radius: 22px; border: 1px solid rgba(233, 153, 255, 0.35); background: #1b1244; box-shadow: 0 24px 60px rgba(4, 2, 20, 0.6); color: #fff; overflow: hidden; }
.stats__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.stats__head h3 { margin: 0; font-size: 20px; font-weight: 850; }
.stats__close { font: inherit; font-size: 14px; font-weight: 800; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.stats__tabs { display: flex; gap: 6px; padding: 6px 18px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.stats__tabs button { flex: none; font: inherit; font-size: 14px; font-weight: 800; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgba(255, 255, 255, 0.78); cursor: pointer; }
.stats__tabs button[aria-selected="true"] { background: #f6c766; color: #241a52; border-color: transparent; }
.stats__panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 18px; outline: none; }
.stats__head, .stats__tabs { flex: none; }
#app:has(#screens .stats) .comms { visibility: hidden; }
.stats__tabs button:focus-visible, .stats__close:focus-visible { outline: 2px solid #e999ff; outline-offset: 2px; }
.ms-scroll { overflow-x: auto; }
.ms-barcol { width: 34%; min-width: 90px; }
.ms-bar { display: block; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ms-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8fd9ff, #e999ff); }
.ms-facts { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ms-facts div { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.ms-facts dt { font-size: 12px; font-weight: 800; color: #b9adf0; }
.ms-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 800; color: #fff; }
.rep-btn--stats { display: inline-flex; align-items: center; gap: 8px; }
/* the guardian's line on the commander's card (phase 2e) */
.hc-guard { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: #a8f0d8; }
.rep-btn--stats svg { width: 16px; height: 16px; flex: none; }
.rep-stats-btn { justify-self: center; align-self: center; min-height: 40px; margin: 4px auto 0; }
@media (max-height: 500px) { .stats__head { padding-top: 10px; } .stats__card { border-radius: 16px; } }
/* More stats' tables (js/ui/moreStats.js) */
.ms h4 { margin: 10px 0 4px; font-size: 13px; font-weight: 800; color: #cfc4f5; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ms-table th, .ms-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; }
.ms-table { font-size: 14px; }
.ms-table th { font-size: 11.5px; font-weight: 800; color: #b9adf0; }
.ms { text-align: left; }
.ms .ms-top { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #e7dcff; }
@media (max-width: 760px) {
  .vsrep__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vsrep .vsrep__gap { grid-column: 1 / -1; order: -1; height: 34vh; min-height: 170px; }
  .vsrep__graphs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 500px) { .vsrep .vsrep__gap { min-height: 150px; height: 46vh; } }
/* a drone's card (js/ui/droneCard.js), beside the drone under the mouse or the finger, every mode */
.drone-card { position: absolute; z-index: 6; width: 232px; padding: 10px 12px 11px; border-radius: 16px; background: rgba(27, 18, 68, 0.94); box-shadow: 0 0 0 1px rgba(255, 122, 166, 0.5), 0 12px 28px rgba(15, 8, 45, 0.45); color: #fff; pointer-events: none; display: grid; gap: 6px; }
.drone-card__head { display: flex; align-items: center; gap: 9px; }
.drone-card__head img { width: 44px; height: 44px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, 0.08); }
.drone-card__head b { display: block; font-size: 15px; font-weight: 800; }
.drone-card__head em { margin-left: 6px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ff9ab0; }
.drone-card__head small { display: block; font-size: 12px; font-weight: 700; color: #ffb3c7; }
.drone-card__bar { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.drone-card__bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff4f7a, #ff9ab0); border-radius: inherit; }
.drone-card__bar b { position: absolute; inset: 0 auto 0 0; background: rgba(132, 245, 255, 0.85); border-radius: inherit; }
.drone-card__nums { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-weight: 700; color: #d9d0ff; font-variant-numeric: tabular-nums; }
.drone-card__line { margin: 0; font-size: 12.5px; line-height: 1.35; color: #ece6ff; }
.drone-card__buff { margin: 0; font-size: 12px; font-weight: 800; color: #ffd27a; }
/* a bar for each boss (js/ui/bossStack.js), pinned under the wave panel by main: three, then "+2 more" */
.boss-stack { position: absolute; z-index: 3; width: min(250px, 44vw); display: grid; gap: 4px; pointer-events: none; }
.boss-stack__list { display: grid; gap: 4px; }
.boss-stack__row { display: grid; gap: 3px; padding: 5px 9px 6px; border-radius: 10px; background: rgba(36, 20, 70, 0.86); box-shadow: 0 0 0 1px rgba(255, 122, 166, 0.55); }
.boss-stack__name { font-size: 11.5px; font-weight: 800; color: #ffd6e4; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-stack__hp { position: relative; display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.boss-stack__hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff4f7a, #ff9ab0); border-radius: inherit; }
.boss-stack__hp b { position: absolute; inset: 0 auto 0 0; background: rgba(132, 245, 255, 0.85); border-radius: inherit; }
.boss-stack__more { justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #ffd6e4; background: rgba(36, 20, 70, 0.86); }
/* only the rival at the top (Leonardo, 15 October): the solo shield bar goes, yours is the chip under the coins. Hidden,
   not removed, so the top row keeps its middle cell and the coins stay right */
#app.versus .hud-array { visibility: hidden; }
/* Crystals: a pill under the coins, the same make as theirs, with a teal ice crystal (the rigs drill Europa's ice); the
   gold income a wave in a slimmer pill under it; the payday's "+120" rising off the coins at a wave's end */
.hud-crystals, .hud-income { position: relative; display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 7px 14px 7px 12px; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; color: #dff9ff; }
.hud-income { gap: 4px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; color: rgba(255, 224, 138, 0.85); }
.hud-income span { font-size: 15px; font-weight: 800; color: #ffe08a; }
/* 2v2 (four players, 20 October 2026): the teammate's name, gold and Crystals under the purse (js/ui/teammate.js) */
.vs-mate { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 4px 10px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #dff9ff; }
.vs-mate[hidden] { display: none; }
.vs-mate__name { color: #a8f0d8; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-mate__gold, .vs-mate__crystals { display: flex; align-items: center; gap: 3px; }
.vs-mate .coin, .vs-mate .crystal { width: 13px; height: 13px; }
#app.hud-compact .vs-mate { height: 28px; padding: 0 8px; font-size: 12px; gap: 6px; }
/* the teammate's initial beside our face on the Versus bar, and theirs beside the rival's */
.vs-side__face2 { grid-area: face; justify-self: end; align-self: end; position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; margin: 0 -7px -4px 0; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 850; color: #241a52; background: #a8f0d8; box-shadow: 0 0 0 2px #241a52; }
.vs-side--rival .vs-side__face2 { justify-self: start; margin: 0 0 -4px -7px; background: #ff8f8f; }
.vs-side__face2[hidden] { display: none; }
/* pings (the team extras, js/ui/markView.js): a ring pulsing over the mark in its pinger's colour, and an arrow on
   the screen's edge for one off screen */
.mark, .mark-edge { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
/* (.mark only places the ring: the pulse scales its ::before, so the ring stays on its spot) */
.mark { width: 34px; height: 34px; }
.mark::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c, #a8f0d8); box-shadow: 0 0 14px var(--c, #a8f0d8), inset 0 0 8px var(--c, #a8f0d8); animation: mark-pulse 0.9s ease-out infinite; }
.mark-edge { width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 19px solid var(--c, #a8f0d8); filter: drop-shadow(0 0 5px rgba(20, 10, 60, 0.6)); }
.mark[hidden], .mark-edge[hidden] { display: none; }
@keyframes mark-pulse { from { scale: 0.6; opacity: 1; } to { scale: 1.45; opacity: 0.25; } }
.hud-income .coin { width: 14px; height: 14px; }
/* the Crystals' rate beside them (phase 2d) */
.hud-rate { font-size: 11.5px; font-weight: 700; color: rgba(168, 240, 248, 0.8); white-space: nowrap; }
.hud-rate b { font-weight: 800; }
.hud-rate__short { display: none; }
.hud-income small { font: inherit; }
.hud-income__short { display: none; }
@media (max-height: 500px) {
  .hud-rate__long, .hud-income__long { display: none; }
  .hud-rate__short, .hud-income__short { display: inline; }
  /* (2d review) the purse is one row on a phone held sideways: the rate tucks under the Crystals, keeping it narrow */
  .hud-crystals { display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 0; padding-top: 3px; padding-bottom: 3px; }
  .hud-crystals .crystal { grid-row: 1 / span 2; align-self: center; }
  .hud-crystals .hud-rate { grid-column: 2; font-size: 10px; line-height: 1.1; }
}
.crystal { display: inline-block; flex: none; width: 11px; height: 13px; margin: 0 2px 0 1px; clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%); background: linear-gradient(160deg, #f2fdff, #7fe9f6 50%, #23a9c4); }
.hud-pay { position: absolute; right: 14px; top: 100%; font-weight: 800; font-size: 16px; color: #ffe08a; text-shadow: 0 2px 6px rgba(20, 10, 60, 0.7); pointer-events: none; animation: hudPay 1.4s ease-out forwards; }
@keyframes hudPay { from { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-20px); } }
@media (prefers-reduced-motion: reduce) { .hud-pay { animation: none; } }
.vs-strip { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
/* the Versus bar (js/ui/rival.js, phase 2d): you against them, mirrored, VS between */
.vs-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; width: min(580px, 44vw); padding: 7px 12px; border-radius: 18px; border: 1px solid rgba(233, 153, 255, 0.35); background: rgba(27, 18, 68, 0.9); box-shadow: 0 10px 26px rgba(10, 6, 34, 0.35); color: #fff; }
.vs-side { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "face name hp" "face bar bar" "face nums nums"; gap: 3px 9px; align-items: center; min-width: 0; }
.vs-side--rival { grid-template-areas: "hp name face" "bar bar face" "nums nums face"; text-align: right; cursor: pointer; border-radius: 12px; pointer-events: auto; position: relative; }
.vs-side--rival:focus-visible { outline: 2px solid #e999ff; outline-offset: 3px; }
.vs-side__face { grid-area: face; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; font-style: normal; font-weight: 850; color: #241a52; background: #a8f0d8; box-shadow: 0 0 0 2px #a8f0d8; }
.vs-side--rival .vs-side__face { background: #ff8f8f; box-shadow: 0 0 0 2px #ff8f8f; }
.vs-side__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-side__name { grid-area: name; min-width: 0; font-size: 14px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-side__hp { grid-area: hp; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); }
.vs-side__bar { grid-area: bar; display: flex; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.vs-side__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8fd9ff, #a8f0d8); }
.vs-side--rival .vs-side__bar { justify-content: flex-end; }
.vs-side--rival .vs-side__bar i { background: linear-gradient(270deg, #ffb3a8, #ff8f8f); }
.vs-side__bar i.low { background: #ff5f7a; }
.vs-side__nums { grid-area: nums; display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vs-side--rival .vs-side__nums { justify-content: flex-end; }
.vs-side__inc, .vs-side__crystals { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.vs-side__inc { color: #ffe08a; }
.vs-side__inc .coin { width: 12px; height: 12px; }
.vs-side__crystals { color: #c9f6fc; }
.vs-side__crystals .crystal { width: 9px; height: 11px; margin: 0; }
.vs-bar__vs { font-size: 15px; font-weight: 900; letter-spacing: 0.06em; color: #ffe08a; text-shadow: 0 2px 8px rgba(10, 6, 34, 0.6); }
.vs-side__ping { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); white-space: nowrap; }
.vs-side__ping.good { color: #a8f0d8; }
.vs-side__ping.ok { color: #ffd27a; }
.vs-side__ping.bad { color: #ff8f8f; }
@media (max-height: 500px) {
  /* (2d review) as wide as its numbers need: what used to sit beside it on a phone now sits under it */
  .vs-bar { width: min(440px, 64vw); gap: 6px; padding: 4px 8px; }
  .vs-side { grid-template-areas: "face hp hp" "face bar bar" "face nums nums"; gap: 1px 6px; }
  .vs-side--rival { grid-template-areas: "hp hp face" "bar bar face" "nums nums face"; }
  .vs-side__name { display: none; }
  .vs-side__face { width: 26px; height: 26px; }
  .vs-side__nums { gap: 6px; font-size: 11px; min-width: 0; overflow: hidden; }
  .vs-bar__vs { font-size: 12px; }
  /* (2d review) the ping under the bar, out of the numbers' row; Juno's box and the corner notes under the bar (main
     sets --vs-bar-bottom; it moves the boss stack itself) */
  .vs-side__ping { position: absolute; right: 0; top: calc(100% + 6px); }
  #app.versus .comms, #app.versus .comms.low { top: calc(var(--vs-bar-bottom, 0px) + 8px); }
}
/* the Build and Send tabs sit just above the tray's left end, in the tray's own cell */
.vs-tabs { grid-area: tray; align-self: start; justify-self: start; display: flex; gap: 4px; transform: translateY(calc(-100% - 1px)); pointer-events: auto; }
.vs-tabs button { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 15px; font-weight: 850; padding: 8px 16px 9px; border-radius: 14px 14px 4px 4px; border: 1px solid rgba(255, 255, 255, 0.22); border-bottom: 0; background: rgba(27, 18, 68, 0.88); color: rgba(255, 255, 255, 0.82); cursor: pointer; box-shadow: 0 -4px 14px rgba(10, 6, 34, 0.25); }
.vs-tabs button svg { width: 17px; height: 17px; flex: none; }
.vs-tabs button:hover { color: #fff; background: rgba(46, 31, 104, 0.95); }
.vs-tabs button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe9a6, #f6c766); color: #241a52; border-color: transparent; }
.vs-tabs kbd { font-family: inherit; font-size: 10px; opacity: 0.6; }
/* the Send tab on the build tray's own glass panel, so its tiles read on the light ice */
.vs-send__row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px; border-radius: 20px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vs-send__row::-webkit-scrollbar { display: none; }
.vs-tile { position: relative; flex: none; width: 60px; display: grid; justify-items: center; padding: 3px 2px 4px; border-radius: 12px; border: 1px solid rgba(246, 199, 102, 0.45); background: rgba(255, 255, 255, 0.07); color: #fff; font-family: inherit; cursor: pointer; }
.vs-tile.boss { border-color: #ff8f8f; }
.vs-tile.locked, .vs-tile.out, .vs-tile.short { opacity: 0.5; cursor: default; }
.vs-tile img { width: 32px; height: 32px; object-fit: contain; }
.vs-tile__n, .vs-tile__price, .vs-tile__inc { font-size: 11px; font-weight: 800; }
.vs-tile__price { color: #c9f6fc; }
.vs-tile__price::before { content: ''; display: inline-block; width: 7px; height: 9px; margin-right: 2px; vertical-align: -1px; clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%); background: linear-gradient(160deg, #f2fdff, #7fe9f6 50%, #23a9c4); }
.vs-tile.locked .vs-tile__price::before { display: none; }
.vs-tile__inc { font-size: 12.5px; }
.vs-tile--tier { margin-left: 10px; }
.vs-tile__inc { color: #ffe08a; display: flex; align-items: center; gap: 3px; }
.vs-tile__inc .coin { width: 10px; height: 10px; }
/* every send in the tab (phase 2d): on a laptop the row wraps into rows, centred; on a phone it scrolls */
@media (min-width: 900px) and (min-height: 600px) { .vs-send__row { flex-wrap: wrap; justify-content: center; max-width: min(940px, 92vw); margin: 0 auto; } }
.vs-tile__left { position: absolute; top: 2px; right: 4px; font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, 0.7); }
.vs-tile kbd { position: absolute; top: 2px; left: 4px; font-family: inherit; font-size: 9.5px; color: rgba(255, 255, 255, 0.55); }
.vs-tile.nope { animation: ttnope 0.36s ease; }
/* the Merger, 2v2's team boss: a gold tile after the bosses; it pulses mint while a teammate's start waits for you */
.vs-tile--team { border-color: #f6c766; background: linear-gradient(180deg, rgba(246, 199, 102, 0.18), rgba(255, 255, 255, 0.07)); }
.vs-tile--team .vs-tile__n { color: #ffe08a; }
.vs-tile--team.call { border-color: #a8f0d8; animation: teamcall 1.2s ease-in-out infinite; }
.vs-tile--team.call .vs-tile__n { color: #a8f0d8; }
@keyframes teamcall { 50% { box-shadow: 0 0 0 3px rgba(168, 240, 216, 0.45), 0 0 14px rgba(168, 240, 216, 0.55); } }
.vs-scout { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; color: #241a52; background: linear-gradient(180deg, #ffe9a6, #f6c766); box-shadow: 0 5px 0 #d99a3a; cursor: pointer; white-space: nowrap; }
.vs-scout.pulse { animation: vsPulse 1s ease-in-out infinite; }
@keyframes vsPulse { 50% { box-shadow: 0 5px 0 #d99a3a, 0 0 0 8px rgba(255, 143, 143, 0.45); } }
.vs-scout kbd { font-family: inherit; font-size: 11px; padding: 2px 5px; border-radius: 5px; background: rgba(36, 26, 82, 0.15); }
.vs-chip { position: fixed; right: calc(env(safe-area-inset-right, 0px) + 14px); top: calc(var(--hud-edge, 64px) + 8px); padding: 8px 12px; border-radius: 14px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(27, 18, 68, 0.9); border: 1px solid rgba(233, 153, 255, 0.36); z-index: 5; }
/* the corner notes stack below your shield chip (always on in Versus), never under it; on a narrow phone they sit at the
   foot as everywhere */
#app.versus .notes { top: calc(var(--hud-edge, 64px) + 8px); }
/* (2d review) on a phone held sideways, under the bar at the top */
@media (max-height: 500px) { #app.versus .notes { top: calc(var(--vs-bar-bottom, 0px) + 8px); } }
@media (max-width: 600px) { #app.versus .notes { top: auto; } }
.vs-chip__bar { display: block; width: 120px; height: 6px; margin-top: 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.vs-chip__bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fd9ff, #e999ff); }
.vs-half { position: fixed; left: 0; top: 0; transform: translate(-50%, -100%); padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; pointer-events: none; background: rgba(27, 18, 68, 0.82); border: 1.5px solid; }
.vs-half--in { color: #ffc2b8; border-color: #ff8f8f; }
.vs-half--out { color: #ffe6a8; border-color: #f6c766; }
.hud-next .chip.chip--sent { background: rgba(255, 143, 143, 0.3); color: #ffd6cf; }
@media (max-height: 500px) {
  .vs-strip { top: calc(var(--hud-edge, 56px) + 4px); }
  .vs-tabs kbd, .vs-tile kbd, .vs-scout kbd { display: none; }
}
/* ---- the map cards' tabs (Solo, Co-op, Versus) and the coming Versus maps */
.mapc-tabs { display: flex; justify-content: center; gap: 6px; margin: -4px 0 12px; }
.mapc-tabs button { font: inherit; font-weight: 800; font-size: 14px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; }
.mapc-tabs button[aria-selected="true"] { background: #f6c766; color: #241a52; border-color: transparent; }
.mapc--soon { opacity: 0.5; cursor: default; filter: grayscale(0.6); }
.card .mapc-blurb { margin: -4px 0 12px; text-align: center; font-weight: 600; color: #ece4ff; text-shadow: 0 1px 8px rgba(6, 3, 24, 0.85); }
/* the map and difficulty screens over the ship's deck or space: dark enough behind the cards that every line reads
   (Leonardo, 16 October: see-through, text hard to read; the deck's screens are otherwise half see-through) */
#app.deck #screens .screen.screen--diff-c, #app.space #screens .screen.screen--diff-c { background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(43, 28, 110, 0.88), rgba(8, 5, 26, 0.95)); }
.diff-look-c .diff ul { background: rgba(20, 12, 56, 0.86); }

/* ---- the compact phone HUD (17 October 2026; on for a phone held sideways, js/ui/compact.js) ----
   Leonardo, on a phone on its side: too much clutter, Versus most of all. One slim top row (the wave in a line; in
   Versus the You vs Them bar joins the row, between the wave and the purse: --vs-left and --vs-width from main), the
   purse as one pill, one speed button (a tap moves it on), the commander as a column of icons up the left edge, and
   the tray in the room that frees. */
#app.hud-compact .hud-top { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
#app.hud-compact .hud-wave { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 10px; border-radius: 12px; min-width: 0; }
#app.hud-compact .hud-wave__n { font-size: 13.5px; }
#app.hud-compact .hud-diff, #app.hud-compact .hud-wave__s, #app.hud-compact .hud-medal { display: none; }
#app.hud-compact .hud-next { margin: 0; max-width: none; }
#app.hud-compact .hud-wave .guide-link { margin: 0; padding: 5px; font-size: 0; gap: 0; }
#app.hud-compact .guide-link svg { width: 14px; height: 14px; }
#app.hud-compact .hud-array { padding: 6px 10px; }
#app.hud-compact .hud-array__bar { width: clamp(60px, 14vw, 140px); height: 7px; }
/* the purse: coins, then (Versus) Crystals with their rate and the gold income, joined in one pill */
#app.hud-compact .hud-right { gap: 6px; }
#app.hud-compact .hud-coins, #app.hud-compact .hud-crystals, #app.hud-compact .hud-income { height: 32px; padding: 0 10px 0 7px; font-size: 14px; gap: 5px; }
#app.hud-compact .hud-coins .coin, #app.hud-compact .hud-income .coin { width: 15px; height: 15px; }
#app.hud-compact .hud-income span { font-size: 14px; }
#app.hud-compact .hud-crystals { display: flex; padding-top: 0; padding-bottom: 0; }
#app.hud-compact .hud-crystals .hud-rate { font-size: 10.5px; line-height: 1; }
#app.versus.hud-compact .hud-right { gap: 0; }
#app.versus.hud-compact .hud-coins { border-radius: 999px 0 0 999px; border-right: 0; }
#app.versus.hud-compact .hud-crystals { border-radius: 0; border-left: 0; border-right: 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14); }
#app.versus.hud-compact .hud-income { border-radius: 0 999px 999px 0; border-left: 0; margin-right: 6px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14); }
/* one speed button showing the speed in use; mute lives on the pause card */
#app.hud-compact .hud-speed { padding: 0; border: 0; background: none; }
#app.hud-compact .hud-speed button[aria-pressed="false"] { display: none; }
#app.hud-compact .hud-speed button { min-width: 40px; height: 32px; }
#app.hud-compact .hud-btn { width: 32px; height: 32px; }
#app.hud-compact .hud-btn svg { width: 16px; height: 16px; }
#app.hud-compact #btnMute { display: none; }
/* the You vs Them bar, in the top row */
#app.hud-compact .vs-strip { top: calc(env(safe-area-inset-top, 0px) + 4px); left: var(--vs-left, 50%); transform: none; width: var(--vs-width, 320px); }
#app.hud-compact .vs-bar { width: 100%; gap: 6px; padding: 2px 8px; border-radius: 14px; }
#app.hud-compact .vs-side { gap: 0 6px; }
#app.hud-compact .vs-side__face { width: 22px; height: 22px; }
#app.hud-compact .vs-side__hp { font-size: 10.5px; line-height: 1.2; }
#app.hud-compact .vs-side__bar { height: 6px; }
#app.hud-compact .vs-side__nums { font-size: 10px; line-height: 1.2; gap: 5px; }
#app.hud-compact .vs-side--you .vs-side__nums { display: none; }
#app.hud-compact .vs-side--you { grid-template-areas: "face hp hp" "face bar bar"; }
#app.hud-compact .vs-bar__vs { font-size: 11px; }
/* the commander: a column up the left edge, portrait at the foot, the powers above it */
#app.hud-compact .hud-cmd { position: fixed; left: max(8px, env(safe-area-inset-left, 0px)); bottom: calc(var(--safe-b) + 8px); }
#app.hud-compact .cmd { flex-direction: column-reverse; width: auto; gap: 6px; padding: 5px; border-radius: 28px; }
#app.hud-compact .cmd__face { width: 44px; height: 44px; }
#app.hud-compact .cmd__face img { width: 38px; height: 38px; }
#app.hud-compact .cmd__body { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
#app.hud-compact .cmd__name { display: none; }
#app.hud-compact .cmd__hp, #app.hud-compact .cmd--down .cmd__hp { width: 36px; height: 4px; }
#app.hud-compact .cmd__powers { flex-direction: column-reverse; gap: 6px; }
#app.hud-compact .pw { width: 38px; height: 38px; }
#app.hud-compact .pw svg { width: 18px; height: 18px; }
/* the tray and the buttons share the bottom with the column beside them */
#app.hud-compact .hud-bottom { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tray act"; column-gap: 8px; padding-left: calc(max(8px, env(safe-area-inset-left, 0px)) + 62px); padding-bottom: calc(var(--safe-b) + 6px); }
#app.hud-compact .hud-tray { justify-self: start; }
#app.hud-compact .tray__row { padding: 4px 5px 11px; gap: 4px; }
#app.hud-compact .tt { width: 54px; }
#app.hud-compact .tt img { width: 34px; height: 34px; }
#app.hud-compact .vs-tabs button { font-size: 12px; padding: 5px 11px 6px; gap: 5px; border-radius: 10px 10px 3px 3px; }
#app.hud-compact .vs-tabs button svg { width: 13px; height: 13px; }
#app.hud-compact .hud-act { gap: 6px; }
#app.hud-compact .call-btn { min-height: 36px; padding: 7px 12px 9px; font-size: 13.5px; }
#app.hud-compact .view-btn { width: 36px; height: 36px; }
#app.hud-compact .vs-scout { width: 36px; height: 36px; padding: 0; gap: 0; font-size: 0; justify-content: center; box-shadow: 0 3px 0 #d99a3a; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241a52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat, linear-gradient(180deg, #ffe9a6, #f6c766); }
#app.hud-compact .vs-scout.across { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241a52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"), linear-gradient(180deg, #ffe9a6, #f6c766); }
#app.hud-compact .vs-scout kbd { display: none; }
/* on the field: the crater's counts only once something waits there, the road's pin and Juno's box smaller */
#app.hud-compact .vs-half { font-size: 11px; padding: 3px 8px; }
#app.hud-compact .vs-half.zero { display: none; }
#app.hud-compact .am .pin { font-size: 12.5px; padding: 3px 8px 3px 4px; gap: 3px; }
#app.hud-compact .am .pin svg { width: 15px; height: 15px; }
#app.hud-compact .am .pin small { display: none; }
#app.hud-compact .am .stem { height: 12px; }
#app.hud-compact .comms, #app.hud-compact .comms.low { max-width: min(300px, 36vw); padding: 5px 9px 5px 5px; }
#app.hud-compact .comms img { width: 30px; height: 30px; border-radius: 8px; }
#app.hud-compact .comms__body b { font-size: 11px; }
#app.hud-compact .comms__body p { font-size: 12.5px; }
/* (his second phone round, 17 October 2026) the wave panel never grows: the line-up as one count, a boss by its icon,
   and in a wave the drones left */
.hud-next .chip--total { display: none; }
#app.hud-compact .hud-next .chip { display: none; }
#app.hud-compact .hud-next .chip--total { display: inline-flex; }
#app.hud-compact .hud-next .chip.boss { display: inline-flex; font-size: 0; gap: 0; padding: 2px 4px; }
#app.hud-compact .hud-wave--in .hud-wave__s { display: inline; font-size: 12px; white-space: nowrap; }
/* the building and commander cards: under the top row (the close cross clear of the bar), thinner, and kept to what
   you act on; Details (.sp-more) shows the rest */
.sp-more { display: none; }
#app.hud-compact .sel { top: calc(var(--hud-edge, 44px) + 6px); width: 300px; max-height: calc(100dvh - var(--hud-edge, 44px) - 14px - var(--safe-b)); }
#app.hud-compact .sp-more { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; margin: 10px 0 2px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); font: inherit; font-size: 12.5px; font-weight: 800; }
#app.hud-compact .sp-more[aria-pressed="true"] { background: rgba(233, 153, 255, 0.22); border-color: rgba(233, 153, 255, 0.5); }
#app.hud-compact .sel:not(.sel--more) :is(.sp-chips, .sp-pips, .sp-lines, .sp-reach, .sp-br img, .sp-br .sp-end, .sp-br ul, .sp-nt img, .sp-adds ~ ul, .hc-stats, .hc-guard, .hc-next, [data-wrecks], [data-dealt]) { display: none; }
/* (his call, 17 October: at a fork the one-line idea of each branch is what you choose by, so it stays) */
#app.hud-compact .sel:not(.sel--more) .sp-br > p:not(.sp-end) { margin: 3px 0 8px; font-size: 12.5px; line-height: 1.3; }
#app.hud-compact .sel:not(.sel--more) .sp-sub { margin-top: 6px; }
#app.hud-compact .sel:not(.sel--more) .sp-cmp { margin-top: 5px; }
#app.hud-compact .sel:not(.sel--more) .sp-br { padding: 6px 7px 7px; }
#app.hud-compact .sel:not(.sel--more) .sp-br .sp-buy { padding: 6px 8px 6px 10px; font-size: 12px; gap: 4px; white-space: nowrap; }
#app.hud-compact .sel:not(.sel--more) .sp-prio { margin-top: 8px; }
#app.hud-compact .sel:not(.sel--more) .sp-br { padding-top: 8px; }
/* a power's card waits while a building's or the commander's card is open */
#app.hud-compact:has(#selPanel:not([hidden])) .pw-tip { display: none; }
/* ---- the Quartermaster's card (the shop plan's phase 1, js/ui/shop.js): beside the commander at the counter as the
   Locker's card is; its head and tabs stay put, the shelves scroll, the item tapped and Done are pinned to its foot */
.card--shop { display: flex; flex-direction: column; overflow: hidden; text-align: left; padding: 18px 18px 14px; }
/* clear of a phone's home bar when the card stands under the commander */
.card--shop { margin-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px)); }
.shop__head { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.shop__who h2 { margin: 0; font-size: 22px; }
.shop__line { margin: 2px 0 0; font-size: 13px; font-weight: 650; font-style: italic; color: var(--ink-2); }
.shop__balance { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 10px; border-radius: 999px; background: linear-gradient(180deg, #2c2470, #1b1650); color: #fff; font-weight: 800; font-size: 16px; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(127, 227, 255, 0.45); }
.shop__balance .cr { width: 17px; height: 17px; }
/* (inside a tile too: .swatch svg would draw it at 30 px) */
.cr, .swatch svg.cr { width: 13px; height: 13px; flex: none; filter: drop-shadow(0 0.5px 0.5px rgba(25, 23, 79, 0.25)); }
.shop__tabs { order: 3; flex: 1 0 100%; justify-content: flex-start; flex-wrap: nowrap; margin: 0 0 6px; }
.shop__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 10px; }
.shop__body > .hangar__row:first-child { margin-top: 4px; }
.shop__week { margin: 4px 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.card--shop .shop__items.shop__items--week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop__items--week .swatch__pic, .shop__items--week .swatch__art--pic { width: 92px; height: 92px; }
.shop__items--week .swatch__name { font-size: 14px; }
.shop__tile { min-width: 0; align-content: start; padding-bottom: 9px; }
.shop__tile.on { border-color: var(--violet); background: #fff; }
.shop__tile.owned { background: #e4f6ef; }
/* (phase 2) the tile just bought pops as it turns Yours */
.shop__tile.just { animation: shop-just 0.55s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes shop-just { 0% { transform: scale(1); } 35% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(127, 227, 255, 0.7); } 100% { transform: scale(1); } }
.shop__price { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 3px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.shop__price s { font-weight: 650; color: var(--ink-2); }
.shop__price b { color: #7800e0; }
.shop__tile.short .shop__price { color: var(--ink-2); }
.shop__tag { font-size: 11.5px; font-weight: 750; line-height: 1.2; text-align: center; color: var(--ink-2); }
.shop__tag--yours { color: #1d7f73; }
.shop__tag--rank { color: #5a2fb8; }
.shop__tile.gated .swatch__art--pic, .shop__tile.gated svg.swatch__art, .shop__tile.gated .shop__finish { filter: grayscale(0.9); opacity: 0.45; }
.shop__tile.gated .shop__price { opacity: 0.6; }
.shop__flag { position: absolute; top: 5px; right: 5px; padding: 2px 7px; border-radius: 999px; background: #ffe39a; color: #5a3300; font-size: 10.5px; font-weight: 800; }
.shop__piece { object-fit: contain; }
.shop__finish { display: block; width: 46px; height: 46px; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 2px rgba(36, 26, 82, 0.15), 0 2px 6px rgba(36, 26, 82, 0.15); }
.shop__finish--wall { background: repeating-linear-gradient(90deg, var(--c) 0 13px, rgba(36, 26, 82, 0.16) 13px 15px), var(--c); }
.shop__finish--floor { background: linear-gradient(45deg, rgba(36, 26, 82, 0.1) 25%, transparent 25% 75%, rgba(36, 26, 82, 0.1) 75%) 0 0 / 23px 23px, var(--c); }
.shop__finish--view { border-radius: 50%; background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.6), transparent 42%), var(--c); }
.shop__finish--stars { background: radial-gradient(1.6px 1.6px at 22% 30%, #fff 70%, transparent), radial-gradient(1.2px 1.2px at 70% 22%, #fff 70%, transparent), radial-gradient(1.6px 1.6px at 58% 68%, #fff 70%, transparent), radial-gradient(1.2px 1.2px at 30% 80%, #fff 70%, transparent), radial-gradient(1.2px 1.2px at 84% 56%, #fff 70%, transparent), var(--c); }
.shop__foot { flex: none; padding-top: 10px; border-top: 1px solid rgba(36, 26, 82, 0.12); }
.shop__detail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; }
.shop__dpic, .shop__dpic .swatch__art--pic { width: 60px; height: 60px; }
.shop__dpic svg.swatch__art { width: 34px; height: 34px; }
.shop__dtext { display: grid; gap: 1px; min-width: 0; }
.shop__dtext b { font-size: 15.5px; }
.shop__dtext small { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.shop__dprice { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: #7800e0; }
.shop__dacts { display: flex; gap: 8px; }
.shop__dacts .btn { width: auto; margin: 0; padding: 10px 16px; font-size: 14.5px; }
.shop__dacts .btn:disabled, .shop__dacts .btn[aria-disabled="true"] { opacity: 0.45; box-shadow: none; transform: none; cursor: not-allowed; }
.shop__hint { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.shop__msg { margin: 6px 0 0; font-size: 13px; font-weight: 750; color: #7800e0; }
.shop__msg:empty { display: none; }
.shop__done { margin-top: 8px; padding: 10px 18px; }
/* a phone: three tiles a row, the Quartermaster's line left out */
@media (max-width: 600px) {
  .card--shop { padding: 14px 14px 10px; }
  .shop__line { display: none; }
  .shop__who h2 { font-size: 20px; }
  .shop__tabs .tab { padding: 6px 10px; }
  .card--shop .shop__items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .shop__items--week .swatch__pic, .shop__items--week .swatch__art--pic { width: 72px; height: 72px; }
}
/* a short screen (a phone on its side): the tabs and the balance share the head's one row */
@media (max-height: 520px) {
  .card--shop { padding: 12px 14px 10px; }
  .screen--low > .card--shop { max-height: calc(100dvh - 48px); }
  .shop__who { display: none; }
  .shop__tabs { order: 1; flex: 1 1 auto; margin: 0; }
  .shop__tabs .tab { padding: 6px 9px; font-size: 12.5px; }
  .shop__balance { order: 2; padding: 5px 11px 5px 8px; font-size: 14.5px; }
  .shop__body { padding-top: 6px; }
  .shop__items--week .swatch__pic, .shop__items--week .swatch__art--pic { width: 64px; height: 64px; }
}
/* either: the item's bar and Done tighter */
@media (max-width: 600px), (max-height: 520px) {
  .shop__foot { padding-top: 8px; }
  .shop__detail { gap: 8px; min-height: 48px; }
  .shop__dpic, .shop__dpic .swatch__art--pic { width: 46px; height: 46px; }
  .shop__dtext b { font-size: 14.5px; }
  .shop__dtext small, .shop__dprice { font-size: 12px; }
  .shop__dacts { gap: 6px; }
  .shop__dacts .btn { padding: 8px 12px; font-size: 13.5px; }
  .shop__done { margin-top: 6px; padding: 7px 14px; font-size: 14px; }
}

/* ---- Juno's orders card (Juno's daily orders, js/ui/orders.js): beside the commander at her post, as the
   Quartermaster's card is at his counter; her face and line stay put, the rows scroll, Done is pinned to its foot */
.card--orders { display: flex; flex-direction: column; overflow: hidden; text-align: left; padding: 18px 18px 14px; }
.card--orders { margin-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px)); }
.ord-head { flex: none; display: flex; align-items: center; gap: 12px; }
.ord-face { width: 54px; height: 54px; flex: none; border-radius: 50%; background: #efe9ff; }
.ord-head h2 { margin: 0; font-size: 22px; }
.ord-line { margin: 2px 0 0; font-size: 13px; font-weight: 650; font-style: italic; color: var(--ink-2); }
.ord-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ord-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid rgba(36, 26, 82, 0.12); }
.ord { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(36, 26, 82, 0.12); }
.ord-pic { width: 58px; height: 58px; border-radius: 14px; overflow: hidden; background: #efe9ff; display: grid; place-items: center; }
.ord-pic img { width: 100%; height: 100%; object-fit: cover; }
.ord-pic--fit img, .ord-pic--fit svg { width: 84%; height: 84%; object-fit: contain; }
.ord-text b { display: block; font-size: 15px; line-height: 1.25; }
.ord-bar { height: 8px; border-radius: 999px; background: #e7e0f8; margin: 7px 0 5px; overflow: hidden; }
.ord-bar i { display: block; height: 100%; border-radius: 999px; background: #4fd6ad; }
.ord-text small { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.ord-text small em { font-style: normal; color: #b07a1f; }
.ord-swap { border: 0; padding: 0; background: none; font: inherit; font-weight: 750; color: #7800e0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ord-pay { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; color: #7800e0; white-space: nowrap; }
.ord-pay .cr { width: 15px; height: 15px; }
.ord.done .ord-text b { color: var(--ink-2); }
.ord.done .ord-pic { opacity: 0.75; }
.ord-tick { width: 26px; height: 26px; }
.ord-note { margin: 8px 2px 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ord-note:empty { display: none; }
.ord-msg { margin: 8px 2px 0; font-size: 13px; font-weight: 650; color: #1f8f6e; min-height: 1em; }
.ord-msg:empty { display: none; }
.ord-foot { flex: none; padding-top: 10px; }
.ord-foot .btn { margin-top: 0; }
@media (max-width: 600px), (max-height: 520px) {
  .card--orders { padding: 14px 14px 10px; }
  .ord { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; }
  .ord-pic { width: 50px; height: 50px; }
  .ord-face { width: 44px; height: 44px; }
  .ord-head h2 { font-size: 19px; }
}

/* Juno's daily orders on the map screen (js/ui/screens.js briefOrder): one compact line in the map's idea line's place
   (the briefing's panel is full at every height), kept on a short screen; her face on the map's tile, top right (the
   medal has the top left). Under 680 px tall, with an order showing, the medals' "Wave N" labels go to make room (the
   map-screen session's order of what gives way) */
.brief-order { display: flex; align-items: center; gap: 7px; margin: 0; padding: 1px 0; min-width: 0; text-align: left; line-height: 18px; }
.brief-order img { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #efe9ff; }
.brief-order__text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.brief-order__text b { margin-right: 2px; color: #8ff2cf; font-weight: 800; }
.brief-order__pay { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.brief-order__pay .cr { width: 14px; height: 14px; }
.brief-tile__order { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #efe9ff; box-shadow: 0 0 0 2px #ffc35c; }
@media (max-height: 680px) {
  .brief-body:has(.brief-order) .brief-medal small { display: none; }
}
/* (a phone on its side: the medals' heading line goes too, as the difficulty's already does at that height) */
@media (max-height: 520px) {
  .brief-body:has(.brief-order) .brief-medals .brief-sec__head { display: none; }
  .brief-order__text, .brief-order__pay { font-size: 12px; }
  .brief-tile__order { right: 3px; top: 3px; width: 16px; height: 16px; box-shadow: 0 0 0 1.5px #ffc35c; }
}
/* the orders a run finished, in the report's Cryons and on the Versus report */
.rep-cr__order { margin-top: 4px; font-size: 12.5px; font-weight: 650; color: #8ff2cf; }
.rep-cr__order b { color: #fff; font-weight: 750; }
.vsrep__order { margin: 4px 0 0; text-align: center; font-size: 12.5px; font-weight: 650; color: #8ff2cf; }
.vsrep__order b { color: #fff; font-weight: 750; }

/* ---- the story intro (js/ui/story.js; the story spec of 23 October 2026, ported from its approved mock-up): over the
   space scene, a chat in the middle of the screen, The Algorithm's big eye, the red alerts and Juno's two questions */
#story { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: auto; color: #fff; --st-mint: #a8f0d8; --st-blue: #5fd4ff; --st-red: #ff3b58; --st-lilac: #e999ff; }
#story[hidden], #story [hidden] { display: none !important; }
.story-dim, .story-red, .story-black, .story-scan, .story-flash, .story-lights { position: absolute; inset: 0; pointer-events: none; }
.story-dim { background: rgba(4, 3, 12, 0.4); opacity: 0; transition: opacity 1.2s; }
.story--dim .story-dim { opacity: 1; }
/* Jupiter's colonies, placed over its clouds each frame */
.story:not(.story--dim) .story-lights { display: none; }
.story-light { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 10px 3px rgba(255, 190, 110, 0.8), 0 0 26px 8px rgba(255, 170, 90, 0.25); animation: stlight 2.6s ease-in-out infinite alternate; transition: background 0.25s, box-shadow 0.25s, opacity 0.25s; }
.story-light:nth-child(3n) { animation-duration: 3.4s; }
.story-light:nth-child(2n) { animation-delay: -1.2s; }
@keyframes stlight { from { opacity: 0.75; } to { opacity: 1; } }
.story-lights.flicker .story-light { animation: stflicker 0.9s steps(2) 1; }
@keyframes stflicker { 0%, 30%, 60% { opacity: 0.15; } 15%, 45%, 100% { opacity: 1; } }
.story-light.out { background: #3a0d16; box-shadow: none; animation: none; opacity: 0.6; }
.story-red { opacity: 0; transition: opacity 1.2s; background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(255, 30, 60, 0.28) 100%); }
.story--turned .story-red { opacity: 1; }
.story-black { background: #000; opacity: 0; transition: opacity 0.9s; }
.story-black.on { opacity: 1; }
.story-black.quick { transition-duration: 0.3s; }
.story-scan { opacity: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.story--glitch .story-scan { opacity: 1; }
.story-flash { opacity: 0; background: var(--st-red); }
.story-flash.go { animation: stflash 0.7s ease-out 1; }
@keyframes stflash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.story-cap { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + max(18px, 4vh)); margin: 0; text-align: center; font-size: clamp(13px, 1.3vw, 15px); font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); opacity: 0; transition: opacity 0.8s; pointer-events: none; }
.story-cap.on { opacity: 1; }
/* The Algorithm, big: calm blue at first, red when it turns */
.story-eye { position: absolute; left: 50%; top: 44%; width: min(280px, 40vh); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.86); opacity: 0; transition: opacity 0.6s, transform 0.9s cubic-bezier(0.2, 1, 0.3, 1); pointer-events: none; }
.story-eye.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.story-eye__glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(95, 212, 255, 0.42), transparent 62%); transition: background 0.15s; }
.story-eye__pic { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%); mask-image: radial-gradient(circle, #000 52%, transparent 71%); }
.story-eye__pic img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.1s; }
.story-eye__pic .red { opacity: 0; }
.story-eye__name { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: center; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: var(--st-blue); transition: color 0.15s; }
.story-eye.red .story-eye__pic .red { opacity: 1; }
.story-eye.red .story-eye__pic .blue { opacity: 0; }
.story-eye.red .story-eye__glow { background: radial-gradient(circle, rgba(255, 40, 70, 0.55), transparent 62%); }
.story-eye.red .story-eye__name { color: var(--st-red); }
.story-eye.shake { animation: steye 0.5s steps(5) 1; }
@keyframes steye { 0%, 100% { margin-left: 0; } 25% { margin-left: 7px; } 50% { margin-left: -6px; } 75% { margin-left: 4px; } }
/* with reduced motion the eye cross-fades slowly instead of flickering */
.story--calm .story-eye__pic img, .story--calm .story-eye__glow, .story--calm .story-eye__name { transition-duration: 0.8s; }
/* the chat: the newest message at the foot, older ones fading out at the top */
.story-chat { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + max(52px, 10vh)); transform: translateX(-50%); width: min(540px, 92vw); height: min(560px, 58vh); display: flex; flex-direction: column; justify-content: flex-end; transition: opacity 0.6s, transform 0.6s; }
.story-chat.gone { opacity: 0; transform: translateX(-50%) translateY(-16px); pointer-events: none; }
.story-chat.faint { opacity: 0.18; }
.story-thread { display: flex; flex-direction: column; gap: 12px; overflow: hidden; justify-content: flex-end; min-height: 0; flex: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
.story-msg { display: flex; gap: 10px; align-items: flex-end; flex: none; animation: stmsg 0.38s cubic-bezier(0.2, 1.15, 0.4, 1); }
@keyframes stmsg { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.story-av { position: relative; width: 46px; height: 46px; border-radius: 13px; overflow: hidden; flex: none; background: #120c2e; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.story-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s; }
.story-av .red { opacity: 0; }
.story-msg--algo.red .story-av .red { opacity: 1; }
.story-msg--algo.red .story-av .blue { opacity: 0; }
.story-msg--me .story-av { background: linear-gradient(180deg, #3b2a8a, #1d1450); box-shadow: 0 0 0 2px rgba(233, 153, 255, 0.55); }
.story-body { max-width: 82%; min-width: 0; }
.story-who { font-size: 12px; font-weight: 700; margin: 0 0 4px 2px; color: var(--c); transition: color 0.5s; }
.story-bubble { background: rgba(18, 14, 44, 0.8); border: 1px solid var(--edge); border-radius: 16px 16px 16px 6px; padding: 10px 15px; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.4; overflow-wrap: anywhere; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.5s, background 0.5s; }
.story-msg--juno { --c: var(--st-mint); --edge: rgba(168, 240, 216, 0.3); }
.story-msg--algo { --c: var(--st-blue); --edge: rgba(95, 212, 255, 0.35); }
.story-msg--algo.red { --c: var(--st-red); --edge: rgba(255, 59, 88, 0.55); }
.story-msg--algo.red .story-bubble { background: rgba(40, 6, 16, 0.85); }
.story-msg--me { flex-direction: row-reverse; --c: var(--st-lilac); --edge: rgba(233, 153, 255, 0.5); }
.story-msg--me .story-bubble { background: rgba(120, 0, 224, 0.42); border-radius: 16px 16px 6px 16px; font-weight: 600; }
.story-msg--me .story-who { text-align: right; margin: 0 2px 4px 0; }
.story-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.story-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: 0.4; animation: stdot 1s infinite; }
.story-typing i:nth-child(2) { animation-delay: 0.15s; }
.story-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes stdot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.story-sys { align-self: center; flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.55); padding: 2px 10px; animation: stmsg 0.4s ease; }
.story-sys i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--st-mint); box-shadow: 0 0 8px var(--st-mint); animation: stdot 1.4s infinite; }
/* the two answers: "I'm here", then the name */
.story-answer { flex: none; margin: 16px auto 0; padding: 14px 30px; border-radius: 14px; border: 2px solid rgba(233, 153, 255, 0.75); background: linear-gradient(180deg, #a640ff, #7800e0); color: #fff; font: inherit; font-weight: 800; font-size: 18px; cursor: pointer; animation: stmsg 0.4s cubic-bezier(0.2, 1.15, 0.4, 1), stcall 1.6s ease-in-out 0.4s infinite; }
@keyframes stcall { 0%, 100% { box-shadow: 0 8px 26px rgba(166, 64, 255, 0.35); } 50% { box-shadow: 0 8px 40px rgba(166, 64, 255, 0.8), 0 0 0 6px rgba(233, 153, 255, 0.12); } }
.story-reply { display: flex; margin-top: 14px; gap: 8px; align-items: stretch; animation: stmsg 0.4s cubic-bezier(0.2, 1.15, 0.4, 1); }
.story-reply input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 2px solid rgba(233, 153, 255, 0.55); background: rgba(10, 8, 30, 0.85); color: #fff; font: inherit; font-size: 17px; font-weight: 600; outline: none; user-select: text; -webkit-user-select: text; }
.story-reply input:focus { border-color: var(--st-lilac); }
.story-dice { width: 50px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.story-dice svg { width: 24px; height: 24px; fill: currentColor; }
.story-ok { padding: 0 18px; border-radius: 12px; border: 0; background: linear-gradient(180deg, #a640ff, #7800e0); color: #fff; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.story-err { margin: 8px 0 0; font-size: 13px; color: #ffb3c0; }
/* what The Algorithm does when it turns */
.story-alerts { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + max(70px, 16vh)); transform: translateX(-50%); width: min(460px, 90vw); display: grid; gap: 10px; pointer-events: none; transition: opacity 0.6s; }
.story-alerts.gone { opacity: 0; }
.story-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(28, 5, 12, 0.86); border: 1px solid rgba(255, 59, 88, 0.45); font-size: clamp(14px, 1.4vw, 16px); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: stalert 0.35s cubic-bezier(0.2, 1.2, 0.4, 1); }
.story-alert i { width: 9px; height: 9px; border-radius: 50%; background: var(--st-red); box-shadow: 0 0 10px var(--st-red); flex: none; }
.story-alert b { font-weight: 700; }
.story-alert span { color: rgba(255, 255, 255, 0.7); margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes stalert { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: none; } }
.story--glitch .story-chat, .story--glitch .story-alerts { animation: stshake 0.5s steps(6) 1; }
@keyframes stshake { 0% { transform: translateX(-50%); } 20% { transform: translate(calc(-50% + 6px), -2px); filter: drop-shadow(-4px 0 0 rgba(255, 0, 60, 0.7)) drop-shadow(4px 0 0 rgba(0, 220, 255, 0.6)); } 40% { transform: translate(calc(-50% - 5px), 2px); } 60% { transform: translate(calc(-50% + 3px), 0); filter: drop-shadow(-3px 0 0 rgba(255, 0, 60, 0.6)) drop-shadow(3px 0 0 rgba(0, 220, 255, 0.5)); } 100% { transform: translateX(-50%); filter: none; } }
.story-skip { position: absolute; z-index: 1; right: 14px; top: calc(env(safe-area-inset-top, 0px) + 14px); border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(36, 26, 82, 0.7); color: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
/* a phone on its side: the chat takes the height between the caption and the foot, smaller faces */
@media (max-height: 480px) {
  .story-chat { top: calc(env(safe-area-inset-top, 0px) + 44px); height: calc(100dvh - 104px - env(safe-area-inset-top, 0px)); }
  .story-av { width: 32px; height: 32px; border-radius: 10px; }
  .story-bubble { padding: 7px 12px; }
  .story-thread { gap: 8px; }
  .story-eye { top: 41%; width: min(280px, 34vh); }
  .story-alerts { top: calc(env(safe-area-inset-top, 0px) + 46px); gap: 6px; }
  .story-alert { padding: 8px 14px; }
  .story-answer { margin-top: 10px; padding: 10px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-msg, .story-sys, .story-alert, .story-reply, .story-answer, .story-light, .story-typing i, .story-sys i { animation: none; }
  .story-eye { transition: opacity 0.6s; }
}