/* ============================================================
   JOIN IN LIVE — /win prediction game
   Reuses tokens & base styles from styles.css
   ============================================================ */

/* `hidden` attribute must always win — explicit display rules below
   would otherwise override the user-agent style. */
[hidden] { display: none !important; }

.win-body { padding-bottom: 60px; }

.back-link {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-3);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background: var(--ink-2);
  transition: color 200ms, border-color 200ms;
}
.back-link:hover { color: var(--saffron); border-color: var(--saffron); }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}
.user-chip .chip-key {
  font-style: normal;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--bone-3);
}
.user-chip .chip-val {
  font-style: normal;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--saffron);
  text-transform: uppercase;
}
.signout {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone-3);
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.signout:hover { color: var(--blood); border-color: var(--blood); }

/* ============================================================
   IDENTITY GATE
   ============================================================ */
.gate {
  position: relative;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
}
.gate-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.gate-rays {
  position: absolute; inset: -10%;
  background:
    conic-gradient(from 220deg at 80% 10%,
      transparent 0deg, rgba(255,138,31,0.15) 14deg, transparent 36deg, rgba(255,138,31,0.08) 50deg, transparent 70deg),
    conic-gradient(from 60deg at 20% 90%,
      transparent 0deg, rgba(77,208,225,0.10) 12deg, transparent 32deg, rgba(77,208,225,0.07) 44deg, transparent 64deg);
  filter: blur(36px);
  animation: rays-pulse 5s ease-in-out infinite;
}
.gate-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.gate-card {
  position: relative;
  z-index: 1;
  max-width: 580px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 32px;
  background: linear-gradient(180deg, rgba(19,26,28,0.7) 0%, rgba(7,9,10,0.5) 100%);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: gate-rise 700ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes gate-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gate-eyebrow {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--saffron);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.gate-eyebrow .loader-pulse {
  width: 7px; height: 7px;
  background: var(--blood);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--blood);
  animation: pulse 1.1s ease-in-out infinite;
  display: inline-block;
}

.gate-title {
  margin: 6px 0 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 9vw, 88px);
  letter-spacing: 0.05em;
  line-height: 0.92;
  color: var(--bone);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gate-title span:nth-child(2) {
  -webkit-text-stroke: 1.5px var(--saffron);
  color: transparent;
}

.gate-sub {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--bone-2);
  line-height: 1.55;
  margin: 0;
  max-width: 420px;
  margin-inline: auto;
}
.gate-sub em { color: var(--saffron); font-style: italic; }

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.field span {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--bone-3);
}
.field input {
  appearance: none;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 14px 14px;
  color: var(--bone);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  transition: border-color 200ms, box-shadow 200ms;
}
.field input::placeholder { color: var(--bone-4); font-weight: 400; }
.field input:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 1px var(--saffron), 0 0 24px rgba(255,138,31,0.15);
}

.gate-submit {
  appearance: none;
  background: var(--saffron);
  color: var(--ink-0);
  border: none;
  padding: 16px 22px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.18em;
  cursor: pointer;
  border-radius: var(--rad);
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.gate-submit .arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 200ms ease;
}
.gate-submit:hover {
  box-shadow: 0 0 0 1px var(--saffron), 0 0 30px rgba(255,138,31,0.6);
  transform: translateY(-1px);
}
.gate-submit:hover .arrow { transform: translateX(6px); }
.gate-submit:active { transform: translateY(0); }

.gate-foot {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--bone-4);
  margin: 4px 0 0;
  letter-spacing: 0.04em;
}

/* gate exit animation when user submits */
.gate.is-leaving {
  animation: gate-leave 600ms cubic-bezier(.5,.05,.2,1) forwards;
  pointer-events: none;
}
.gate.is-leaving .gate-card {
  animation: gate-card-leave 600ms cubic-bezier(.5,.05,.2,1) forwards;
}
@keyframes gate-leave {
  to { opacity: 0; }
}
@keyframes gate-card-leave {
  to { opacity: 0; transform: translateY(-12px) scale(0.96); filter: blur(4px); }
}

