/* IMPACT FRAME — css/stage.css
   The game stage: canvas, HUD, score, charge meter, banners, overlays. */
/* ------------------------------------------------- game stage (IF.Game) */
.if-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--print-paper); color: var(--print-ink);
  border: 3px solid var(--ink); outline: none; cursor: pointer;
  container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  font-family: var(--f-mono);
}
.if-stage:focus-visible { outline: 3px solid var(--spot); outline-offset: 4px; }
@media (max-width: 640px) { .if-stage { aspect-ratio: 4 / 3; } }
.if-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.if-hud { position: absolute; inset: 0; pointer-events: none; }
.if-lbl { font: 700 9px/1 var(--f-mono); font-size: max(9px, 0.85cqi); letter-spacing: 0.14em; text-transform: uppercase; }
.if-hud b { font-weight: 400; }
.if-hud-score { position: absolute; left: 2.2%; top: 3.6%; display: grid; gap: 0.35em; }
.if-hud-score b { font: 800 17px/1 var(--f-mono); font-size: max(15px, 2.5cqi); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.if-hud-wave { position: absolute; left: 2.2%; top: calc(3.6% + max(34px, 5.6cqi)); display: flex; gap: 0.7em; align-items: baseline; }
.if-hud-wave b { font: 700 11px/1 var(--f-mono); font-size: max(10px, 1.1cqi); letter-spacing: 0.08em; background: var(--print-ink); color: var(--print-paper); padding: 0.35em 0.55em; }
.if-hud-rank { position: absolute; right: 2.2%; top: 3.6%; display: flex; align-items: center; gap: 0.7em; }
.if-hud-rank > b {
  font: 400 22px/1 var(--f-display); font-size: max(18px, 3.4cqi); min-width: 2.15em; text-align: center; padding: 0.14em 0.18em 0.1em;
  border: max(2px, 0.28cqi) solid var(--print-ink); background: var(--print-paper); color: var(--print-ink);
}
.if-rank-meta { display: grid; gap: 0.45em; justify-items: end; }
.if-rank-meta > span:first-child { font: 700 9px/1 var(--f-mono); font-size: max(9px, 0.95cqi); letter-spacing: 0.12em; }
.if-meter { display: block; width: max(70px, 10cqi); height: max(5px, 0.6cqi); border: 1.5px solid var(--print-ink); background: var(--print-paper); }
.if-meter i { display: block; height: 100%; width: 0; background: var(--print-ink); transition: width 0.12s linear; }
.if-hud-rank[data-rank="A"] > b, .if-hud-rank[data-rank="S"] > b { color: var(--print-spot); }
.if-hud-rank[data-rank="A"] .if-meter i, .if-hud-rank[data-rank="S"] .if-meter i { background: var(--print-spot); }
.if-hud-rank[data-rank="SS"] > b, .if-hud-rank[data-rank="SSS"] > b { background: var(--print-ink); color: var(--print-paper); text-shadow: 0.07em 0.05em 0 var(--print-spot); }
.if-hud-rank[data-rank="SS"] .if-meter i, .if-hud-rank[data-rank="SSS"] .if-meter i { background: var(--print-spot); }
.if-hud-rank.pop > b { animation: if-pop 0.42s cubic-bezier(0.2, 1.7, 0.4, 1); }
@keyframes if-pop { 0% { transform: scale(1.9) rotate(-8deg); } 100% { transform: none; } }
.if-hud-combo { position: absolute; left: 50%; top: 3.2%; transform: translateX(-50%); display: flex; gap: 0.4em; align-items: baseline; opacity: 0; transition: opacity 0.12s; }
.if-hud-combo.on { opacity: 1; }
.if-hud-combo b { font: 400 26px/1 var(--f-display); font-size: max(22px, 4.4cqi); color: var(--print-spot); text-shadow: 0.05em 0.04em 0 var(--print-ink); font-variant-numeric: tabular-nums; }
.if-hud-combo em { font: 700 10px/1 var(--f-mono); font-size: max(10px, 1.05cqi); font-style: normal; margin-left: 0.6em; }
/* a named string: its name stamps in under the hit counter */
.if-cname { position: absolute; left: 50%; top: calc(3.2% + max(26px, 5cqi)); transform: translateX(-50%) skewX(-8deg) scale(0.6); opacity: 0; white-space: nowrap; pointer-events: none;
  font: 400 18px/1 var(--f-display); font-size: max(16px, 2.7cqi); letter-spacing: 0.03em; color: var(--print-paper); background: var(--print-ink); padding: 0.18em 0.45em; box-shadow: 0.12em 0.12em 0 var(--print-spot); transition: opacity 0.25s, transform 0.25s; }
.if-cname.on { opacity: 1; transform: translateX(-50%) skewX(-8deg) scale(1); transition: opacity 0.05s, transform 0.18s cubic-bezier(0.2, 1.8, 0.4, 1); }
.if-cname.secret { background: var(--print-spot); box-shadow: 0.12em 0.12em 0 var(--print-ink); }
.if-hud-player { position: absolute; left: 2.2%; bottom: 4%; display: flex; gap: 0.8em; align-items: center; }
.if-hud-player b { font: 800 16px/1 var(--f-mono); font-size: max(14px, 2.2cqi); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.if-stocks { display: flex; gap: 0.35em; }
.if-stocks i { width: max(11px, 1.35cqi); height: max(11px, 1.35cqi); border: max(2px, 0.3cqi) solid var(--print-ink); border-radius: 50%; display: block; background: var(--print-paper); }
.if-stocks i.lost { border-style: dotted; opacity: 0.35; }
/* score: counts up, pops, and the gain flies in as a chip */
.if-hud-score b { display: inline-block; transform-origin: 0 60%; }
.if-hud-score.counting b { color: var(--print-spot); }
.if-hud-score.pop b { animation: if-score-pop 0.32s cubic-bezier(0.2, 1.8, 0.4, 1); }
.if-hud-score.big b { animation: if-score-pop 0.32s cubic-bezier(0.2, 1.8, 0.4, 1), if-score-shake 0.36s steps(6, end); }
@keyframes if-score-pop { 0% { transform: scale(1.45) skewX(-10deg); } 100% { transform: none; } }
@keyframes if-score-shake { 0%, 100% { translate: 0 0; } 20% { translate: -3px 1px; } 40% { translate: 3px -1px; } 60% { translate: -2px 0; } 80% { translate: 2px 1px; } }
.if-score-fly {
  position: absolute; left: 100%; top: 55%; margin-left: 0.6em; white-space: nowrap; font: 800 12px/1 var(--f-mono); font-size: max(11px, 1.35cqi); font-style: normal;
  background: var(--print-ink); color: var(--print-paper); padding: 0.3em 0.45em; box-shadow: 0.18em 0.18em 0 var(--print-spot);
  animation: if-fly 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; pointer-events: none;
}
.if-score-fly.big { background: var(--print-spot); box-shadow: 0.18em 0.18em 0 var(--print-ink); font-size: max(13px, 1.7cqi); }
.if-score-fly.broken { background: var(--print-paper); color: var(--print-ink); border: 1.5px solid var(--print-ink); box-shadow: none; }
@keyframes if-fly { 0% { opacity: 0; transform: translate(1.2em, 0.4em) scale(1.5) rotate(-6deg); } 14% { opacity: 1; transform: translate(0, 0) scale(1) rotate(-3deg); } 70% { opacity: 1; transform: translate(-0.4em, -0.8em) rotate(-3deg); } 100% { opacity: 0; transform: translate(-1.6em, -1.4em) scale(0.7) rotate(-3deg); } }
/* charge cooldown: refills after each charged hit, flashes when it is back */
.if-charge { display: flex; align-items: center; gap: 0.5em; margin-left: 0.4em; }
.if-cmeter { display: block; width: max(54px, 7cqi); height: max(6px, 0.75cqi); border: 1.5px solid var(--print-ink); background: var(--print-paper); }
.if-cmeter i { display: block; height: 100%; width: 100%; background: var(--print-ink); }
.if-charge[data-s="cool"] .if-cmeter i { background: repeating-linear-gradient(-45deg, var(--print-ink) 0 2px, transparent 2px 4px); }
.if-charge[data-s="cool"] .if-lbl { opacity: 0.45; }
.if-charge[data-s="on"] .if-cmeter i { background: var(--print-spot); }
.if-charge[data-s="ready"] .if-cmeter { animation: if-ready 0.5s ease-out; }
@keyframes if-ready { 0% { box-shadow: 0 0 0 0.35em var(--print-spot); } 100% { box-shadow: 0 0 0 0 transparent; } }
.if-hud-chip { position: absolute; right: 2.2%; bottom: 4%; font: 700 9px/1 var(--f-mono); font-size: max(9px, 0.95cqi); letter-spacing: 0.14em; text-transform: uppercase; border: 1.5px solid var(--print-ink); padding: 0.55em 0.75em; background: var(--print-paper); }
.if-banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) skewX(-8deg) scale(0.6); opacity: 0;
  display: grid; justify-items: center; gap: 0.3em; pointer-events: none; white-space: nowrap;
  transition: opacity 0.15s, transform 0.25s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.if-banner.on { opacity: 1; transform: translate(-50%, -50%) skewX(-8deg) scale(1); }
.if-banner span { font: 400 40px/1 var(--f-display); font-size: max(28px, 7.4cqi); color: var(--print-ink); text-shadow: 0.05em 0.045em 0 var(--print-spot); -webkit-text-stroke: 0; }
.if-banner small { font: 700 11px/1 var(--f-mono); font-size: max(10px, 1.2cqi); letter-spacing: 0.1em; background: var(--print-ink); color: var(--print-paper); padding: 0.5em 0.8em; }
.if-b-finish span { color: var(--print-spot); text-shadow: 0.05em 0.045em 0 var(--print-ink); font-size: max(34px, 9.5cqi); }
.if-b-secret span { color: var(--print-spot); text-shadow: 0.05em 0.045em 0 var(--print-ink); letter-spacing: 0.08em; }
.if-b-ko span { color: var(--print-spot); text-shadow: 0.05em 0.045em 0 var(--print-ink); }
.if-tally {
  position: absolute; left: 50%; bottom: 13%; transform: translate(-50%, 12px); opacity: 0; white-space: nowrap;
  display: flex; gap: 0.8em; align-items: baseline; font: 600 10px/1 var(--f-mono); font-size: max(9px, 1.05cqi);
  background: var(--print-paper); border: 1.5px solid var(--print-ink); padding: 0.6em 0.9em; transition: opacity 0.2s, transform 0.25s;
}
.if-tally.on { opacity: 1; transform: translate(-50%, 0); }
.if-tally b { font: 400 13px/1 var(--f-display); font-size: max(12px, 1.5cqi); }
.if-tally em { font-style: normal; font-weight: 800; color: var(--print-spot); }
.if-ovl { position: absolute; inset: 0; display: grid; place-items: center; }
.if-ovl-title { appearance: none; border: 0; padding: 15% 0 0 0; margin: 0; background: transparent; cursor: pointer; color: var(--print-ink); align-content: start; justify-items: center; gap: 0.9em; font-family: var(--f-mono); }
.if-press {
  font: 400 15px/1 var(--f-display); font-size: max(13px, 2.1cqi); letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--print-ink); color: var(--print-paper); padding: 0.6em 1em 0.55em; box-shadow: 0.25em 0.25em 0 var(--print-spot);
  animation: if-blink 1.1s steps(2, jump-none) infinite;
}
@keyframes if-blink { 50% { box-shadow: 0.25em 0.25em 0 var(--print-spot), 0 0 0 0.25em var(--print-paper), 0 0 0 0.4em var(--print-ink); } }
.if-sub { font: 600 10px/1.4 var(--f-mono); font-size: max(9px, 1cqi); letter-spacing: 0.04em; background: var(--print-paper); padding: 0.4em 0.7em; border: 1.5px solid var(--print-ink); max-width: 92%; }
.if-sub kbd { font-size: 0.95em; }
.if-ovl-pause, .if-ovl-over { background: rgba(241, 240, 235, 0.72); cursor: default; }
.if-card { background: var(--print-paper); border: 3px solid var(--print-ink); box-shadow: 0.5em 0.5em 0 var(--print-ink); padding: 1.2em 1.4em; display: grid; gap: 0.8em; justify-items: center; min-width: min(360px, 80%); font: 500 13px/1.5 var(--f-ui); color: var(--print-ink); }
.if-card h3 { font: 400 28px/1 var(--f-display); font-size: max(22px, 3.4cqi); text-transform: uppercase; text-shadow: 0.05em 0.04em 0 var(--print-spot); }
.if-card .if-ko { color: var(--print-spot); text-shadow: 0.05em 0.04em 0 var(--print-ink); font-size: max(30px, 5.2cqi); }
.if-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.if-row button { appearance: none; border: 2px solid var(--print-ink); background: var(--print-paper); color: var(--print-ink); font: 700 11px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 12px; cursor: pointer; }
.if-row button:first-child { background: var(--print-ink); color: var(--print-paper); }
.if-row button:focus-visible { outline: 3px solid var(--print-spot); outline-offset: 2px; }
.if-stats { display: grid; grid-template-columns: auto auto; gap: 4px 18px; margin: 0; font: 600 12px/1.3 var(--f-mono); font-variant-numeric: tabular-nums; }
.if-stats dt { color: #5d5c62; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; align-self: center; }
.if-stats dd { margin: 0; text-align: right; font-weight: 800; }