/* Rizo.game v87 — ARCADE SYSTEM LAYER
   Authoritative home for arcade-wide rules. Legacy arcade filenames
   (arcade-v75 / arcade-v83 / arcade-v84-depth / rizo-v85-handmade) are kept
   intentionally and still own their per-game art; what moved here is the
   shared shelf, shell, HUD, pause, results and motion behaviour that used to
   be resolved by stylesheet load order.

   Loaded last. If a rule exists here, this file wins on purpose. */

/* ============================================================
   1. SHELF — every cabinet card reads finished and comparable
   ============================================================ */

/* Development-history stickers ("NEW", "DX") are not player-facing identity.
   Suppressed for the whole shelf, not eight of eleven cards. */
.game-card::after{content:none !important}

/* The two art modifiers the shelf was missing. */
.rush-art{background:linear-gradient(145deg,#7a4218,#241a12)}
.rush-art::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:repeating-linear-gradient(90deg,#2c1e14 0 9px,#3a2818 9px 18px);opacity:.85}
.defense-art{background:linear-gradient(145deg,#3b5a2c,#141c15)}
.defense-art::before{content:"";position:absolute;left:-12%;right:-12%;top:52%;height:12px;
  border-radius:999px;background:#c9a63b;opacity:.45;transform:rotate(-7deg)}

/* Shared depth language for the three cards that never got it — the headliner
   and the flagship were the two bare tiles on the first arcade screen. */
.game-card.rhythm-card .game-art,
.game-card.walk-card .game-art,
.game-card.defense-card .game-art{position:relative}
.game-card.rhythm-card .game-art::before,
.game-card.walk-card .game-art::before,
.game-card.defense-card .game-art::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(255,255,255,.16),transparent 58%),
    linear-gradient(200deg,rgba(255,255,255,.07) 0 38%,transparent 39%);
}
.game-card.rhythm-card .game-art img,
.game-card.walk-card .game-art img,
.game-card.defense-card .game-art img{position:relative;z-index:2}

/* BEST · ENERGY · RUN — the decision information, at the point of decision. */
.game-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.game-meta span{display:grid;gap:1px;padding:4px 7px;border:1px solid #2b3540;border-radius:8px;
  background:#0b0f14;line-height:1;min-width:44px}
.game-meta small{font:900 5.6px/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:#6d7a86}
.game-meta b{font:900 10px/1 "JetBrains Mono",monospace;letter-spacing:.02em;color:#e6edf2}
.game-meta .meta-best b{color:var(--cab,#ffd45a)}
.game-meta .meta-energy.short b{color:#ff6c7a}
.game-meta .meta-energy.short{border-color:#5c2a31}

body.rizo-handmade .game-meta span{border-radius:0;border-color:#28313b;
  clip-path:polygon(0 3px,3px 0,100% 0,100% 100%,0 100%)}
body.rizo-handmade .game-card{min-height:132px}
body.rizo-handmade .arcade-headliner{min-height:170px}

/* Personal-best board: product names, and a wave count that cannot be mistaken
   for a point total sitting next to one. */
.score-grid div{position:relative}
.score-grid .score-cell-wave{border-color:#5a4a20;background:#12100a}
.score-grid .score-cell-wave b{color:#ffd45a}

/* ============================================================
   2. SHELL — pause is a first-class control, not an afterthought
   ============================================================ */

.mini-stage{position:relative}
.minigame-overlay.defense-active .mini-stage{height:100%;min-height:0}
.mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.mini-actions .ghost-button{width:100%}
.mini-pause-button{width:100%;border:1px solid #3c4754;border-radius:11px;padding:10px 8px;
  background:#252c37;color:#e7eef3;font:1000 8px/1 Inter,sans-serif;letter-spacing:.12em}
.mini-pause-button:active{transform:translateY(1px)}
body.rizo-handmade .mini-pause-button{border-radius:0;border:1px solid #090b0e;background:#e9dfc7;color:#0c0e12;
  box-shadow:2px 2px 0 #040608;font:900 10px/1 Anton,Impact,sans-serif;letter-spacing:.08em}

.arcade-pause-panel{position:absolute;inset:0;z-index:120;display:grid;place-items:center;padding:14px;
  border-radius:22px;background:rgba(4,6,9,.74);backdrop-filter:blur(5px)}
.arcade-pause-panel[hidden]{display:none !important}
.arcade-pause-card{width:min(100%,300px);display:grid;gap:9px;text-align:center;padding:16px 14px;
  border:2px solid #3a4552;border-radius:16px;background:linear-gradient(160deg,#141a22,#0b0e13);
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.arcade-pause-card small{font:1000 7px/1 "JetBrains Mono",monospace;letter-spacing:.18em;color:#7deaff}
.arcade-pause-card h3{margin:0;font:900 22px/1 Anton,Impact,sans-serif;letter-spacing:.04em;color:#f2f7fa}
.arcade-pause-card p{margin:0;font:700 7.4px/1.5 "JetBrains Mono",monospace;color:#8b98a4}
.arcade-pause-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.arcade-pause-stats span{display:grid;gap:3px;padding:8px 6px;border:1px solid #2a343f;border-radius:10px;background:#0a0e13}
.arcade-pause-stats small{color:#6d7a86;letter-spacing:.13em}
.arcade-pause-stats b{font:900 15px/1 Anton,Impact,sans-serif;color:#f2f7fa;letter-spacing:.03em}
.arcade-pause-actions{display:grid;gap:6px;margin-top:2px}
.arcade-pause-actions button{min-height:40px;border:1px solid #3c4754;border-radius:10px;background:#222933;
  color:#e7eef3;font:1000 8.5px/1 Inter,sans-serif;letter-spacing:.11em}
.arcade-pause-actions button.primary{background:#16c8ff;border-color:#0a7fa5;color:#04222c}
.arcade-pause-actions button.danger{background:#2a161a;border-color:#6b2c35;color:#ff9aa5}
body.rizo-handmade .arcade-pause-card{border-radius:0;border-color:#e9dfc7;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
body.rizo-handmade .arcade-pause-actions button{border-radius:0;box-shadow:2px 2px 0 #040608;
  font:900 11px/1 Anton,Impact,sans-serif;letter-spacing:.05em}

/* Defense keeps its own full-bleed shell and drives its run controls from the
   field menu, so the shared action row is suppressed there rather than being
   clipped off-screen. The pause panel still overlays the field. */
.minigame-overlay.defense-active .mini-actions{display:none}
/* Defense keeps its own full-bleed shell; the pause panel sits above it. */
.minigame-overlay.arcade-paused .mini-arena{filter:saturate(.7) brightness(.86)}

/* ============================================================
   3. HUD — information the mechanic requires must be visible
   ============================================================ */

/* Single authority for the Spark Stash readout (previously declared in two
   files and resolved by load order). The greed loop is the game, so the chain
   and the risk multiplier riding on it are persistent, not transient. */
.spark-hud{position:absolute;top:54px;left:12px;right:12px;z-index:8;display:flex;
  justify-content:space-between;gap:5px;pointer-events:none}
.spark-hud span{display:flex;align-items:center;gap:4px;padding:5px 8px;
  border:1px solid rgba(255,255,255,.68);background:rgba(5,5,8,.72);
  font:800 10px/1.1 "JetBrains Mono",monospace;letter-spacing:.08em;color:#cbd7df}
.spark-hud b{color:#fff}
.spark-hud span:last-child{color:#7deaff}
.spark-hud .spark-chain em{font-style:normal;padding:1px 4px;border-radius:3px;
  background:#233039;color:#9fb2bf;font-size:9px}
.spark-hud .spark-chain em.warm{background:#4a3a12;color:#ffd45a}
.spark-hud .spark-chain em.hot{background:#5c2410;color:#ffb066}
.spark-hud.at-risk span:first-child{border-color:#ff9a4a;color:#ffd0a5}

.spark-bank{display:grid;gap:2px;place-items:center;line-height:1}
.spark-bank b{font:900 13px/1 Anton,Impact,sans-serif;letter-spacing:.04em}
.spark-bank small{font:800 6px/1 "JetBrains Mono",monospace;letter-spacing:.1em;opacity:.78}
.spark-bank[data-mult="2"]{box-shadow:0 0 0 2px rgba(255,212,90,.5)}
.spark-bank[data-mult="3"]{box-shadow:0 0 0 2px rgba(255,140,70,.65)}

/* Ember Forge carries four readouts now, so let them breathe. */
.breaker-hud{gap:4px}
.breaker-hud span{padding:5px 6px;font-size:6.6px}
.breaker-hud b{font-size:9px}

/* Shared life row. One renderer, one look, and a visible last heart. */
#rushHearts,#glideHearts,#breakerHearts,#memoryHearts,#mazeLives{letter-spacing:2px}
.lives-critical{color:#ff6776 !important}
.lives-empty{opacity:.55}

/* Informational HUD is not the play surface. Tapping to read your heart count
   must never flap, jump, or move the paddle. The JS guard is authoritative;
   this stops the hit test from ever being needed. */
[data-mini-readout]{pointer-events:none}
[data-mini-readout] button,[data-mini-readout] a{pointer-events:auto}

/* ============================================================
   4. RESULTS — one design family, and losing looks like losing
   ============================================================ */

.arcade-result .arcade-result-mode{display:block;margin:0 0 4px;
  font:1000 7px/1 "JetBrains Mono",monospace;letter-spacing:.2em;color:#7deaff}
.arcade-result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:10px 0}
.arcade-result-grid.stat-3{grid-template-columns:repeat(3,1fr)}
.arcade-result-grid span{display:grid;gap:4px;padding:9px;border:1px solid #28343f;border-radius:11px;
  background:#0c1117;font:900 6.4px/1.2 Inter,sans-serif;letter-spacing:.12em;color:#7d8b98;text-align:center}
.arcade-result-grid b{font:900 17px/1 Anton,Impact,sans-serif;letter-spacing:.03em;color:#f2f7fa}
.arcade-result-grid.stat-4 span:nth-child(n+3) b{font-size:15px}

/* A personal record deserves more than a bare pill. */
.arcade-best-banner{display:flex;align-items:center;gap:9px;margin:0 auto 9px;padding:7px 12px 7px 9px;
  border:2px solid #101010;border-radius:12px;background:linear-gradient(120deg,#ffd45a,#ffb347);
  color:#181205;box-shadow:0 6px 0 rgba(0,0,0,.35);text-align:left;width:max-content;max-width:100%}
.arcade-best-banner i{font-style:normal;font-size:20px;line-height:1}
.arcade-best-banner div{display:grid;gap:1px;min-width:0}
.arcade-best-banner small{font:1000 6px/1 "JetBrains Mono",monospace;letter-spacing:.18em;opacity:.8}
.arcade-best-banner b{font:900 19px/1 Anton,Impact,sans-serif;letter-spacing:.03em}
.arcade-best-banner em{font:800 6px/1 "JetBrains Mono",monospace;letter-spacing:.1em;font-style:normal;opacity:.72}

/* Dying and outlasting the clock are different runs and now read differently. */
.arcade-end-death .modal-art{filter:saturate(.35) brightness(.85);color:#ff6776}
.arcade-end-death h2{color:#ffb3ba}
.arcade-end-death .big-line{color:#ff8d99}
.arcade-end-death::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#ff5c6c}
.arcade-end-timeup::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#16c8ff}
.arcade-end-quit::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#9eff75}
.arcade-end-cleared::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#ffd45a}
.arcade-result{position:relative;overflow:hidden}

/* ============================================================
   5. REDUCED MOTION — systemic, not selector-by-selector
   ============================================================ */

/* One blanket rule for the whole arcade playfield and shelf instead of
   hand-written per-selector overrides. Animations resolve to their end state
   rather than being deleted, so anything that communicates a gameplay state by
   its final appearance still communicates it. Position/transform updates are
   driven from JS every frame and are unaffected. */
body.reduce-motion .mini-world,
body.reduce-motion .mini-world *,
body.reduce-motion .minigame-shell *,
body.reduce-motion .game-card,
body.reduce-motion .game-card *,
body.reduce-motion .arcade-pause-panel *{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  animation-delay:0s !important;
  transition-duration:.01ms !important;
  transition-delay:0s !important;
}
body.reduce-motion .game-card:nth-of-type(even),
body.reduce-motion .game-card:nth-of-type(3n),
body.reduce-motion .arcade-headliner{transform:none}

/* Operating-system reduced motion is honoured even before the player finds the
   in-game toggle. The JS applies body.reduce-motion from the same signal; this
   covers the first paint. */
@media (prefers-reduced-motion: reduce){
  .mini-world,.mini-world *,.minigame-shell *,.game-card,.game-card *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
  }
  .game-card:nth-of-type(even),.game-card:nth-of-type(3n),.arcade-headliner{transform:none}
}

/* ============================================================
   6. DEFENSE — the placement coach that was queried but never drawn
   ============================================================ */

.defense-deploy-dock{position:relative}
.defense-placement-coach{position:absolute;left:8px;right:8px;bottom:100%;z-index:6;
  display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:5px 8px;pointer-events:none;
  border:1px solid #2c3742;border-radius:10px;background:rgba(9,13,18,.9);
  backdrop-filter:blur(5px);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.defense-placement-coach[hidden]{display:none !important}
.defense-placement-guide[hidden]{display:none !important}
.defense-placement-guide{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.defense-placement-guide span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:#16c8ff;color:#04222c;font:900 9px/1 Inter,sans-serif}
.defense-placement-guide b{font:900 8px/1 Anton,Impact,sans-serif;letter-spacing:.06em;color:#e7eef3;white-space:nowrap}
.defense-deploy-hint{flex:1 1 auto;min-width:0;font:700 6.6px/1.35 "JetBrains Mono",monospace;color:#8b98a4}
body.rizo-handmade .defense-placement-coach{border-radius:0;border-color:#39434e}

/* ============================================================
   7. SMALL SCREENS
   ============================================================ */

@media (max-width:360px){
  .game-meta span{min-width:40px;padding:3px 6px}
  .game-meta b{font-size:9px}
  .arcade-pause-card{padding:13px 11px}
  .arcade-pause-card h3{font-size:19px}
  .breaker-hud span{font-size:6px;padding:4px 5px}
  .spark-hud span{font-size:9px;padding:4px 6px}
}
@media (max-height:700px){
  .arcade-pause-stats b{font-size:13px}
  .arcade-pause-actions button{min-height:36px}
}