/* StreetSmash UI — toy-brick cartoon style. Owned by UI agent. */
:root {
  --ink: #1b1840;            /* outlines and shadows */
  --ink-soft: rgba(27, 24, 64, .55);
  --paper: #ffffff;
  --paper-2: #eef1fb;
  --paper-3: #cfd6ee;
  --text: #1b1840;
  --text-muted: #5d6290;

  --red: #ff4a3d;   --red-dk: #c4251c;
  --blue: #2f8cff;  --blue-dk: #1a5bc7;
  --yellow: #ffcc2e; --yellow-dk: #e08d00;
  --green: #3fd15c; --green-dk: #1f9a3a;
  --purple: #8a5cff; --purple-dk: #5a33c9;
  --orange: #ff8a1f; --orange-dk: #d35a00;
  --grey: #a8aec8;  --grey-dk: #727896;
  --gold: #ffd43b;  --gold-dk: #f09a00;

  --bg-1: #3b2c86; --bg-2: #2a1f5c; --bg-3: #ff7a59;

  --font-display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --gutter: 16px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --tap: 52px;
}

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg-2); color: var(--text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body { touch-action: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; }
#ui * { box-sizing: border-box; }
#ui button, #ui a, #ui [data-interactive] { pointer-events: auto; }

/* ---------- loading screen ---------- */
#loading {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(120% 80% at 50% 20%, var(--bg-1), var(--bg-2) 70%);
  transition: opacity .35s ease, visibility .35s;
  font-family: var(--font-body); color: #fff;
}
#loading.out { opacity: 0; visibility: hidden; }
.ld-logo { display: flex; flex-direction: column; align-items: center; line-height: .86; font-family: var(--font-display); transform: rotate(-4deg); }
.ld-logo span { font-size: 56px; letter-spacing: 1px; }
.ld-a { color: var(--yellow); }
.ld-b { color: var(--red); font-size: 68px !important; }
.ld-logo span { text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 8px 0 var(--ink); }
.ld-bricks { display: flex; gap: 8px; }
.ld-bricks i { width: 26px; height: 18px; border-radius: 4px; background: var(--red); box-shadow: inset 0 -4px 0 var(--red-dk), 0 0 0 3px var(--ink); position: relative; animation: ld-hop .9s ease-in-out infinite; }
.ld-bricks i::before, .ld-bricks i::after { content: ''; position: absolute; top: -7px; width: 8px; height: 6px; border-radius: 3px 3px 0 0; background: inherit; box-shadow: 0 0 0 3px var(--ink); clip-path: inset(-4px -4px 0 -4px); }
.ld-bricks i::before { left: 3px; } .ld-bricks i::after { right: 3px; }
.ld-bricks i:nth-child(2) { background: var(--yellow); box-shadow: inset 0 -4px 0 var(--yellow-dk), 0 0 0 3px var(--ink); animation-delay: .12s; }
.ld-bricks i:nth-child(3) { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-dk), 0 0 0 3px var(--ink); animation-delay: .24s; }
.ld-bricks i:nth-child(4) { background: var(--green); box-shadow: inset 0 -4px 0 var(--green-dk), 0 0 0 3px var(--ink); animation-delay: .36s; }
@keyframes ld-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
.ld-text { font-weight: 800; font-size: 16px; opacity: .85; text-align: center; padding: 0 24px; }

/* ---------- shared primitives ---------- */
.ss-screen { position: absolute; inset: 0; }
.ss-out { font-family: var(--font-display); color: #fff; letter-spacing: .5px;
  text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink),
    1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 4px 0 var(--ink); }
.ss-out-lg { text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink),
    2.2px 2.2px 0 var(--ink), -2.2px 2.2px 0 var(--ink), 2.2px -2.2px 0 var(--ink), -2.2px -2.2px 0 var(--ink), 0 7px 0 var(--ink); }

.ss-btn {
  --c: var(--yellow); --cd: var(--yellow-dk); --fg: #fff;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  position: relative; min-height: var(--tap); min-width: var(--tap);
  padding: 8px 20px 12px; border: 3px solid var(--ink); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0 42%, rgba(255,255,255,0) 42%) , var(--c);
  box-shadow: inset 0 -7px 0 var(--cd), 0 5px 0 var(--ink);
  font-family: var(--font-display); font-size: 20px; letter-spacing: .5px; color: var(--fg);
  text-shadow: 0 2px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink), 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.ss-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 -4px 0 var(--cd), 0 1px 0 var(--ink); }
