/* =====================================================================
 * MANILA STREETBALL JAM — style.css  (UI agent)
 * Jeepney-signage arcade look: chrome lettering, hand-painted plates,
 * stripe borders, banderitas. No web fonts, no images: all CSS.
 * ===================================================================== */

/* ---------- 0. tokens ---------- */
:root {
  --ink: #16110d;
  --cream: #fff4d6;
  --paper: #fbe9b7;
  --sun: #ffd23f;
  --jeep-red: #e0262f;
  --jeep-blue: #1d4ed8;
  --jeep-green: #17a34a;
  --orange: #ff8c1a;
  --pink: #ff4fa3;
  --cyan: #29d3ff;
  --home: #e0262f;
  --home2: #ffd23f;
  --away: #1f7ae0;
  --away2: #e8f4ff;
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Heavy", "Arial Black", sans-serif;
  --font-body: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --chrome: linear-gradient(180deg, #ffffff 0%, #eef2f6 20%, #aab4bf 43%, #39424e 50%, #7e8a97 57%, #dfe6ed 78%, #ffffff 100%);
  --gold: linear-gradient(180deg, #fffbe0 0%, #ffe46b 30%, #d99a00 50%, #a86400 54%, #ffd23f 78%, #fff6c0 100%);
  --fire: linear-gradient(180deg, #fffbe0 0%, #ffe14a 25%, #ff9a1a 55%, #e0261f 82%, #7a0b0b 100%);
  --stripes: repeating-linear-gradient(90deg, var(--jeep-red) 0 16px, var(--sun) 16px 32px, var(--jeep-blue) 32px 48px, #fff 48px 64px);
  --hazard: repeating-linear-gradient(-45deg, var(--sun) 0 10px, var(--ink) 10px 20px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gut: clamp(8px, 1.6vw, 22px);
}

/* ---------- 1. page + roots ---------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d0a08;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  color: var(--cream);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: #0d0a08;
}
#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--cream);
  line-height: 1.25;
}
#ui *, #ui *::before, #ui *::after { box-sizing: border-box; }
#ui button { font: inherit; color: inherit; margin: 0; }
#ui [data-nav]:focus, #ui button:focus { outline: none; }
#ui kbd { font-family: var(--font-display); }

.screen-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.msj-screen {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  padding: calc(var(--safe-t) + var(--gut)) calc(var(--safe-r) + var(--gut)) calc(var(--safe-b) + var(--gut)) calc(var(--safe-l) + var(--gut));
  animation: screenIn .28s ease-out both;
}

/* ---------- 2. shared typography ---------- */
.lt { position: relative; isolation: isolate; font-family: var(--font-display); text-transform: uppercase; line-height: .95; }
.lt::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: inherit;
  color: var(--lt-ink, var(--ink));
  -webkit-text-fill-color: var(--lt-ink, var(--ink));
  -webkit-text-stroke: var(--lt-stroke, .16em) var(--lt-ink, var(--ink));
  text-shadow: .045em .07em 0 var(--lt-ink, var(--ink)), .08em .12em 0 rgba(0, 0, 0, .35);
  pointer-events: none;
}
.lt-fill {
  display: block;
  position: relative;
  color: #fff;
  background: var(--lt-bg, none);
  -webkit-background-clip: text;
  background-clip: text;
}
.lt.is-grad .lt-fill, .grad-fill { -webkit-text-fill-color: transparent; color: transparent; }

/* banderitas: fiesta pennants on a string */
.banderitas {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: clamp(14px, 2.4vw, 26px);
  padding: 0 4px;
  pointer-events: none;
}
.banderitas::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1px;
  height: 2px;
  background: rgba(20, 14, 10, .85);
  border-radius: 2px;
}
.banderitas i {
  display: block;
  flex: 0 0 auto;
  width: clamp(12px, 2vw, 24px);
  height: 100%;
  margin-top: 2px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--jeep-red);
  transform-origin: 50% 0;
  animation: sway 2.6s ease-in-out infinite alternate;
}
.banderitas i:nth-child(6n+2) { background: var(--sun); animation-delay: -.4s; }
.banderitas i:nth-child(6n+3) { background: var(--jeep-blue); animation-delay: -.9s; }
.banderitas i:nth-child(6n+4) { background: var(--jeep-green); animation-delay: -1.3s; }
.banderitas i:nth-child(6n+5) { background: var(--pink); animation-delay: -1.7s; }
.banderitas i:nth-child(6n+6) { background: #fff; animation-delay: -2.1s; }

/* panels */
.panel {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(38, 28, 20, .96), rgba(18, 13, 10, .96));
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--sun), 0 18px 50px rgba(0, 0, 0, .6);
  padding: clamp(14px, 2vw, 24px) clamp(12px, 2vw, 24px) clamp(12px, 2vw, 22px);
}
.panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: var(--stripes);
  border-radius: 11px 11px 0 0;
}
.panel-h, .guide-h {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--sun);
  text-shadow: 2px 2px 0 var(--ink), 0 0 12px rgba(255, 210, 63, .25);
}
.panel-h { font-size: clamp(24px, 3.6vw, 40px); }
.guide-h { font-size: clamp(17px, 2vw, 24px); }
.panel-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; }