.gate-submit.is-loading {
  pointer-events: none;
  background: var(--ink-3);
  color: var(--saffron);
}
.gate-submit.is-loading .arrow {
  animation: arrow-spin 1s linear infinite;
}
@keyframes arrow-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   WARMUP — between submit and game-ready
   ============================================================ */
.warmup {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(60% 50% at 50% 38%, #1d0e05 0%, #0c0706 55%, #000 100%);
  overflow: hidden;
  animation: warmup-in 500ms cubic-bezier(.2,.7,.3,1) both;
}
.warmup.is-out {
  animation: warmup-out 700ms cubic-bezier(.5,.05,.2,1) forwards;
}
@keyframes warmup-in {
  from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes warmup-out {
  to { opacity: 0; transform: scale(1.06); filter: blur(8px); pointer-events: none; }
}

.warmup-bg { position: absolute; inset: 0; pointer-events: none; }
.warmup-rays {
  position: absolute; inset: -10%;
  background:
    conic-gradient(from 200deg at 92% -8%,
      transparent 0deg, rgba(255,138,31,0.20) 12deg, transparent 28deg, rgba(255,138,31,0.12) 38deg, transparent 56deg),
    conic-gradient(from 280deg at 8% -8%,
      transparent 0deg, rgba(255,200,140,0.16) 14deg, transparent 30deg, rgba(255,138,31,0.10) 42deg, transparent 58deg);
  filter: blur(38px);
  opacity: 0.85;
  animation: rays-pulse 4s ease-in-out infinite;
}
.warmup-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.warmup-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0 24px;
  text-align: center;
}

.warmup-ball {
  width: 130px; height: 130px;
  filter: drop-shadow(0 0 30px rgba(255,138,31,0.55)) drop-shadow(0 0 80px rgba(255,138,31,0.30));
  animation:
    ball-orbit 4.5s linear infinite,
    ball-bob 2.4s ease-in-out infinite;
}
@keyframes ball-orbit {
  to { transform: rotate(360deg); }
}
@keyframes ball-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

.warmup-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.warmup-eyebrow {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--saffron);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.warmup-eyebrow .loader-pulse {
  width: 7px; height: 7px;
  background: var(--blood);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--blood);
  animation: pulse 1.1s ease-in-out infinite;
  display: inline-block;
}
.warmup-name {
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 78px);
  letter-spacing: 0.05em;
  line-height: 0.95;
  color: var(--bone);
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px var(--saffron);
  color: transparent;
  animation: warmup-name-in 600ms cubic-bezier(.2,.6,.2,1.05) 100ms both;
}
@keyframes warmup-name-in {
  from { opacity: 0; transform: translateY(20px) scale(1.06); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.warmup-sub {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
  animation: fade-up 600ms ease 350ms both;
}

.warmup-progress {
  width: min(540px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: fade-up 600ms ease 500ms both;
}
.warmup-phases {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 22px;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--bone-3);
}
.warmup-phases .phase { display: inline-flex; align-items: center; gap: 7px; transition: color 300ms; }
.warmup-phases .phase i {
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--bone-4);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 1px;
  transition: all 300ms;
}
.warmup-phases .phase.is-active { color: var(--saffron); }
.warmup-phases .phase.is-active i {
  color: var(--ink-0);
  background: var(--saffron);
  border-color: var(--saffron);
  box-shadow: 0 0 18px rgba(255,138,31,0.55);
}
.warmup-phases .phase.is-done { color: var(--bone); }
.warmup-phases .phase.is-done i {
  color: var(--ink-0);
  background: var(--bone);
  border-color: var(--bone);
}

.warmup-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone-2);
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}
.warmup-status.is-error { color: var(--blood-2); }