.ss-btn:focus { outline: none; }
.ss-btn:focus-visible, .ss-plain:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: inset 0 -7px 0 var(--cd), 0 5px 0 var(--ink), 0 0 0 9px var(--blue); }
.ss-btn:disabled { cursor: default; }
.ss-btn svg { flex: none; filter: drop-shadow(0 2px 0 var(--ink)); }
.ss-btn.red { --c: var(--red); --cd: var(--red-dk); }
.ss-btn.blue { --c: var(--blue); --cd: var(--blue-dk); }
.ss-btn.green { --c: var(--green); --cd: var(--green-dk); }
.ss-btn.purple { --c: var(--purple); --cd: var(--purple-dk); }
.ss-btn.white { --c: #fff; --cd: var(--paper-3); --fg: var(--ink); text-shadow: none; }
.ss-btn.white svg { filter: none; }
.ss-btn.grey { --c: var(--grey); --cd: var(--grey-dk); }
.ss-btn.sq { padding: 0; width: var(--tap); height: var(--tap); border-radius: 14px; }
.ss-btn.round { padding: 0; width: var(--tap); height: var(--tap); border-radius: 50%; }
.ss-btn.big { font-size: 30px; min-height: 68px; padding: 10px 28px 16px; border-radius: 20px; }
.ss-plain { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.ss-plain:focus { outline: none; }

.ss-panel {
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: inset 0 -8px 0 var(--paper-3), 0 6px 0 var(--ink);
  color: var(--text);
}
.ss-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 5px; border-radius: 999px; border: 3px solid var(--ink);
  background: var(--ink); color: #fff; font: 800 13px/1.1 var(--font-body); letter-spacing: .3px; text-transform: uppercase; }

.ss-star { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; }
.ss-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- menu ---------- */
.ss-menu {
  pointer-events: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08) 0 2px, transparent 3px) 0 0/34px 34px,
    radial-gradient(120% 70% at 50% 0%, #5a45c9 0%, var(--bg-1) 40%, var(--bg-2) 100%);
  padding: calc(var(--sat) + 12px) calc(var(--sar) + var(--gutter)) calc(var(--sab) + 28px) calc(var(--sal) + var(--gutter));
}
.ss-menu-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.ss-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.ss-starpill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px;
  background: rgba(10, 8, 40, .55); border: 3px solid var(--ink); color: #fff; font: 22px/1 var(--font-display); }
.ss-starpill .ss-star { width: 28px; height: 28px; }
.ss-starpill small { font: 800 13px var(--font-body); opacity: .7; }

/* logo */
.ss-logo { position: relative; display: flex; flex-direction: column; align-items: center; margin: 4px auto 6px; transform: rotate(-3deg); }
.ss-logo-word { font-family: var(--font-display); line-height: .82; letter-spacing: 1px; display: flex; }
.ss-logo-word span { display: inline-block; position: relative; }
.ss-logo-a { font-size: clamp(54px, 17vw, 84px); color: var(--yellow); }
.ss-logo-b { font-size: clamp(66px, 21vw, 104px); color: var(--red); margin-top: -4px; }
.ss-logo-word span {
  text-shadow: 0 4px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink),
    3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
    0 10px 0 var(--ink), 4px 10px 0 var(--ink), -4px 10px 0 var(--ink);
}
.ss-logo-a span:nth-child(odd) { transform: translateY(-2px) rotate(-2deg); }
.ss-logo-a span:nth-child(even) { transform: translateY(2px) rotate(2deg); }
.ss-logo-b span:nth-child(1) { transform: rotate(-6deg) translateY(2px); }
.ss-logo-b span:nth-child(2) { transform: rotate(3deg) translateY(-3px); }
.ss-logo-b span:nth-child(3) { transform: rotate(-2deg) translateY(4px); }
.ss-logo-b span:nth-child(4) { transform: rotate(5deg) translateY(-1px); }
.ss-logo-b span:nth-child(5) { transform: rotate(-4deg) translateY(3px); }
.ss-logo-bricks { position: absolute; inset: 0; pointer-events: none; }
.ss-logo-bricks i { position: absolute; width: 22px; height: 14px; border-radius: 3px; border: 3px solid var(--ink); }
.ss-logo-bricks i::after { content: ''; position: absolute; left: 3px; top: -8px; width: 10px; height: 6px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; background: inherit; }
.ss-logo-tag { margin-top: 14px; font: 800 13px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: #fff; opacity: .8; transform: rotate(3deg); }

.ss-section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px -6px; }
.ss-section-h h2 { margin: 0; font-size: 22px; font-weight: normal; }
.ss-section-h span { font: 800 13px var(--font-body); color: #fff; opacity: .7; }

/* daily card */
.ss-daily { --c: var(--purple); --cd: var(--purple-dk); position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 14px 18px; border-radius: var(--r-lg); border: 3px solid var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0 46%, transparent 46%), linear-gradient(110deg, #ff7a59, #ff4fa0 55%, #8a5cff);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.22), 0 6px 0 var(--ink); color: #fff; overflow: hidden; }
.ss-daily:active { transform: translateY(3px); box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), 0 3px 0 var(--ink); }
.ss-daily:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.ss-daily-cal { flex: none; width: 64px; height: 68px; border-radius: 14px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink); text-align: center; }
.ss-daily-cal b { display: block; background: var(--red); color: #fff; font: 800 11px/20px var(--font-body); letter-spacing: 1px; border-bottom: 3px solid var(--ink); }
.ss-daily-cal span { flex: 1; display: flex; align-items: center; justify-content: center; font: 30px/1 var(--font-display); }
.ss-daily-body { flex: 1; min-width: 0; text-align: left; }
.ss-daily-body .t { font-size: 24px; line-height: 1; display: block; }
.ss-daily-body .s { display: block; margin-top: 4px; font: 800 14px/1.25 var(--font-body); opacity: .95; }
.ss-daily-cta { flex: none; }
.ss-daily-cta .ss-btn { pointer-events: none; min-height: 46px; padding: 6px 16px 10px; font-size: 18px; }
.ss-daily-stars { display: flex; gap: 2px; font-size: 26px; }
.ss-daily .shine { position: absolute; top: -40%; left: -30%; width: 30%; height: 180%; background: rgba(255,255,255,.25); transform: rotate(20deg); animation: ss-shine 3.6s ease-in-out infinite; }
@keyframes ss-shine { 0%, 60% { left: -30%; } 100% { left: 130%; } }

/* city cards */
.ss-cities { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .ss-cities { grid-template-columns: 1fr 1fr; } }
.ss-city { position: relative; width: 100%; display: block; border-radius: var(--r-lg); border: 3px solid var(--ink); overflow: hidden;
  background: var(--paper); box-shadow: inset 0 -8px 0 var(--paper-3), 0 6px 0 var(--ink); text-align: left; color: var(--text); }
.ss-city:not(:disabled):active { transform: translateY(3px); box-shadow: inset 0 -5px 0 var(--paper-3), 0 3px 0 var(--ink); }
.ss-city:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.ss-city-art { position: relative; height: 104px; border-bottom: 3px solid var(--ink); overflow: hidden; }
.ss-city-art svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.ss-city-name { position: absolute; left: 14px; bottom: 10px; font-size: 32px; line-height: 1; }
.ss-city-flag { position: absolute; right: 12px; top: 10px; }
.ss-city-body { display: flex; align-items: center; gap: 12px; padding: 10px 14px 16px; }
.ss-city-prog { flex: 1; min-width: 0; }
.ss-city-prog .lbl { display: flex; justify-content: space-between; font: 800 14px var(--font-body); color: var(--text-muted); margin-bottom: 6px; }
.ss-city-prog .lbl b { color: var(--text); font-weight: 900; }
.ss-bar { height: 16px; border-radius: 999px; background: var(--paper-2); border: 3px solid var(--ink); overflow: hidden; }
.ss-bar i { display: block; height: 100%; background: linear-gradient(180deg, #ffe680 0 40%, var(--yellow) 40%); border-right: 3px solid var(--ink); }
.ss-bar i[style*="width: 0"] { border-right: 0; }
.ss-city-go { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--green); border: 3px solid var(--ink); box-shadow: inset 0 -5px 0 var(--green-dk), 0 4px 0 var(--ink); }
.ss-city.locked { cursor: default; }
.ss-city.locked .ss-city-art { filter: grayscale(1) brightness(.75); }
.ss-city.locked .ss-city-go { background: var(--grey); box-shadow: inset 0 -5px 0 var(--grey-dk), 0 4px 0 var(--ink); }
.ss-city-lockmsg { font: 800 14px/1.3 var(--font-body); color: var(--text-muted); }
.ss-city-lockmsg b { color: var(--text); }
.ss-lockbadge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); display: flex; align-items: center; justify-content: center; border: 3px solid #fff; }

/* level grid */
.ss-cityhead { display: flex; align-items: center; gap: 12px; }
.ss-cityhead h1 { margin: 0; font-size: 34px; font-weight: normal; line-height: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 560px) { .ss-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ss-lvl { position: relative; aspect-ratio: 1 / 1.08; border-radius: 18px; border: 3px solid var(--ink); width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0 45%, transparent 45%), var(--c, var(--yellow));
  box-shadow: inset 0 -7px 0 var(--cd, var(--yellow-dk)), 0 5px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-bottom: 6px; }
.ss-lvl:not(:disabled):active { transform: translateY(3px); box-shadow: inset 0 -4px 0 var(--cd, var(--yellow-dk)), 0 2px 0 var(--ink); }
.ss-lvl:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.ss-lvl .n { font-size: clamp(26px, 8vw, 36px); line-height: 1; }
.ss-lvl .st { display: flex; gap: 1px; font-size: clamp(14px, 4.2vw, 18px); }
.ss-lvl.done { --c: var(--green); --cd: var(--green-dk); }
.ss-lvl.next { --c: var(--yellow); --cd: var(--yellow-dk); animation: ss-bob 1.6s ease-in-out infinite; }
.ss-lvl.locked { --c: #6c6aa3; --cd: #4b4882; cursor: default; }
.ss-lvl.locked .n { opacity: .0; }
.ss-lvl .lk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 6px; }
@keyframes ss-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ss-hint { text-align: center; color: #fff; opacity: .75; font: 800 14px var(--font-body); margin: 4px 0 0; }

/* ---------- intro ---------- */
.ss-intro { pointer-events: auto; display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(180deg, rgba(20,16,60,0) 30%, rgba(20,16,60,.55) 100%);
  padding: calc(var(--sat) + 16px) calc(var(--sar) + var(--gutter)) calc(var(--sab) + 24px) calc(var(--sal) + var(--gutter)); }
.ss-intro-card { position: relative; width: 100%; max-width: 440px; padding: 34px 20px 22px; text-align: center; animation: ss-rise .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ss-intro-ribbon { position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%); white-space: nowrap; }
.ss-ribbon { display: inline-block; padding: 7px 22px 9px; background: var(--red); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: inset 0 -5px 0 var(--red-dk), 0 4px 0 var(--ink); font-size: 18px; }
.ss-intro-city { font: 900 13px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.ss-intro h1 { margin: 2px 0 8px; font: 40px/1 var(--font-display); color: var(--ink); letter-spacing: .5px; overflow-wrap: anywhere; }
.ss-intro p.brief { margin: 0 auto 16px; max-width: 34ch; font: 700 17px/1.35 var(--font-body); color: var(--text); }
.ss-intro-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ss-stat { background: var(--paper-2); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 4px 8px; box-shadow: inset 0 -4px 0 var(--paper-3); }
.ss-stat b { display: block; font: 30px/1 var(--font-display); color: var(--ink); }
.ss-stat span { display: block; margin-top: 3px; font: 900 11px var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.ss-legend { display: flex; justify-content: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 18px; font: 800 14px var(--font-body); color: var(--text); }
.ss-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ss-dot { width: 18px; height: 18px; border-radius: 5px; border: 3px solid var(--ink); display: inline-block; }
.ss-intro .ss-btn.big { width: 100%; }
/* CALM: star goals as three plain rows + the one way to fail */
.ss-goalrows { list-style: none; margin: 10px 0 10px; padding: 0; display: grid; gap: 7px; text-align: left; }
.ss-goalrows li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 9px 10px; border-radius: 14px; background: var(--paper-2);
  border: 3px solid var(--ink); font: 800 16px/1.2 var(--font-body); color: var(--ink); }
.ss-goalrows .sg { flex: none; width: 66px; display: inline-flex; gap: 1px; }
.ss-goalrows .gt b { font-weight: 900; }
.ss-goalrows .gt b.r { color: #fff; background: var(--red); border-radius: 6px; padding: 0 5px 1px; box-shadow: 0 0 0 2px var(--ink); }
.ss-failline { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 6px; font: 800 16px/1.2 var(--font-body); color: var(--ink); }
.ss-failline b { color: #fff; background: var(--blue); border-radius: 6px; padding: 0 5px 1px; box-shadow: 0 0 0 2px var(--ink); font-weight: 900; }
@media (max-width: 400px) {
  .ss-goalrows li { font-size: 15px; gap: 8px; padding: 7px 10px 8px 8px; }
  .ss-goalrows .sg { width: 56px; } .ss-goalrows .sg svg { width: 18px !important; height: 18px !important; }
  .ss-intro h1 { font-size: 34px; }
}
.ss-intro-shots { margin: 0 0 14px; font: 800 13px var(--font-body); color: var(--text-muted); letter-spacing: .3px; }
.ss-intro-pulse { animation: ss-pulse 1.4s ease-in-out infinite; }
@keyframes ss-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ss-rise { from { transform: translateY(60px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- HUD ---------- */
/* HUD (feedback 2026-10-08): one menu button + one compact card on top, a small damage pill that shows only
   while the figure changes (left, under the card), the wind pill docks on the right (src/wind). Nothing overlaps;
   floating world labels are placed by src/ui/layout.js between the top bar and the weapon bar. */
.ss-hud { pointer-events: none; }
.ss-hud-top { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; max-width: 100%;
  padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px); }
.ss-menu-btn.ss-btn.sq { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 13px; border-width: 2.5px;
  box-shadow: inset 0 -5px 0 var(--cd), 0 3px 0 var(--ink); flex: none; }
.ss-menu-btn .recdot { position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2.5px solid var(--ink); display: none; }
.ss-menu-btn.rec .recdot { display: block; animation: ss-recblink 1.2s ease-in-out infinite; }
@keyframes ss-recblink { 50% { opacity: .35; } }
.ss-hudcard { flex: 0 1 auto; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 6px;
  background: rgba(255,255,255,.96); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: inset 0 -4px 0 var(--paper-3), 0 3px 0 var(--ink); }
.ss-tgt { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 3px; border-radius: 999px; background: var(--red);
  border: 2.5px solid var(--ink); color: #fff; font: 17px/1 var(--font-display); box-shadow: inset 0 -3px 0 var(--red-dk); font-variant-numeric: tabular-nums; }
.ss-tgt .ic { display: flex; }
.ss-tgt.clear { background: var(--green); box-shadow: inset 0 -3px 0 var(--green-dk); }
.ss-tgt.bump { animation: ss-bump .45s ease; }
.ss-pips { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 3px; height: 28px; }
.ss-pip { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2.5px solid var(--ink);
  background: radial-gradient(circle at 35% 32%, #8b8fb3 0 18%, #3a3d5c 20% 100%); transition: transform .25s, opacity .25s; }
.ss-pip.used { background: transparent; border-color: rgba(27,24,64,.25); border-style: dashed; transform: scale(.82); }
.ss-pip.spend { animation: ss-spend .45s ease forwards; }
.ss-pips-num { font: 17px/1 var(--font-display); color: var(--ink); margin-left: 3px; }
.ss-pips.low .ss-pip:not(.used) { background: radial-gradient(circle at 35% 32%, #ffb3ad 0 18%, var(--red) 20% 100%); }
@keyframes ss-spend { 0% { transform: scale(1.3); } 100% { transform: scale(.82); } }
@keyframes ss-bump { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-6deg); } 100% { transform: scale(1); } }
/* live star goals: three tiny stars; a lost star turns grey */
.ss-hud-stars { flex: none; display: flex; gap: 1px; padding-left: 8px; border-left: 2px solid var(--paper-3); }
.ss-hs { display: flex; transition: opacity .25s; }
.ss-hs .ic { height: 17px; line-height: 0; }
.ss-hs.lost { opacity: .55; }
.ss-hs.bump { animation: ss-bump .45s ease; }

/* damage: shows while it changes, then steps aside */
.ss-dmgpill { position: absolute; left: calc(var(--sal) + 12px); top: calc(var(--ss-hud-top, 52px) + 8px); height: 32px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; border-radius: 999px; background: rgba(20,16,60,.78); border: 2.5px solid var(--ink); white-space: nowrap;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.ss-dmgpill.on { opacity: 1; transform: none; }
.ss-dmg-v { font: 17px/1 var(--font-display); color: var(--yellow); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.ss-dmg-v small { font-size: .8em; color: #fff; margin-right: 1px; }
.ss-dmg-d { font: 900 12px/1 var(--font-body); color: #7dff8f; font-variant-numeric: tabular-nums; }
.ss-dmg-d:empty { display: none; }

/* pause sheet */
.ss-sheet-wrap { position: absolute; inset: 0; z-index: 20; pointer-events: auto; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px); }
.ss-sheet-bg { position: absolute; inset: 0; background: rgba(20,16,50,.55); animation: ss-fadein .18s ease both; }
.ss-sheet { position: relative; width: 100%; max-width: 420px; padding: 14px 14px 12px; display: grid; gap: 12px; animation: ss-sheetin .22s cubic-bezier(.2, .9, .3, 1) both; }
.ss-sheet-wrap.out .ss-sheet { animation: ss-sheetout .18s ease-in forwards; }
.ss-sheet-wrap.out .ss-sheet-bg { animation: ss-fadeout .18s ease-in forwards; }
.ss-sheet-h { font: 22px/1 var(--font-display); color: var(--ink); text-align: center; letter-spacing: .5px; }
.ss-sheet .ss-btn.big { width: 100%; min-height: 56px; font-size: 24px; }
.ss-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-sheet-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border-radius: 14px; background: var(--paper-2);
  border: 2.5px solid var(--ink); box-shadow: inset 0 -4px 0 var(--paper-3); color: var(--ink); font: 800 16px/1.1 var(--font-body); }
.ss-sheet-row .ic { display: flex; flex: none; }
.ss-sheet-row:active { transform: translateY(2px); }
.ss-sheet-row:focus-visible, .ss-sheet-home:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ss-sheet-row.rec { background: #ffe3e0; }
.ss-sheet-home { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 2px; color: var(--text-muted); font: 800 15px var(--font-body); }
@keyframes ss-sheetin { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ss-sheetout { to { transform: translateY(40px); opacity: 0; } }
@keyframes ss-fadein { from { opacity: 0; } }
@keyframes ss-fadeout { to { opacity: 0; } }

.ss-hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
  padding: 0 calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px); }
.ss-weapons { display: flex; gap: 8px; padding: 9px 8px 7px; border-radius: 24px; background: rgba(20, 16, 60, .55); border: 3px solid var(--ink);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ss-weapons::-webkit-scrollbar { display: none; }
/* lead: the bar must scroll sideways when weapons overflow (body has touch-action:none for the 3D view) */
.ss-weapons { touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.ss-weapons > .ss-wpn { flex-shrink: 0; scroll-snap-align: start; touch-action: pan-x; }
.ss-weapons.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.ss-weapons.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.ss-weapons.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.ss-wpn { --c: #fff; --cd: var(--paper-3); position: relative; flex: 0 1 76px; min-width: 64px; height: 74px; border-radius: 18px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0 44%, transparent 44%), var(--c);
  box-shadow: inset 0 -6px 0 var(--cd), 0 4px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 2px 9px; color: var(--ink);
  transition: transform .12s ease; }
.ss-wpn .ic { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; }
.ss-wpn .ic svg { width: 32px; height: 32px; }
.ss-wpn .nm { font: 900 10.5px/1.05 var(--font-body); text-transform: uppercase; letter-spacing: .1px; text-align: center; max-width: 100%; min-height: 2.1em; display: flex; align-items: center; justify-content: center; padding: 0 3px; overflow: hidden; }
.ss-wpn.sel { --c: var(--yellow); --cd: var(--yellow-dk); transform: translateY(-6px); box-shadow: inset 0 -6px 0 var(--cd), 0 6px 0 var(--ink), 0 0 0 3px #fff, 0 6px 0 3px #fff; }
.ss-wpn:not(:disabled):active { transform: translateY(2px); }
.ss-wpn:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.ss-wpn.locked { --c: #8d8bb8; --cd: #6a6896; cursor: default; }
.ss-wpn.locked .ic { filter: grayscale(1) brightness(.6); opacity: .55; }
.ss-wpn.locked .nm { color: rgba(27,24,64,.6); }
.ss-wpn .lk { position: absolute; right: -6px; top: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }

/* ---------- toasts ---------- */
/* CALM: one toast at a time, low on the screen (above the weapon bar), never over the action */
.ss-toasts { position: absolute; left: 0; right: 0; bottom: calc(var(--ss-hud-bottom, 120px) + 10px); transition: bottom .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 5; padding: 0 16px; }
.ss-toast { pointer-events: none; text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 6px 8px;
  font-size: 30px; line-height: 1.05; color: var(--yellow); animation: ss-toastin .45s cubic-bezier(.2, 1.9, .35, 1) both; transform-origin: 50% 70%; }
.ss-toast.good { color: var(--yellow); }
.ss-toast.bad { color: var(--red); }
.ss-toast.info { color: #fff; font-size: 22px; }
.ss-toast.small { font-size: 24px; }
/* CALM: the big moment (TARGET DOWN!): centred, nothing on top of it */
.ss-banner-layer { position: absolute; left: 0; right: 0; top: 38%; display: flex; justify-content: center; z-index: 6; pointer-events: none; padding: 0 12px; }
.ss-banner { font-size: 54px; line-height: 1; color: var(--yellow); white-space: nowrap; text-align: center;
  animation: ss-bannerin .35s cubic-bezier(.2, 1.8, .35, 1) both; }
.ss-banner.bad { color: var(--red); }
.ss-banner.out { animation: ss-bannerout .25s ease-in forwards; }
@keyframes ss-bannerin { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ss-bannerout { to { opacity: 0; transform: scale(1.12); } }
@media (max-width: 380px) { .ss-banner { font-size: 44px; } }
/* CALM: while a focus moment plays (action cam, replay, intro card, banner) floating labels step aside */
html.ss-focus .wd, html.ss-focus .hp-layer, html.ss-focus .sz-layer, html.ss-focus .ss-safety-hint, html.ss-focus .ss-dmgpill { opacity: 0 !important; transition: opacity .15s; }
/* HUD: during big moments (action cam, replay, TARGET DOWN, pause sheet) only the top card stays */
html.ss-focus .ss-hud-bottom, html.ss-focus .ss-menu-btn { opacity: 0; pointer-events: none; transition: opacity .15s; }
html.ss-focus .ss-hud-bottom *, html.ss-focus .ss-menu-btn * { pointer-events: none !important; }
html:has(.ss-sheet-wrap) .ss-toasts { opacity: 0; }
/* the aim hint and toasts share the slot above the weapon bar: a toast steps up while the hint shows */
html.ss-hint-on .ss-toasts { bottom: calc(var(--ss-hud-bottom, 120px) + 56px); }
/* the onboarding '2 fingers to turn' chip sits in the same slot: hint and toasts step up above it */
html:has(.ob-chip) .ss-safety-hint { bottom: calc(var(--ss-hud-bottom, 120px) + 64px) !important; }
html:has(.ob-chip) .ss-toasts { bottom: calc(var(--ss-hud-bottom, 120px) + 64px); }
html.ss-hint-on:has(.ob-chip) .ss-toasts { bottom: calc(var(--ss-hud-bottom, 120px) + 110px); }
/* world labels only while a job is being played (not on the menu or under the result card) */
html:not(.ss-hud-on) .sz-layer, html.ss-result-on .sz-layer, html:not(.ss-hud-on) .ss-safety-hint, html.ss-result-on .ss-safety-hint { display: none !important; }
html.ss-focus .tut-layer { visibility: hidden !important; }
html.ss-focus .ob-chip { opacity: 0 !important; transition: opacity .15s; }
.ss-toast.out { animation: ss-toastout .35s ease-in forwards; }
@keyframes ss-toastin { 0% { opacity: 0; transform: scale(.2) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.15) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(-2deg); } }
@keyframes ss-toastout { to { opacity: 0; transform: translateY(-24px) scale(.8) rotate(-2deg); } }

/* ---------- result ---------- */
.ss-result { pointer-events: auto; display: flex; align-items: center; justify-content: center; overflow-y: auto; touch-action: pan-y;
  background: radial-gradient(90% 60% at 50% 40%, rgba(42,31,92,.55), rgba(20,16,50,.88));
  padding: calc(var(--sat) + 40px) calc(var(--sar) + var(--gutter)) calc(var(--sab) + 20px) calc(var(--sal) + var(--gutter)); }
.ss-result.fail { background: radial-gradient(90% 60% at 50% 40%, rgba(92,24,40,.5), rgba(30,10,24,.9)); }
.ss-rays { position: absolute; left: 50%; top: 32%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; opacity: .22;
  background: repeating-conic-gradient(from 0deg, #fff 0 9deg, transparent 9deg 24deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 62%); mask: radial-gradient(circle, #000 0 20%, transparent 62%); animation: ss-spin 30s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-result-card { position: relative; width: 100%; max-width: 420px; padding: 18px 18px 20px; text-align: center; margin: auto 0; animation: ss-rise .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ss-result-head { position: relative; margin: -60px auto 4px; font-size: 48px; line-height: 1; white-space: nowrap; }
.ss-result.win .ss-result-head { color: var(--yellow); }
.ss-result.fail .ss-result-head { color: var(--red); }
.ss-result-sub { font: 900 13px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.ss-result-reason { margin: 8px auto 4px; max-width: 32ch; font: 800 16px/1.3 var(--font-body); color: var(--red-dk); }
.ss-result-missed { margin: 0 auto 12px; max-width: 34ch; font: 800 15px/1.35 var(--font-body); color: var(--ink); }
.ss-result-missed .ms { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.ss-result.ss-replaying { background: none; pointer-events: none; }
.ss-result.ss-replaying > * { visibility: hidden; }
.ss-root:has(.ss-replaying) .ss-hud { visibility: hidden; }
.ss-bigstars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: 8px 0 10px; height: 96px; }
.ss-bigstar { position: relative; width: 82px; height: 82px; }
.ss-bigstar:nth-child(2) { width: 96px; height: 96px; margin-bottom: 10px; }
.ss-bigstar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-bigstar .fill { opacity: 0; transform: scale(2.4) rotate(-40deg); }
.ss-bigstar.on .fill { animation: ss-starin .5s cubic-bezier(.25, 1.7, .45, 1) forwards; }
.ss-bigstar.on::after { content: ''; position: absolute; inset: -20%; border-radius: 50%; border: 4px solid var(--yellow); animation: ss-ring .55s ease-out forwards; }
@keyframes ss-starin { 0% { opacity: 0; transform: scale(2.4) rotate(-40deg); } 60% { opacity: 1; transform: scale(.9) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ss-ring { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }
.ss-goals { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; text-align: left; }
.ss-goals li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--paper-2); border: 3px solid var(--ink); font: 800 15px/1.2 var(--font-body); }
.ss-goals li .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; background: #fff; }
.ss-goals li.ok .ck { background: var(--green); }
.ss-goals li.no .ck { background: var(--paper-3); }
.ss-goals li .v { margin-left: auto; font: 18px/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.ss-goals li.no { color: var(--text-muted); }
.ss-dmgbox { margin: 0 0 14px; padding: 8px 10px 12px; border-radius: 16px; background: var(--ink); color: #fff; }
.ss-dmgbox span { display: block; font: 900 11px var(--font-body); letter-spacing: 2px; opacity: .7; }
.ss-dmgbox b { display: block; font: 38px/1.05 var(--font-display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.ss-result-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.ss-result-btns .wide { grid-column: 1 / -1; }
.ss-result-btns .ss-btn { width: 100%; }
.ss-result-btns.four .ss-btn:not(.big) { min-width: 0; padding-left: 8px; padding-right: 8px; }

/* ---------- loading overlay inside UI ---------- */
.ss-busy { pointer-events: auto; display: flex; align-items: center; justify-content: center; background: rgba(20,16,50,.6); }
.ss-busy .ld-bricks { transform: scale(.9); }
.ss-busy-t { margin-top: 18px; font-size: 22px; text-align: center; }

/* ---------- landscape / desktop ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .ss-toasts { bottom: calc(var(--sab) + 120px); }
  .ss-intro { align-items: flex-start; overflow-y: auto; touch-action: pan-y; padding-top: calc(var(--sat) + 26px); padding-bottom: calc(var(--sab) + 12px); }
  .ss-intro-card { max-width: 620px; padding: 22px 18px 16px; margin: auto; }
  .ss-intro h1 { font-size: 30px; margin-bottom: 4px; }
  .ss-intro p.brief { font-size: 15px; margin-bottom: 10px; max-width: 52ch; }
  .ss-intro-stats { margin-bottom: 8px; } .ss-stat b { font-size: 24px; }
  .ss-legend { margin-bottom: 10px; }
  .ss-intro .ss-btn.big { min-height: 56px; font-size: 26px; }
  .ss-result { align-items: flex-start; padding-top: calc(var(--sat) + 52px); }
  .ss-result-card { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }
  .ss-result-head, .ss-result-sub { grid-column: 1 / -1; }
  .ss-result-head { font-size: 40px; margin-top: -50px; }
  .ss-bigstars, .ss-result-reason, .ss-goals, .ss-result-missed { grid-column: 1; }
  .ss-dmgbox, .ss-result-btns { grid-column: 2; }
  .ss-dmgbox { grid-row: 3; } .ss-result-btns { grid-row: 4 / span 2; }
  .ss-goals { margin-bottom: 0; }
  .ss-bigstars { height: 70px; } .ss-bigstar { width: 60px; height: 60px; } .ss-bigstar:nth-child(2) { width: 70px; height: 70px; }
}
@media (min-width: 900px) and (min-height: 600px) {
  .ss-toast { font-size: 36px; }
  .ss-banner { font-size: 72px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #ui *, #ui *::before, #ui *::after, #loading * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ss-rays { display: none; }
  .ss-daily .shine { display: none; }
}

/* result open: quiet the HUD underneath */
.ss-root.ss-resulting .ss-dmgpill, .ss-root.ss-resulting .ss-toasts { opacity: 0; transition: opacity .2s; }
.ss-result-sub .daily { color: var(--purple); }
/* CALM: a requested replay gets the whole screen (tap ends it) */
.ss-root:has(.ss-replaying) .ar-open, html:has(.ss-replaying) .stg-open { visibility: hidden; }

/* ================= v2 SCREENS (DESIGN 9, 0.3 clarity): minimal HUD, briefing, result roll-up, abort ================= */
/* HUD top: pause · [op name tiny + lair icons] · cash (right). Nothing else up there. */
.ss-hud.v2 .ss-hud-top { right: 0; }
.ss-hudcard.v2 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 0 10px; }
.ss-op { font: 900 10px/1 var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.ss-tgt.ss-lairs { height: auto; padding: 0; gap: 3px; background: none; border: 0; box-shadow: none; color: var(--ink); font-size: 14px; }
.ss-lairs i { display: flex; transition: transform .2s, opacity .2s; }
.ss-lairs i.down { opacity: .45; transform: scale(.85); }
.ss-lairs b { margin-left: 2px; }
.ss-lairs.bump { animation: ss-bump .45s ease; }
.ss-cash { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px 0 6px; border-radius: 10px;
  background: rgba(255,255,255,.96); border: 2.5px solid var(--ink); font: 16px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
.ss-cash[hidden] { display: none; }
/* bottom: Spent chip (small, 60%) sits right above the weapon bar */
.ss-hud.v2 .ss-hud-bottom { flex-direction: column; align-items: center; gap: 6px; }
.ss-spent { align-self: flex-end; font: 900 12px/1 var(--font-body); color: #fff; opacity: 0; padding: 0 4px; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); font-variant-numeric: tabular-nums; transition: opacity .2s; }
.ss-spent.on { opacity: .75; }
.ss-hud.v2 .ss-wpn { height: 84px; gap: 1px; }
.ss-hud.v2 .ss-wpn .nm { min-height: 0; }
.ss-wpn .mk { display: flex; gap: 2px; height: 5px; }
.ss-wpn .mk i { width: 9px; height: 5px; border-radius: 2px; background: rgba(27,24,64,.2); }
.ss-wpn .mk i.on { background: var(--ink); }
.ss-wpn .pr { font: 12px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ss-wpn .pr.free { color: var(--green-dk); }
/* old in-play clutter is gone in v2 (shot pips, star goals, damage pill) */
.v2 .ss-dmgpill { display: none !important; }

/* briefing */
.bf-card { padding: 26px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bf-op { font: 30px/1.05 var(--font-display); margin: 0; color: var(--ink); letter-spacing: .3px; }
.bf-dossier { margin: 0; font: 700 15px/1.35 var(--font-body); color: var(--text-muted); max-width: 32ch; }
.bf-money { display: flex; gap: 10px; width: 100%; }
.bf-money > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 2.5px solid var(--ink); border-radius: var(--r-sm); background: var(--paper-2); }
.bf-money span { font: 900 11px var(--font-body); letter-spacing: 1.5px; color: var(--text-muted); }
.bf-money b { font: 22px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.bf-chal, .bf-rec, .bf-rule { display: flex; align-items: center; gap: 8px; width: 100%; font: 800 14px/1.25 var(--font-body); color: var(--ink); text-align: left; }
.bf-chal .s { display: inline-flex; flex: none; }
.bf-rec .ic { width: 26px; height: 26px; display: flex; flex: none; }
.bf-rec .ic svg { width: 26px; height: 26px; }
.bf-rule { color: var(--text-muted); font-size: 13px; }
.bf-card .ss-intro-go { margin-top: 4px; }

/* result card */
.rc-screen { display: flex; align-items: center; justify-content: center; padding: calc(var(--sat) + 12px) 12px calc(var(--sab) + 12px); overflow-y: auto; }
.rc-card { position: relative; width: 100%; max-width: 420px; padding: 16px 18px 16px; text-align: left; animation: rc-up .28s cubic-bezier(.2,.9,.3,1) both; overflow: hidden; }
@keyframes rc-up { from { transform: translateY(60px); opacity: 0; } }
.rc-head { text-align: center; opacity: 0; transition: opacity .2s; }
.rc-city { font: 900 11px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.rc-op { font: 20px/1.1 var(--font-display); color: var(--ink); }
.rc-kicker { font: 26px/1.1 var(--font-display); color: var(--gold); margin-top: 2px; }
.rc-ledger { margin-top: 10px; }
.rc-line { padding: 6px 0; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.rc-lr { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rc-lr .l { font: 800 15px var(--font-body); color: var(--ink); }
.rc-lr .v { font: 20px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-eff .v { color: var(--green-dk); }
.rc-ammo .v, .rc-bill .v { color: var(--text-muted); }
.rc-bill.clean .v { color: var(--green-dk); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rc-chip { font: 800 11px/1 var(--font-body); padding: 4px 7px; border-radius: 6px; background: var(--paper-2); border: 1.5px solid var(--paper-3); color: var(--ink);
  opacity: 0; transform: scale(.6); transition: opacity .12s, transform .18s cubic-bezier(.2,1.6,.4,1); }
.rc-chip.minus { color: var(--text-muted); }
.rc-chip.extra { border-color: var(--gold); }
.rc-chip.cover { background: #e7ebf5; color: #5d6b86; }
.rc-rule { height: 3px; background: var(--ink); border-radius: 2px; margin: 8px 0 6px; transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out; }
.rc-profit { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; opacity: 0; transition: opacity .15s; }
.rc-profit .l { font: 900 13px var(--font-body); letter-spacing: 2px; color: var(--text-muted); }
.rc-profit-v { justify-self: end; font: 40px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-profit .par { grid-column: 2; justify-self: end; font: 800 12px var(--font-body); color: var(--text-muted); }
.rc-profit .rc-chip { grid-column: 1 / -1; justify-self: end; margin-top: 4px; }
.rc-profit.neg .rc-profit-v { color: #5d6b86; }
.rc-award { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 4px; opacity: 0; transition: opacity .15s; }
.rc-stars { display: flex; gap: 4px; }
.rc-star { display: flex; filter: grayscale(1) brightness(1.35); opacity: .45; }
.rc-star.on { filter: none; opacity: 1; animation: rc-pop .26s cubic-bezier(.2,1.6,.4,1); }
@keyframes rc-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.rc-stamp { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 4px solid var(--ink);
  font: 46px/1 var(--font-display); color: #fff; opacity: 0; transform: rotate(-4deg) scale(1.6); position: relative; overflow: hidden; }
.rc-stamp.in { opacity: 1; transform: rotate(-4deg) scale(1); transition: transform .18s cubic-bezier(.5,0,.8,.4), opacity .08s; }
.rc-stamp.still { transition: none; }
.rc-stamp.gS { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold-dk); }
.rc-stamp.gS.in::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); animation: rc-foil 1.1s .2s ease-out both; }
@keyframes rc-foil { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.rc-stamp.gA { background: var(--green); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--green-dk); }
.rc-stamp.gB { background: var(--blue); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--blue-dk); }
.rc-stamp.gC { background: #7d88a6; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #5d6b86; }
.rc-one { min-height: 20px; text-align: center; font: 900 14px var(--font-body); color: var(--text-muted); opacity: 0; transition: opacity .2s; }
.rc-one.best { color: var(--gold-dk); font-family: var(--font-display); font-size: 17px; letter-spacing: .5px; }
.rc-one.close { color: var(--orange-dk); }
.rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0 12px; opacity: 0; transition: opacity .2s; }
.rc-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rc-stat b { font: 15px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-stat span { font: 800 9.5px var(--font-body); letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.rc-btns { display: flex; flex-direction: column; gap: 8px; }
.rc-small { display: flex; gap: 8px; justify-content: center; }
.rc-small .ss-btn { min-height: 48px; }
.rc-small .ss-btn.sq { width: 52px; min-width: 52px; padding: 0; }
.rc-small .rc-retry { flex: 1; }
.rc-coin { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); pointer-events: none; z-index: 3; }
.rc-card .in { opacity: 1 !important; }
.rc-line.in, .rc-chip.in { transform: none; }
.rc-rule.in { transform: scaleX(1); }
.rc-abort { text-align: center; }
.rc-abort .rc-head { opacity: 1; }
.rc-abort .rc-kicker { color: #5d6b86; }
.rc-reason { font: 800 15px/1.3 var(--font-body); color: var(--text-muted); margin: 10px 0; }
.rc-abort .rc-line { opacity: 1; transform: none; margin: 0 0 14px; }
.v2card .ssc-strip { display: none !important; }   /* old points/grade strip: the v2 card has its own grade */
@media (prefers-reduced-motion: reduce) {
  .rc-card { animation: none; }
  .rc-chip, .rc-line, .rc-stamp, .rc-star.on { transition: opacity .15s; transform: none !important; animation: none; }
}
@media (max-height: 700px) { .rc-profit-v { font-size: 34px; } .rc-stamp { width: 60px; height: 60px; font-size: 36px; } .rc-line { padding: 3px 0; } }
.ss-hud.v2 .ar-ammo { display: none !important; }   /* old arsenal ammo badges: v2 shows $/shot instead */
.ss-hud.v2 .ss-wpn { justify-content: flex-start; padding-top: 4px; }
.ss-hud.v2 .ss-wpn .ic, .ss-hud.v2 .ss-wpn .ic svg { width: 28px; height: 28px; }
.ss-hud.v2 .ss-wpn .nm { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-height: 0; line-height: 1.1; }
html.ss-result-on .wd, html.ss-result-on .cm-chip { display: none !important; }   /* nothing over the card */

/* ---- W3-FIXUI (DESIGN 0.3: nothing overlapping, one short line max) ---- */
/* the result card owns the screen: no play HUD (top bar, gadget bar, wind pill, citymech chip, meter, pops) under it */
html.ss-result-on .ss-hud, html.ss-result-on .gm-meter, html.ss-result-on .gm-pop, html.ss-result-on .ss-gline { display: none !important; }
/* while gamify plays badges / ceremonies after a card button, the card steps away so nothing lands on it */
.ss-result.rc-leaving .rc-card { visibility: hidden; }
/* gadget gesture line: ONE short line right above the gadget bar, first pick per job; toasts yield while it shows */
.ss-hud.v2 .ss-hud-bottom { position: absolute; }
.ss-gline { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 8px); text-align: center; pointer-events: none;
  font: 20px/1.15 var(--font-display); color: #fff; letter-spacing: .02em; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--ink); opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.ss-gline.on { opacity: 1; transform: none; }
.ss-gline:not(.on) { visibility: hidden; }
html:has(.ss-gline.on) .ss-toasts { opacity: 0; }
/* short gadget names fit on one line */
.ss-hud.v2 .ss-wpn .nm { font-size: 10.5px; letter-spacing: .2px; }
/* training: one top strip. Skip docks on the right of the strip under the top bar (the wind pill is hidden in
   training, there is no wind in the yard), the instruction line sits below that strip */
body.ob-on .ob2 .ob2-skip { top: calc(var(--ss-hud-top, 52px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 12px); height: 36px; padding: 0 14px; }
body.ob-on .ob2 .ob2-line:not(.stamp) { top: calc(var(--ss-hud-top, 52px) + 54px); }
/* W9-HINTS (DESIGN 0.3, QA4 #5): during play the wind/weather pill is icons only (dial + bars + weather glyph,
   no LIGHT..STORM word); the city chip's one rule word is the only text line up there */
html.ss-hud-on .wd .nm { display: none !important; }
/* the small op title in the job card steps aside while any other text line is up: one line at a time */
.ss-hud.v2 .ss-op { transition: opacity .15s .35s; }   /* comes back only after the other line has faded */
html.cm-saying .ss-hud.v2 .ss-op, html.st-boss-on .ss-hud.v2 .ss-op, html:has(.ss-gline.on, .ssh-line.on, .gm-pop.on, .sz-chip.on, .ob2-line.on:not(.stamp)) .ss-hud.v2 .ss-op { opacity: 0; transition-delay: 0s; }

/* ======================= W10-PREMIUMUI (DESIGN 0.4 #7, #10): rich ink + gold, crisp white type ======================= */
:root {
  --pm-ink: #0b0d1f; --pm-ink-2: #141833; --pm-ink-3: #1f2547; --pm-line: rgba(255, 215, 120, .28);
  --pm-gold: #ffd257; --pm-gold-2: #f2b33d; --pm-gold-dk: #a8741a; --pm-white: #f6f4ee; --pm-mute: #9aa1c4;
  --pm-panel: linear-gradient(180deg, #1c2246 0%, #11152e 55%, #0b0d1f 100%);
  --pm-glow: 0 0 0 1px rgba(255, 210, 87, .35), 0 18px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 190, 60, .08);
}
/* --- shared premium panel (briefing, result, abort, pause sheet) --- */
.bf-card.ss-panel, .rc-card.ss-panel, .ss-sheet.ss-panel {
  background: var(--pm-panel); color: var(--pm-white); border: 1.5px solid var(--pm-line); border-radius: 22px; box-shadow: var(--pm-glow);
}
.bf-card.ss-panel::before, .rc-card.ss-panel::before {   /* gold hairline across the top */
  content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pm-gold), transparent); opacity: .9; }
.ss-intro.bf, .rc-screen { background: radial-gradient(120% 70% at 50% 30%, rgba(20, 24, 51, .35), rgba(5, 6, 16, .82)); }
.ss-intro-city, .rc-city { color: var(--pm-gold) !important; letter-spacing: 3px; }
.bf-op, .rc-op, .ss-sheet-h { color: var(--pm-white) !important; letter-spacing: .5px; }
.bf-dossier { color: var(--pm-mute); }
.bf-money > div { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; }
.bf-money span { color: var(--pm-mute); }
.bf-money b { color: var(--pm-gold); }
.bf-chal, .bf-rec { color: var(--pm-white); }
.bf-rule { color: var(--pm-mute); }
.bf-rec .ic { background: #e9edf8; border-radius: 8px; padding: 2px; }
/* boss network line */
.bf-net { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 74, 61, .08); border: 1px solid rgba(255, 74, 61, .25); }
.bf-net .l { font: 900 11px var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: #ffb3ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-net .p { flex: 1; display: flex; gap: 4px; justify-content: flex-end; }
.bf-net .p i { width: 10px; height: 12px; clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%); background: #ff4a3d; }
.bf-net .p i.down { background: rgba(255, 255, 255, .22); }
.bf-net .p i.now { box-shadow: 0 0 0 2px var(--pm-gold); outline: 2px solid var(--pm-gold); outline-offset: 1px; }
.bf-net b { font: 16px/1 var(--font-display); color: var(--pm-white); font-variant-numeric: tabular-nums; }
/* loadout */
.bf-load { width: 100%; }
.bf-load-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.bf-load-h span { font: 900 11px var(--font-body); letter-spacing: 2px; color: var(--pm-gold); }
.bf-load-cash { display: inline-flex; align-items: center; gap: 4px; font: 14px/1 var(--font-display); color: var(--pm-white); font-variant-numeric: tabular-nums; }
.bf-load-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.bf-load-row::-webkit-scrollbar { display: none; }
.bf-g { flex: 1 0 64px; max-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px;
  border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.bf-g .ic { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #d9dfef); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px var(--pm-line); }
.bf-g .ic svg { width: 26px; height: 26px; }
.bf-g .nm { font: 900 9.5px var(--font-body); letter-spacing: .6px; text-transform: uppercase; color: var(--pm-mute); white-space: nowrap; }
.bf-g .n { font: 16px/1 var(--font-display); color: var(--pm-white); font-variant-numeric: tabular-nums; }
.bf-g.out .n { color: #ff8a80; }
.bf-buy { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; padding: 4px 0 3px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, var(--pm-gold), var(--pm-gold-2)); color: var(--pm-ink); border: 0; box-shadow: inset 0 -2px 0 var(--pm-gold-dk); }
.bf-buy span { font: 15px/1 var(--font-display); }
.bf-buy small { font: 900 9.5px/1.1 var(--font-body); }
.bf-buy:disabled { background: rgba(255, 255, 255, .12); color: var(--pm-mute); box-shadow: none; cursor: default; }
.bf-buy:active:not(:disabled) { transform: translateY(1px); }
.bf-g.got { animation: pm-got .35s ease; } .bf-g.nope { animation: pm-nope .3s ease; }
@keyframes pm-got { 40% { box-shadow: 0 0 0 2px var(--pm-gold), 0 0 18px rgba(255, 210, 87, .5); transform: scale(1.04); } }
@keyframes pm-nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* primary buttons: gold, never flat green */
.bf-card .ss-intro-go.ss-btn, .rc-card .rc-primary.ss-btn, .ss-sheet .ss-btn.green {
  background: linear-gradient(180deg, #ffe08a 0%, var(--pm-gold) 35%, var(--pm-gold-2) 100%); color: var(--pm-ink); text-shadow: none;
  border: 0; box-shadow: inset 0 -5px 0 var(--pm-gold-dk), 0 0 0 1px rgba(255, 230, 160, .6), 0 10px 26px rgba(255, 190, 60, .25); }
.bf-card .ss-intro-go.ss-btn svg path, .rc-card .rc-primary.ss-btn svg path { stroke: var(--pm-ink); }
.rc-card .rc-small .ss-btn, .ss-sheet .ss-sheet-row { background: rgba(255, 255, 255, .06); color: var(--pm-white); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; text-shadow: none; }
.rc-card .rc-small .ss-btn.sq svg { filter: drop-shadow(0 0 0 transparent); }
.ss-sheet .ss-sheet-home { color: var(--pm-mute); }
/* --- result card: heist payout --- */
.rc-card .rc-lr .l { color: var(--pm-mute); font-weight: 800; }
.rc-card .rc-lr .v { color: var(--pm-white); }
.rc-card .rc-eff .v { color: var(--pm-gold); }
.rc-card .rc-ammo .v, .rc-card .rc-bill .v { color: #c9cde3; }
.rc-card .rc-bill.clean .v { color: var(--pm-gold); }
.rc-card .rc-chip { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--pm-white); }
.rc-card .rc-chip.extra { border-color: var(--pm-gold); color: var(--pm-gold); }
.rc-card .rc-chip.minus, .rc-card .rc-chip.cover { color: var(--pm-mute); background: rgba(255, 255, 255, .03); }
.rc-card .rc-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--pm-gold), transparent); }
.rc-card .rc-profit .l { color: var(--pm-gold); letter-spacing: 4px; }
.rc-card .rc-profit-v { font-size: 46px; background: linear-gradient(180deg, #fff6d6 0%, var(--pm-gold) 45%, var(--pm-gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 200, 70, .35)); }
.rc-card .rc-profit.neg .rc-profit-v { background: none; color: #9aa1c4; filter: none; }
.rc-card .rc-profit .par { color: var(--pm-mute); }
.rc-card .rc-one { color: var(--pm-mute); }
.rc-card .rc-one.best { color: var(--pm-gold); text-shadow: 0 0 12px rgba(255, 200, 70, .45); }
.rc-card .rc-stat b { color: var(--pm-white); }
.rc-card .rc-stat span { color: var(--pm-mute); }
.rc-card .rc-star:not(.on) { filter: grayscale(1) brightness(.6); opacity: .35; }
/* grade stamp: metal seals, S = gold foil (no flat green) */
.rc-card .rc-stamp { border: 0; font-size: 44px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.rc-card .rc-stamp.gS { background: radial-gradient(circle at 35% 30%, #fff2b8, var(--pm-gold) 45%, var(--pm-gold-dk)); color: var(--pm-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 3px var(--pm-ink), 0 0 0 5px var(--pm-gold), 0 0 30px rgba(255, 200, 70, .6); }
.rc-card .rc-stamp.gA { background: radial-gradient(circle at 35% 30%, #ffffff, #cfd6e6 45%, #7d879f); color: var(--pm-ink); text-shadow: none;
  box-shadow: 0 0 0 3px var(--pm-ink), 0 0 0 5px #dfe5f2, 0 0 22px rgba(220, 230, 255, .35); }
.rc-card .rc-stamp.gB { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c9813f 50%, #7a4519); box-shadow: 0 0 0 3px var(--pm-ink), 0 0 0 5px #d9965a; }
.rc-card .rc-stamp.gC { background: radial-gradient(circle at 35% 30%, #a9b0c6, #5d6582 55%, #353b52); box-shadow: 0 0 0 3px var(--pm-ink), 0 0 0 5px #6b7390; }
.rc-card .rc-stamp.in { animation: pm-slam .42s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pm-slam { 0% { transform: rotate(-4deg) scale(1.9); opacity: 0; } 55% { transform: rotate(-4deg) scale(.92); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); } }
.rc-coin { background: radial-gradient(circle at 35% 30%, #fff2b8, var(--pm-gold) 50%, var(--pm-gold-dk)); border: 1px solid var(--pm-gold-dk); box-shadow: 0 0 8px rgba(255, 200, 70, .6); }
.rc-abort .rc-kicker { color: #ff8a80; }
.rc-reason { color: var(--pm-mute); }
.ss-result.fail { background: radial-gradient(90% 60% at 50% 40%, rgba(70, 14, 24, .55), rgba(8, 6, 14, .9)); }

/* --- HUD top: ink glass. [pause] [lairs + gold fill] ... [SHOTS] [cash] --- */
.ss-hud.v2 .ss-hudcard.v2 { background: linear-gradient(180deg, rgba(28, 34, 70, .92), rgba(11, 13, 31, .92)); border: 1px solid var(--pm-line); border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); padding: 0 12px; gap: 4px; min-width: 96px; }
.ss-hud.v2 .ss-op { color: var(--pm-gold); opacity: .85; font-size: 9.5px; }
.ss-tgt.ss-lairs { flex-direction: column; align-items: stretch; gap: 3px; color: var(--pm-white); }
.ss-lairs .lr-ic { display: flex; align-items: center; gap: 3px; }
.ss-lairs .lr-ic b { font: 15px/1 var(--font-display); color: var(--pm-white); }
.ss-lairs .lr-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ss-lairs .lr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pm-gold-2), var(--pm-gold)); box-shadow: 0 0 6px rgba(255, 200, 70, .7); transition: width .4s cubic-bezier(.2, .9, .3, 1); }
.ss-lairs i.down { opacity: 1; transform: scale(.9); }
.ss-tgt.ss-lairs.clear .lr-bar i { background: var(--pm-gold); }
.ss-shots { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px 0 8px; margin-left: auto; border-radius: 12px;
  background: linear-gradient(180deg, rgba(28, 34, 70, .92), rgba(11, 13, 31, .92)); border: 1px solid var(--pm-line); color: var(--pm-white); }
.ss-shots[hidden] { display: none; }
.ss-shots b { font: 22px/1 var(--font-display); font-variant-numeric: tabular-nums; min-width: 1.1ch; text-align: right; }
.ss-shots em.acc { font: 900 11px/1 var(--font-body); font-style: normal; font-variant-numeric: tabular-nums; color: var(--pm-white); opacity: .85;
  padding-left: 6px; margin-left: 1px; border-left: 1px solid rgba(255, 255, 255, .18); }
.ss-shots.acc-hi em.acc { color: var(--pm-gold); opacity: 1; }
.ss-shots span { font: 900 9px var(--font-body); letter-spacing: 1.2px; color: var(--pm-mute); }
.ss-shots.low { border-color: rgba(255, 74, 61, .8); box-shadow: 0 0 14px rgba(255, 74, 61, .35); }
.ss-shots.low b { color: #ff8a80; }
.ss-shots.bump { animation: ss-bump .45s ease; }
.ss-shots:not([hidden]) + .ss-cash { margin-left: 0; }
.ss-hud.v2 .ss-cash { background: linear-gradient(180deg, rgba(28, 34, 70, .92), rgba(11, 13, 31, .92)); border: 1px solid var(--pm-line); color: var(--pm-gold); height: 34px; border-radius: 12px; }
.ss-hud.v2 .ss-menu-btn.ss-btn.sq { background: linear-gradient(180deg, rgba(28, 34, 70, .92), rgba(11, 13, 31, .92)); border: 1px solid var(--pm-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.ss-hud.v2 .ss-menu-btn.ss-btn.sq svg path { fill: var(--pm-white); stroke: var(--pm-white); }

/* --- weapon bar: ink tiles, light icon plate, gold selected ring, shots badge --- */
.ss-hud.v2 .ss-weapons { background: rgba(8, 10, 24, .62); border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding-top: 12px; }
.ss-hud.v2 .ss-wpn { --c: transparent; --cd: transparent; background: linear-gradient(180deg, #232a52, #12162f); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35); color: var(--pm-white); overflow: visible; }
.ss-hud.v2 .ss-wpn .ic { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffff, #d6dcec); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.ss-hud.v2 .ss-wpn .ic svg { width: 32px; height: 32px; }
.ss-hud.v2 .ss-wpn .nm { color: var(--pm-white); }
.ss-hud.v2 .ss-wpn .mk i { background: rgba(255, 255, 255, .18); }
.ss-hud.v2 .ss-wpn .mk i.on { background: var(--pm-gold); }
.ss-hud.v2 .ss-wpn .pr { color: var(--pm-mute); font-size: 11px; }
.ss-hud.v2 .ss-wpn .pr.free { color: var(--pm-gold); }
.ss-hud.v2 .ss-wpn.sel { transform: translateY(-6px); background: linear-gradient(180deg, #3a3416, #1a1709 70%); border-color: var(--pm-gold);
  box-shadow: 0 0 0 2px var(--pm-gold), 0 0 22px rgba(255, 200, 70, .45), 0 8px 14px rgba(0, 0, 0, .4); }
.ss-hud.v2 .ss-wpn.sel .ic { background: radial-gradient(circle at 40% 35%, #fff8dc, var(--pm-gold)); }
.ss-hud.v2 .ss-wpn.sel .nm { color: var(--pm-gold); }
.ss-wpn .am { position: absolute; right: -5px; top: -7px; min-width: 24px; height: 20px; padding: 0 5px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--pm-ink); border: 1.5px solid var(--pm-gold); color: var(--pm-gold); font: 13px/1 var(--font-display); font-variant-numeric: tabular-nums; z-index: 1; }
.ss-wpn .am.low { border-color: #ff6a5e; color: #ff8a80; }
.ss-wpn .am.out { border-color: rgba(255, 255, 255, .3); color: var(--pm-mute); }
.ss-hud.v2 .ss-wpn.empty { opacity: .45; filter: grayscale(.8); }
@media (prefers-reduced-motion: reduce) { .rc-card .rc-stamp.in { animation: none; } .ss-lairs .lr-bar i { transition: none; } }
/* W10: econ chips + small-row icons on ink */
.rc-card .rc-chip.ec.pos { background: rgba(255, 210, 87, .1); border-color: rgba(255, 210, 87, .45); color: var(--pm-gold); }
.rc-card .rc-chip.ec.neg { background: rgba(255, 106, 94, .1); border-color: rgba(255, 106, 94, .4); color: #ff8a80; }
.rc-card .rc-chip.ec.zero { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: var(--pm-mute); }
.rc-card .rc-profit .par b { color: var(--pm-white); }
.rc-card .rc-stats.rc-statline { color: var(--pm-mute); }
.rc-card .rc-small .ss-btn svg [stroke="#1b1840"] { stroke: var(--pm-white); }
.rc-card .rc-small .ss-btn svg [fill="#fff"], .rc-card .rc-small .ss-btn svg [fill="#ffffff"] { fill: rgba(255, 255, 255, .12); }
.bf-net .l { font-size: 10px; letter-spacing: .8px; overflow: visible; text-overflow: clip; flex: none; }
.bf-net .p { gap: 2px; flex-wrap: nowrap; min-width: 0; }
.bf-net .p i { width: 8px; height: 10px; flex: none; }
/* a story beat with its own Skip (top-right) owns the top strip: the play HUD top steps away until it ends */
html:has(.st-skip) .ss-hud.v2 .ss-hud-top { visibility: hidden; }
html.ss-result-on .st-bosspop { display: none !important; }   /* nothing over the result card */

/* ---- W12-UIFIX ---------------------------------------------------------------------------------------------
   (1) weapon bar: tiles never clipped. The scroller keeps room for the selected lift/ring and the ammo badge
   (padding + scroll-padding so scroll-snap never parks a tile flush against the clip edge); when every tile
   fits (.fits, set by ui.js from tile geometry, not scrollWidth which WebKit inflates with the badge/ring) the
   edge fade masks are OFF, so a 1-2 tile bar is never faded/cut on the right. */
.ss-hud.v2 .ss-weapons { padding: 13px 11px 9px; scroll-padding-inline: 11px; max-width: calc(100vw - var(--sal) - var(--sar) - 16px); box-sizing: border-box; }
.ss-weapons.fits, .ss-weapons.fits.more-r, .ss-weapons.fits.more-l { -webkit-mask-image: none !important; mask-image: none !important; overflow: visible; }
.ss-hud-bottom { box-sizing: border-box; max-width: 100vw; }
/* anything that rides above the weapon bar (gamify meter, aim line) hides under the pause sheet / cards */
body.ss-paused .gm-meter, html.ss-result-on .gm-meter, html:has(.ss-sheet-wrap) .gm-meter { display: none !important; }
/* (2) dark-on-dark: ink (#1b1840) icons on the dark premium panels turn white; labels full white */
.ss-hud.v2 .ss-menu-btn svg [fill="#1b1840"], .ss-sheet svg [fill="#1b1840"], .bf-card svg [fill="#1b1840"], .rc-card svg [fill="#1b1840"] { fill: var(--pm-white); }
.ss-hud.v2 .ss-menu-btn svg [stroke="#1b1840"], .ss-sheet svg [stroke="#1b1840"], .bf-card svg [stroke="#1b1840"], .rc-card svg [stroke="#1b1840"] { stroke: var(--pm-white); }
.ss-sheet svg [fill="#fff"], .ss-sheet svg [fill="#ffffff"] { fill: rgba(255, 255, 255, .14); }
.ss-sheet .ss-sheet-row { color: var(--pm-white); }
.ss-sheet .ss-sheet-home { color: #d4d8ee; }
.ss-sheet .ss-sheet-home svg [stroke="#1b1840"] { stroke: #d4d8ee; }
/* lair card: the "down" outline houses were 35% white on ink -> 60% */
.ss-lairs i.down svg path { stroke: rgba(255, 255, 255, .7); }
.ss-hud.v2 .ss-lairs i.down { opacity: .75; }
/* training "TAP TO CONTINUE" card sat on top of the pause sheet (iPhone, train-01): it steps away while paused */
body.ss-paused .ob2-card, html:has(.ss-sheet-wrap) .ob2-card { visibility: hidden !important; }

/* W12-UIFIX2: briefing fits 390x640 (iPhone with Safari bars). Card capped to the viewport; the body scrolls inside
   while the kicker/op/network head and START stay put. One compact network row (label + thin bar + n/total). */
.ss-intro.bf { align-items: flex-end; padding-top: calc(var(--sat) + 10px); padding-bottom: calc(var(--sab) + 12px); }
.bf-card { padding: 18px 16px 14px; gap: 8px; max-height: calc(100dvh - var(--sat) - var(--sab) - 22px); min-height: 0; overflow: hidden; }
@supports not (height: 100dvh) { .bf-card { max-height: calc(100vh - var(--sat) - var(--sab) - 22px); } }
.bf-card > * { flex-shrink: 0; }
.bf-card .ss-intro-city { font-size: 12px; }
.bf-card .bf-op { font-size: clamp(24px, 7.4vw, 30px); }
.bf-body { flex: 0 1 auto; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; align-items: center; gap: 8px;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); padding-bottom: 6px; }
.bf-body::-webkit-scrollbar { display: none; }
.bf-body > * { flex-shrink: 0; }
.bf-dossier { font-size: 14px; line-height: 1.3; color: #c3c8e4 !important; }
.bf-money { gap: 6px; }
.bf-money > div { padding: 6px 4px; min-width: 0; }
.bf-money span { font-size: 10px; letter-spacing: 1.2px; color: #b4bad8 !important; }
.bf-money b { font-size: 18px; white-space: nowrap; }
.bf-money .par b { color: var(--pm-white) !important; }
.bf-chal { font-size: 13px; }
.bf-rule { font-size: 12px; color: #b4bad8 !important; justify-content: center; }
.bf-card .ss-intro-go.ss-btn.big { min-height: 56px; font-size: 26px; margin-top: 2px; padding-top: 6px; padding-bottom: 10px; }
.bf-net { padding: 6px 10px; gap: 10px; background: rgba(255, 74, 61, .08); }
.bf-net .l { flex: none; max-width: 52%; color: #ffc2bd; font-size: 10.5px; letter-spacing: 1.2px; }
.bf-net .bar { flex: 1; min-width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.bf-net .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff6a5e, var(--pm-gold)); min-width: 0; }
.bf-net b { font-size: 15px; flex: none; }
.ss-intro .st-net.note { width: 100%; }
.bf-g { flex: 1 0 74px; max-width: 100px; }
.bf-g .nm { color: #b4bad8; }
.bf-g .n { font-size: 14px; }
.bf-buy { flex-direction: row; justify-content: center; font: 13px/1 var(--font-display); padding: 6px 2px 5px; white-space: nowrap; color: #14182f; }
.bf-buy:disabled { color: #b4bad8; }
.bf-load-h span { color: var(--pm-gold); }
.bf-load-cash { font-size: 13px; }
@media (max-height: 680px) {
  .bf-card { padding-top: 14px; gap: 6px; }
  .bf-dossier { font-size: 13px; }
  .bf-card .ss-intro-go.ss-btn.big { min-height: 50px; font-size: 24px; }
}
/* W12-UIFIX2 contrast: icons on gold buttons are ink, never white */
.ss-sheet .ss-btn.green svg [fill]:not([fill="none"]), .bf-card .ss-intro-go svg [fill]:not([fill="none"]), .rc-card .rc-primary svg [fill]:not([fill="none"]) { fill: var(--pm-ink); }
.ss-sheet .ss-btn.green svg [stroke]:not([stroke="none"]), .bf-card .ss-intro-go svg [stroke]:not([stroke="none"]), .rc-card .rc-primary svg [stroke]:not([stroke="none"]) { stroke: var(--pm-ink); }

/* ---- W16-HUDCLEAN (fun2 #5 + #7, DESIGN 0.3) ------------------------------------------------------------------
   (1) many gadgets: an obvious sideways strip. ui.js sets .scroll + --wpn-w so N tiles + about half of the next one
   show (the peek), a short edge fade on the side(s) with more (.more-l / .more-r), the selected tile kept in view.
   (2) labels >= 11 px (tile names, the op title). (3) the gadget's own gesture line, one size smaller (one line). */
.ss-hud.v2 .ss-weapons.scroll > .ss-wpn { flex: 0 0 var(--wpn-w, 70px); min-width: 0; width: var(--wpn-w, 70px); }
.ss-weapons.scroll.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), rgba(0,0,0,.25)); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), rgba(0,0,0,.25)); }
.ss-weapons.scroll.more-l { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 30px); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 30px); }
.ss-weapons.scroll.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 30px, #000 calc(100% - 30px), rgba(0,0,0,.25)); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 30px, #000 calc(100% - 30px), rgba(0,0,0,.25)); }
.ss-hud.v2 .ss-wpn .nm { font-size: 11px; letter-spacing: .1px; }
.ss-hud.v2 .ss-op { font-size: 11px; letter-spacing: 1px; }
.ss-wpn .am.inf { font-size: 15px; }
.ss-gline { font-size: 17px; -webkit-text-stroke-width: 4px; }

/* W19 (user iPhone 15:32: "OP PAINT JOB" spilled out of its card and the cash ran off the right edge once the accuracy
   % showed). The top bar always fits: the op card shrinks (long names end in an ellipsis inside it), the SHOTS word
   steps aside when the accuracy shows on a phone, shots + cash never shrink. dev/hudtop.check.mjs = worst case 360-430 px. */
.ss-hud.v2 .ss-hud-top { box-sizing: border-box; width: 100%; gap: 6px; flex-wrap: nowrap; }
.ss-hud.v2 .ss-hudcard.v2 { flex: 0 1 auto; min-width: 0; max-width: 176px; overflow: hidden; }
.ss-hud.v2 .ss-op { max-width: 100%; }
.ss-hud.v2 .ss-shots, .ss-hud.v2 .ss-cash { flex: none; }
.ss-hud.v2 .ss-shots { padding: 0 8px; gap: 4px; }
@media (max-width: 440px) { .ss-hud.v2 .ss-shots:has(em.acc) span { display: none; } }
@media (max-width: 370px) { .ss-hud.v2 .ss-shots span { display: none; } .ss-hud.v2 .ss-cash { padding: 0 8px 0 5px; } }