/* ---------- 3. buttons + focus ---------- */
.btn {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.1vw, 24px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, #fff8d2 0%, #ffd23f 55%, #e0a800 100%);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: .42em 1.1em .38em;
  box-shadow: 0 4px 0 var(--ink), 0 7px 16px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .09s ease, filter .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
.btn-label { display: block; line-height: 1; }
.btn-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .5em;
  letter-spacing: .12em;
  opacity: .75;
  line-height: 1;
}
.btn.is-focus {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 6px 0 var(--ink), 0 0 0 4px #fff, 0 0 0 9px rgba(255, 210, 63, .45), 0 10px 22px rgba(0, 0, 0, .4);
}
.btn:active { transform: translateY(3px) scale(.99); box-shadow: 0 1px 0 var(--ink); }
.btn-big { font-size: clamp(26px, 4.2vw, 46px); padding: .32em 1.2em .3em; }
.btn-play {
  color: #fff;
  background: linear-gradient(180deg, #ff6a5e 0%, var(--jeep-red) 50%, #8f0f16 100%);
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}
.btn-play .btn-sub { color: var(--sun); opacity: 1; text-shadow: 1px 1px 0 var(--ink); }
.btn-menu { background: linear-gradient(180deg, #ffffff 0%, #dfe8f1 45%, #9fb0c1 55%, #e9eff5 100%); }
.btn-alt { color: #fff; background: linear-gradient(180deg, #4d8cff, var(--jeep-blue) 55%, #13307f); text-shadow: 1px 1px 0 var(--ink); }
.btn-next { color: var(--ink); background: linear-gradient(180deg, #b9ffcf, #3fdc7e 50%, #139245); }
.btn-ghost {
  color: var(--cream);
  background: linear-gradient(180deg, #3a2d22, #1f1812);
  box-shadow: 0 4px 0 #000, 0 6px 12px rgba(0, 0, 0, .35);
}
.btn-ghost.is-armed { color: #fff; background: linear-gradient(180deg, #ff6a5e, #a3121b); animation: armedPulse .5s ease-in-out infinite alternate; }
.btn.is-dim { filter: grayscale(.8) brightness(.72); }
.btn-arrow { font-size: clamp(18px, 2.6vw, 28px); padding: .3em .6em; flex: 0 0 auto; }

/* generic focus ring for non-button nav targets */
[data-nav].is-focus:not(.btn) {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(255, 210, 63, .5), 0 12px 26px rgba(0, 0, 0, .45);
}
[data-nav] { cursor: pointer; }
.is-nope { animation: nope .38s ease; }

/* speech bubble */
.bubble {
  position: relative;
  align-self: center;
  max-width: min(92vw, 720px);
  margin: 10px auto 18px;
  padding: .7em 1.1em;
  background: #fffdf3;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 5px 0 var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(14px, 1.9vw, 21px);
  text-align: center;
  animation: bubbleIn .45s .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: -16px;
  width: 22px;
  height: 18px;
  background: #fffdf3;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: skewX(35deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- 4. TITLE ---------- */
.scr-title {
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, rgba(12, 8, 5, .62) 0%, rgba(12, 8, 5, .38) 55%, rgba(12, 8, 5, .08) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 22%, transparent 78%, rgba(0, 0, 0, .3));
}
.title-wrap {
  margin: auto;
  width: min(100%, 1000px);
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.6vh, 20px);
  padding: 0 4px 10px;
}
.title-flags { max-width: 900px; }

.logo { --lz: 1; display: flex; flex-direction: column; align-items: center; text-align: center; transition: font-size .2s; }
.logo-top {
  font-family: var(--font-display);
  font-size: calc(var(--lz) * clamp(18px, 4.2vw, 46px));
  letter-spacing: .42em;
  padding: .12em .2em .1em .62em;
  color: var(--sun);
  background: linear-gradient(180deg, #ff4a52, var(--jeep-red) 55%, #8f0f16);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--sun), 0 0 0 6px var(--ink), 0 8px 18px rgba(0, 0, 0, .45);
  text-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-2deg);
  animation: dropIn .6s cubic-bezier(.2, 1.5, .4, 1) both;
}
.logo-mid {
  --lt-stroke: .2em;
  margin-top: .12em;
  font-size: calc(var(--lz) * clamp(44px, 11.5vw, 138px));
  letter-spacing: .01em;
  transform: skewX(-9deg) rotate(-2deg);
  animation: slamIn .55s .12s cubic-bezier(.2, 1.4, .4, 1) both;
}
.logo-mid .lt-fill {
  background: linear-gradient(180deg, #fff9c9 0%, var(--sun) 40%, #ff9a1a 72%, #e0261f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.logo-jam {
  --lt-stroke: .16em;
  margin-top: -.08em;
  font-size: calc(var(--lz) * clamp(78px, 19vw, 230px));
  line-height: .82;
  letter-spacing: .04em;
  transform: rotate(-4deg);
  filter: drop-shadow(0 .04em 0 rgba(0, 0, 0, .35));
  animation: slamIn .6s .28s cubic-bezier(.2, 1.4, .4, 1) both;
}
.logo-jam .lt-fill {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.logo-jam::after {
  content: "";
  position: absolute;
  top: 8%; bottom: 8%; left: -30%;
  width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  mix-blend-mode: overlay;
  transform: skewX(-18deg);
  animation: glint 3.6s 1.2s ease-in-out infinite;
  pointer-events: none;
}
.logo-plate {
  margin-top: .5em;
  font-family: var(--font-display);
  font-size: calc(var(--lz) * clamp(15px, 2.6vw, 30px));
  letter-spacing: .18em;
  color: var(--sun);
  background: var(--ink);
  padding: .28em 1em .22em;
  border: 3px solid #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px var(--jeep-blue);
  position: relative;
  animation: dropIn .5s .45s ease-out both;
}
.logo-plate::before, .logo-plate::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .5em; height: .5em;
  margin-top: -.25em;
  border-radius: 50%;
  background: var(--chrome);
  border: 2px solid var(--ink);
}
.logo-plate::before { left: .3em; }
.logo-plate::after { right: .3em; }
.title-wrap.is-sub .logo { --lz: .45; }

.title-body { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vh, 16px); width: 100%; }
.press-start {
  pointer-events: auto;
  background: none;
  border: 0;
  padding: .3em .6em;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.6vw, 28px);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink), 0 0 16px rgba(255, 210, 63, .8);
  animation: pressBlink 1.1s steps(2, start) infinite;
}
@keyframes pressBlink { to { opacity: .15; } }
.menu { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(86vw, 380px); }
.menu .btn { width: 100%; }
.title-foot {
  margin: 4px 0 0;
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: .16em;
  font-weight: 700;
  opacity: .8;
  text-align: center;
  text-shadow: 1px 1px 0 var(--ink);
}
.title-panel {
  width: min(96vw, 940px);
  max-height: min(72vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.title-panel > .btn { align-self: center; }
.title-settings { width: min(94vw, 560px); }

/* guide (controls + rules) */
.guide { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 26px); }
.ctl-row {
  display: grid;
  grid-template-columns: minmax(92px, 130px) 1fr;
  grid-template-areas: "act keys" "desc desc";
  gap: 4px 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 244, 214, .16);
}
.ctl-act { grid-area: act; font-family: var(--font-display); letter-spacing: .05em; color: var(--sun); font-size: clamp(14px, 1.6vw, 18px); }
.ctl-keys { grid-area: keys; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.ctl-desc { grid-area: desc; font-size: clamp(12px, 1.3vw, 14px); opacity: .85; }
#ui kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: .18em .45em .12em;
  font-size: clamp(12px, 1.3vw, 15px);
  text-align: center;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #d8d0bd);
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 6px;
  line-height: 1.1;
}
.kor { font-size: 11px; opacity: .65; margin: 0 3px; text-transform: uppercase; letter-spacing: .1em; }
.kplus { font-family: var(--font-display); color: var(--sun); margin: 0 1px; }
.guide-note { margin: 10px 0 0; font-size: 12px; opacity: .75; font-style: italic; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rules li {
  position: relative;
  padding: 2px 0 2px 28px;
  font-size: clamp(12px, 1.35vw, 15px);
}
.rules li::before {
  content: "";
  position: absolute;
  left: 2px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 46%, var(--ink) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, var(--ink) 46% 54%, transparent 54%),
    radial-gradient(circle at 35% 30%, #ffb35c, #e2701a 60%, #9c4209);
  border: 2px solid var(--ink);
}
.rules b { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: .05em; color: var(--sun); font-size: 1.08em; }

/* settings rows */
.set-list { display: flex; flex-direction: column; gap: 8px; }
.set-row {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: .55em .9em;
  background: linear-gradient(90deg, rgba(255, 244, 214, .08), rgba(255, 244, 214, .02));
  border: 2px solid rgba(255, 244, 214, .2);
  border-left: 6px solid var(--jeep-green);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: transform .08s, background .12s;
}
.set-row.is-off { border-left-color: #6b6258; }
.set-label { font-weight: 800; font-size: clamp(14px, 1.6vw, 17px); }
.set-val {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.7vw, 19px);
  letter-spacing: .06em;
  min-width: 6.5em;
  text-align: center;
  padding: .12em .5em;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.set-val::before { content: "\2039  "; opacity: .55; }
.set-val::after { content: "  \203a"; opacity: .55; }
.set-row.is-off .set-val { background: #8b8378; color: #1e1914; }
.set-row.is-focus { background: linear-gradient(90deg, rgba(255, 210, 63, .22), rgba(255, 210, 63, .05)); transform: translateX(4px); }
.set-tip { margin: 4px 0 0; font-size: 11px; opacity: .6; text-align: center; letter-spacing: .08em; }

/* ---------- 5. SELECT ---------- */
.scr-select {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px),
    radial-gradient(ellipse at 50% 0%, rgba(40, 24, 12, .86), rgba(10, 7, 5, .94) 70%);
}
.sel-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  min-height: 0;
}
.sel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sel-titlebox { display: flex; flex-direction: column; }
.sel-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: .95;
  color: var(--sun);
  letter-spacing: .03em;
  transform: skewX(-8deg);
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 6px 6px 0 var(--jeep-red);
}
.sel-sub { font-weight: 800; letter-spacing: .14em; font-size: clamp(11px, 1.3vw, 14px); opacity: .8; text-transform: uppercase; margin-top: 4px; }
.sel-tabs { display: flex; gap: 6px; }
.sel-tab {
  display: grid;
  place-items: center;
  width: clamp(30px, 3.6vw, 42px);
  height: clamp(30px, 3.6vw, 42px);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 20px);
  color: rgba(255, 244, 214, .6);
  border: 3px solid rgba(255, 244, 214, .3);
  border-radius: 50%;
}
.sel-tab.is-done { background: var(--jeep-green); color: #fff; border-color: var(--ink); }
.sel-tab.is-on { background: var(--sun); color: var(--ink); border-color: var(--ink); transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255, 210, 63, .35); }
.sel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 8px 14px;
}
.sel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 4px solid transparent;
  border-image: var(--stripes) 4;
}
.sel-foot .btn-next, .sel-foot .btn-play { margin-left: auto; }
.sel-lead { margin: 0 0 12px; font-size: clamp(13px, 1.5vw, 16px); font-weight: 700; opacity: .9; }
.sel-count { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; color: var(--sun); font-size: clamp(15px, 1.8vw, 20px); }

/* team cards (hand-painted jeepney plates) */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: clamp(8px, 1.2vw, 14px); }
.team-card {
  position: relative;
  overflow: hidden;
  padding: 18px 12px 12px 58px;
  min-height: 92px;
  color: #fff;
  background: linear-gradient(160deg, var(--tp, #444), color-mix(in srgb, var(--tp, #444) 60%, #000));
  background-color: var(--tp, #444);
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .1s;
}
.tc-stripe { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: repeating-linear-gradient(90deg, var(--tp2, #fff) 0 12px, var(--ink) 12px 16px); }
.tc-swatch { position: absolute; left: 10px; top: 20px; width: 38px; height: 50px; display: flex; flex-direction: column; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
.tc-swatch i { flex: 1; display: block; }
.tc-swatch .sw-a { background: var(--tp, #444); }
.tc-swatch .sw-b { background: var(--tp2, #fff); }
.tc-short { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); line-height: 1; color: var(--tp2, #fff); text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); letter-spacing: .04em; }
.tc-name { font-family: var(--font-display); font-size: clamp(15px, 1.6vw, 19px); letter-spacing: .03em; text-shadow: 1px 1px 0 var(--ink); }
.tc-brgy { font-size: 11px; font-weight: 800; letter-spacing: .08em; opacity: .9; text-transform: uppercase; text-shadow: 1px 1px 0 var(--ink); }
.team-card.is-selected { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--sun), 0 0 22px rgba(255, 210, 63, .55); }
.team-card.is-selected::after {
  content: "IKAW";
  position: absolute;
  right: -30px; top: 12px;
  width: 110px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ink);
  background: var(--sun);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(35deg);
}
.team-card.is-focus { transform: translateY(-3px) scale(1.02); }
.team-card.is-mini { min-height: 0; padding: 14px 10px 8px 52px; }
.team-card.is-mini .tc-swatch { top: 12px; width: 32px; height: 36px; }
.opp-wrap { margin-top: clamp(14px, 2.4vh, 26px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.opp-label { font-family: var(--font-display); letter-spacing: .12em; font-size: clamp(16px, 2vw, 22px); color: var(--jeep-red); text-shadow: 1px 1px 0 var(--ink), 0 0 10px rgba(224, 38, 47, .45); }
.opp-row { display: flex; align-items: center; gap: 10px; width: min(100%, 460px); }
.opp-slot { flex: 1 1 auto; border-radius: 14px; min-width: 0; }
.opp-slot .team-card { width: 100%; }
.team-card.is-opp::after {
  content: "KALABAN";
  position: absolute; right: -32px; top: 12px; width: 120px; text-align: center;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .12em;
  color: #fff; background: var(--ink); transform: rotate(35deg);
}

/* character cards */
.char-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 16px); }
.char-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px 9px 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cc) 30%, transparent), transparent 42%),
    linear-gradient(180deg, #2a1f17, #17110d);
  background-color: #1f1712;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink), inset 0 0 0 2px rgba(255, 244, 214, .08);
  transition: transform .1s, box-shadow .12s;
}
.char-card.is-focus { transform: translateY(-3px); }
.char-card.is-picked {
  box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--sun), 0 0 26px rgba(255, 210, 63, .45);
  background:
    linear-gradient(180deg, rgba(255, 210, 63, .28), transparent 50%),
    linear-gradient(180deg, #2f2417, #17110d);
}
.cc-face {
  position: relative;
  height: clamp(92px, 17vh, 170px);
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--ink);
  background:
    repeating-conic-gradient(from 0deg at 50% 70%, rgba(255, 255, 255, .13) 0 10deg, transparent 10deg 20deg),
    radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--cc) 75%, #fff), var(--cc) 45%, color-mix(in srgb, var(--cc) 45%, #000));
  background-color: var(--cc);
}
.portrait { display: block; width: 100%; height: 100%; }
.cc-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: clamp(34px, 4vw, 46px);
  height: clamp(34px, 4vw, 46px);
  display: none;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--ink);
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-8deg);
}
.char-card.is-picked .cc-badge { display: grid; animation: badgePop .35s cubic-bezier(.2, 1.8, .4, 1); }
.cc-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.cc-nick {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1;
  color: #fff;
  letter-spacing: .03em;
  text-shadow: 2px 2px 0 var(--ink), 0 0 10px color-mix(in srgb, var(--cc) 70%, transparent);
}
.cc-name { font-weight: 800; font-size: clamp(11px, 1.2vw, 13px); opacity: .85; }
.cc-role {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sun);
}
.cc-blurb {
  margin: 0;
  font-size: clamp(11px, 1.15vw, 13px);
  font-style: italic;
  opacity: .82;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-stats { display: grid; grid-template-columns: 1fr; gap: 2px; }
.st-row { display: grid; grid-template-columns: 3.3em 1fr 1.4em; align-items: center; gap: 5px; font-size: clamp(9px, 1vw, 11px); font-weight: 800; letter-spacing: .06em; }
.st-k { opacity: .75; }
.st-bar { height: 7px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(0, 0, 0, .6); border-radius: 4px; overflow: hidden; }
.st-bar i { display: block; height: 100%; background-image: linear-gradient(90deg, #29d3ff 0%, #3fdc7e 35%, #ffd23f 70%, #ff4f1f 100%); background-repeat: no-repeat; border-radius: 3px; }
.st-v { text-align: right; font-family: var(--font-display); font-weight: 400; font-size: 1.15em; }
.st-row.is-max .st-v { color: var(--sun); }
.cc-sig {
  margin-top: auto;
  padding: 6px 8px;
  background: rgba(0, 0, 0, .35);
  border: 2px dashed rgba(255, 210, 63, .5);
  border-radius: 8px;
  font-size: clamp(10px, 1.1vw, 12px);
}
.cc-sig-tag { display: block; font-size: 9px; letter-spacing: .18em; font-weight: 800; color: var(--pink); }
.cc-sig b { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; font-size: 1.25em; color: var(--sun); }
.cc-sig-desc { opacity: .82; }

/* match step */
.matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2vw, 22px);
  margin-bottom: clamp(12px, 2vh, 20px);
}
.mu-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mu-trio { display: flex; gap: 6px; }
.mu-face { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mu-face .portrait { width: clamp(46px, 7vw, 84px); height: clamp(46px, 7vw, 84px); border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle, color-mix(in srgb, var(--home) 70%, #fff), var(--home)); background-color: var(--home); }
.mu-face span { font-family: var(--font-display); font-size: clamp(11px, 1.3vw, 15px); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mu-vs { font-size: clamp(36px, 6vw, 72px); transform: rotate(-6deg); }
.mu-vs .lt-fill { background: var(--fire); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mu-mystery {
  padding: .6em .8em;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px dashed rgba(255, 244, 214, .35);
  border-radius: 10px;
  opacity: .8;
}
.match-grid { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 22px); }
.opt-group { display: flex; flex-direction: column; gap: 8px; }
.opt-title { font-family: var(--font-display); letter-spacing: .08em; font-size: clamp(17px, 2vw, 22px); color: var(--sun); text-shadow: 2px 2px 0 var(--ink); }
.opt-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.opt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(255, 244, 214, .06);
  border: 3px solid rgba(255, 244, 214, .22);
  border-radius: 12px;
  transition: transform .1s, background .12s;
}
.opt b { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.9vw, 22px); letter-spacing: .04em; }
.opt span { font-size: clamp(11px, 1.15vw, 13px); opacity: .8; }
.opt.is-selected { background: linear-gradient(180deg, rgba(255, 210, 63, .3), rgba(255, 210, 63, .08)); border-color: var(--sun); }
.opt.is-selected b::before { content: "\2605  "; color: var(--sun); }
.opt.is-focus { transform: translateY(-2px); }
.opt-hard.is-selected { border-color: var(--jeep-red); background: linear-gradient(180deg, rgba(224, 38, 47, .35), rgba(224, 38, 47, .08)); }
.opt-night.is-selected { border-color: #ffb347; background: linear-gradient(180deg, rgba(255, 150, 40, .25), rgba(20, 20, 60, .3)); }

/* ---------- 6. VERSUS ---------- */
.scr-versus { padding: 0; }
.vs-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 2vh, 20px);
  padding: calc(var(--safe-t) + var(--gut)) calc(var(--safe-r) + var(--gut)) calc(var(--safe-b) + var(--gut)) calc(var(--safe-l) + var(--gut));
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .65) 80%),
    linear-gradient(105deg, var(--home) 0 49.4%, var(--ink) 49.4% 50.6%, var(--away) 50.6% 100%);
  overflow: hidden;
  cursor: pointer;
}
.vs-rays {
  position: absolute;
  left: 50%; top: 50%;
  width: 240vmax; height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(rgba(255, 255, 255, .09) 0 7deg, transparent 7deg 14deg);
  animation: spin 40s linear infinite;
  pointer-events: none;
}
.vs-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 44px); width: 100%; max-width: 1500px; }
.vs-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.5vh, 16px); }
.vs-plate { text-align: center; }
.vs-brgy { font-weight: 800; letter-spacing: .2em; font-size: clamp(10px, 1.3vw, 14px); text-transform: uppercase; text-shadow: 1px 1px 0 var(--ink); }
.vs-team { font-size: clamp(22px, 3.6vw, 52px); letter-spacing: .02em; }
.vs-home .vs-team .lt-fill { color: var(--home2); }
.vs-away .vs-team .lt-fill { color: var(--away2); }
.vs-trio { display: flex; gap: clamp(4px, 1vw, 14px); justify-content: center; width: 100%; }
.vs-fighter { flex: 0 1 auto; width: clamp(78px, 11.5vw, 190px); min-width: 0; display: flex; flex-direction: column; align-items: center; animation: slideInL .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.vs-away .vs-fighter { animation-name: slideInR; }
.vs-face {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 4px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--ink);
  background: radial-gradient(circle at 50% 65%, rgba(255, 255, 255, .5), transparent 60%), var(--home2);
}
.vs-away .vs-face { background: radial-gradient(circle at 50% 65%, rgba(255, 255, 255, .5), transparent 60%), var(--away2); }
.vs-nick { margin-top: 6px; font-family: var(--font-display); font-size: clamp(14px, 1.9vw, 26px); letter-spacing: .04em; text-shadow: 2px 2px 0 var(--ink); }
.vs-role { font-size: clamp(9px, 1vw, 12px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; text-align: center; text-shadow: 1px 1px 0 var(--ink); }
.vs-mid { flex: 0 0 auto; font-size: clamp(64px, 12vw, 190px); transform: rotate(-8deg); animation: vsSlam .5s .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.vs-mid .lt-fill { background: var(--fire); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.vs-bubble { position: relative; z-index: 1; margin: 0 auto; }
.vs-go { position: relative; z-index: 1; animation: dropIn .4s 1.1s ease-out both; }

/* ---------- 7. PAUSE ---------- */
.scr-pause {
  background: rgba(8, 6, 4, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.pause-wrap { margin: auto; width: min(100%, 980px); max-height: 100%; display: flex; flex-direction: column; min-height: 0; }
.pause-panel { width: 100%; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pause-head { text-align: center; }
.pause-title { font-size: clamp(36px, 6vw, 72px); transform: rotate(-2deg); margin-top: 4px; }
.pause-title .lt-fill { background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pause-sub { font-weight: 700; font-style: italic; opacity: .8; font-size: clamp(12px, 1.4vw, 15px); margin-top: 4px; }
.pause-body { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 4px 8px; display: flex; flex-direction: column; gap: 12px; }
.pause-body > .btn { align-self: center; }
.pause-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pause-menu { display: flex; flex-direction: column; gap: 10px; }
.pause-menu .btn { width: 100%; }
.pause-stats { min-width: 0; }

/* box score */
.box-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.box { width: 100%; border-collapse: collapse; font-size: clamp(11px, 1.3vw, 15px); }
.box th {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--sun);
  padding: 6px 6px;
  text-align: center;
  border-bottom: 3px solid var(--ink);
  white-space: nowrap;
}
.box td { padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(255, 244, 214, .08); font-weight: 700; }
.box .box-name { text-align: left; white-space: nowrap; }
.box .box-name b { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; font-size: 1.12em; }
.box .box-name small { display: block; font-size: .75em; opacity: .6; font-weight: 600; }
.box tbody tr:nth-child(even):not(.box-head):not(.box-total) td { background: rgba(255, 255, 255, .03); }
.box-head td {
  text-align: left;
  font-family: var(--font-display);
  letter-spacing: .1em;
  font-weight: 400;
  color: var(--tc2, #fff);
  background: var(--tc, #444);
  text-shadow: 1px 1px 0 var(--ink);
  border-top: 3px solid var(--ink);
}
.box-total td { border-top: 2px solid rgba(255, 244, 214, .35); color: var(--sun); }
.box tr.is-mvp td { background: rgba(255, 210, 63, .14); }
.box-mvp { display: inline-block; margin-left: 6px; padding: 0 5px; font-family: var(--font-display); font-size: .8em; color: var(--ink); background: var(--sun); border-radius: 4px; vertical-align: middle; }
.box-empty { opacity: .7; font-style: italic; }

/* ---------- 8. RESULTS ---------- */
.scr-results { background: rgba(8, 6, 4, .74); }
.res-wrap { position: absolute; inset: 0; overflow: hidden; display: flex; padding: calc(var(--safe-t) + var(--gut)) calc(var(--safe-r) + var(--gut)) calc(var(--safe-b) + var(--gut)) calc(var(--safe-l) + var(--gut)); }
.res-rays {
  position: absolute;
  left: 50%; top: 18%;
  width: 260vmax; height: 260vmax;
  margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(rgba(255, 210, 63, .16) 0 8deg, transparent 8deg 16deg);
  animation: spin 30s linear infinite;
  pointer-events: none;
}
.res-lose .res-rays { background: repeating-conic-gradient(rgba(120, 150, 190, .1) 0 8deg, transparent 8deg 16deg); animation-duration: 90s; }
.res-shell {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(100%, 1120px);
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
  padding: 4px 4px 12px;
}
.res-title { font-size: clamp(64px, 15vw, 190px); transform: rotate(-4deg); animation: slamIn .6s .1s cubic-bezier(.2, 1.5, .4, 1) both; }
.res-win .res-title .lt-fill { background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.res-lose .res-title { transform: rotate(3deg); animation: droop 1.1s .1s ease-out both; }
.res-lose .res-title .lt-fill { background: linear-gradient(180deg, #eef3ff, #9fb2cf 50%, #4c5d7a 55%, #b8c6dc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.res-sub { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(12px, 1.7vw, 18px); text-align: center; text-shadow: 1px 1px 0 var(--ink); }
.res-score { display: flex; align-items: center; gap: clamp(8px, 2vw, 22px); font-family: var(--font-display); }
.rs-team { display: flex; align-items: center; gap: 10px; }
.rs-name { padding: .1em .45em; font-size: clamp(18px, 2.6vw, 32px); border: 3px solid var(--ink); border-radius: 8px; transform: skewX(-8deg); text-shadow: 1px 1px 0 var(--ink); }
.rs-home .rs-name { background: var(--home); color: var(--home2); }
.rs-away .rs-name { background: var(--away); color: var(--away2); }
.rs-num { font-size: clamp(40px, 7vw, 88px); color: var(--cream); text-shadow: 3px 3px 0 var(--ink); line-height: 1; opacity: .7; }
.rs-team.is-win .rs-num { color: var(--sun); opacity: 1; text-shadow: 3px 3px 0 var(--ink), 0 0 22px rgba(255, 210, 63, .6); }
.rs-dash { font-size: clamp(24px, 4vw, 48px); opacity: .6; }
.res-grid { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; align-items: start; }
.res-stats { min-width: 0; }
.mvp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 16px 16px;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc, #444) 45%, #1a130e), #17110d 70%);
  background-color: #1f1712;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 0 0 4px var(--sun), 0 16px 40px rgba(0, 0, 0, .55);
  animation: dropIn .6s .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.mvp-ribbon {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  padding: .2em 1em;
  white-space: nowrap;
  font-family: var(--font-display);
  letter-spacing: .12em;
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 6px;
}
.mvp-face {
  width: min(100%, clamp(150px, 22vw, 260px));
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--ink);
  box-shadow: 0 0 0 4px var(--sun);
  background: repeating-conic-gradient(rgba(255, 255, 255, .15) 0 10deg, transparent 10deg 20deg), radial-gradient(circle, #ffe98a, var(--tc, #ffb400));
  background-color: var(--sun);
}
.mvp-nick { font-size: clamp(30px, 4vw, 52px); }
.mvp-nick .lt-fill { background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mvp-name { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.mvp-line { font-family: var(--font-display); letter-spacing: .05em; font-size: clamp(15px, 1.7vw, 19px); color: var(--sun); }
.mvp-quote { font-style: italic; font-weight: 700; opacity: .85; }
.res-bubble { margin-bottom: 20px; }
.res-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.confetti, .drizzle { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -6vh; width: 10px; height: 16px; border-radius: 2px; animation: confFall 4s linear infinite; }
.drizzle i { position: absolute; top: -12vh; width: 2px; height: 9vh; background: linear-gradient(180deg, transparent, rgba(170, 200, 255, .5)); animation: rainFall 1.2s linear infinite; }

/* ---------- 9. HUD ---------- */
.hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.hud.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.sb {
  position: absolute;
  top: calc(var(--safe-t) + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(260px, 38vw, 560px);
  padding: 4px 8px 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #2c2118, #18110c);
  border: 3px solid var(--ink);
  border-radius: 8px 8px 16px 16px;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, .7), 0 8px 20px rgba(0, 0, 0, .5);
}
.sb::before {
  content: "";
  position: absolute;
  left: -3px; right: -3px; bottom: -9px;
  height: 6px;
  background: var(--stripes);
  border: 2px solid var(--ink);
  border-radius: 0 0 8px 8px;
}
.sb-flags { position: absolute; left: 6px; right: 6px; top: -4px; height: 12px; width: auto; }
.sb-flags i { width: 10px; }
.sb-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 6px; }
.sb-team { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.sb-away { flex-direction: row-reverse; }
.sb-name {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.2vw, 28px);
  letter-spacing: .06em;
  padding: .06em .4em;
  border: 2px solid var(--ink);
  border-radius: 5px;
  transform: skewX(-8deg);
  text-shadow: 1px 1px 0 var(--ink);
  white-space: nowrap;
}
.sb-home .sb-name { background: var(--home); color: var(--home2); }
.sb-away .sb-name { background: var(--away); color: var(--away2); }
.sb-score {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.8vw, 62px);
  line-height: 1;
  min-width: 1.6em;
  text-align: center;
  color: var(--sun);
  text-shadow: 3px 3px 0 var(--ink), 0 0 14px rgba(255, 210, 63, .45);
  font-variant-numeric: tabular-nums;
}
.sb-score.pop { animation: scorePop .55s cubic-bezier(.2, 1.8, .4, 1); }
.sb-ball {
  position: absolute;
  top: -10px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background:
    linear-gradient(90deg, transparent 45%, var(--ink) 45% 55%, transparent 55%),
    radial-gradient(circle at 35% 30%, #ffb35c, #e2701a 60%, #9c4209);
  opacity: 0;
  transform: scale(.3);
  transition: opacity .2s, transform .25s cubic-bezier(.2, 1.8, .4, 1);
}
.sb-home .sb-ball { right: 18%; }
.sb-away .sb-ball { left: 18%; }
.sb.poss-0 .sb-home .sb-ball, .sb.poss-1 .sb-away .sb-ball { opacity: 1; transform: scale(1); animation: ballBob .6s ease-in-out infinite alternate; }
.sb-mid { text-align: center; }
.sb-target { font-family: var(--font-display); font-size: clamp(9px, 1vw, 12px); letter-spacing: .12em; color: var(--cream); opacity: .85; white-space: nowrap; }
.sb-vs { font-family: var(--font-display); font-size: clamp(13px, 1.5vw, 18px); color: var(--jeep-red); text-shadow: 1px 1px 0 var(--ink); }
.sb-badges { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); display: flex; gap: 8px; white-space: nowrap; }
.hbadge {
  display: none;
  font-family: var(--font-display);
  letter-spacing: .1em;
  font-size: clamp(12px, 1.4vw, 17px);
  padding: .18em .7em;
  border: 3px solid var(--ink);
  border-radius: 8px;
}
.hbadge.is-on { display: block; animation: badgePop .35s cubic-bezier(.2, 1.8, .4, 1); }
.hb-clear { color: #fff; background: var(--hazard); text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.hb-clear.is-on { animation: badgePop .35s cubic-bezier(.2, 1.8, .4, 1), blinkSoft .7s .35s ease-in-out infinite alternate; }
.hb-gp { color: #fff; background: linear-gradient(180deg, #ff6a5e, var(--jeep-red) 55%, #8f0f16); box-shadow: 0 0 16px rgba(224, 38, 47, .7); text-shadow: 1px 1px 0 var(--ink); }
.hb-gp.is-on { animation: badgePop .35s cubic-bezier(.2, 1.8, .4, 1), gpPulse .9s .35s ease-in-out infinite alternate; }
.sb-feedback {
  position: absolute;
  left: 50%; top: calc(100% + 48px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  letter-spacing: .08em;
  font-size: clamp(11px, 1.2vw, 14px);
  color: var(--cream);
  text-shadow: 1px 1px 0 var(--ink);
  opacity: 0;
  transition: opacity .2s;
}
.sb-feedback.is-on { opacity: 1; }

/* player mini panels */
.hud-team { position: absolute; top: calc(var(--safe-t) + 10px); display: flex; flex-direction: column; gap: 6px; width: clamp(150px, 15vw, 230px); }
.hud-home { left: calc(var(--safe-l) + 10px); }
.hud-away { right: calc(var(--safe-r) + 10px); top: calc(var(--safe-t) + 62px); }
.pp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: linear-gradient(90deg, rgba(20, 14, 10, .86), rgba(20, 14, 10, .55));
  border-left: 5px solid var(--home);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transition: box-shadow .2s;
}
.hud-away .pp { grid-template-columns: auto 1fr auto; border-left: 0; border-right: 5px solid var(--away); padding: 4px 4px 4px 8px; background: linear-gradient(270deg, rgba(20, 14, 10, .86), rgba(20, 14, 10, .55)); }
.hud-away .pp-face { order: 3; }
.hud-away .pp-info { order: 2; text-align: right; }
.hud-away .pp-pts { order: 1; }
.pp-face {
  width: clamp(30px, 3.2vw, 46px);
  height: clamp(30px, 3.2vw, 46px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px var(--home2);
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--home) 60%, #fff), var(--home));
  background-color: var(--home);
}
.hud-away .pp-face { box-shadow: 0 0 0 2px var(--away2); background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--away) 60%, #fff), var(--away)); background-color: var(--away); }
.pp-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-nick { display: flex; align-items: center; gap: 5px; font-family: var(--font-display); letter-spacing: .05em; font-size: clamp(11px, 1.1vw, 15px); white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 var(--ink); }
.hud-away .pp-nick { justify-content: flex-end; }
.pp-nick-txt { overflow: hidden; text-overflow: ellipsis; }
.pp-you { display: none; font-size: .78em; padding: 0 4px; color: var(--ink); background: var(--sun); border-radius: 3px; text-shadow: none; }
.pp.is-human { box-shadow: 0 0 0 2px var(--sun), 0 3px 10px rgba(0, 0, 0, .4); }
.pp.is-human .pp-you { display: inline-block; }
.pp-turbo { height: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(0, 0, 0, .7); border-radius: 4px; overflow: hidden; }
.pp-turbo i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(1); background: linear-gradient(90deg, #29d3ff, #7cffc4); transition: transform .12s linear; }
.hud-away .pp-turbo i { transform-origin: 100% 50%; }
.pp.low-turbo .pp-turbo i { background: linear-gradient(90deg, #ff4f4f, #ff9a1a); }
.pp-heat { display: none; align-items: center; gap: 2px; height: 14px; }
.hud-away .pp-heat { justify-content: flex-end; }
.pp.heat-1 .pp-heat, .pp.heat-2 .pp-heat, .pp.on-fire .pp-heat { display: flex; }
.flame {
  display: none;
  width: 10px;
  height: 13px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 75%, #fffbe0 0 18%, #ffd23f 35%, #ff7a1a 62%, #e0261f 85%);
  transform-origin: 50% 100%;
  animation: flicker .28s ease-in-out infinite alternate;
}
.pp.heat-1 .flame:nth-child(1), .pp.heat-2 .flame:nth-child(-n+2) { display: inline-block; }
.flame:nth-child(2) { animation-delay: -.14s; }
.pp-heat-txt { display: none; font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; color: var(--orange); text-shadow: 1px 1px 0 var(--ink); }
.pp.heat-1 .pp-heat-txt, .pp.heat-2 .pp-heat-txt { display: inline; }
.pp-fire {
  display: none;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 0 5px;
  color: #fff;
  border-radius: 3px;
  background: linear-gradient(0deg, #7a0b0b, #e0261f 30%, #ff9a1a 65%, #ffe14a);
  background-size: 100% 200%;
  text-shadow: 1px 1px 0 var(--ink);
  animation: flameShift .5s linear infinite;
}
.pp.on-fire .pp-fire { display: inline-block; }
.pp.on-fire { box-shadow: 0 0 0 2px #ff7a1a, 0 0 18px rgba(255, 110, 20, .8); animation: fireGlow .5s ease-in-out infinite alternate; }
.pp.on-fire .pp-face { box-shadow: 0 0 0 2px #ffd23f, 0 0 14px #ff7a1a; }
.pp-pts { font-family: var(--font-display); font-size: clamp(16px, 1.7vw, 22px); color: var(--cream); text-shadow: 1px 1px 0 var(--ink); min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }

/* legend */
.legend { position: absolute; left: calc(var(--safe-l) + 10px); bottom: calc(var(--safe-b) + 10px); pointer-events: auto; max-width: min(300px, 70vw); }
.legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-display);
  letter-spacing: .12em;
  font-size: 13px;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}
.legend-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--ink); transition: transform .2s; }
.legend.is-open .legend-caret { transform: rotate(180deg); }
.legend:not(.is-open) .legend-toggle { border-radius: 8px; }
.legend-body { display: none; padding: 6px 8px; background: rgba(18, 13, 10, .82); border: 2px solid var(--ink); border-radius: 0 8px 8px 8px; }
.legend.is-open .legend-body { display: grid; gap: 3px; }
.legend-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.legend-row kbd { font-size: 11px !important; white-space: nowrap; }

/* pause button */
.hud-pause {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  right: calc(var(--safe-r) + 10px);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(180deg, #3a2d22, #1a130e);
  border: 3px solid var(--sun);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 10px rgba(0, 0, 0, .5);
}
.hud-pause i { display: block; width: 5px; height: 16px; background: var(--sun); border-radius: 2px; }
.hud-pause:active { transform: scale(.92); }

/* rotate-phone hint (narrow portrait, non-blocking) */
.rotate-hint {
  display: none;
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translateX(-50%);
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  width: max-content;
  max-width: 90vw;
  font-weight: 800;
  font-size: 12px;
  color: var(--cream);
  background: rgba(18, 13, 10, .78);
  border: 2px solid var(--sun);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
}
.rot-phone { display: block; width: 14px; height: 22px; border: 2px solid var(--sun); border-radius: 3px; animation: rotPhone 2s ease-in-out infinite; }

/* ---------- 10. CALLOUTS ---------- */
.callout-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: grid; place-items: center; overflow: hidden; padding: 0 3vw; }
.callout {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 94vw;
  text-align: center;
  --co-size: clamp(44px, 10vw, 140px);
}
.callout.len-s { --co-size: clamp(58px, 15vw, 200px); }
.callout.len-m { --co-size: clamp(42px, 10.5vw, 140px); }
.callout.len-l { --co-size: clamp(32px, 7.6vw, 104px); }
.callout.len-xl { --co-size: clamp(26px, 5.8vw, 80px); }
.callout.c-win, .callout.c-lose { --co-size: clamp(60px, 14vw, 210px); }
.callout.c-win.len-l, .callout.c-lose.len-l, .callout.c-win.len-xl, .callout.c-lose.len-xl { --co-size: clamp(40px, 9vw, 140px); }
.callout.c-info { --co-size: clamp(28px, 6vw, 78px); }
.co-main {
  --lt-stroke: .17em;
  font-size: var(--co-size);
  line-height: .92;
  letter-spacing: .015em;
  transform: rotate(-3deg);
  animation: coSlam .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.co-main .lt-fill { color: #fff; }
.co-sub {
  margin-top: .5em;
  padding: .2em .8em .15em;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.8vw, 34px);
  letter-spacing: .08em;
  color: #fff;
  background: var(--tc, var(--ink));
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--tc2, var(--sun));
  text-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-2deg);
  animation: subIn .4s .18s cubic-bezier(.2, 1.5, .4, 1) both;
}
.callout.do-shake { animation: coShake .5s linear .12s; }
.callout.is-out { animation: coOut .26s ease-in forwards !important; }

/* style variants */
.c-dunk .lt-fill, .c-win .lt-fill {
  background: var(--fire);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.c-dunk .co-main { filter: drop-shadow(0 0 .12em rgba(255, 120, 20, .75)); }
.c-dunk .co-main::after, .c-fire .co-main::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -.1em;
  height: .55em;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 30, .75), rgba(224, 38, 31, .35) 45%, transparent 70%);
  filter: blur(6px);
  animation: flicker .18s ease-in-out infinite alternate;
}
.c-three .lt-fill {
  background: linear-gradient(180deg, #ffffff 0%, #c9f6ff 35%, #29d3ff 55%, #1b3cff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.c-three .co-main { --lt-ink: #07112e; animation: coSlam .45s cubic-bezier(.2, 1.6, .4, 1) both, electric .9s .45s steps(2, start) infinite; filter: drop-shadow(0 0 .1em #29d3ff) drop-shadow(0 0 .25em rgba(41, 211, 255, .6)); }
.c-two .lt-fill, .c-tipoff .lt-fill {
  background: linear-gradient(180deg, #fffbe0 0%, var(--sun) 50%, #e08a00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.c-tipoff .co-main { --lt-ink: #5a0a0e; }
.c-fire .lt-fill, .c-heating .lt-fill {
  background: linear-gradient(0deg, #7a0b0b 0%, #e0261f 22%, #ff9a1a 48%, #ffe14a 72%, #fffbe0 92%);
  background-size: 100% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: flameShift .6s linear infinite;
}
.c-fire .co-main { filter: drop-shadow(0 0 .14em rgba(255, 100, 20, .9)); }
.c-heating .co-main { --lt-ink: #3a1200; }
.c-block .co-main {
  --lt-stroke: .12em;
  padding: .06em .28em .02em;
  border: .07em solid var(--jeep-red);
  border-radius: .12em;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 .03em var(--ink), inset 0 0 0 .03em var(--ink);
  transform: rotate(-8deg);
  animation: stamp .42s cubic-bezier(.3, 1.4, .5, 1) both;
}
.c-block .lt-fill { color: #fff; }
.c-block .co-main::before { color: var(--jeep-red); -webkit-text-fill-color: #6d0a10; }
.c-steal .co-main { transform: skewX(-8deg); animation: swipeIn .42s cubic-bezier(.2, 1.3, .4, 1) both; }
.c-steal .lt-fill {
  background: linear-gradient(180deg, #eafff3, #3fdc7e 55%, #0b7a3a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.c-shove .co-main { animation: punchIn .38s cubic-bezier(.2, 1.8, .4, 1) both; }
.c-shove .lt-fill {
  background: linear-gradient(180deg, #ffe6f3, var(--pink) 55%, #7a1d9c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.c-miss .co-main { animation: wobbleIn 1.1s ease-out both; transform-origin: 50% 80%; }
.c-miss .lt-fill { color: #d7dde6; }
.c-miss .co-main::before { -webkit-text-fill-color: #1d2533; }
.c-info .lt-fill { color: #fff; }
.c-info .co-main { --lt-stroke: .14em; transform: rotate(-1.5deg); }
.c-win .co-main { animation: coSlamBig .7s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 0 .15em rgba(255, 190, 40, .9)); }
.c-lose .lt-fill {
  background: linear-gradient(180deg, #eef3ff, #9fb2cf 50%, #4c5d7a 55%, #b8c6dc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.c-lose .co-main { animation: droop 1.2s ease-out both; }

/* ---------- 11. TOASTS / HINT / REPLAY / FLASH ---------- */
.toast-layer {
  position: absolute;
  z-index: 31;
  right: calc(var(--safe-r) + 12px);
  top: 42%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  max-width: min(46vw, 340px);
}
.toast {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.5vw, 19px);
  letter-spacing: .05em;
  color: #fff;
  padding: .22em .8em .18em;
  background: linear-gradient(90deg, rgba(20, 14, 10, .7), var(--tc, #2c2118));
  border-right: 6px solid var(--tc2, var(--sun));
  border-radius: 4px;
  transform: skewX(-10deg);
  text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
  animation: toastIn .3s cubic-bezier(.2, 1.5, .4, 1) both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.toast.is-out { animation: toastOut .36s ease-in forwards; }

.hint {
  position: absolute;
  z-index: 32;
  left: 50%;
  bottom: calc(var(--safe-b) + 16px);
  width: max-content;
  max-width: min(92vw, 580px);
  padding: 10px 16px 10px 58px;
  font-weight: 800;
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--ink);
  background: #fffbe8;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink), 0 10px 24px rgba(0, 0, 0, .4);
  transform: translate(-50%, 160%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease-in, opacity .3s ease-in;
  cursor: pointer;
}
.hint.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; transition: transform .35s cubic-bezier(.2, 1.5, .4, 1), opacity .2s; }
.hint-tag {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  padding: .15em .45em;
  font-family: var(--font-display);
  letter-spacing: .1em;
  font-size: 15px;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
#ui.touch-on .hint { bottom: auto; top: calc(var(--safe-t) + 128px); transform: translate(-50%, -260%); }
#ui.touch-on .hint.is-on { transform: translate(-50%, 0); }

.replay { position: absolute; inset: 0; z-index: 20; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .35s; cursor: pointer; }
.replay.is-on { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .25s, visibility 0s; }
.lb { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform .35s cubic-bezier(.3, .8, .3, 1); }
.lb-top { top: 0; transform: translateY(-100%); }
.lb-bot { bottom: 0; transform: translateY(100%); }
.replay.is-on .lb { transform: none; }
.replay-scan {
  position: absolute;
  left: 0; right: 0; top: 11vh; bottom: 11vh;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.replay-bug {
  position: absolute;
  top: calc(11vh + 12px);
  left: calc(var(--safe-l) + 16px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 6px;
  font-family: var(--font-display);
  letter-spacing: .08em;
  color: #fff;
}
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 10px #ff2a2a; animation: blink 1s steps(2, start) infinite; }
.rec-txt { font-size: 13px; color: #ff6b6b; }
.replay-title { font-weight: 400; font-size: clamp(16px, 2.2vw, 26px); color: var(--sun); text-shadow: 2px 2px 0 var(--ink); }
.replay-label { font-style: normal; font-size: clamp(12px, 1.4vw, 16px); opacity: .9; }
.replay-label:empty { display: none; }
.replay-skip {
  position: absolute;
  right: calc(var(--safe-r) + 16px);
  bottom: calc(11vh + 12px);
  padding: 6px 14px;
  font-family: var(--font-display);
  letter-spacing: .08em;
  font-size: clamp(12px, 1.4vw, 16px);
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  cursor: pointer;
  animation: blinkSoft 1.2s ease-in-out infinite alternate;
}
#ui.replay-on .touch { display: none; }
#ui.replay-on .toast-layer, #ui.replay-on .hint { opacity: 0; }

.flash { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; background: #fff; }
.flash.go { animation: flashA .3s ease-out; }

/* ---------- 12. TOUCH CONTROLS ---------- */
.touch { position: absolute; inset: 0; z-index: 15; pointer-events: none; display: none; touch-action: none; }
.touch.is-on { display: block; }
.t-stick-zone { position: absolute; left: 0; bottom: 0; width: 48%; height: 62%; pointer-events: auto; touch-action: none; }
.t-stick-base {
  position: absolute;
  left: calc(var(--safe-l) + clamp(70px, 16vmin, 110px));
  top: calc(100% - var(--safe-b) - clamp(70px, 16vmin, 110px));
  width: clamp(110px, 28vmin, 170px);
  height: clamp(110px, 28vmin, 170px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(255, 255, 255, .16) 70%);
  border: 3px solid rgba(255, 244, 214, .45);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
  opacity: .75;
  transition: opacity .15s;
}
.t-stick-zone.is-active .t-stick-base { opacity: 1; }
.t-stick-ring { position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(255, 244, 214, .25); }
.t-stick-knob {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c0, var(--sun) 45%, #c98600);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
}
.t-buttons {
  position: absolute;
  right: calc(var(--safe-r) + 12px);
  bottom: calc(var(--safe-b) + 12px);
  width: clamp(180px, 46vmin, 270px);
  height: clamp(180px, 46vmin, 270px);
  pointer-events: none;
}
.t-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink), 0 8px 14px rgba(0, 0, 0, .4);
  opacity: .9;
  transition: transform .06s, filter .06s;
}
.t-btn b { font-family: var(--font-display); font-weight: 400; letter-spacing: .05em; font-size: clamp(12px, 3.4vmin, 18px); text-shadow: 1px 1px 0 var(--ink); line-height: 1; }
.t-btn small { font-size: clamp(8px, 2.2vmin, 11px); font-weight: 800; letter-spacing: .1em; opacity: .85; }
.t-btn.is-down { transform: translateY(4px) scale(.95); box-shadow: 0 1px 0 var(--ink); filter: brightness(1.25); }
.t-shoot { right: 0; bottom: 0; width: 50%; height: 50%; background: radial-gradient(circle at 35% 30%, #ff9a92, var(--jeep-red) 55%, #8d0f16); }
.t-shoot b { font-size: clamp(15px, 4.4vmin, 24px); }
.t-pass { right: 54%; bottom: 2%; width: 36%; height: 36%; background: radial-gradient(circle at 35% 30%, #8fb5ff, var(--jeep-blue) 55%, #13307f); }
.t-turbo { right: 4%; bottom: 55%; width: 36%; height: 36%; color: var(--ink); background: radial-gradient(circle at 35% 30%, #fff6c0, var(--sun) 55%, #c98600); }
.t-turbo b { text-shadow: none; }
.t-switch { right: 52%; bottom: 50%; width: 29%; height: 29%; background: radial-gradient(circle at 35% 30%, #d7a6ff, #8e3ad6 55%, #4a1680); }
.t-switch b { font-size: clamp(10px, 2.6vmin, 14px); }
#ui.touch-on .legend { display: none; }

/* ---------- 13. RESPONSIVE ---------- */
@media (min-width: 800px) {
  .guide { grid-template-columns: 1.1fr 1fr; }
  .match-grid { grid-template-columns: 1fr 1fr; }
  .pause-grid { grid-template-columns: minmax(220px, 280px) 1fr; }
}
@media (min-width: 860px) {
  .res-grid { grid-template-columns: minmax(250px, 320px) 1fr; }
}
@media (min-width: 900px) {
  .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
  .char-grid { gap: 18px; }
  .cc-face { height: clamp(150px, 18vh, 210px); }
}

/* phones (portrait + small tablets) */
@media (max-width: 720px) {
  .sb { width: min(94vw, 430px); top: calc(var(--safe-t) + 6px); }
  .sb-badges { top: calc(100% + 12px); }
  .hud-team,
  .hud-away { top: calc(var(--safe-t) + 96px); flex-direction: row; width: auto; gap: 4px; }
  .hud-home { left: calc(var(--safe-l) + 6px); }
  .hud-away { right: calc(var(--safe-r) + 6px); }
  .pp, .hud-away .pp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border: 0; border-bottom: 3px solid var(--home); border-radius: 8px; width: 42px; }
  .hud-away .pp { border-bottom-color: var(--away); }
  .pp-face { width: 32px; height: 32px; order: 1 !important; }
  .pp-info { order: 2 !important; width: 100%; }
  .pp-nick, .pp-pts, .pp-heat-txt { display: none; }
  .pp.heat-1 .pp-heat-txt, .pp.heat-2 .pp-heat-txt { display: none; }
  .pp-heat { justify-content: center !important; height: 10px; }
  .flame { width: 7px; height: 9px; }
  .pp-fire { font-size: 7px; padding: 0 2px; }
  .pp.is-human { box-shadow: 0 0 0 2px var(--sun); }
  .hud-pause { top: calc(var(--safe-t) + 150px); width: 38px; height: 38px; }
  .toast-layer { right: 50%; transform: translateX(50%); top: calc(var(--safe-t) + 170px); align-items: center; max-width: 90vw; }
  .legend { display: none; }
  .team-card { padding-left: 54px; }
  .cc-blurb { -webkit-line-clamp: 2; }
  .st-row { grid-template-columns: 2.9em 1fr 1.2em; gap: 3px; }
  .matchup { grid-template-columns: 1fr; justify-items: center; }
  .mu-side { width: 100%; }
  .mu-vs { font-size: 40px; }
  .vs-stage { flex-direction: column; gap: 4px; }
  .vs-fighter { width: clamp(74px, 26vw, 120px); }
  .vs-mid { font-size: clamp(56px, 16vw, 90px); margin: -4px 0; }
  .vs-wrap { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .65) 80%), linear-gradient(170deg, var(--home) 0 49.4%, var(--ink) 49.4% 50.6%, var(--away) 50.6% 100%); }
  .sel-foot .btn { font-size: 16px; padding: .4em .8em; }
  .res-btns .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .sb-name { font-size: 13px; }
  .sb-score { font-size: 28px; }
  .char-grid { gap: 6px; }
  .char-card { padding: 6px; }
  .cc-sig-desc { display: none; }
}
/* short landscape screens (phones sideways) */
@media (max-height: 520px) and (min-width: 600px) {
  .logo { --lz: .58; }
  .title-wrap.is-sub .logo { --lz: .32; }
  .sb { width: clamp(250px, 34vw, 400px); padding: 2px 6px 4px; }
  .sb-score { font-size: clamp(24px, 4vw, 40px); }
  .hud-team { gap: 4px; width: clamp(130px, 17vw, 180px); }
  .hud-away { top: calc(var(--safe-t) + 58px); }
  .pp { padding: 2px 6px 2px 2px; }
  .pp-face { width: 28px; height: 28px; }
  .pp-heat-txt { display: none !important; }
  .cc-face { height: clamp(70px, 22vh, 110px); }
  .cc-blurb { display: none; }
  .vs-fighter { width: clamp(64px, 11vw, 120px); }
  .vs-mid { font-size: clamp(48px, 10vw, 110px); }
  .res-title { font-size: clamp(48px, 10vw, 110px); }
  .t-buttons { width: clamp(160px, 42vmin, 220px); height: clamp(160px, 42vmin, 220px); }
  .toast-layer { top: 36%; }
}
/* the gentle rotate hint: narrow portrait only, fades out by itself */
@media (orientation: portrait) and (max-width: 600px) {
  .hud.is-on .rotate-hint { display: flex; animation: rotHint 7s ease-in-out forwards; }
}

/* ---------- 14. KEYFRAMES ---------- */
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes blink { to { visibility: hidden; } }
@keyframes blinkSoft { from { opacity: 1; } to { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-40px) rotate(-2deg); } 100% { opacity: 1; } }
@keyframes slamIn {
  0% { opacity: 0; scale: 2.6; }
  60% { opacity: 1; scale: .94; }
  100% { opacity: 1; scale: 1; }
}
@keyframes glint { 0%, 55% { left: -30%; } 85%, 100% { left: 110%; } }
@keyframes armedPulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@keyframes nope { 0%, 100% { translate: 0 0; } 20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 5px 0; } }
@keyframes badgePop { 0% { scale: .2; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@keyframes bubbleIn { 0% { opacity: 0; scale: .4; } 100% { opacity: 1; scale: 1; } }
@keyframes slideInL { 0% { opacity: 0; transform: translateX(-60vw) skewX(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes slideInR { 0% { opacity: 0; transform: translateX(60vw) skewX(12deg); } 100% { opacity: 1; transform: none; } }
@keyframes vsSlam { 0% { opacity: 0; scale: 4; } 60% { opacity: 1; scale: .9; } 100% { opacity: 1; scale: 1; } }
@keyframes droop { 0% { opacity: 0; translate: 0 -40px; rotate: -6deg; } 60% { opacity: 1; translate: 0 6px; rotate: 6deg; } 100% { opacity: 1; translate: 0 0; rotate: 3deg; } }
@keyframes confFall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(115vh) rotate(720deg); } }
@keyframes rainFall { 0% { transform: translateY(0); } 100% { transform: translateY(125vh); } }
@keyframes scorePop { 0% { scale: 1; } 30% { scale: 1.6; color: #fff; } 100% { scale: 1; } }
@keyframes ballBob { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes gpPulse { from { box-shadow: 0 0 8px rgba(224, 38, 47, .5); } to { box-shadow: 0 0 22px rgba(255, 60, 60, 1); } }
@keyframes flicker { from { transform: scale(1, 1); opacity: .9; } to { transform: scale(.88, 1.14); opacity: 1; } }
@keyframes flameShift { from { background-position: 0 0; } to { background-position: 0 -200%; } }
@keyframes fireGlow { from { box-shadow: 0 0 0 2px #ff7a1a, 0 0 10px rgba(255, 110, 20, .6); } to { box-shadow: 0 0 0 2px #ffd23f, 0 0 22px rgba(255, 150, 20, 1); } }
@keyframes rotPhone { 0%, 30% { rotate: 0deg; } 60%, 100% { rotate: -90deg; } }
@keyframes rotHint { 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes coSlam {
  0% { opacity: 0; scale: 3.2; rotate: -10deg; }
  55% { opacity: 1; scale: .9; rotate: 1deg; }
  78% { scale: 1.06; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes coSlamBig {
  0% { opacity: 0; scale: 5; rotate: 12deg; }
  50% { opacity: 1; scale: .85; rotate: -3deg; }
  75% { scale: 1.08; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes coShake {
  0%, 100% { translate: 0 0; }
  12% { translate: -14px 6px; }
  24% { translate: 12px -8px; }
  36% { translate: -10px -4px; }
  48% { translate: 9px 7px; }
  60% { translate: -6px 3px; }
  72% { translate: 4px -3px; }
  86% { translate: -2px 1px; }
}
@keyframes coOut { to { opacity: 0; scale: 1.25; translate: 0 -6%; } }
@keyframes subIn { 0% { opacity: 0; translate: 0 30px; scale: .6; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes electric {
  0% { filter: drop-shadow(0 0 .1em #29d3ff) drop-shadow(0 0 .25em rgba(41, 211, 255, .6)); }
  100% { filter: drop-shadow(0 0 .04em #ffffff) drop-shadow(0 0 .4em rgba(41, 211, 255, .95)); }
}
@keyframes stamp {
  0% { opacity: 0; scale: 2.6; rotate: -22deg; }
  65% { opacity: 1; scale: .94; rotate: -6deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes swipeIn {
  0% { opacity: 0; translate: -110vw 0; }
  70% { opacity: 1; translate: 4vw 0; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes punchIn {
  0% { opacity: 0; scale: .2; rotate: 25deg; }
  70% { opacity: 1; scale: 1.15; rotate: -6deg; }
  100% { opacity: 1; scale: 1; rotate: -3deg; }
}
@keyframes wobbleIn {
  0% { opacity: 0; scale: .4; rotate: 0deg; }
  20% { opacity: 1; scale: 1.05; rotate: -8deg; }
  35% { rotate: 7deg; }
  50% { rotate: -5deg; }
  65% { rotate: 4deg; }
  80% { rotate: -2deg; translate: 0 6px; }
  100% { opacity: 1; scale: 1; rotate: 1deg; translate: 0 10px; }
}
@keyframes toastIn { 0% { opacity: 0; translate: 60px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes toastOut { to { opacity: 0; translate: 40px 0; } }
@keyframes flashA { 0% { opacity: .78; } 100% { opacity: 0; } }

/* ---------- 15. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .callout.do-shake { animation: none; }
  .co-main, .c-three .co-main, .c-block .co-main, .c-steal .co-main, .c-shove .co-main,
  .c-miss .co-main, .c-win .co-main, .c-lose .co-main, .co-sub {
    animation: screenIn .25s ease-out both !important;
  }
  .c-fire .lt-fill, .c-heating .lt-fill, .pp-fire, .pp.on-fire, .flame { animation: none !important; }
  .banderitas i, .vs-rays, .res-rays, .logo-jam::after, .rot-phone { animation: none !important; }
  .confetti, .drizzle { display: none; }
  .press-start, .rec-dot, .hb-clear.is-on, .hb-gp.is-on, .replay-skip { animation: none !important; }
  .vs-fighter, .vs-mid, .logo-top, .logo-mid, .logo-jam, .logo-plate, .res-title, .mvp-card, .bubble {
    animation: screenIn .3s ease-out both !important;
  }
  .flash.go { animation: flashA .3s ease-out; opacity: 0; }
  @keyframes flashA { 0% { opacity: .3; } 100% { opacity: 0; } }
  .sb-score.pop { animation: none; }
}