/* ============================================================
   MATCH-STATE NOTICE (when not live)
   ============================================================ */
.match-state {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.ms-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  max-width: 540px;
}
.ms-eyebrow {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--bone-3);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 1px;
}
.ms-text {
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 7vw, 64px);
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--bone);
}
.ms-text em { font-style: normal; color: var(--saffron); }
.ms-detail {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--bone-2);
  line-height: 1.55;
  margin: 0;
}
.ms-pulse {
  display: inline-flex;
  gap: 8px;
  margin-top: 10px;
}
.ms-pulse span {
  width: 8px; height: 8px;
  background: var(--saffron);
  border-radius: 50%;
  animation: ms-pulse 1.2s ease-in-out infinite;
}
.ms-pulse span:nth-child(2) { animation-delay: 0.2s; }
.ms-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ms-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* ============================================================
   GAME LAYOUT
   ============================================================ */
.game {
  padding: 18px 22px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

/* mini hero */
.mini-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "a   mid  b"
    "x   x    x";
  gap: 12px 22px;
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(19,26,28,0.65) 0%, rgba(7,9,10,0.65) 100%);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  position: relative;
}
.mh-team {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.mh-team--l { grid-area: a; justify-content: flex-start; }
.mh-team--r { grid-area: b; justify-content: flex-end; }
.mh-team--r { flex-direction: row; }
.mh-abbr {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: var(--saffron);
}
.mh-team--r .mh-abbr { color: var(--cyan); }
.mh-score {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.mh-mid {
  grid-area: mid;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mh-vs {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  letter-spacing: 0.06em;
}
.mh-summary {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-2);
  text-align: center;
  white-space: nowrap;
}
.mh-extras {
  grid-area: x;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.mh-extras span { display: inline-flex; gap: 5px; align-items: baseline; }
.mh-extras i { font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: 0.2em; color: var(--bone-3); }
.mh-extras b { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }

/* score panel */
.score-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
}
.sp-cell {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.sp-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 14px;
  width: 26px; height: 2px;
  background: var(--bone-3);
}
.sp-cell--big { grid-row: span 1; }
.sp-cell--big::before { background: var(--saffron); }
.sp-cell i {
  font-style: normal;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--bone-3);
}
.sp-cell b {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  line-height: 1;
  color: var(--bone);
  letter-spacing: 0.02em;
}
.sp-cell--big b {
  font-size: 56px;
  color: var(--saffron);
}
.sp-cell--big b.is-bumped { animation: bump 700ms ease; }
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); color: #fff; }
  100% { transform: scale(1); }
}

/* game grid */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "current predict"
    "history history";
  gap: 16px;
}
.card--current { grid-area: current; }
.card--predict { grid-area: predict; }
.card--history { grid-area: history; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.card-meta-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--bone-3);
  letter-spacing: 0.06em;
}
.card-badge {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 1px;
  color: var(--bone-2);
  background: var(--ink-2);
}
.card-badge--saffron { color: var(--saffron); border-color: rgba(255,138,31,0.35); background: rgba(255,138,31,0.06); }
.card-badge--cyan    { color: var(--cyan);    border-color: rgba(77,208,225,0.35); background: rgba(77,208,225,0.06); }
.card-badge--blood   { color: var(--blood-2); border-color: rgba(232,52,76,0.4);   background: rgba(232,52,76,0.08); }
.card-badge--green   { color: var(--green);   border-color: rgba(111,191,62,0.4);  background: rgba(111,191,62,0.08); }

/* ============================================================
   COMPARISON (current over)
   ============================================================ */
