/* Prism Raiders 3 — arcade cabinet design system */
@font-face { font-family: 'Prism Pixel'; src: url('./assets/fonts/prism-pixel.woff') format('woff'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Prism Pixel'; src: url('./assets/fonts/prism-pixel-bold.woff') format('woff'); font-weight: 700; font-display: block; }
@font-face { font-family: 'PR Inter'; src: url('./assets/fonts/inter-500.woff') format('woff'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'PR Inter'; src: url('./assets/fonts/inter-700.woff') format('woff'); font-weight: 700 800; font-display: swap; }

/* Layout: one portrait column. Home is a tabbed app shell (Play, Missions, Shop,
   Pass, Hangar) over a live canvas; menus are bottom sheets on phones. */
:root {
  --app-height: 100vh; --app-width: 100vw; --viewport-bottom: 0px;
  --bg: #0b0d14; --bg-2: #0f121b;
  --panel: #161a26; --panel-hi: #1e2333; --panel-lo: #10131c;
  --edge: #2a3044; --edge-hi: #3b4361; --edge-dark: #06070b;
  --text: #f4f1e8; --text-2: #cfccc3; --muted: #9196a9; --dim: #6d7286;
  --amber: #ffb547; --amber-hi: #ffd27a; --orange: #ff8a1f; --amber-deep: #7a3a00;
  --cyan: #4ee6ff; --cyan-deep: #0d4b5e;
  --gem: #ff5c9a; --gem-deep: #6b1235;
  --green: #5cf08f; --red: #ff4f4f;
  --pixel: 'Prism Pixel', ui-monospace, monospace;
  --body: 'PR Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sat: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sab: max(var(--safe-bottom), var(--viewport-bottom));
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --sprites: url('./assets/sprites.webp');
  --tabbar: 62px;
  color-scheme: dark;
}
@supports (height: 100dvh) { :root { --app-height: 100dvh; } }
html.standalone { height: 100lvh; }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); height: var(--app-height); touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: fixed; top: 0; left: 0; width: var(--app-width); margin: 0; height: var(--app-height); font-family: var(--body); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; overflow: hidden; background: var(--bg); color: var(--text); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; }
canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
canvas:focus, canvas:focus-visible { outline: none; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
svg { display: block; }
.px-ic { width: 1em; height: 1em; flex-shrink: 0; }
[data-ic] { display: contents; }
.app { position: fixed; inset: 0 0 auto; height: var(--app-height); width: 100%; max-width: 520px; margin: 0 auto; overflow: hidden; background: var(--bg); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.screen { position: absolute; inset: 0; }
.pixel { font-family: var(--pixel); }

/* CRT: scanlines + soft vignette over everything (toggle in settings) */
.app::after { content: ''; position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 4px), radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, .3) 100%); }
body.no-crt .app::after { display: none; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 18px; border-radius: 10px; border: 2px solid var(--edge-dark);
  background: linear-gradient(180deg, #2b3247, #1e2333); color: var(--text); font: 700 16px/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .13), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 4px 0 var(--edge-dark); transition: transform .06s, box-shadow .06s, filter .15s; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 1px 0 var(--edge-dark); }
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { filter: brightness(1.1); } }
.btn:disabled { opacity: 1; filter: none; color: var(--dim) !important; text-shadow: none !important; background: linear-gradient(180deg, #232838, #1a1e2b) !important; box-shadow: inset 0 0 0 1px var(--edge), 0 3px 0 var(--edge-dark) !important; }
.btn:disabled .px-ic { filter: none; }
.btn .px-ic { font-size: 18px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.btn.primary { background: linear-gradient(180deg, #ffad3d 0%, #ff8a1f 55%, #ec6a0c 100%); color: #fff; text-shadow: 0 2px 0 #8a3200; box-shadow: inset 0 2px 0 rgba(255, 240, 200, .6), inset 0 -4px 0 rgba(140, 50, 0, .45), 0 4px 0 #5a2000; }
.btn.cyan { background: linear-gradient(180deg, #38d3f5, #1592bd); color: #fff; text-shadow: 0 2px 0 #063e52; box-shadow: inset 0 2px 0 rgba(220, 250, 255, .55), inset 0 -4px 0 rgba(0, 50, 80, .4), 0 4px 0 #04303f; }
.btn.green { background: linear-gradient(180deg, #4fe585, #1fa556); color: #fff; text-shadow: 0 2px 0 #0b4a24; box-shadow: inset 0 2px 0 rgba(220, 255, 230, .55), inset 0 -4px 0 rgba(0, 60, 25, .4), 0 4px 0 #083b1c; }
.btn.gem { background: linear-gradient(180deg, #ff6fa8, #d83275); color: #fff; text-shadow: 0 2px 0 #5c0f2e; box-shadow: inset 0 2px 0 rgba(255, 220, 235, .5), inset 0 -4px 0 rgba(90, 0, 40, .4), 0 4px 0 #4a0b25; }
.btn.danger { background: linear-gradient(180deg, #ff6464, #c62f2f); color: #fff; text-shadow: 0 2px 0 #5a0e0e; box-shadow: inset 0 2px 0 rgba(255, 220, 220, .5), inset 0 -4px 0 rgba(90, 0, 0, .4), 0 4px 0 #4a0909; }
.btn.small { min-height: 38px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 6px; white-space: nowrap; }
.btn.small .px-ic { font-size: 13px; }
.btn.block { width: 100%; }
.btn .sub { display: block; font-size: 8px; opacity: .9; margin-top: 4px; letter-spacing: .1em; }
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 10px; border: 2px solid var(--edge-dark); background: linear-gradient(180deg, #262c3f, #1a1e2c); color: var(--text); font-size: 18px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 3px 0 var(--edge-dark); }
.icon-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 1px 0 var(--edge-dark); }
.link.center { display: block; margin: 12px auto 0; }
.link { background: none; border: 0; padding: 10px; font: 600 12.5px var(--body); color: var(--muted); letter-spacing: .06em; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- shared bits ---------- */
.panel { background: var(--panel); border: 2px solid var(--edge); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .035), 0 4px 0 rgba(0, 0, 0, .3); }
.seg { display: block; position: relative; height: 8px; background: #0a0c12; border: 2px solid var(--edge-dark); border-radius: 3px; overflow: hidden; }
.seg > i, .seg > em { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--amber); transition: width .35s; }
.seg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(10, 12, 18, .9) 6px 8px); pointer-events: none; }
.seg.cyan > i, .seg.cyan > em { background: var(--cyan); }
.seg.green > i { background: var(--green); }
.sec-title.first { margin-top: 0; }
.sec-title { display: flex; align-items: center; gap: 8px; margin: 22px 2px 10px; font: 700 12px var(--pixel); letter-spacing: .1em; color: var(--amber); }
.sec-title::before { content: '\25b8'; }
.sec-title .grow { flex: 1; }
.sec-title .aside { font-weight: 400; color: var(--muted); }
.tag { display: inline-block; font: 800 10px/1 var(--body); letter-spacing: .06em; padding: 4px 6px; border-radius: 4px; background: var(--amber); color: #3a1a00; text-shadow: none; }
.tag.cyan { background: var(--cyan); color: #032a36; } .tag.gem { background: var(--gem); color: #fff; } .tag.green { background: var(--green); color: #05301a; } .tag.red { background: var(--red); color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--pixel); padding: 5px 8px; border-radius: 6px; background: #0c0e15; border: 2px solid var(--edge); color: var(--text); white-space: nowrap; }
.chip .px-ic { font-size: 12px; }
.c-red { color: var(--red); } .c-cyan { color: var(--cyan); }
.c-crystal { color: var(--cyan); } .c-gem { color: var(--gem); } .c-amber { color: var(--amber); } .c-green { color: var(--green); } .c-muted { color: var(--muted); }
.note { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; text-align: center; }
.note .px-ic, .sub .px-ic { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.stack { display: grid; gap: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--red); color: #fff; font: 800 10px/16px var(--body); text-align: center; box-shadow: 0 2px 0 #5a0909; }
.dot { position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 2px #151926, 0 0 8px rgba(255, 79, 79, .8); animation: dot-pulse 1.6s ease-in-out infinite; }

/* ---------- logo ---------- */
.logo { display: flex; flex-direction: column; align-items: center; font-family: var(--pixel); font-weight: 700; line-height: 1; text-align: center; user-select: none; }
.logo-top { font-size: 48px; letter-spacing: .02em; color: var(--amber); text-shadow: 0 3px 0 #e27512, 0 6px 0 #9d4300, 0 9px 0 #451b00, 0 0 34px rgba(255, 140, 30, .55); }
.logo-bot { font-size: 24px; letter-spacing: .32em; padding-left: .32em; margin-top: 18px; color: var(--cyan); text-shadow: 0 3px 0 #0d6f8c, 0 6px 0 #062f3c, 0 0 22px rgba(78, 230, 255, .5); }
.logo-xl .logo-top { font-size: 64px; } .logo-xl .logo-bot { font-size: 32px; margin-top: 22px; }

/* ---------- boot: CRT power-on, BIOS check, attract screen ---------- */
.boot { --floor: calc(var(--app-height) * .3); position: fixed; inset: 0 0 auto; height: var(--app-height); z-index: 100; background: radial-gradient(ellipse at 50% 60%, #120d08, #000 70%); display: grid; place-items: center; overflow: hidden; }
.boot-screen { position: relative; width: 100%; height: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; padding: max(24px, var(--sat)) 22px max(18px, var(--sab)); overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 90% 50% at 50% 66%, rgba(255, 138, 31, .16), transparent 70%), radial-gradient(ellipse at 50% 30%, #121829 0%, #06070c 75%); animation: crt-on .7s cubic-bezier(.2, .8, .2, 1) both; }
.boot-stars { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .8s;
  background-image: radial-gradient(1.5px 1.5px at 18px 24px, #fff 60%, transparent 70%), radial-gradient(1px 1px at 92px 130px, #9feaff 60%, transparent 70%), radial-gradient(1.5px 1.5px at 150px 70px, #ffd9a0 60%, transparent 70%), radial-gradient(1px 1px at 60px 180px, #fff 60%, transparent 70%), radial-gradient(1px 1px at 190px 160px, #fff 60%, transparent 70%);
  background-size: 210px 210px; animation: stars-fall 9s linear infinite; }
.boot-grid { position: absolute; z-index: -1; left: -50%; right: -50%; bottom: 0; height: var(--floor); perspective: 220px; perspective-origin: 50% 0; overflow: hidden; opacity: 0; transition: opacity .8s; }
.boot-grid::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2px; background: var(--amber); box-shadow: 0 0 22px 6px rgba(255, 150, 40, .55); }
.boot-grid i { position: absolute; left: 0; right: 0; bottom: 0; height: 520%; transform-origin: 50% 100%; transform: rotateX(82deg); opacity: .6;
  background-image: linear-gradient(rgba(255, 181, 71, .95) 3px, transparent 3px), linear-gradient(90deg, rgba(255, 181, 71, .95) 3px, transparent 3px); background-size: 60px 60px; background-position: 50% 0; animation: grid-run .7s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%); mask-image: linear-gradient(to top, #000 10%, transparent 70%); }
.boot.titled .boot-stars, .boot.titled .boot-grid { opacity: 1; }
.boot-top { position: relative; align-self: stretch; min-height: 52px; }
.boot-term { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: max-content; max-width: 92%; display: flex; flex-direction: column; align-items: stretch; gap: 14px; transition: opacity .35s, transform .35s; }
.boot-log { display: grid; margin: 0; font: 400 14px/1.55 var(--pixel); color: var(--green); text-shadow: 0 0 8px rgba(92, 240, 143, .6); white-space: pre-wrap; letter-spacing: .04em; text-align: left; }
.boot-cursor { display: inline-block; vertical-align: -2px; width: 10px; height: 16px; margin-left: 3px; background: var(--green); box-shadow: 0 0 8px rgba(92, 240, 143, .7); animation: blink .8s steps(2) infinite; }
.boot-term .boot-bar { width: 100%; }
.boot-term .boot-status { text-align: center; }
.boot-log > span { grid-area: 1 / 1; }
.boot-ghost { visibility: hidden; }
.boot-live .t-hd { color: var(--amber); text-shadow: 0 0 8px rgba(255, 170, 50, .6); }
.boot-live .t-ok { color: #b8ffd0; text-shadow: 0 0 10px rgba(92, 240, 143, .9); }
.boot-live .t-dim { color: rgba(92, 240, 143, .55); text-shadow: none; }
.boot.titled .boot-term { opacity: 0; transform: translate(-50%, -54%); pointer-events: none; }
.boot-hud { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity .3s .15s; }
.boot-hud em { font: 700 10px var(--body); font-style: normal; color: var(--red); letter-spacing: .24em; padding-left: .24em; }
.boot-hud b { font: 700 16px var(--pixel); color: var(--amber); letter-spacing: .04em; text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 160, 40, .4); }
.boot.titled .boot-hud { opacity: 1; }
.blink { animation: blink 1s steps(2) infinite; }
.boot-title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding-bottom: calc(var(--floor) - 24px); opacity: 0; transform: scale(1.6); }
.boot-title.show { animation: logo-slam .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.boot-title .logo-top { position: relative; }
.boot-title.show .logo { animation: glint 4s 1s infinite; }
.boot-tag { margin: 0; font: 400 12px var(--pixel); letter-spacing: .34em; padding-left: .34em; color: var(--text-2); }
.boot-ship { position: relative; margin-top: 4px; animation: bob 2.4s ease-in-out infinite; }
.boot-ship .hull-preview { width: 84px; height: 100px; filter: drop-shadow(0 0 14px rgba(78, 200, 255, .55)); }
.boot-flame { position: absolute; left: 50%; top: 84%; width: 8px; height: 26px; margin-left: -15px; background: linear-gradient(180deg, #fff, var(--cyan) 35%, transparent); clip-path: polygon(0 0, 100% 0, 50% 100%); animation: flame .12s steps(2) infinite; }
.boot-flame.r { margin-left: 7px; animation-delay: .06s; }
.boot-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 80px; margin-top: clamp(16px, 4vh, 40px); opacity: 0; transition: opacity .3s; width: 100%; justify-content: center; }
.boot-bar { position: relative; width: 100%; height: 16px; border: 2px solid var(--amber); padding: 2px; border-radius: 2px; box-shadow: 0 0 14px rgba(255, 181, 71, .35); }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--amber) 0 8px, transparent 8px 10px); transition: width .12s linear; }
.boot-status { margin: 0; font: 400 12px var(--pixel); letter-spacing: .2em; color: var(--muted); }
.press-start:focus-visible { outline: none; }
.boot-screen::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(6, 7, 12, .82) 55%); pointer-events: none; }
.boot-hint, .boot-foot { text-shadow: 0 2px 0 #000, 0 0 8px #000; }
.press-start { border: 0; background: none; font: 700 24px var(--pixel); letter-spacing: .12em; white-space: nowrap; color: var(--amber); text-shadow: 0 3px 0 #8a3b00, 0 0 20px rgba(255, 160, 40, .7); padding: 10px 20px; animation: start-pulse 1.4s ease-in-out infinite; }
.boot-hint { margin: 0; font: 600 10px var(--body); letter-spacing: .2em; color: var(--muted); opacity: 0; }

.boot.ready .boot-bottom { opacity: 1; }
.boot.ready .boot-hint { opacity: 1; transition: opacity .4s .6s; }
.boot.ready { cursor: pointer; }
.boot-foot { display: flex; justify-content: space-between; width: 100%; font: 600 9.5px var(--body); color: var(--dim); letter-spacing: .16em; }
.boot-foot #credit { color: var(--text-2); }
.boot-foot #credit.lit { color: var(--amber); animation: blink .25s steps(2) 4; }
.boot-crt { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.boot.exit .boot-screen { animation: crt-off .45s ease-in forwards; }
.boot.exit { animation: fade-out .2s .4s forwards; }
@media (max-width: 360px) { .press-start { font-size: 18px; } }
@media (max-height: 760px) { .boot-ship .hull-preview { width: 60px; height: 72px; } .boot-flame { height: 18px; } .boot-title { gap: 16px; } }
@media (max-height: 700px) { .logo-xl .logo-top { font-size: 48px; } .logo-xl .logo-bot { font-size: 24px; } }
@media (max-height: 620px) { .boot-ship { display: none; } .boot-bottom { margin-top: clamp(36px, 9vh, 64px); } }

/* ---------- home shell ---------- */
.home { display: flex; flex-direction: column; isolation: isolate; }
.home-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.topbar { display: flex; align-items: center; gap: 8px; padding: max(10px, var(--sat)) max(12px, var(--sar)) 8px max(12px, var(--sal)); flex-shrink: 0; background: linear-gradient(180deg, rgba(11, 13, 20, .92), rgba(11, 13, 20, .55) 70%, rgba(11, 13, 20, 0)); }
.pilot { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; min-width: 0; flex: 1; text-align: left; }
.lv-badge { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(180deg, #ffbf5e, #e8760f); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lv-badge::before { content: ''; position: absolute; inset: 3px; background: #1a1206; clip-path: inherit; }
.lv-badge b { position: relative; font: 800 15px/1 var(--body); color: var(--amber); font-variant-numeric: tabular-nums; text-align: center; }
.pilot-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; max-width: 120px; }
.pilot-name { font: 800 13px var(--body); color: var(--text); white-space: nowrap; }
.pilot-name em { font-style: normal; color: var(--amber); }
.xpbar { position: relative; height: 6px; background: #07080d; border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; }
.xpbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--amber), var(--amber-hi)); transition: width .5s; }
.wallet { display: flex; gap: 6px; }
.cur { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 8px; border-radius: 8px; border: 2px solid var(--edge-dark); background: #0c0e15; box-shadow: inset 0 0 0 1px var(--edge); font: 700 12px var(--pixel); color: var(--text); font-variant-numeric: tabular-nums; }
.cur .px-ic { font-size: 14px; }
.cur.crystal .px-ic { color: var(--cyan); filter: drop-shadow(0 0 4px rgba(78, 230, 255, .7)); }
.cur.gem .px-ic { color: var(--gem); filter: drop-shadow(0 0 4px rgba(255, 92, 154, .7)); }
.cur-plus { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; border-radius: 4px; background: var(--green); color: #053018; font: 800 13px var(--body); }
.cur.bump { animation: bump .4s; }
.views { position: relative; flex: 1; min-height: 0; }
/* Non-PLAY tabs start at their page title: hide the pilot/wallet bar and give the sticky header the safe-area inset instead. */
.home:not([data-tab="play"]) .topbar { display: none; }
.home:not([data-tab="play"]) .page-head { padding-top: max(24px, calc(var(--sat) + 20px)); }
.view { --gl: max(14px, var(--sal)); --gr: max(14px, var(--sar)); position: absolute; inset: 0; padding: 0 var(--gr) 14px var(--gl); }
.view.scroll { overflow-y: auto; overscroll-behavior: contain; background: rgba(9, 11, 17, .94); padding-bottom: 24px; scrollbar-width: none; }
.view.scroll::-webkit-scrollbar { display: none; }
.view-play { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.home-logo { margin-top: 4px; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(11, 13, 20, .95)) drop-shadow(0 0 4px rgba(11, 13, 20, .9)); }
.home-art { flex: 1 1 auto; min-height: 120px; }
.home-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex-shrink: 0; }
.feature-card { min-width: 0; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 64px; text-align: left; border-radius: 12px; border: 2px solid var(--edge-dark); background: linear-gradient(180deg, rgba(34, 40, 58, .94), rgba(20, 23, 34, .94)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .07), 0 4px 0 var(--edge-dark); color: var(--text); }
.feature-card:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), 0 2px 0 var(--edge-dark); }
.feature-card.hot { border-color: rgba(255, 181, 71, .75); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .07), 0 4px 0 #2a1a05, 0 0 20px rgba(255, 160, 40, .28); }
.feature-card.hot:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), 0 2px 0 #2a1a05, 0 0 20px rgba(255, 160, 40, .28); }
.fc-ic { position: relative; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; border: 2px solid var(--edge-dark); }
.fc-ic.amber { background: linear-gradient(180deg, #4a3110, #2b1c08); color: var(--amber); }
.fc-ic.cyan { background: linear-gradient(180deg, #0f3d4b, #0a2630); color: var(--cyan); }
.fc-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-title { font: 800 13px var(--body); letter-spacing: .02em; }
.fc-sub { font: 600 12.5px var(--body); color: var(--muted); line-height: 1.2; overflow-wrap: anywhere; }
.feature-card.hot .fc-sub { color: var(--amber); }
.play-row { display: flex; gap: 10px; flex-shrink: 0; }
.play-btn { flex: 1; flex-direction: column; gap: 6px; min-height: 76px; border-radius: 14px; }
.pb-main { font-size: 32px; letter-spacing: .08em; }
.pb-sub { font: 600 12.5px var(--body); letter-spacing: .08em; opacity: .95; }
.strip { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 2px solid var(--edge-dark); background: rgba(16, 19, 28, .92); box-shadow: inset 0 0 0 1px var(--edge); color: var(--text); text-align: left; flex-shrink: 0; }
.strip-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #1b2232; color: var(--amber); font-size: 16px; }
.strip-main { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.strip-title { font: 800 13px var(--body); }
.strip-side { font: 600 12.5px var(--body); color: var(--muted); white-space: nowrap; }
.tabbar { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); flex-shrink: 0; padding: 0 max(4px, var(--sar)) var(--sab) max(4px, var(--sal)); background: #0d0f17; border-top: 2px solid var(--edge); box-shadow: 0 -6px 18px rgba(0, 0, 0, .4); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: var(--tabbar); border: 0; background: none; color: var(--dim); font: 700 10px var(--body); letter-spacing: .06em; }
.tab .px-ic { font-size: 22px; }
.tab[aria-current="page"] { color: var(--amber); }
.tab[aria-current="page"]::before { content: ''; position: absolute; top: -2px; left: 22%; right: 22%; height: 3px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.tab[aria-current="page"] .px-ic { filter: drop-shadow(0 0 6px rgba(255, 181, 71, .6)); }

/* tab pages */
.page-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl)); padding: 12px var(--gr) 10px var(--gl); background: rgb(9, 11, 17); }
/* Solid behind the title so scrolled cards never show through it. */
.page-head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(180deg, rgb(9, 11, 17), rgba(9, 11, 17, 0)); pointer-events: none; opacity: 0; transition: opacity .15s; }
/* The fade only appears once the page is scrolled, so the first card is never clipped at rest. */
.view.scrolled .page-head::after { opacity: 1; }
/* Breathing room between the page title and the first container. */
.page-head + * { margin-top: 16px; }
.page-wallet { gap: 6px; }
.page-wallet .cur { height: 26px; padding: 0 9px 0 7px; font-size: 11px; }
.page-wallet .cur .px-ic { font-size: 13px; }
.page-head h2 { margin: 0; font: 700 24px var(--pixel); color: var(--text); letter-spacing: .04em; text-shadow: 0 3px 0 #000; }
.page-head .aside, .sec-title .aside { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--body); color: var(--muted); white-space: nowrap; }
.mission { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; margin-bottom: 10px; }
.mission.done { border-color: #1f6b3d; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .035), 0 4px 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(92, 240, 143, .35); }
.mission.claimed { opacity: .55; }
.m-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #0c0e15; border: 2px solid var(--edge); color: var(--amber); font-size: 22px; }
.m-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-text { font-size: 13px; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: .04em; }
.m-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-prog { font: 600 12.5px var(--body); color: var(--muted); }
.m-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.reroll { width: 46px; height: 46px; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.reroll small { font: 700 10px var(--body); color: var(--muted); }
.ach.done { border-color: #1f6b3d; box-shadow: 0 0 0 1px rgba(92, 240, 143, .35); }
.ach { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; margin-bottom: 8px; }
.ach-stars { display: flex; gap: 2px; font-size: 12px; color: var(--edge-hi); }
.ach-stars .on { color: var(--amber); }
/* shop */
.offer-hero { position: relative; overflow: hidden; padding: 16px; border-color: #7a4a0a; background: radial-gradient(ellipse at 80% 0%, rgba(255, 160, 40, .28), transparent 60%), linear-gradient(180deg, #22190e, #151018); }
.offer-hero h3 { margin: 0 0 6px; font: 700 20px/1.1 var(--pixel); color: var(--amber); text-shadow: 0 3px 0 #5a2600; }
.offer-hero .contents { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.offer-hero .timer { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--body); color: var(--amber-hi); }
.oh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oh-main { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.oh-art { width: 60px; height: 60px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle, rgba(255, 181, 71, .35), transparent 70%), #1d140a; border: 2px solid #6b4200; color: var(--amber); font-size: 36px; }
.oh-art .px-ic { filter: drop-shadow(0 0 10px rgba(255, 170, 50, .8)); animation: bob 1.6s ease-in-out infinite; }
.offer-hero .sub { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.supply { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; }
.supply.ready { border-color: #1f6b3d; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .035), 0 4px 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(92, 240, 143, .4), 0 0 18px rgba(92, 240, 143, .18); }
.supply.ready .big-ic .px-ic { animation: bob 1.4s ease-in-out infinite; }
.sp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.supply .big-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, #3a2a10, #22180a); border: 2px solid var(--edge-dark); color: var(--amber); font-size: 30px; }
.supply strong { display: block; font: 800 13px var(--body); }
.supply small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 10px; text-align: center; min-width: 0; }
.tile .t-ic { font-size: 34px; height: 40px; display: grid; place-items: center; }
.tile .t-amt { font: 700 16px var(--pixel); }
.tile .t-name { font: 600 12.5px var(--body); color: var(--text-2); line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.tile .btn { width: 100%; }
.tile .ribbon { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); }
.tile .was { font: 700 10px var(--body); color: var(--muted); text-decoration: line-through; }
.tile.sold { opacity: .5; }
/* pass */
.pass-head { padding: 14px; display: grid; gap: 12px; }
.pass-top { display: flex; align-items: center; gap: 14px; }
.tier-big { width: 68px; height: 76px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(180deg, #ffbf5e, #e8760f); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: relative; }
.tier-big::before { content: ''; position: absolute; inset: 4px; background: #1a1206; clip-path: inherit; }
.tier-big b { position: relative; font: 800 24px/1 var(--body); color: var(--amber); font-variant-numeric: tabular-nums; }
.tier-big small { position: relative; font: 700 10px var(--body); color: var(--muted); letter-spacing: .1em; }
.pass-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pass-info .seg { margin-top: 10px; }
.pass-title { font: 700 10px var(--body); color: var(--gem); letter-spacing: .14em; }
.pass-name { font: 700 16px/1.2 var(--pixel); margin-top: 6px; }
.pass-sub { font: 600 12.5px var(--body); color: var(--muted); margin-top: 6px; }
.prem-banner { display: grid; gap: 12px; margin-top: 10px; padding: 12px; border-radius: 12px; border: 2px solid #6e1a40; background: linear-gradient(120deg, rgba(255, 92, 154, .2), rgba(20, 16, 30, .9)); }
.prem-banner.active { display: flex; align-items: center; }
.pb-row { display: flex; align-items: center; gap: 12px; }
.prem-banner > .px-ic, .pb-row > .px-ic { font-size: 28px; color: var(--gem); flex-shrink: 0; }
.prem-banner strong { display: block; font: 800 13px var(--body); color: #ffd3e4; }
.prem-banner small { display: block; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.track-head { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 8px; margin: 18px 0 8px; font: 800 13px var(--body); text-align: center; }
.track-head span { display: flex; align-items: center; justify-content: center; gap: 6px; }
.track-head .p { color: var(--gem); }
.track { display: grid; gap: 8px; }
.trow { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 8px; align-items: stretch; }
.tnum { display: grid; place-items: center; font: 800 13px var(--body); color: var(--muted); background: #0c0e15; border: 2px solid var(--edge); border-radius: 8px; }
.trow.reached .tnum { color: #2a1600; background: var(--amber); border-color: #8a4b00; }
.rcell { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 52px; min-width: 0; border-radius: 10px; border: 2px solid var(--edge); background: var(--panel); color: var(--text); text-align: left; font: 800 13px var(--body); }
.rcell .px-ic { font-size: 18px; }
.rcell.prem { background: linear-gradient(180deg, #2a1622, #1b1220); border-color: #4e1d36; }
.rcell.claimable { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 14px rgba(92, 240, 143, .4); animation: pulse-glow 1.2s infinite; }
.rcell.claimed { opacity: .45; }
.rcell.locked { opacity: .6; }
.rcell .state { margin-left: auto; font-size: 12px; flex-shrink: 0; }
.rc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcell.special:not(.claimed) { border-color: #8a5a10; background: linear-gradient(180deg, #2e2210, #1a140c); }
.rcell.special .rc-ic .px-ic { font-size: 22px; filter: drop-shadow(0 0 6px rgba(255, 170, 50, .8)); }
.trow.next .tnum { color: var(--amber); border-color: var(--amber); animation: pulse-glow 1.2s infinite; box-shadow: 0 0 10px rgba(255, 181, 71, .4); }
/* hangar */
.subtabs { display: grid; grid-auto-flow: column; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 10px; background: #07080d; border: 2px solid var(--edge); }
.subtabs button { min-height: 36px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 700 12px var(--pixel); letter-spacing: .04em; }
.subtabs button[aria-selected="true"] { background: linear-gradient(180deg, #2b3247, #1e2333); color: var(--amber); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 2px 0 #000; }
.ship-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 12px; min-width: 0; text-align: center; color: var(--text); }
.ship-card.eq { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 18px rgba(255, 181, 71, .3); }
.ship-card .stage { position: relative; overflow: hidden; width: 100%; height: 92px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--bc) 28%, transparent), transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 8px), #0b0d14; border: 2px solid var(--edge-dark); }
.ship-card strong { max-width: 100%; font: 700 clamp(11px, 3.4vw, 16px)/1.25 var(--pixel); }
.ship-card small { font-size: 12px; color: var(--muted); line-height: 1.35; min-height: 2.7em; }
.ship-card .btn { width: 100%; }
.hull-preview { display: block; width: 60px; height: 72px; flex-shrink: 0; background: var(--sprites) no-repeat; background-size: calc(1254 / 459 * 100%) calc(1254 / 546 * 100%); background-position: calc(97 / (1254 - 459) * 100%) calc(22 / (1254 - 546) * 100%); filter: drop-shadow(0 0 8px rgba(80, 180, 255, .5)); }
.hull-preview.cycle { animation: hue 4s linear infinite; }
.hull-preview.custom-hull { background-size: contain; background-position: center; }
.hangar-cosmetic-note { margin: 0 0 14px; text-align: left; line-height: 1.5; }
.shop-cosmetics { padding: 14px; }
.shop-cosmetics .note { margin: 0 0 12px; text-align: left; line-height: 1.5; }
.locked-ship .hull-preview { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, .35)) !important; }
.beam-swatch { position: absolute; left: 50%; top: 0; width: 4px; height: 12px; margin-left: -2px; background: linear-gradient(180deg, transparent, var(--bc)); box-shadow: 0 0 8px var(--bc); }
.locked-ship .beam-swatch { display: none; }
.tag.dim { background: #2a3044; color: var(--muted); }
.tag .px-ic { display: inline-block; vertical-align: -1px; font-size: 8px; margin-right: 4px; }
.trail-swatch { width: 60px; height: 72px; position: relative; }
.trail-swatch::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 12px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--tc) 0 6px, transparent 6px 10px); box-shadow: 0 0 12px var(--tc); border-radius: 2px; mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
.trail-swatch:not(.pattern-embers)::before { display: none; }
.trail-swatch i { position: absolute; display: block; background: var(--tc); color: var(--tc); box-shadow: 0 0 5px var(--tc); pointer-events: none; }
.pattern-stardust i { width: 3px; height: 3px; left: calc(17px + var(--i) * 3px); top: calc(5px + var(--i) * 8px); animation: trail-fleck 1.6s linear infinite; animation-delay: calc(var(--i) * -.2s); }
.pattern-stardust i:nth-child(3n) { width: 5px; height: 5px; transform: rotate(45deg); }
.pattern-cinder i { width: 2px; height: 8px; left: calc(24px + var(--i) * 1.5px); top: calc(6px + var(--i) * 7px); transform: rotate(-22deg); opacity: calc(1 - var(--i) * .09); animation: trail-fleck 1s linear infinite; animation-delay: calc(var(--i) * -.13s); }
.pattern-cinder i:nth-child(even) { left: calc(28px - var(--i) * 1.5px); transform: rotate(22deg); }
.pattern-afterglow i:nth-child(n+3), .pattern-orbit i:nth-child(n+3), .pattern-pulse i:nth-child(n+6), .pattern-astral i:nth-child(n+7) { display: none; }
.pattern-afterglow i { width: 4px; height: 62px; top: 4px; left: 20px; border-radius: 70% 20% 50% 25%; background: linear-gradient(var(--tc), transparent); animation: trail-ribbon 2s ease-in-out infinite alternate; }
.pattern-afterglow i:nth-child(2) { left: 36px; animation-delay: -1s; }
.pattern-orbit i { width: 18px; height: 62px; left: 21px; top: 4px; border-radius: 50%; border-left: 2px solid var(--tc); border-right: 2px solid transparent; background: none; box-shadow: none; transform: rotate(12deg); animation: trail-braid 2s ease-in-out infinite alternate; }
.pattern-orbit i:nth-child(2) { transform: rotate(-12deg); animation-direction: alternate-reverse; }
.pattern-pulse i { left: calc(27px - var(--i) * 1.5px); top: calc(4px + var(--i) * 13px); width: calc(6px + var(--i) * 3px); height: calc(4px + var(--i) * 1.5px); border: 1.5px solid var(--tc); border-radius: 50%; background: none; box-shadow: 0 0 4px var(--tc); opacity: calc(1 - var(--i) * .13); }
.pattern-astral i { width: 5px; height: 8px; left: 22px; top: calc(4px + var(--i) * 11px); transform: rotate(45deg); border: 1px solid var(--tc); background: none; opacity: calc(1 - var(--i) * .1); }
.pattern-astral i:nth-child(even) { left: 34px; }
@keyframes trail-fleck { 0% { opacity: .9; } 100% { translate: 0 6px; opacity: .2; } }
@keyframes trail-ribbon { to { transform: translateX(2px) skewX(4deg); opacity: .55; } }
@keyframes trail-braid { to { transform: rotate(-12deg); } }
.reduce-motion .trail-swatch i { animation: none; }
@media (prefers-reduced-motion: reduce) { .trail-swatch i { animation: none; } }
.meta-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; margin-bottom: 10px; }
.meta-item strong { font: 800 13px var(--body); display: block; }
.meta-item small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 6px; line-height: 1.4; }
.pips { display: flex; gap: 4px; margin-top: 8px; }
.pips i { width: 14px; height: 6px; background: #07080d; border: 1px solid var(--edge); }
.pips i.on { background: var(--amber); border-color: #8a4b00; }

/* ---------- play / HUD ---------- */
.play { background: #000; }
.arena { position: relative; height: 100%; width: 100%; max-width: calc(100vh * .6667); max-width: calc(100dvh * .6667); margin: 0 auto; overflow: hidden; background: var(--bg); touch-action: none; }
.arena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* HUD: three quiet clusters (score, wave, hull + pause); everything else appears only when it matters */
.hud { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: calc(max(8px, var(--sat)) + 2px) 12px 26px; pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 10, .6), rgba(5, 6, 10, 0)); }
.hud-score, .hud-wave { display: flex; flex-direction: column; gap: 6px; min-width: 0; white-space: nowrap; }
.hud-wave { align-items: center; }
.hud-score strong, .hud-wave strong { font: 700 16px/1 var(--pixel); letter-spacing: .04em; color: var(--text); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.hud-sub { display: flex; align-items: center; gap: 6px; height: 12px; font: 700 10px/1 var(--body); letter-spacing: .12em; color: var(--muted); text-shadow: 0 1px 2px #000; }
.hud-hi b { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.hud-hi.beat, .hud-hi.beat b { color: var(--green); }
/* Endless: Prism Pixel's U+221E is a flat bar, so the infinity mark uses Inter. */
.hud-wave strong .inf { display: inline-block; font-family: 'PR Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; font-size: 1.4em; line-height: .7; letter-spacing: 0; vertical-align: -.06em; margin-left: .06em; }
.hud-wave .seg { width: 40px; height: 4px; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.hud-wave .seg::after { display: none; }
.hud-wave .seg em { background: var(--cyan); border-radius: 2px; }
.hud-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.pause-btn { pointer-events: auto; width: 38px; height: 38px; font-size: 13px; background: rgba(20, 23, 34, .7); border-color: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .6); }
.hull { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; max-width: 72px; align-items: center; font-size: 12px; color: var(--red); }
.hull.danger span:first-child { animation: heart-beat .7s ease-in-out infinite; }
.hull .px-ic { filter: drop-shadow(0 0 3px rgba(255, 79, 79, .6)); }
.hull .empty { color: rgba(255, 255, 255, .14); filter: none; }
.hull .shield { color: var(--cyan); margin-left: 3px; opacity: .35; filter: none; }
.hull .shield.ready { opacity: 1; filter: drop-shadow(0 0 4px var(--cyan)); }
.hull.hit { animation: hull-hit .5s; }
.combo { position: absolute; right: 12px; top: calc(max(8px, var(--sat)) + 50px); display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(5, 6, 10, .6); border: 1px solid rgba(255, 181, 71, .3); animation: drop-in .2s; }
.combo b { font: 700 16px/1 var(--pixel); color: var(--amber); text-shadow: 0 2px 0 #6b2c00, 0 0 10px rgba(255, 160, 40, .7); }
.combo b.up { animation: mult-up .45s cubic-bezier(.3, 1.8, .5, 1); }
.combo span { font: 800 9px var(--body); letter-spacing: .08em; color: var(--text-2); }
.combo .seg { width: 30px; height: 4px; border: 0; background: rgba(255, 255, 255, .12); }
.combo .seg::after { display: none; }
/* Chain broken: the chip flashes red with the lost count, then fades. */
.combo.lost { border-color: rgba(255, 79, 79, .65); animation: chain-lost 1.1s ease-out forwards; }
.combo.lost b { color: #ff6b6b; text-shadow: 0 2px 0 #5a0909, 0 0 10px rgba(255, 60, 60, .6); }
.combo.lost span { color: #ffb3b3; }
.combo.lost .seg { display: none; }
@keyframes chain-lost { 0% { transform: translateX(0); } 8% { transform: translateX(-4px); } 16% { transform: translateX(4px); } 24% { transform: translateX(-2px); } 32%, 70% { transform: none; opacity: 1; } 100% { opacity: 0; } }
body.reduce-motion .combo.lost { animation: chain-lost-static 1.1s forwards; }
@keyframes chain-lost-static { 70% { opacity: 1; } 100% { opacity: 0; } }
/* Chain holding (nothing on screen to kill): timer bar turns cyan and breathes. */
.combo.hold .seg em { background: var(--cyan); box-shadow: 0 0 6px rgba(78, 230, 255, .7); animation: hold-pulse 1.2s ease-in-out infinite; }
@keyframes hold-pulse { 50% { opacity: .5; } }
.combo.m4 b, .combo.m5 b { color: #fff; text-shadow: 0 2px 0 #6b2c00, 0 0 14px var(--amber); }
.boss-bar { position: absolute; z-index: 2; top: calc(max(8px, var(--sat)) + 80px); left: 16px; right: 16px; text-align: center; pointer-events: none; animation: drop-in .5s; }
.boss-bar span { font: 800 10px var(--body); letter-spacing: .22em; color: #ffc2c2; text-shadow: 0 1px 2px #000, 0 0 10px rgba(255, 60, 60, .7); }
.boss-track { position: relative; height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(30, 6, 12, .85); box-shadow: inset 0 0 0 1px rgba(255, 79, 79, .45), 0 0 14px rgba(255, 50, 80, .35); overflow: hidden; }
.boss-track i, .boss-track em { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.boss-track i { background: linear-gradient(180deg, #ff7a7a, #e0303f); box-shadow: inset 0 1px 0 rgba(255, 215, 215, .55); transition: width .15s; }
/* Pale "recent damage" segment that drains after the fill, matching the enemy health bars. */
.boss-track em { background: rgba(255, 236, 240, .78); transition: width .6s cubic-bezier(.3, .6, .3, 1) .3s; }
.boss-track b { position: absolute; inset: 0; }
.boss-track b u { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .85); }
.mod-tag { position: absolute; z-index: 2; left: 12px; top: calc(max(8px, var(--sat)) + 50px); display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 800 9.5px var(--body); letter-spacing: .1em; color: var(--cyan); background: rgba(5, 6, 10, .6); border: 1px solid rgba(78, 230, 255, .35); padding: 4px 7px; border-radius: 5px; pointer-events: none; }
.mod-tag .px-ic { font-size: 10px; }
.banner { position: absolute; z-index: 3; left: 0; right: 0; top: calc(32% - 14px); padding: 14px 0; text-align: center; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 72% 58% at 50% 50%, rgba(5, 6, 14, .62), rgba(5, 6, 14, .34) 55%, rgba(5, 6, 14, 0) 100%); }
.banner.show { animation: banner 2.6s both; }
.banner .b-kicker { font: 600 12.5px var(--body); letter-spacing: .3em; color: var(--cyan); text-shadow: 0 2px 0 #000; }
.banner .b-title { font: 700 40px/1.1 var(--pixel); letter-spacing: .04em; margin: 12px 14px 10px; color: var(--amber); text-shadow: 0 3px 0 #e27512, 0 6px 0 #6b2c00, 0 0 30px rgba(255, 140, 30, .6); }
.banner .b-sub { font: 600 12.5px var(--body); letter-spacing: .18em; color: var(--text); text-shadow: 0 2px 0 #000; }
.banner.warn .b-kicker, .banner.warn .b-sub { color: #ffd0d0; animation: blink .5s steps(2) infinite; }
.banner.warn .b-title { color: #ff5a5a; text-shadow: 0 3px 0 #8a0f0f, 0 6px 0 #3a0505, 0 0 30px rgba(255, 50, 50, .7); }
.banner.warn::before, .banner.warn::after { content: ''; display: block; height: 12px; margin: 14px 0; background: repeating-linear-gradient(-45deg, #ff3b3b 0 10px, #1a0505 10px 20px); animation: stripes .6s linear infinite; }
.banner.good .b-title { color: var(--green); text-shadow: 0 3px 0 #13703a, 0 6px 0 #062b15, 0 0 30px rgba(92, 240, 143, .6); }
.drag-hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 26%; text-align: center; font: 700 16px var(--pixel); letter-spacing: .14em; color: var(--amber); text-shadow: 0 2px 0 #000; pointer-events: none; animation: blink 1s steps(2) infinite; }
.drag-hint .finger { display: block; width: 32px; height: 32px; margin: 0 auto 14px; border: 3px solid var(--amber); animation: swipe 2s ease-in-out infinite; }
.play-bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 18px 12px max(12px, var(--sab)); pointer-events: none; touch-action: none; }
.loadout { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; align-items: flex-end; min-height: 0; padding-bottom: 4px; }
.slot { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: rgba(12, 14, 21, .65); color: var(--c, var(--cyan)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--cyan)) 40%, transparent); }
.slot .ic { display: grid; place-items: center; font-size: 15px; opacity: .9; }
.slot b { position: absolute; right: -4px; bottom: -4px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 4px; display: grid; place-items: center; background: #0b0d14; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--cyan)) 60%, transparent); font: 800 8.5px/1 var(--body); color: var(--c, var(--cyan)); }
.slot.new { animation: slot-new .9s; }
.nova { pointer-events: auto; position: relative; width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .7); padding: 0; background: rgba(26, 18, 20, .55); color: rgba(255, 255, 255, .45); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 3px 0 rgba(0, 0, 0, .5); transition: transform .06s; touch-action: none; }
.nova-ring { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(rgba(255, 181, 71, .85) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .07) 0); -webkit-mask: radial-gradient(circle, transparent 28px, #000 29px); mask: radial-gradient(circle, transparent 28px, #000 29px); }
.nova-cap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nova-cap .px-ic { font-size: 18px; }
.nova small { font: 800 9px var(--body); letter-spacing: .12em; }
.nova.ready { color: #fff; background: radial-gradient(circle at 50% 35%, #ff6b3d, #c42a10 70%); box-shadow: 0 5px 0 #4a0f00, inset 0 3px 0 rgba(255, 220, 200, .45), 0 0 26px rgba(255, 120, 40, .7); animation: nova-pulse .9s ease-in-out infinite; }
.nova.ready .nova-ring { background: var(--amber); }
.nova:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #000; }

/* ---------- dialogs ---------- */
.modal { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: max(14px, var(--sat)) max(12px, var(--sar)) max(14px, var(--sab)) max(12px, var(--sal)); background: rgba(3, 4, 8, .78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .15s; }
.dialog { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: 16px; padding: 0 16px 18px; color: var(--text);
  background: linear-gradient(180deg, #1a1e2c, #12151f); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--edge), inset 0 4px 0 rgba(255, 255, 255, .05), 0 8px 0 #000, 0 30px 80px rgba(0, 0, 0, .7); animation: pop-in .22s cubic-bezier(.3, 1.4, .5, 1); }
.dialog::-webkit-scrollbar { display: none; }
.dlg-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0 -16px 16px; padding: 14px 14px 12px 16px; background: linear-gradient(180deg, #232839, #1a1e2c); border-bottom: 2px solid #000; box-shadow: 0 2px 0 var(--edge); }
.dlg-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: #11141d; border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--edge); color: var(--amber); font-size: 18px; }
.dlg-close .px-ic { font-size: 12px; }
.dlg-titles { flex: 1; min-width: 0; }
.eyeline { margin: 0 0 6px; font: 700 10px var(--body); letter-spacing: .14em; color: var(--muted); }
.dialog h2 { margin: 0; font: 700 16px/1.2 var(--pixel); letter-spacing: .04em; color: var(--amber); text-shadow: 0 2px 0 #000; }
.dlg-close { width: 34px; height: 34px; font-size: 12px; }
.dialog .sub { color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.dialog .btn { width: 100%; }
.grab { display: none; }
@media (max-width: 600px) {
  .modal.sheet { align-items: flex-end; padding: max(36px, var(--sat)) 0 0; }
  .modal.sheet .dialog { max-width: none; border-radius: 18px 18px 0 0; padding-bottom: max(18px, calc(var(--sab) + 12px)); animation: sheet-up .3s cubic-bezier(.2, .9, .3, 1); }
  .modal.sheet .dlg-head { border-radius: 16px 16px 0 0; }
  /* A bottom sheet runs off the screen edge: no bottom border or inset edge, only top and sides. */
  .modal.sheet .dialog { border-bottom: 0; box-shadow: inset 2px 0 0 var(--edge), inset -2px 0 0 var(--edge), inset 0 2px 0 var(--edge), inset 0 4px 0 rgba(255, 255, 255, .05), 0 -10px 40px rgba(0, 0, 0, .55); }
  .modal.sheet .grab { display: block; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; background: var(--edge-hi); border-radius: 2px; }
}
.how-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 2px solid rgba(42, 48, 68, .6); }
.how-row:last-child { border-bottom: 0; }
.how-row .m-ic { width: 44px; height: 44px; }
.how-row strong { font: 800 13px var(--body); display: block; margin-bottom: 6px; }
.how-row p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
/* setup */
.m-setup #resume-solo + .note { margin-bottom: 20px; }
.mode-list { display: grid; gap: 10px; }
.mode-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; text-align: left; color: var(--text); }
.mode-card[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 18px rgba(255, 181, 71, .25); }
.mode-card:disabled { opacity: .55; }
.mode-card .m-ic { font-size: 24px; }
.mode-card strong { display: block; font: 800 13px var(--body); margin-bottom: 6px; }
.mode-card strong:has(.mode-tag) { display: flex; align-items: center; gap: 8px; line-height: 16px; }
/* 3.7.6: mode-row status chip (NEW / CLEARED) in the app's chip language:
   pixel type, dark panel fill, hard 2px black edge + 1px accent inset. */
.mode-card .mode-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font: 700 10px/1 var(--pixel); letter-spacing: .04em; background: #1f170a; color: var(--tc); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--tc); text-shadow: 0 1px 0 #000; }
.mode-card .mode-tag.amber { --tc: var(--amber); } .mode-card .mode-tag.cyan { --tc: var(--cyan); background: #0a1f26; } .mode-card .mode-tag.green { --tc: var(--green); background: #0a2214; }
.mode-card small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.radio { width: 20px; height: 20px; border: 2px solid var(--edge-hi); border-radius: 4px; }
/* 3.7.5: New Raid chevrons match the online sheets (muted, sized to the 20px radio column). */
.mode-card > .mc-chev { width: 20px; text-align: center; color: var(--muted); font: 600 20px/1 var(--body); }
.mode-card[aria-pressed="true"] .radio { border-color: var(--amber); background: radial-gradient(var(--amber) 0 40%, transparent 42%); }
.diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.diff button { min-height: 48px; border-radius: 8px; border: 2px solid #000; background: #141824; box-shadow: inset 0 0 0 1px var(--edge); font: 700 12px var(--pixel); color: var(--muted); }
.diff button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 60%, #000), color-mix(in srgb, var(--dc) 30%, #000)); box-shadow: inset 0 0 0 1px var(--dc), 0 0 14px color-mix(in srgb, var(--dc) 40%, transparent); }
.seg-note { font-size: 13px; color: var(--text-2); margin: 10px 2px 0; min-height: 1.5em; }
.perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* daily reward calendar */
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 10px; border: 2px solid #000; background: #141824; box-shadow: inset 0 0 0 1px var(--edge); text-align: center; }
.cal-day .d { font: 700 10px var(--body); color: var(--muted); }
.cal-day .px-ic { font-size: 22px; }
.cal-day .amt { font: 800 10px var(--body); color: var(--text); }
.cal-day.done { opacity: .5; }
.cal-day .cd-ic { display: grid; place-items: center; height: 26px; }
.cal-day.big .cd-ic .px-ic { font-size: 30px; filter: drop-shadow(0 0 8px rgba(255, 170, 50, .7)); }
.cd-check { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 3px; background: var(--green); color: #053018; font-size: 10px; }
.cd-check .px-ic { font-size: 10px; }
.cal-day.today { background: linear-gradient(180deg, #3a2a10, #1f170a); box-shadow: inset 0 0 0 2px var(--amber), 0 0 18px rgba(255, 181, 71, .4); animation: pulse-glow 1.2s infinite; }
.cal-day.big { grid-column: span 2; }
/* The calendar and close tiles bookend a centered title. */
.m-daily .dlg-head { padding-inline: 16px; margin-bottom: 0; }
.m-daily .dlg-ic, .m-daily .dlg-close { width: 40px; height: 40px; }
.m-daily .dlg-titles { text-align: center; }
.m-daily .eyeline { margin-bottom: 5px; }
.streak { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; padding: 13px 0; font: 700 13px/1.4 var(--body); }
.st-current { display: inline-flex; align-items: center; gap: 6px; color: var(--amber-hi); }
.st-current .px-ic { color: var(--orange); font-size: 15px; }
.st-sep { color: var(--muted); }
.st-best { color: var(--text-2); font-weight: 500; }
.m-daily .note { max-width: 38ch; margin-inline: auto; text-wrap: pretty; }

.unlock-detail { border: 1px solid var(--edge-hi); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--item-color) 5%, #131725), #10131e 72%); padding: 14px; }
.unlock-objective { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.unlock-objective small { color: var(--item-color); font: 700 10px/1.4 var(--body); letter-spacing: .12em; }
.unlock-objective p { margin: 4px 0 0; font: 700 15px/1.4 var(--body); color: var(--text); text-wrap: pretty; }
.unlock-preview { width: 62px; height: 68px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--edge); border-radius: 8px; background: radial-gradient(ellipse, color-mix(in srgb, var(--item-color) 17%, transparent), transparent 74%), #0b0e16; }
.unlock-preview .hull-preview { width: 45px; height: 54px; }
.unlock-preview .trail-swatch { height: 52px; }
.unlock-count { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 15px 0 7px; color: var(--muted); font: 600 13px/1.4 var(--body); }
.unlock-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.unlock-detail progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 6px; background: #080a11; border: 0; border-radius: 6px; overflow: hidden; }
.unlock-detail progress::-webkit-progress-bar { background: #080a11; }
.unlock-detail progress::-webkit-progress-value { background: var(--item-color); }
.unlock-detail progress::-moz-progress-bar { background: var(--item-color); }
.unlock-hint { max-width: 42ch; margin: 14px auto 16px; text-align: center; padding-inline: 6px; color: var(--text-2); font: 500 13px/1.5 var(--body); text-wrap: balance; }
.unlock-actions { display: grid; gap: 10px; }
.unlock-actions.has-pass { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
@media (min-width: 361px) and (max-width: 600px) {
  .home-cards { gap: 8px; }
  .feature-card { gap: 7px; padding: 8px; }
  .fc-ic { width: 32px; height: 36px; font-size: 17px; }
  .fc-title { font-size: 12px; }
  .fc-sub { font-size: 11.5px; }
}
@media (max-width: 389px) {
  .home-cards .fc-text { align-self: stretch; display: grid; align-content: center; grid-template-rows: auto 2.4em; gap: 4px; font-size: 11.5px; }
}
/* reward popup */
.reward-burst { position: relative; display: grid; place-items: center; height: 120px; margin: 4px 0 6px; }
.reward-burst::before { content: ''; position: absolute; width: 180px; height: 180px; background: repeating-conic-gradient(rgba(255, 181, 71, .22) 0 10deg, transparent 10deg 20deg); border-radius: 50%; mask-image: radial-gradient(circle, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: spin 8s linear infinite; }
.reward-burst .px-ic { position: relative; font-size: 64px; color: var(--amber); filter: drop-shadow(0 0 16px rgba(255, 170, 50, .8)); animation: bob 1.6s ease-in-out infinite; }
.reward-list { display: grid; gap: 8px; margin-bottom: 16px; }
.reward-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #0c0e15; border: 2px solid var(--edge); font: 700 16px var(--pixel); animation: line-in .35s both; }
.reward-line:nth-child(2) { animation-delay: .08s; } .reward-line:nth-child(3) { animation-delay: .16s; } .reward-line:nth-child(4) { animation-delay: .24s; }
.reward-line .px-ic { font-size: 22px; }
.reward-line small { margin-left: auto; font: 700 10px var(--body); color: var(--muted); }
/* upgrade cards */
.cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border-radius: 12px; overflow: hidden; text-align: left; color: var(--text); border: 2px solid #000; background: #141824; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent), 0 4px 0 #000; animation: card-deal .45s cubic-bezier(.2, .9, .3, 1.1) both; transition: transform .12s; }
.card:nth-child(2) { animation-delay: .07s; } .card:nth-child(3) { animation-delay: .14s; } .card:nth-child(4) { animation-delay: .21s; }
.card .art { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; image-rendering: pixelated; border-bottom: 2px solid #000; }
.card[aria-pressed="true"] .art-frame { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 2px #000, 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.card .cbody { display: flex; flex-direction: column; gap: 7px; padding: 9px 8px 10px; flex: 1; }
.card .tag { align-self: flex-start; background: var(--c); color: #0b0d14; }
.card strong { font: 800 13px/1.2 var(--body); color: var(--c); letter-spacing: .02em; }
.card strong.long { font-size: 11px; letter-spacing: 0; }
.cards[style*="--n:4"] .card strong { font-size: 10px; letter-spacing: 0; }
.cards[style*="--n:4"] .card strong.long { font-size: 9px; }
.cards[style*="--n:4"] .card .cbody { padding-left: 6px; padding-right: 6px; }
.clear-stats .tag { align-self: center; }
/* Card art sits in an inset viewport tinted with the card colour. */
.card .art-frame { position: relative; display: block; margin: 6px 6px 0; border-radius: 8px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 80% 90% at 50% 85%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%), linear-gradient(180deg, #0a0c14, #121625);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, #000), 0 0 0 2px #000; }
.card .art-frame .art, .card .art-frame .art-ic { border-bottom: 0; background: transparent; }
.card .art-frame .art { mix-blend-mode: screen; }
.card .art-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55)), repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -14px 18px -10px rgba(0, 0, 0, .7), inset 0 0 18px color-mix(in srgb, var(--c) 22%, transparent); }
/* 3.7.6: LV badge is a hard-edged pixel chip (was a soft Inter pill). */
.card .lv { position: absolute; z-index: 2; top: 5px; right: 5px; font: 700 10px/1 var(--pixel); letter-spacing: .04em; color: var(--c); background: #0c0e15; border: 2px solid #000; padding: 3px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); text-shadow: 0 1px 0 #000; }
.card p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--text-2); }
.card .pips { margin-top: auto; padding-top: 2px; gap: 3px; }
.card .pips i { flex: 1; width: auto; height: 5px; }
.card .pips i.on { background: var(--c); border-color: #000; }
.card .pips i.next { background: var(--c); opacity: .45; animation: blink .8s steps(2) infinite; }
.card[aria-pressed="true"] { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px var(--c), 0 0 24px color-mix(in srgb, var(--c) 60%, transparent), 0 9px 0 #000; }
.card[aria-pressed="true"]::after { content: '\2713'; position: absolute; z-index: 3; top: 11px; left: 11px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--c); color: #000; font: 800 13px var(--body); border-radius: 4px; }
.card kbd { display: none; }
@media (hover: hover) and (pointer: fine) { .card kbd { display: grid; place-items: center; position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; border-radius: 4px; background: rgba(0, 0, 0, .8); border: 1px solid var(--edge-hi); font: 700 10px var(--body); color: var(--text-2); } .card[aria-pressed="true"] kbd { display: none; } }
.clear-stats { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.build { display: flex; flex-wrap: wrap; gap: 5px; }
.build span { display: inline-flex; align-items: center; gap: 5px; font: 800 10px var(--body); letter-spacing: .04em; padding: 5px 7px; border-radius: 4px; color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.build .px-ic { font-size: 10px; }
/* continue */
.continue { text-align: center; padding-top: 20px; }
.continue h3 { margin: 6px 0 0; font: 700 32px var(--pixel); color: var(--amber); text-shadow: 0 3px 0 #8a3b00, 0 0 24px rgba(255, 140, 30, .6); animation: blink-soft 1.2s infinite; }
.count.pop { animation: count-pop .35s; }
.count { font: 700 96px/1 var(--pixel); color: #fff; text-shadow: 0 6px 0 #6b2c00, 0 0 40px rgba(255, 140, 30, .7); margin: 18px 0 20px; }
/* results */
.result { text-align: center; padding-top: 18px; }
.rank { width: 72px; height: 82px; margin: 0; display: grid; place-items: center; padding-left: .125em; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(180deg, var(--rc), color-mix(in srgb, var(--rc) 40%, #000)); font: 700 40px/1 var(--pixel); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); animation: rank-in .6s cubic-bezier(.2, .9, .3, 1.4) .2s both; }
.rank-wrap { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 6px; filter: none; }
.rank-wrap::before { content: ''; position: absolute; z-index: -1; left: 50%; top: calc(50% + 8px); width: calc(100% + 26px); height: calc(100% - 4px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--rc) 18%, transparent), color-mix(in srgb, var(--rc) 8%, transparent) 36%, transparent 72%); pointer-events: none; }
.rank-wrap > span, .score-cap { font: 700 10px var(--body); letter-spacing: .16em; color: var(--muted); }
.result-top { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: #0c0e15; border: 2px solid var(--edge); text-align: left; }
.score-box { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.result-title { font: 700 32px/1 var(--pixel); color: var(--amber); text-shadow: 0 3px 0 #e27512, 0 6px 0 #6b2c00; margin: 0; }
.result.lost .result-title { color: #ff6464; text-shadow: 0 3px 0 #8a0f0f, 0 6px 0 #3a0505; }
.result .kicker { margin: 2px 0 12px; font: 700 10px var(--body); letter-spacing: .16em; color: var(--muted); }
.big-score { font: 700 32px/1 var(--pixel); letter-spacing: .02em; margin: 0; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 0 #000; }
.score-label { font: 700 10px var(--body); color: var(--muted); letter-spacing: .14em; }
.score-label.best { color: #2a1600; background: var(--amber); padding: 4px 7px; border-radius: 4px; animation: pulse-glow .8s 4; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 0 10px; border-radius: 12px; background: #0c0e15; border: 2px solid var(--edge); overflow: hidden; }
.stats div { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; }
.stats div:nth-child(n+4) { border-top: 1px solid rgba(42, 48, 68, .8); }
.stats div:not(:nth-child(3n+1)) { border-left: 1px solid rgba(42, 48, 68, .8); }
.stats strong { font: 700 16px/1 var(--pixel); color: #fff; font-variant-numeric: tabular-nums; }
.stats span { font: 700 9.5px var(--body); color: var(--muted); letter-spacing: .12em; }
/* Personal-best stat (e.g. longest chain ever). */
.stats div.pb { background: linear-gradient(180deg, rgba(255, 181, 71, .14), rgba(255, 181, 71, .04)); }
.stats div.pb strong { color: var(--amber); text-shadow: 0 0 10px rgba(255, 160, 40, .55); }
.stats div.pb span { color: var(--amber); }
.gains { display: grid; gap: 6px; margin: 0 0 4px; text-align: left; }
.gain { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; min-height: 46px; border-radius: 10px; background: #0c0e15; border: 2px solid var(--edge); font: 800 13px var(--body); }
.gain .px-ic { font-size: 18px; }
.g-main { display: block; min-width: 0; line-height: 1.3; font: 800 12px var(--body); letter-spacing: .06em; color: var(--text-2); }
.g-main > b { font: 700 16px var(--pixel); color: var(--text); letter-spacing: .02em; margin-right: 4px; }
.g-main .seg { margin-top: 7px; }
.g-text { font: 700 13px/1.35 var(--body); }
.gain .seg { height: 6px; border-width: 1px; }
.gain.hl { border-color: #6b4200; background: linear-gradient(90deg, rgba(255, 181, 71, .12), #0c0e15 70%); animation: line-in .35s .4s both; }
.badge-in { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--red); color: #fff; font: 800 10px var(--body); text-shadow: none; }
.gain small { font: 700 10px var(--body); color: var(--muted); }
.unlock { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 2px solid #6b4200; background: linear-gradient(90deg, rgba(255, 181, 71, .16), rgba(255, 181, 71, .03)); margin-bottom: 8px; font: 800 13px var(--body); color: var(--amber-hi); }
.unlock small { display: block; font: 400 12.5px var(--body); color: var(--text-2); margin-top: 6px; }
/* settings */
.set-group { border-radius: 12px; background: #0f121a; border: 2px solid var(--edge); padding: 0 12px; }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 54px; border-bottom: 2px solid rgba(42, 48, 68, .6); font: 800 13px var(--body); }
.set-row:last-child { border-bottom: 0; }
.set-row > span:nth-child(2) { flex: 1; min-width: 0; }
.set-row.col { flex-wrap: wrap; padding-top: 12px; }
.set-row.col .seg3 { flex-basis: 100%; margin: 0 0 12px; }
.set-row small { display: block; font: 400 12px var(--body); color: var(--muted); margin-top: 5px; }
.set-row .sic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #1a1f2e; color: var(--amber); font-size: 14px; flex-shrink: 0; }
.set-row input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 52px; height: 28px; border-radius: 4px; background: #07080d; border: 2px solid var(--edge-hi); position: relative; flex-shrink: 0; margin: 0; }
.set-row input[type=checkbox]::before { content: 'OFF'; position: absolute; top: 2px; left: 2px; width: 22px; height: 20px; border-radius: 2px; background: #3a4260; transition: transform .12s steps(3); font: 800 10px/20px var(--body); color: transparent; }
.set-row input[type=checkbox]::after { content: 'OFF'; position: absolute; right: 4px; top: 0; font: 700 9px/24px var(--body); color: var(--muted); }
.set-row input[type=checkbox]:checked { border-color: #1f8a49; background: #062312; }
.set-row input[type=checkbox]:checked::before { transform: translateX(24px); background: var(--green); }
.set-row input[type=checkbox]:checked::after { content: 'ON'; right: auto; left: 5px; color: var(--green); }
.set-row input[type=range] { -webkit-appearance: none; appearance: none; width: 116px; height: 28px; background: none; margin: 0; flex-shrink: 0; }
.set-row input[type=range]::-webkit-slider-runnable-track { height: 8px; border: 2px solid #000; background: linear-gradient(90deg, var(--amber) var(--v, 50%), #07080d var(--v, 50%)); }
.set-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; background: #f4f1e8; border: 2px solid #000; margin-top: -9px; border-radius: 2px; box-shadow: 0 2px 0 #000; }
.set-row input[type=range]::-moz-range-track { height: 6px; background: #07080d; border: 2px solid #000; }
.set-row input[type=range]::-moz-range-progress { height: 6px; background: var(--amber); }
.set-row input[type=range]::-moz-range-thumb { width: 14px; height: 20px; background: #f4f1e8; border: 2px solid #000; border-radius: 2px; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 6px; background: #07080d; border: 2px solid var(--edge); }
.seg3 button { min-height: 30px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 800 10px var(--body); }
.seg3 button[aria-pressed="true"] { background: var(--amber); color: #2a1600; }
/* records */
.rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rec { padding: 12px; border-radius: 10px; background: #0c0e15; border: 2px solid var(--edge); }
.rec span { display: block; font: 700 10px var(--body); letter-spacing: .08em; color: var(--muted); }
.rec strong { display: block; font: 700 16px var(--pixel); margin-top: 8px; font-variant-numeric: tabular-nums; }
.rec.hero { grid-column: span 2; border-color: #6b4200; background: linear-gradient(180deg, #24190a, #120e08); }
.rec.hero strong { font-size: 32px; color: var(--amber); }
.enemy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.enemy-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 8px; border-radius: 10px; background: #0c0e15; border: 2px solid #3a1820; }
.enemy-card.boss { grid-column: span 2; flex-direction: row; text-align: left; gap: 12px; }
.enemy-card strong { font: 800 13px var(--body); color: #ffb0b0; }
.enemy-card p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.enemy-preview { width: 48px; height: 52px; background: var(--sprites) no-repeat; flex-shrink: 0; }
.enemy-preview.enemy { background-size: calc(1254 / 399 * 100%) calc(1254 / 469 * 100%); background-position: calc(741 / (1254 - 399) * 100%) calc(74 / (1254 - 469) * 100%); width: 44px; }
.enemy-preview.drone { background-size: calc(1254 / 312 * 100%) calc(1254 / 369 * 100%); background-position: calc(785 / (1254 - 312) * 100%) calc(736 / (1254 - 369) * 100%); width: 40px; height: 47px; }
.enemy-preview.boss { width: 72px; height: 70px; background-size: calc(1254 / 629 * 100%) calc(1254 / 611 * 100%); background-position: calc(11 / (1254 - 629) * 100%) calc(627 / (1254 - 611) * 100%); }
.up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.up-item { border-radius: 10px; overflow: hidden; border: 2px solid #000; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); background: #0c0e15; }
.up-item img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.up-item div { padding: 8px 9px 10px; }
.up-item strong { font: 800 13px var(--body); color: var(--c); }
.up-item p { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.tabs { display: grid; grid-auto-flow: column; gap: 4px; padding: 3px; margin-bottom: 14px; border-radius: 8px; background: #07080d; border: 2px solid var(--edge); }
.tabs button { min-height: 34px; border: 0; border-radius: 5px; background: none; color: var(--muted); font: 800 10px var(--body); letter-spacing: .04em; }
.tabs button[aria-selected="true"] { background: linear-gradient(180deg, #2b3247, #1e2333); color: var(--amber); }
/* sandbox ad */
.adbox { position: fixed; inset: 0 0 auto; width: 100%; height: 100dvh; z-index: 3100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; padding: max(12px, var(--sat)) max(16px, var(--sar)) calc(16px + var(--safe-bottom)) max(16px, var(--sal)); overflow: hidden; background: #05060a; text-align: center; }
.ad-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; min-width: 0; }
.adbox .ad-label { font: 700 11px var(--pixel); letter-spacing: .06em; color: var(--amber); }
.ad-content { align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 420px; max-height: 100%; min-height: 0; padding: 6px 0; overflow: auto; overscroll-behavior: contain; }
.ad-footer { width: 100%; min-width: 0; display: grid; gap: 10px; }
.ad-timer { min-height: 16px; font: 700 11px/1.5 var(--pixel); color: var(--text-2); letter-spacing: .04em; }
.ad-prog { position: relative; width: 100%; height: 8px; border-radius: 2px; overflow: hidden; background: #11141d; border: 2px solid #000; box-shadow: 0 0 0 1px var(--edge); box-sizing: content-box; }
.ad-prog i { display: block; width: 0; max-width: 100%; height: 100%; background: var(--amber); transition: width .1s linear; }
.adbox .ad-art { width: 160px; height: 160px; flex-shrink: 0; display: grid; place-items: center; border: 2px dashed var(--edge-hi); border-radius: 12px; color: var(--dim); font-size: 56px; }
.adbox h3 { margin: 0; font: 700 16px var(--pixel); color: var(--text); }
.adbox p { margin: 0; max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-height: 500px) {
  .adbox { gap: 10px; }
  .ad-content { display: grid; grid-template-columns: auto minmax(0, 300px); gap: 10px 18px; align-content: center; text-align: left; }
  .adbox .ad-art { grid-row: 1 / span 2; width: clamp(56px, 22vh, 96px); height: clamp(56px, 22vh, 96px); font-size: 38px; }
  .adbox h3 { align-self: end; font-size: 13px; }
  .adbox p { align-self: start; font-size: 12px; }
}
/* misc */
.update-banner { position: fixed; left: 50%; top: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 32px)); z-index: 3050; display: grid; gap: 12px; padding: 14px; overflow: auto; overscroll-behavior: contain; background: var(--panel); border: 2px solid var(--edge-hi); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .5); font: 600 13px/1.45 var(--body); text-align: center; }
.update-copy { min-width: 0; }
.update-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.update-actions .btn { width: 100%; min-width: 0; min-height: 42px; }
.toast { position: absolute; left: 16px; right: 16px; width: fit-content; margin: 0 auto; bottom: calc(var(--tabbar) + max(10px, var(--sab)) + 12px); z-index: 70; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(16, 19, 28, .96); border: 1px solid var(--edge-hi); box-shadow: 0 8px 28px rgba(0, 0, 0, .6); font: 800 12px/1.3 var(--body); letter-spacing: .06em; color: var(--text); pointer-events: none; animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.2); }
.toast .px-ic { font-size: 14px; color: var(--amber); }
.toast.good { border-color: rgba(92, 240, 143, .6); } .toast.good .px-ic { color: var(--green); }
/* In a raid, toasts sit at the top of the playfield (below the HUD and boss bar) so they never cover the ship's dodge area. */
.toast.in-play { bottom: auto; top: calc(max(8px, var(--sat)) + 112px); padding: 7px 13px 7px 10px; font-size: 11px; background: rgba(16, 19, 28, .88); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* v3 additions */
.m-reward .dlg-head { justify-content: center; text-align: center; }
.reward-burst { color: var(--rc, var(--amber)); }
.reward-burst .px-ic { color: inherit !important; filter: drop-shadow(0 0 16px color-mix(in srgb, currentColor 80%, transparent)) !important; }
.reward-burst::before { background: repeating-conic-gradient(color-mix(in srgb, var(--rc, var(--amber)) 26%, transparent) 0 10deg, transparent 10deg 20deg) !important; }
.tile .gem-stack.s0 { font-size: 26px; } .tile .gem-stack.s1 { font-size: 32px; } .tile .gem-stack.s2 { font-size: 38px; } .tile .gem-stack.s3 { font-size: 44px; }
.tile .gem-stack .px-ic { filter: drop-shadow(0 0 8px currentColor); }
.gem-tile { padding-top: 18px; }
.t-desc { font-size: 12px; line-height: 1.4; color: var(--muted); min-height: 2.8em; }
.mi-body { min-width: 0; }
.mc-text { min-width: 0; }
.mod-panel { padding: 14px; margin-bottom: 14px; border-color: var(--cyan-deep); background: linear-gradient(180deg, #0f2129, #10131c); }
.mod-name { font: 700 16px var(--pixel); margin: 12px 0 8px; color: var(--cyan); text-shadow: 0 0 12px rgba(78, 230, 255, .5); }
.pilot-panel { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 12px; }
.pilot-panel > div { flex: 1; min-width: 0; display: grid; gap: 8px; }
.pilot-panel small { font-size: 12px; color: var(--muted); }
.pp-row { display: flex; justify-content: space-between; font: 800 13px var(--body); }
.lv-badge.big { width: 56px; height: 56px; } .lv-badge.big b { font-size: 22px; }
.art-ic { display: grid; place-items: center; width: 100%; aspect-ratio: 8 / 5; font-size: 34px; color: var(--c); background: #0b0d14; border-bottom: 2px solid #000; }
.ach-name { display: block; font: 800 13px var(--body); margin-bottom: 4px; }
.ach .m-text { font-size: 12.5px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; }

@keyframes crt-on { 0% { transform: scale(1, .004); filter: brightness(6); } 45% { transform: scale(1, .004); filter: brightness(6); } 70% { transform: scale(1, 1.02); filter: brightness(2); } 100% { transform: none; filter: none; } }
@keyframes crt-off { 0% { transform: none; filter: none; } 60% { transform: scale(1, .006); filter: brightness(5); } 100% { transform: scale(0, .006); filter: brightness(8); } }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }
@keyframes logo-slam { 0% { opacity: 0; transform: scale(1.6); } 70% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes dot-pulse { 50% { transform: scale(.75); opacity: .7; } }
@keyframes start-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes blink-soft { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
@keyframes stars-fall { to { background-position: 0 210px; } }
@keyframes grid-run { to { background-position: 50% 60px; } }
@keyframes glint { 0%, 88%, 100% { filter: none; } 91% { filter: brightness(1.6); } 94% { filter: brightness(1.1); } 96% { filter: brightness(1.45); } }
@keyframes flame { 50% { height: 18px; opacity: .8; } }
@keyframes count-pop { 0% { transform: scale(1.3); } }
@keyframes bump { 40% { transform: scale(1.18); } }
@keyframes pulse-glow { 50% { filter: brightness(1.25); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes line-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.92); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes card-deal { from { opacity: 0; transform: translateY(30px) rotate(-4deg); } }
@keyframes rank-in { from { opacity: 0; transform: scale(2.4) rotate(-14deg); } }
@keyframes banner { 0% { opacity: 0; transform: scale(1.3); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes stripes { to { background-position: 28px 0; } }
@keyframes swipe { 0%, 100% { transform: translateX(-36px); } 50% { transform: translateX(36px); } }
@keyframes hull-hit { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes slot-new { 0% { transform: scale(1.3); filter: brightness(2); } }
@keyframes nova-pulse { 50% { box-shadow: 0 5px 0 #4a0f00, inset 0 3px 0 rgba(255, 220, 200, .45), 0 0 40px rgba(255, 140, 40, .95); } }
@keyframes hue { to { filter: hue-rotate(360deg) drop-shadow(0 0 8px rgba(80, 180, 255, .5)); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
body.reduce-motion .banner.show { animation: banner-static 2.6s both !important; animation-duration: 2.6s !important; }
body.reduce-motion .boot-title { opacity: 1; transform: none; }
@keyframes banner-static { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }

@media (max-height: 760px) and (orientation: portrait) {
  .logo-top { font-size: 40px; } .logo-bot { font-size: 16px; margin-top: 14px; }
  .view-play { gap: 10px; }
  .play-btn { min-height: 66px; } .pb-main { font-size: 24px; }
  .feature-card { min-height: 58px; padding: 8px; } .fc-ic { width: 36px; height: 36px; }
}
@media (max-height: 640px) and (orientation: portrait) { .home-logo .logo-top { font-size: 32px; } .home-logo .logo-bot { font-size: 16px; margin-top: 10px; } .view-play { gap: 8px; } .home-art { min-height: 90px; } }
@media (max-height: 520px) and (orientation: portrait) { .home-logo { display: none; } }
@media (max-width: 360px) {
  .view { --gl: 10px; --gr: 10px; }
  .pilot-info { max-width: 74px; } .pilot-name em { display: none; }
  .cur { padding: 0 7px 0 6px; gap: 4px; }
  .home-cards { gap: 8px; }
  .feature-card { gap: 6px; padding: 7px; }
  .feature-card .fc-ic { width: 28px; height: 32px; font-size: 15px; }
  .fc-title { font-size: 11.5px; }
  .fc-sub { font-size: 11px; }
  .dialog { padding-left: 12px; padding-right: 12px; } .dlg-head { margin-left: -12px; margin-right: -12px; }
  .hud { gap: 4px; padding-left: 8px; padding-right: 8px; } .hud-score strong { font-size: 12px; } .hull { font-size: 10px; }
  .cards { gap: 5px; } .card p { font-size: 10.5px; } .card strong, .card strong.long { font-size: 10px; letter-spacing: 0; }
  .rank { width: 60px; height: 68px; font-size: 32px; } .result-top { gap: 14px; padding: 12px; } .big-score { font-size: 24px; }
  .btn.small { padding: 0 7px; gap: 4px; }
}
@media (min-width: 700px) {
  body { background: radial-gradient(ellipse at 50% 40%, #1a1f2e, #050608 70%); }
  .app { max-width: min(520px, calc(100vh * .6667)); max-width: min(520px, calc(100dvh * .6667)); box-shadow: 0 0 0 2px #000, 0 0 0 6px #1a1e2c, 0 0 100px rgba(255, 150, 40, .12); }
}
@media (orientation: landscape) and (max-height: 600px) {
  .app { max-width: none; }
  .view-play { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto auto; column-gap: 20px; }
  .home-logo { grid-column: 1; grid-row: 1; } .logo-top { font-size: 32px; } .logo-bot { font-size: 16px; margin-top: 12px; }
  .home-art { grid-column: 1; grid-row: 2 / 5; min-height: 0; }
  .home-cards { grid-column: 2; grid-row: 1; align-self: end; }
  .play-row { grid-column: 2; grid-row: 2; align-self: center; }
  .strip { grid-column: 2; grid-row: 3; }
  .tab { height: 50px; } :root { --tabbar: 50px; }
  .dialog { max-width: 560px; }
  .nova { width: 54px; height: 54px; } .nova-ring { -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px); }
}

@media (max-width: 380px), (max-height: 640px) { .boot-log { font-size: 11px; } }

.m-raid .perks { margin-bottom: 16px; }
.m-raid .stats { margin-top: 0; }

@media (max-width: 360px) { .cards[style*="--n:4"] { grid-template-columns: 1fr 1fr; } .cards[style*="--n:4"] .card .art { aspect-ratio: 2 / 1; } }

/* results: the actions stay pinned to the bottom of the panel */
.result .res-actions { position: sticky; bottom: -18px; z-index: 2; margin: 12px -16px -18px; padding: 12px 16px 18px; background: linear-gradient(180deg, rgba(18, 21, 31, 0), #12151f 22%); }
@media (max-height: 720px) {
  .result-title { font-size: 24px; } .result .kicker { margin-bottom: 8px; }
  .result-top { margin-top: 8px; padding: 10px 14px; } .rank { width: 60px; height: 68px; font-size: 32px; } .big-score { font-size: 24px; }
  .stats div { padding: 7px 4px; gap: 4px; } .gain { min-height: 40px; padding: 6px 12px; }
}

.rank.wide { font-size: 28px; }

/* screen + tab transitions */
.view:not([hidden]) { animation: view-in .22s ease-out; }
.play:not([hidden]), .home:not([hidden]) { animation: fade .25s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

.rec.hero small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.adbox .ad-art { border-style: solid; border-color: var(--edge); background: radial-gradient(circle, rgba(78, 230, 255, .08), transparent 70%); color: var(--cyan); }

/* danger: one hull left */
.arena::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; box-shadow: inset 0 0 70px rgba(255, 40, 60, .5); }
.arena.danger::after { opacity: 1; animation: danger-pulse 1.3s ease-in-out infinite; }
@keyframes danger-pulse { 50% { opacity: .45; } }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.95); } }
@keyframes mult-up { 0% { transform: scale(1.9); filter: brightness(2); } 100% { transform: none; } }
/* missions strip */
.strip.hot { border-color: rgba(92, 240, 143, .7); box-shadow: inset 0 0 0 1px rgba(92, 240, 143, .3), 0 0 18px rgba(92, 240, 143, .2); }
.strip.hot .strip-ic { color: var(--green); }
.strip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-side b { color: var(--text); }

/* Touch devices in regular modes ask for portrait; online exemptions are scoped separately. */
.rotate { display: none; position: fixed; inset: 0 0 auto; height: var(--app-height); z-index: 110; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: radial-gradient(ellipse at 50% 45%, #1a1408, #0b0d14 70%); }
.rotate b { font: 700 16px var(--pixel); letter-spacing: .06em; color: var(--amber); text-shadow: 0 2px 0 #6b2c00; }
.rotate > span:last-child { font-size: 13px; color: var(--muted); }
.rotate-phone { width: 34px; height: 58px; border: 3px solid var(--cyan); border-radius: 7px; position: relative; box-shadow: 0 0 16px rgba(78, 230, 255, .4); animation: turn-upright 2.2s ease-in-out infinite; }
.rotate-phone i { position: absolute; left: 50%; bottom: 4px; width: 10px; height: 3px; margin-left: -5px; border-radius: 2px; background: var(--cyan); }
@keyframes turn-upright { 0%, 20% { transform: rotate(-90deg); } 55%, 100% { transform: rotate(0); } }
@media (orientation: landscape) { html.prism-touch .rotate { display: flex; } }

@media (max-height: 500px) {
  .boot-top { min-height: 34px; } .boot-title { gap: 10px; padding-bottom: calc(var(--floor) - 40px); }
  .logo-xl .logo-top { font-size: 40px; } .logo-xl .logo-bot { font-size: 20px; margin-top: 12px; }
  .boot-bottom { min-height: 56px; gap: 6px; margin-top: 4px; } .press-start { font-size: 18px; padding: 6px 16px; }
  .boot-log { font-size: 11px; } .boot-term { top: 50%; gap: 8px; }
}

.g-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.g-chips .chip { padding: 3px 6px; font-size: 11px; }
.confirm-ship { display: grid; place-items: center; height: 110px; margin: -4px 0 14px; border-radius: 10px; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--bc) 30%, transparent), transparent 70%), #0b0d14; border: 2px solid var(--edge-dark); }
.confirm-ship .hull-preview { width: 70px; height: 84px; }

.unlock > .px-ic { width: 36px; font-size: 22px; flex-shrink: 0; color: var(--amber); }

/* larger invisible tap areas for compact buttons (44pt guideline) */
.pause-btn, .dlg-close, .reroll, .cur, #settings { position: relative; }
.pause-btn::after, .dlg-close::after, .reroll::after, #settings::after { content: ''; position: absolute; inset: -6px; }
.tab:active .px-ic { transform: scale(.88); }
.tab .px-ic { transition: transform .1s; }
.pilot-info { max-width: 96px; }

/* Upgrade loss uses the same stepped pixel lettering as the arena effects. */
.toast.upgrade-loss, .toast.upgrade-loss.in-play { border-radius: 3px; border: 2px solid #000; padding: 9px 12px; background: #11141df2; box-shadow: inset 0 0 0 1px #765438, 0 3px 0 #000; color: var(--amber-hi); font: 700 11px/1.45 var(--pixel); letter-spacing: .02em; text-shadow: 0 2px 0 #000; }
.toast.upgrade-loss .px-ic { color: var(--amber); font-size: 16px; }

/* Keep deliberate Start spacing with or without difficulty/perk rows. */
.m-setup #ignite { margin-top: 24px; }



/* Center the selected-difficulty caption above the launch action. */
.m-setup .seg-note { text-align: center; }

/* Portrait tablets use the complete app surface, with roomier existing layouts.
   Keep every phone rule and the desktop cabinet unchanged. */
@media (min-width: 700px) and (orientation: portrait) {
  :root { --tabbar: 72px; }
  body { background: var(--bg); }
  .app { width: 100%; max-width: none; margin: 0; box-shadow: none; }
  .boot-screen { max-width: none; }
  .arena { width: 100%; max-width: none; margin: 0; }
  .play { background: var(--bg); }
  .topbar { gap: 12px; padding: max(18px, var(--sat)) max(28px, var(--sar)) 14px max(28px, var(--sal)); }
  .pilot { gap: 12px; }
  .pilot-info { max-width: 180px; }
  .lv-badge { width: 44px; height: 44px; }
  .wallet { gap: 10px; }
  .cur { height: 44px; padding-left: 12px; padding-right: 14px; font-size: 14px; }
  #settings { width: 48px; height: 48px; }
  .view { --gl: max(clamp(24px, 4vw, 36px), var(--sal)); --gr: max(clamp(24px, 4vw, 36px), var(--sar)); }
  .view-play { gap: 18px; padding-top: 12px; padding-bottom: 22px; }
  .home-logo .logo-top { font-size: 64px; }
  .home-logo .logo-bot { font-size: 30px; margin-top: 20px; }
  .home-art { min-height: 200px; }
  .home-cards { gap: 16px; }
  .feature-card { min-height: 80px; gap: 14px; padding: 16px; }
  .fc-ic { width: 48px; height: 48px; }
  .fc-title { font-size: 15px; }
  .fc-sub { font-size: 14px; }
  .play-btn { min-height: 96px; }
  .pb-main { font-size: 36px; }
  .strip { gap: 14px; padding: 12px; }
  .strip-ic { width: 40px; height: 40px; }
  .tab { gap: 8px; font-size: 12px; }
  .tab .px-ic { font-size: 26px; }
  .view.scroll { padding-bottom: 32px; }
  .page-head h2 { font-size: 30px; }
  .grid2, .grid3 { gap: 16px; }
  .mission, .ach, .meta-item, .supply { gap: 16px; padding: 16px; margin-bottom: 14px; }
  .subtabs button { min-height: 44px; }
  .modal { padding: max(32px, var(--sat)) max(32px, var(--sar)) max(32px, var(--sab)) max(32px, var(--sal)); }
  .dialog { max-width: 660px; padding: 0 24px 24px; }
  .dlg-head { gap: 14px; margin: 0 -24px 22px; padding: 20px 20px 18px 24px; }
  .dialog h2 { font-size: 20px; }
  .dlg-close { width: 44px; height: 44px; }
  .dialog .sub { font-size: 15px; }
  .cards { gap: 12px; }
  .card .cbody { gap: 9px; padding: 12px; }
  .card strong { font-size: 15px; }
  .card strong.long { font-size: 13px; }
  .cards[style*="--n:4"] .card strong { font-size: 13px; }
  .cards[style*="--n:4"] .card strong.long { font-size: 12px; }
  .card p { font-size: 13px; line-height: 1.5; }
  .hud { gap: 12px; padding-left: 24px; padding-right: 24px; }
  .hud-score strong, .hud-wave strong { font-size: 20px; }
  .pause-btn { width: 44px; height: 44px; }
}

/* Missions polish: progress count rides on its bar, rewards sit on one line,
   and both sections open with the same section title. */
.view-missions .page-head + .sec-title.first, .page-head + .sec-title.first { margin-top: 14px; }
.m-track { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-track .seg { flex: 1; min-width: 0; }
.m-track .m-prog { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.mission .m-body, .ach .m-body { gap: 9px; }
.m-rewards { gap: 6px; flex-wrap: wrap; }
.m-rewards .chip { padding: 4px 7px; font-size: 11px; gap: 4px; border-radius: 6px; }
.m-rewards .chip .px-ic { font-size: 11px; }
.mission.done .m-prog { color: var(--green); }
.ach .m-track { gap: 10px; }
.ach .ach-stars { flex: 0 0 auto; }
.ach .m-side .chip { padding: 4px 7px; font-size: 11px; }
@media (min-width: 600px) { .m-rewards .chip { font-size: 12px; padding: 5px 8px; } }
/* A finished mission's CLAIM sits with its rewards (what you are claiming),
   right-aligned; the title and bar keep the full card width. */
.mission.done, .mission.claimed { grid-template-columns: 44px minmax(0, 1fr); }
.m-rewards .m-claim { margin-left: auto; }
.m-rewards .btn.m-claim { min-height: 34px; padding: 0 12px; font-size: 12px; }
.m-rewards .btn.m-claim .px-ic { font-size: 12px; }
.m-rewards .tag.m-claim { display: inline-flex; align-items: center; gap: 4px; }
.m-track .m-claimed { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font: 700 11px var(--pixel); letter-spacing: .06em; }
.m-track .m-claimed .px-ic { font-size: 11px; }
/* Between-raid ad break: same branded sponsor panel, amber instead of cyan. */
.adbox.is-break .ad-art { color: var(--amber); background: radial-gradient(circle, rgba(255, 181, 71, .1), transparent 70%); }
.adbox.is-break .ad-top .btn.small { min-height: 38px; }
/* Settings: reset is still easy to find, but no longer the loudest control on
   the page. Red text on the standard key; the confirm dialog keeps the red button. */
.btn.s-reset { color: #ff8c8c; }
.btn.s-reset .px-ic { color: var(--red); }

.m-install .install-note { max-width: 38ch; margin: 14px auto 16px; text-wrap: balance; }
.trow.requested-tier .tnum { color: var(--amber-hi); box-shadow: inset 0 0 0 1px var(--amber); border-radius: 6px; }

/* Give the launch menu the display's width before a Screen role is chosen. */
@media (min-width:740px) and (min-height:600px) {
  .m-setup { position: fixed; inset: 0; }
  .m-setup .dialog { width: min(92vw,100%); max-width: none; }
  .m-setup .mode-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(9px,1.3vmin,22px); }
  .m-setup .mode-card { min-height: clamp(76px,10vh,148px); padding: clamp(12px,1.7vmin,30px); }
  .m-setup .mode-card strong { font-size: clamp(14px,1.9vmin,32px); }
  .m-setup .mode-card small { font-size: clamp(13px,1.7vmin,28px); }
}
@media (min-width:740px) and (min-height:900px) and (orientation:portrait) {
  .m-setup .mode-card { min-height: clamp(100px, 14vh, 210px); }
}
.deal-contents { font: 600 12px/1.35 var(--body); color: var(--text); text-wrap: balance; }
.tile .deal-contents + .was { margin-top: auto; }
.supply .supply-limit { text-align: center; max-width: 10ch; }
.set-row .setting-value { margin-top: 2px; color: var(--amber-hi); font-weight: 700; font-variant-numeric: tabular-nums; }

.daily-clear-gain { grid-template-columns: 24px minmax(0, 1fr); row-gap: 3px; }
.daily-clear-gain small { grid-column: 2; line-height: 1.4; }
.result-countdown-label { display: block; margin-top: 12px; color: var(--muted); font: 700 10px/1.4 var(--body); letter-spacing: .12em; }
.workshop-wallet { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 12px 4px 4px; line-height: 18px; }
.workshop-wallet .px-ic { font-size: 12px; color: var(--cyan); }
.workshop-wallet strong { font: 700 13px/18px var(--pixel); color: var(--text); }
.meta-item .btn.small { min-width: 76px; min-height: 44px; }
.workshop-level { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 7px; font: 600 11px var(--body); color: var(--muted); }
.workshop-level .pips { margin: 0; }
.dialog .gain .result-mission { width: auto; min-height: 40px; padding-inline: 10px; }

/* AdSense display unit inside #adbox .ad-content */
.adbox .ad-content.has-network .ad-network { width: 100%; min-width: 0; min-height: 120px; overflow: hidden; display: block; }
.adbox .ad-content.has-network .ad-network ins.adsbygoogle { width: 100%; }
@media (orientation: landscape) and (max-height: 560px) { .adbox .ad-content.has-network { display: flex; flex-direction: column; text-align: center; } }