.cmp { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.cmp.is-no-pred .cmp-row--pred,
.cmp.is-no-pred .cmp-foot { display: none; }
.cmp.is-no-pred .cmp-row--act .cmp-label { color: var(--bone-3); }
.cmp-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: center;
}
.cmp-label {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bone-3);
}
.cmp-row--pred .cmp-label { color: var(--saffron); }
.cmp-row--act  .cmp-label { color: var(--cyan); }
.cmp-cells {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cmp-cell {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 14px;
  border: 1.5px solid var(--line);
  background: var(--ink-2);
  color: var(--bone-2);
  position: relative;
  transition: transform 200ms ease;
}
.cmp-cell--pending {
  border-style: dashed;
  border-color: var(--line-soft);
  color: var(--bone-4);
  background: transparent;
}
.cmp-cell--match {
  background: var(--green);
  color: var(--ink-0);
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(111,191,62,0.18);
  animation: cmp-pop 380ms ease-out;
}
.cmp-cell--miss {
  background: rgba(232,52,76,0.12);
  color: var(--blood-2);
  border-color: var(--blood);
  animation: cmp-pop 380ms ease-out;
}
.cmp-cell--four { background: var(--saffron-2); color: var(--ink-0); border-color: var(--saffron-2); }
.cmp-cell--six  { background: var(--saffron);   color: var(--ink-0); border-color: var(--saffron); box-shadow: 0 0 14px rgba(255,138,31,0.45); }
.cmp-cell--wkt  { background: var(--blood);     color: #fff;        border-color: var(--blood); }
.cmp-cell--extra{ border-style: dashed; border-color: var(--cyan); color: var(--cyan); font-size: 10px; }
.cmp-cell--dot::after {
  content: "•";
  font-size: 22px;
  color: var(--bone-3);
}
.cmp-cell--dot { color: transparent; }

@keyframes cmp-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.cmp-foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.cmp-pct-block, .cmp-points-block { display: flex; flex-direction: column; gap: 4px; }
.cmp-points-block { align-items: flex-end; }
.cmp-foot i {
  font-style: normal;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--bone-3);
}
.cmp-foot b {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  line-height: 1;
}
.cmp-pct-block b { color: var(--saffron); transition: color 240ms; }
.cmp-pct-block.is-perfect b { color: var(--green); animation: bump 700ms ease; }

.cmp-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--bone-3);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
}
.cmp-empty .muted { color: var(--bone-4); font-size: 12px; margin-top: 4px; }

/* ============================================================
   PREDICT panel
   ============================================================ */
.predict-hint {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--bone-3);
  margin: 0 0 14px;
}

.predict-balls {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.pball {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px dashed var(--line);
  background: var(--ink-1);
  color: var(--bone-3);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 200ms ease;
}
.pball:hover { border-color: var(--saffron); color: var(--saffron); transform: translateY(-2px); }
.pball.is-set {
  border-style: solid;
  background: var(--ink-3);
  color: var(--bone);
}
.pball[data-v="0"].is-set::after {
  content: "•";
  font-size: 28px;
  color: var(--bone-3);
}
.pball[data-v="0"].is-set { color: transparent; }
.pball[data-v="4"].is-set { background: var(--saffron-2); color: var(--ink-0); border-color: var(--saffron-2); }
.pball[data-v="6"].is-set { background: var(--saffron);   color: var(--ink-0); border-color: var(--saffron);   box-shadow: 0 0 16px rgba(255,138,31,0.5); }
.pball[data-v="W"].is-set { background: var(--blood);     color: #fff;        border-color: var(--blood); }
.pball[data-v="WD"].is-set,
.pball[data-v="NB"].is-set { border-style: dashed; border-color: var(--cyan); color: var(--cyan); background: transparent; font-size: 11px; }

.pball-num {
  position: absolute;
  top: -7px; left: -7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  color: var(--bone-4);
  background: var(--ink-0);
  padding: 1px 4px;
  border-radius: 1px;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
}

.pball.is-locked {
  cursor: not-allowed;
  opacity: 0.85;
  filter: saturate(0.85);
}

.predict-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.btn {
  appearance: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--bone-2);
  padding: 8px 14px;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--rad);
  transition: all 200ms ease;
}
.btn:hover { color: var(--bone); border-color: var(--bone-3); }
.btn--prim { background: transparent; color: var(--bone-3); }
.btn--prim:hover { color: var(--blood-2); border-color: var(--blood); }
.btn--ghost { color: var(--saffron); border-color: rgba(255,138,31,0.35); }
.btn--ghost:hover { background: rgba(255,138,31,0.08); }
.btn[disabled], .btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.ball-count {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--bone-3);
  font-variant-numeric: tabular-nums;
}
.ball-count b { color: var(--bone); font-weight: 700; font-size: 14px; margin-right: 1px; }
.ball-count i { font-style: normal; }

.predict-locked {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255,138,31,0.08);
  border: 1px solid rgba(255,138,31,0.35);
  border-radius: var(--rad);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.lock-flag {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--saffron);
}
.lock-msg {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--bone-2);
}

/* ============================================================
   PICKER POPOVER
   ============================================================ */
.picker {
  position: fixed;
  z-index: 90;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  padding: 10px;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,138,31,0.18),
    0 0 60px rgba(255,138,31,0.18);
  animation: pop-in 220ms cubic-bezier(.2,.7,.3,1.05);
  transform-origin: top center;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.85) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.picker-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  gap: 6px;
}
.picker-opt {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--ink-1);
  cursor: pointer;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 160ms ease;
}
.picker-opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.picker-opt[data-v="0"]::after { content: "•"; font-size: 26px; color: var(--bone-3); }
.picker-opt[data-v="0"] { color: transparent; }
.picker-opt[data-v="4"] { background: var(--saffron-2); color: var(--ink-0); border-color: var(--saffron-2); }
.picker-opt[data-v="6"] { background: var(--saffron);   color: var(--ink-0); border-color: var(--saffron); }
.picker-opt[data-v="W"] { background: var(--blood);     color: #fff;        border-color: var(--blood); }
.picker-opt[data-v="WD"], .picker-opt[data-v="NB"] {
  border-style: dashed; border-color: var(--cyan); color: var(--cyan); font-size: 11px; background: transparent;
}

/* ============================================================
   HISTORY
   ============================================================ */
.history {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.history-item {
  display: grid;
  grid-template-columns: 60px 1fr 100px 80px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--bone-3);
  border-radius: 1px;
  font-family: "JetBrains Mono", monospace;
}
.hi-balls {
  min-width: 0;
}
.history-item.tier-perfect { border-left-color: var(--green); }
.history-item.tier-good    { border-left-color: var(--saffron); }
.history-item.tier-meh     { border-left-color: var(--gold); }
.history-item.tier-low     { border-left-color: var(--bone-3); }
.history-item.tier-zero    { border-left-color: var(--bone-4); }

.hi-over {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: var(--bone);
  letter-spacing: 0.04em;
}
.hi-over i { font-style: normal; color: var(--bone-3); font-size: 10px; letter-spacing: 0.16em; margin-right: 4px; }
.hi-balls {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.hi-mini {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 11px;
  background: var(--ink-3);
  color: var(--bone-2);
  border: 1px solid var(--line);
}
.hi-mini.is-match { background: var(--green); color: var(--ink-0); border-color: var(--green); }
.hi-mini.is-miss  { background: rgba(232,52,76,0.16); color: var(--blood-2); border-color: var(--blood); }
.hi-pct {
  text-align: right;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.hi-pct i { font-style: normal; font-size: 10px; color: var(--bone-3); letter-spacing: 0.16em; margin-left: 4px; }
.hi-points {
  text-align: right;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--saffron);
  font-variant-numeric: tabular-nums;
}
.tier-perfect .hi-points { color: var(--green); }
.tier-good    .hi-points { color: var(--saffron); }
.tier-meh     .hi-points { color: var(--gold); }
.tier-low     .hi-points { color: var(--bone-2); }
.tier-zero    .hi-points { color: var(--bone-4); }
.hi-points i { font-style: normal; font-size: 9px; color: var(--bone-3); letter-spacing: 0.18em; margin-left: 4px; }

.history-empty {
  padding: 30px 14px;
  color: var(--bone-3);
  text-align: center;
  font-family: "Fraunces", serif;
  font-style: italic;
}

/* ============================================================
   RESULT TOAST
   ============================================================ */
.result-toast {
  position: fixed;
  z-index: 80;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  opacity: 0;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-1) 100%);
  border: 1px solid var(--saffron);
  border-radius: var(--rad-lg);
  padding: 16px 22px 14px;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 22px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 80px rgba(255,138,31,0.25);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.2,.7,.3,1);
  min-width: 360px;
}
.result-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.result-toast.tier-perfect { border-color: var(--green); box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 80px rgba(111,191,62,0.35); }
.result-toast.tier-good    { border-color: var(--saffron); }
.result-toast.tier-meh     { border-color: var(--gold); }
.result-toast.tier-low     { border-color: var(--bone-3); }
.result-toast.tier-zero    { border-color: var(--bone-3); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }

.rt-eyebrow {
  grid-column: 1 / -1;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--bone-3);
}
.rt-eyebrow span { color: var(--saffron); }
.rt-pct {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 36px;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.rt-pct span { color: var(--saffron); }
.tier-perfect .rt-pct span { color: var(--green); }
.tier-good    .rt-pct span { color: var(--saffron); }
.tier-meh     .rt-pct span { color: var(--gold); }
.tier-low     .rt-pct span { color: var(--bone-2); }
.rt-points {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.rt-points span {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  color: var(--saffron);
  font-variant-numeric: tabular-nums;
}
.tier-perfect .rt-points span { color: var(--green); }
.tier-good    .rt-points span { color: var(--saffron); }
.tier-meh     .rt-points span { color: var(--gold); }
.tier-low     .rt-points span { color: var(--bone-2); }
.tier-zero    .rt-points span { color: var(--bone-3); }
.rt-points i {
  font-style: normal;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--bone-3);
}
.rt-detail {
  grid-column: 1 / -1;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--bone-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .game-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "current"
      "predict"
      "history";
  }
  .score-panel { grid-template-columns: 1fr 1fr; }
  .sp-cell--big { grid-column: span 2; }
}

/* History — restack on tablet/mobile so the balls get their own row
   and scroll horizontally instead of wrapping. */
@media (max-width: 760px) {
  .history-item {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "over   pct  pts"
      "balls  balls balls";
    gap: 6px 12px;
    padding: 12px;
  }
  .hi-over   { grid-area: over; }
  .hi-pct    { grid-area: pct;  text-align: right; align-self: center; }
  .hi-points { grid-area: pts;  text-align: right; align-self: center; }
  .hi-balls  {
    grid-area: balls;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px 4px;
    margin-top: 2px;
    border-top: 1px dashed var(--line);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .hi-balls::-webkit-scrollbar { height: 4px; }
  .hi-balls::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
  .hi-mini { flex-shrink: 0; }
  .hi-pct b   { font-size: 16px; }
  .hi-pct i   { font-size: 9px; }
  .hi-points  { font-size: 18px; }
}

@media (max-width: 600px) {
  .game { padding: 14px; }
  .mini-hero { padding: 14px; }
  .mh-abbr { font-size: 22px; }
  .mh-score { font-size: 20px; }
  .gate-card { padding: 26px 20px; }
  .result-toast {
    min-width: auto;
    width: calc(100vw - 24px);
    bottom: 12px;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .rt-eyebrow, .rt-detail { grid-column: 1 / -1; }

  /* Predict panel — bigger ball targets, tighter gaps */
  .predict-balls { gap: 8px; }
  .pball { width: 44px; height: 44px; font-size: 15px; }
  .predict-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ball-count { margin-left: 0; }
}