/* ============================================================
   Koala in a Box — World Cup 2026 prediction page
   Visual system: stadium-night green, cream glass cards,
   gold winner reveal, eucalyptus accents.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

:root {
  --font-display: 'Anton', system-ui, sans-serif;
  --font-ui: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---------- Theme: stadium night (default) ---------- */
.kib[data-theme="night"] {
  --bg-0: #06140d;
  --bg-1: #0b2417;
  --bg-2: #123a24;
  --stage-0: #0a2f1d;
  --stage-1: #04140c;
  --beam: rgba(120,255,200,0.16);
  --neon: #4cf0a6;
  --card: #faf5e6;
  --card-edge: rgba(255,255,255,0.06);
  --ink: #15271c;
  --ink-soft: #5d6f64;
  --ink-faint: #93a098;
  --gold: #f3c652;
  --gold-deep: #d39f2c;
  --euc: #79b894;
  --euc-deep: #3f8460;
  --field-line: rgba(255,255,255,0.07);
  --page-ink: #eaf3ed;
  --page-soft: rgba(234,243,237,0.62);
  --chip: rgba(255,255,255,0.08);
  --chip-ink: #d8efe2;
  --shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* ---------- Theme: stadium day ---------- */
.kib[data-theme="day"] {
  --bg-0: #d7efdd;
  --bg-1: #c2e6cd;
  --bg-2: #a9dcbb;
  --stage-0: #2a7d54;
  --stage-1: #155f3a;
  --beam: rgba(255,255,255,0.28);
  --neon: #2bbf7e;
  --card: #ffffff;
  --card-edge: rgba(20,60,40,0.06);
  --ink: #15271c;
  --ink-soft: #5d6f64;
  --ink-faint: #9aa79f;
  --gold: #eeb733;
  --gold-deep: #c9922a;
  --euc: #3f8460;
  --euc-deep: #2c6044;
  --field-line: rgba(255,255,255,0.18);
  --page-ink: #143524;
  --page-soft: rgba(20,53,36,0.6);
  --chip: rgba(20,60,40,0.06);
  --chip-ink: #1c4631;
  --shadow: 0 16px 34px rgba(20,60,40,0.18);
}

* { box-sizing: border-box; }

.kib {
  font-family: var(--font-ui);
  color: var(--page-ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  max-width: 480px;       /* mobile-first: full-width on phones, centered column on desktop */
  margin: 0 auto;
  position: relative;
  background:
    radial-gradient(120% 70% at 50% -8%, var(--bg-2) 0%, var(--bg-1) 38%, var(--bg-0) 100%);
  padding: 22px 16px calc(40px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* faint stadium light streaks behind everything */
.kib::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 22% at 16% 8%, var(--beam) 0%, transparent 70%),
    radial-gradient(40% 22% at 84% 6%, var(--beam) 0%, transparent 70%);
  pointer-events: none;
}
.kib > * { position: relative; }

/* ============================================================
   Top bar / wordmark
   ============================================================ */
.kib-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.kib-brand { display: flex; align-items: center; gap: 9px; }
.kib-brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(160deg, var(--euc) 0%, var(--euc-deep) 100%);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.kib-brand-name {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.04em; line-height: 1;
  color: var(--page-ink); text-transform: uppercase; white-space: nowrap;
}
.kib-brand-sub {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--page-soft); margin-top: 3px;
}
.kib-acc-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--chip); border: 1px solid var(--card-edge);
  border-radius: 999px; padding: 7px 11px 7px 8px;
  backdrop-filter: blur(8px);
}
.kib-acc-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px var(--neon);
}
.kib-acc-chip .val { font-weight: 800; font-size: 13px; color: var(--page-ink); }
.kib-acc-chip .lbl { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--page-soft); }

/* ============================================================
   Hero
   ============================================================ */
.kib-hero { text-align: center; margin: 6px 0 18px; }
.kib-hero-eyebrow {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 10px;
}
.kib-hero h1 {
  font-family: var(--font-display);
  font-size: 52px; line-height: 0.92; letter-spacing: 0.005em;
  text-transform: uppercase; margin: 0;
  color: var(--page-ink);
  text-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.kib-hero h1 .accent { color: var(--gold); }
.kib-hero p {
  margin: 12px auto 0; max-width: 290px;
  font-size: 13.5px; line-height: 1.45; color: var(--page-soft);
}

/* ============================================================
   Match card
   ============================================================ */
.kib-card {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.kib-match { padding: 16px 16px 14px; margin-bottom: 14px; }
.kib-match-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 14px;
}
.kib-match-head .grp {
  background: rgba(63,132,96,0.12); color: var(--euc-deep);
  padding: 3px 8px; border-radius: 6px; letter-spacing: 0.1em;
}
.kib-match-teams {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
}
.kib-team { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.kib-team .flag-wrap {
  width: 60px; height: 60px; border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 3px var(--card);
  position: relative; overflow: hidden;
  transition: box-shadow .4s ease, transform .4s ease;
}
.kib-team .name {
  font-family: var(--font-display); font-size: 18px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); text-align: center; line-height: 1;
}
.kib-team .code { font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-faint); }
.kib-vs {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-display); font-size: 15px; color: var(--ink-soft);
}
.kib-vs .bar { width: 1px; height: 16px; background: rgba(0,0,0,0.1); }
.kib-match-meta {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(0,0,0,0.07);
  font-size: 11.5px; color: var(--ink-soft);
}
.kib-match-meta .m { display: flex; align-items: center; gap: 6px; }
.kib-match-meta svg { opacity: 0.75; }

/* winner highlight on match card flags after reveal */
.kib-team.win .flag-wrap {
  box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 0 0 3px var(--gold), 0 0 22px rgba(243,198,82,0.55);
  transform: translateY(-2px) scale(1.04);
}
.kib-team.lose { opacity: 0.5; }

/* ============================================================
   Prediction stage (the animated scene)
   ============================================================ */
.kib-stage-wrap { margin-bottom: 14px; }
.kib-stage {
  position: relative;
  height: 348px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 8%, var(--stage-0) 0%, var(--stage-1) 78%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,0.05);
}
/* stadium light beams */
.kib-stage .beam {
  position: absolute; top: -12%; width: 46%; height: 80%;
  background: linear-gradient(180deg, var(--beam), transparent 72%);
  filter: blur(6px); opacity: 0.8; pointer-events: none;
  transition: opacity .5s ease;
}
.kib-stage .beam.l { left: -10%; transform: rotate(16deg); transform-origin: top center; }
.kib-stage .beam.r { right: -10%; transform: rotate(-16deg); transform-origin: top center; }
.kib-stage.lit .beam { opacity: 1; animation: beamSway 3.4s ease-in-out infinite; }

/* pitch lines at the bottom */
.kib-stage .pitch {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92px;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,0.25)),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--field-line) 26px 27px);
  transform: perspective(220px) rotateX(46deg); transform-origin: bottom;
  opacity: 0.7;
}
.kib-stage .pitch::after {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 70px; height: 70px; border: 1px solid var(--field-line); border-radius: 50%;
}

/* spotlight glow that intensifies on reveal */
.kib-stage .spot {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%,-50%);
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,198,82,0.0) 0%, transparent 70%);
  pointer-events: none; transition: background .6s ease;
}
.kib-stage.won .spot {
  background: radial-gradient(circle, rgba(243,198,82,0.32) 0%, transparent 68%);
  animation: spotPulse 2.2s ease-in-out infinite;
}

/* branches */
.kib-branch {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.kib-branch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kib-branch path {
  fill: none; stroke: var(--euc-deep); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
.kib-stage.grown .kib-branch path { stroke-dashoffset: 0; }
.kib-leaf {
  fill: var(--euc); opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
.kib-stage.grown .kib-leaf { opacity: 1; transform: scale(1); }

/* flag pods at branch tips */
.kib-pod {
  position: absolute; width: 56px; height: 56px;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s, box-shadow .4s;
  border-radius: 50%;
}
.kib-pod .flag-wrap {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 6px 14px rgba(0,0,0,0.4);
}
.kib-pod .pod-name {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.kib-stage.grown .kib-pod { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.kib-pod.win .flag-wrap {
  box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(243,198,82,0.8), 0 6px 14px rgba(0,0,0,0.4);
}
.kib-pod.win { animation: podBounce 1.8s ease-in-out infinite; }
.kib-pod.lose { opacity: 0.45 !important; }
.kib-pod .crown {
  position: absolute; left: 50%; top: -16px; transform: translateX(-50%) scale(0);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1) .2s;
}
.kib-pod.win .crown { transform: translateX(-50%) scale(1); }

/* the box */
.kib-box {
  position: absolute; left: 50%; bottom: 116px; transform: translateX(-50%);
  width: 132px; height: 96px; z-index: 4;
}
.kib-box.shake { animation: boxShake .5s cubic-bezier(.36,.07,.19,.97) infinite; }

/* koala */
.kib-koala {
  position: absolute; left: 50%; top: 58%;
  width: 108px; height: 116px;
  transform: translate(-50%,-50%);
  z-index: 5;
  transition: left .8s cubic-bezier(.34,1.4,.5,1), top .8s cubic-bezier(.34,1.4,.5,1);
}
.kib-koala .koala-inner {
  width: 100%; height: 100%;
  transform: translateY(120%) scale(0.4);
  opacity: 0;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .4s;
}
.kib-stage.out .kib-koala .koala-inner { transform: translateY(0) scale(1); opacity: 1; }
.kib-stage.out .kib-koala .breathe { animation: breathe 3s ease-in-out infinite; }
.kib-koala.hopping .koala-inner { animation: hop .8s ease-in-out; }
.kib-koala .eye-l, .kib-koala .eye-r { transform-box: fill-box; transform-origin: center; }
.kib-stage.out .kib-koala .eye-l,
.kib-stage.out .kib-koala .eye-r { animation: blink 4.2s infinite; }

/* thinking thought bubble */
.kib-think {
  position: absolute; left: 50%; top: 20%; transform: translate(-50%,0) scale(0.6);
  opacity: 0; transition: opacity .3s, transform .3s;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.94); color: #15271c;
  border-radius: 14px; padding: 7px 12px; z-index: 7;
  font-weight: 700; font-size: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.kib-think::after {
  content: ""; position: absolute; left: 26px; bottom: -6px;
  width: 12px; height: 12px; background: rgba(255,255,255,0.94);
  border-radius: 2px; transform: rotate(45deg);
}
.kib-think.on { opacity: 1; transform: translate(-50%,0) scale(1); }
.kib-think .spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(63,132,96,0.25); border-top-color: var(--euc-deep);
  animation: spin .7s linear infinite;
}

/* data factor particles */
.kib-particles { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.kib-particle {
  position: absolute; left: 50%; top: 46%;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--chip-ink); background: rgba(10,40,26,0.72);
  border: 1px solid rgba(124,232,176,0.4);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transform: translate(-50%,-50%);
  backdrop-filter: blur(4px);
}
.kib-particle.float { animation: floatChip 2.6s ease-in-out infinite; opacity: 1; }
.kib-particle.converge {
  transition: all .5s ease-in; opacity: 0 !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%,-50%) scale(0.3) !important;
}

/* idle label + CTA inside the stage */
.kib-stage-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px; z-index: 9;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: linear-gradient(0deg, rgba(0,0,0,0.45), transparent);
  transition: opacity .35s ease, transform .35s ease;
}
.kib-stage-cta.gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
.kib-stage-tag {
  text-align: center; font-size: 12px; line-height: 1.4;
  color: rgba(255,255,255,0.82); max-width: 250px;
}

/* box label tag */
.kib-box-label {
  position: absolute; left: 50%; bottom: 232px; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
  white-space: nowrap; z-index: 4; transition: opacity .4s;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.kib-box-label::before {
  content: ""; display: block; width: 26px; height: 2px; margin: 0 auto 8px;
  background: var(--gold); border-radius: 2px; opacity: 0.8;
}
.kib-stage.out .kib-box-label { opacity: 0; }

/* ============================================================
   Buttons
   ============================================================ */
.kib-btn {
  font-family: var(--font-ui); font-weight: 800;
  border: none; cursor: pointer; border-radius: 14px;
  font-size: 15px; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.kib-btn:active { transform: scale(0.97); }
.kib-btn-primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #2a1f06; padding: 15px 24px; width: 100%;
  box-shadow: 0 8px 20px rgba(211,159,44,0.4), inset 0 1px 0 rgba(255,255,255,0.45);
}
.kib-btn-primary:hover { filter: brightness(1.04); }
.kib-btn-reveal {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #2a1f06; padding: 14px 30px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.kib-btn-ghost {
  background: var(--chip); color: var(--page-ink);
  border: 1px solid var(--card-edge); padding: 14px 24px; width: 100%;
  backdrop-filter: blur(8px);
}
.kib-btn-row { display: flex; gap: 10px; margin-bottom: 16px; }
.kib-btn-row .kib-btn { flex: 1; }

/* ============================================================
   Reveal panel
   ============================================================ */
.kib-reveal {
  text-align: center; padding: 18px 16px 20px; margin-bottom: 14px;
  position: relative; overflow: hidden;
  background: var(--card); color: var(--ink);
  border-radius: 22px; box-shadow: var(--shadow);
}
.kib-reveal::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% -20%, rgba(243,198,82,0.22), transparent 60%);
  pointer-events: none;
}
.kib-reveal .spoken {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 800;
}
.kib-reveal .winner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 12px 0 6px;
}
.kib-reveal .winner .flag-wrap {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px var(--gold), 0 4px 12px rgba(0,0,0,0.18);
}
.kib-reveal .winner .wname {
  font-family: var(--font-display); font-size: 34px; line-height: 0.9;
  text-transform: uppercase; color: var(--ink);
}
.kib-reveal .sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

.kib-conf {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 16px 0 6px;
}
.kib-ring { position: relative; width: 96px; height: 96px; }
.kib-ring svg { transform: rotate(-90deg); }
.kib-ring .ring-bg { stroke: rgba(0,0,0,0.08); }
.kib-ring .ring-fg { stroke: var(--gold-deep); stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.kib-ring .ring-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.kib-ring .ring-num b { font-family: var(--font-display); font-size: 28px; color: var(--ink); line-height: 1; }
.kib-ring .ring-num span { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.kib-conf-txt { text-align: left; max-width: 150px; }
.kib-conf-txt .big { font-weight: 800; font-size: 14px; color: var(--ink); }
.kib-conf-txt .small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 3px; }

/* ============================================================
   Accuracy module
   ============================================================ */
.kib-acc { padding: 16px; margin-bottom: 14px; }
.kib-acc-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
}
.kib-acc-title .tag {
  margin-left: auto; font-family: var(--font-ui); font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.12em; color: var(--euc-deep);
  background: rgba(63,132,96,0.12); padding: 4px 8px; border-radius: 6px;
}
.kib-acc-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: center; }
.kib-acc-ring { width: 84px; height: 84px; position: relative; }
.kib-acc-ring svg { transform: rotate(-90deg); }
.kib-acc-ring .bg { stroke: rgba(0,0,0,0.08); }
.kib-acc-ring .fg { stroke: var(--euc-deep); stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
.kib-acc-ring .lbl {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.kib-acc-ring .lbl b { font-family: var(--font-display); font-size: 22px; color: var(--ink); line-height: 1; }
.kib-acc-ring .lbl span { font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1px; }
.kib-tile {
  background: rgba(63,132,96,0.07); border-radius: 14px; padding: 12px 10px;
  text-align: center; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.kib-tile b { font-family: var(--font-display); font-size: 24px; color: var(--ink); line-height: 1; }
.kib-tile b small { font-size: 13px; color: var(--ink-soft); }
.kib-tile span { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* ============================================================
   Why this prediction (drawer)
   ============================================================ */
.kib-drawer { margin-bottom: 14px; overflow: hidden; }
.kib-drawer-head {
  width: 100%; background: var(--card); color: var(--ink);
  border: none; cursor: pointer; padding: 15px 16px;
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  border-radius: 18px; transition: border-radius .3s;
}
.kib-drawer.open .kib-drawer-head { border-radius: 18px 18px 0 0; }
.kib-drawer-head .q {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: rgba(63,132,96,0.12); color: var(--euc-deep);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 15px;
}
.kib-drawer-head .chev { margin-left: auto; transition: transform .3s ease; color: var(--ink-faint); }
.kib-drawer.open .kib-drawer-head .chev { transform: rotate(180deg); }
.kib-drawer-body {
  background: var(--card); border-radius: 0 0 18px 18px;
  max-height: 0; opacity: 0; transition: max-height .4s ease, opacity .3s ease, padding .3s;
  padding: 0 16px;
}
.kib-drawer.open .kib-drawer-body { max-height: 420px; opacity: 1; padding: 4px 16px 16px; }
.kib-factor {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.06);
}
.kib-factor:first-child { border-top: none; }
.kib-factor .fdot {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(63,132,96,0.1); color: var(--euc-deep);
  display: grid; place-items: center;
}
.kib-factor .ftext { flex: 1; }
.kib-factor .ftext .ft { font-weight: 700; font-size: 13px; color: var(--ink); }
.kib-factor .ftext .fs { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.kib-factor .fbar {
  width: 52px; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.08);
  overflow: hidden; flex-shrink: 0;
}
.kib-factor .fbar i { display: block; height: 100%; border-radius: 3px; background: var(--euc); }

/* ============================================================
   Footer
   ============================================================ */
.kib-foot {
  text-align: center; font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--page-soft); margin-top: 4px; padding-bottom: 8px;
}
.kib-foot b { color: var(--page-ink); font-weight: 700; }
.kib-updated {
  display: block; margin-top: 6px;
  font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--page-soft); opacity: 0.7;
}

/* ============================================================
   Confetti
   ============================================================ */
.kib-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 8; }
.kib-confetti i {
  position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px;
  animation: confettiFall linear forwards;
}

/* ============================================================
   Keyframes
   ============================================================ */
.kib-koala .breathe { transform-box: fill-box; transform-origin: center bottom; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes boxShake {
  10%,90% { transform: translateX(-51%) rotate(-2deg); }
  20%,80% { transform: translateX(-49%) rotate(2deg); }
  30%,50%,70% { transform: translateX(-52%) rotate(-3deg); }
  40%,60% { transform: translateX(-48%) rotate(3deg); }
}
@keyframes hop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-46px) rotate(-6deg); }
  70% { transform: translateY(-46px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes beamSway {
  0%,100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes spotPulse { 0%,100% { opacity: 0.8; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes podBounce { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-58%) scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 8px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45); }
  50% { box-shadow: 0 8px 30px rgba(243,198,82,0.6), inset 0 1px 0 rgba(255,255,255,0.45); }
}
@keyframes floatChip {
  0%,100% { transform: translate(-50%,-50%) translateY(0); }
  50% { transform: translate(-50%,-50%) translateY(-7px); }
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(380px) rotate(540deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kib-stage.out .kib-koala .breathe,
  .kib-pod.win, .kib-stage.won .spot, .kib-stage.lit .beam,
  .kib-btn-reveal { animation: none !important; }
}

/* ============================================================
   Nav link (home → track record)
   ============================================================ */
.kib-navlink {
  width: 100%; margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); color: var(--ink);
  border: none; cursor: pointer; border-radius: 18px; padding: 14px 16px;
  font-family: var(--font-ui); text-align: left;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.kib-navlink:active { transform: scale(0.99); }
.kib-navlink .nl-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(160deg, var(--euc) 0%, var(--euc-deep) 100%);
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.kib-navlink .nl-txt { flex: 1; }
.kib-navlink .nl-txt b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.kib-navlink .nl-txt span { font-size: 11.5px; color: var(--ink-soft); }
.kib-navlink .nl-go { color: var(--ink-faint); }

/* ============================================================
   Track Record screen
   ============================================================ */
.kib-hist-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.kib-back {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--chip); border: 1px solid var(--card-edge); color: var(--page-ink);
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.kib-back:active { transform: scale(0.94); }
.kib-hist-top h2 {
  font-family: var(--font-display); font-size: 25px; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; line-height: 1; color: var(--page-ink);
  white-space: nowrap;
}
.kib-hist-top .sub {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-top: 5px;
}

/* summary card */
.kib-hist-summary { padding: 18px 16px 16px; margin-bottom: 14px; }
.kib-hist-summary .row1 {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: center;
}
.kib-summary-tile {
  background: rgba(63,132,96,0.07); border-radius: 14px; padding: 12px 8px;
  text-align: center; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.kib-summary-tile b { font-family: var(--font-display); font-size: 26px; color: var(--ink); line-height: 1; }
.kib-summary-tile b small { font-size: 14px; color: var(--ink-soft); }
.kib-summary-tile span { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* form strip */
.kib-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.07);
}
.kib-form .flbl {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.kib-form .fbars { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.kib-form .fbars i {
  flex: 1; border-radius: 3px; transition: height .4s ease;
}
.kib-form .fbars i.hit { background: var(--euc-deep); height: 100%; }
.kib-form .fbars i.miss { background: rgba(206,49,49,0.5); height: 46%; }

/* filter segmented */
.kib-filter {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--chip); padding: 4px; border-radius: 12px;
  border: 1px solid var(--card-edge);
}
.kib-filter button {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  color: var(--page-soft); padding: 9px 0; border-radius: 9px;
  -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s;
}
.kib-filter button.on { background: var(--card); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.18); }

/* prediction row */
.kib-pred {
  background: var(--card); color: var(--ink); border-radius: 16px;
  padding: 13px 14px 12px; margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.kib-pred-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px;
}
.kib-pred-head .stage {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.kib-pred-head .stage b { color: var(--ink-soft); font-weight: 700; }
.kib-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px 4px 7px; border-radius: 999px;
}
.kib-badge.hit { background: rgba(63,132,96,0.14); color: var(--euc-deep); }
.kib-badge.miss { background: rgba(206,49,49,0.12); color: #b3322c; }
.kib-badge svg { width: 12px; height: 12px; }

.kib-pred-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.kib-pred-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kib-pred-team.right { flex-direction: row-reverse; }
.kib-pred-team .mini-flag {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--card), 0 2px 5px rgba(0,0,0,0.15);
}
.kib-pred-team .tc {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em;
  color: var(--ink); position: relative;
}
.kib-pred-team.pick .mini-flag { box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(0,0,0,0.18); }
.kib-pred-team.pick .tc::after {
  content: "PICK"; position: absolute; top: -11px; left: 0;
  font-family: var(--font-ui); font-size: 7px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--gold-deep);
}
.kib-pred-team.right.pick .tc::after { left: auto; right: 0; }
.kib-pred-scoreline {
  font-family: var(--font-display); font-size: 22px; color: var(--ink);
  letter-spacing: 0.02em; white-space: nowrap; text-align: center;
}
.kib-pred-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 11.5px; color: var(--ink-soft);
}
.kib-pred-foot .conf { display: inline-flex; align-items: center; gap: 6px; }
.kib-pred-foot .conf i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--euc);
}
.kib-pred-foot b { color: var(--ink); font-weight: 700; }

.kib-hist-empty {
  text-align: center; color: var(--page-soft); font-size: 13px; padding: 40px 0;
}

/* ============================================================
   Empty state (no upcoming prediction / load failure)
   ============================================================ */
.kib-empty {
  text-align: center;
  padding: 34px 22px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.kib-empty-mark {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(160deg, var(--euc) 0%, var(--euc-deep) 100%);
  display: grid; place-items: center; margin-bottom: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 16px rgba(0,0,0,0.25);
}
.kib-empty-mark svg { width: 34px; height: 34px; }
.kib-empty-title {
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.01em;
  color: var(--ink); text-transform: none;
}
.kib-empty-sub {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  max-width: 30ch; margin: 0;
}
.kib-empty .kib-btn { margin-top: 6px; }

/* footer credit */
.kib-credit {
  display: block; margin-top: 9px;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gold);
}
.kib-credit b { color: var(--gold); font-weight: 700; }

/* ============================================================
   Dual-prediction board — tabs, scoreboard, dual cards, schedule
   (extends the stadium-night system; tokens only, no new palette)
   ============================================================ */

/* ---------- tab bar (Home · Schedule · Track record) ---------- */
.kib-tabs {
  display: flex; gap: 5px; margin-bottom: 16px;
  background: var(--chip); border: 1px solid var(--card-edge);
  border-radius: 14px; padding: 4px; backdrop-filter: blur(8px);
}
.kib-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  color: var(--page-soft); padding: 10px 4px; border-radius: 10px;
  -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s, box-shadow .2s;
}
.kib-tab svg { opacity: 0.8; }
.kib-tab.on {
  background: var(--card); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.kib-tab.on svg { opacity: 1; color: var(--euc-deep); }

/* ---------- model-vs-model scoreboard ---------- */
.kib-scoreboard { padding: 15px 16px 14px; margin-bottom: 14px; }
.kib-sb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.kib-sb-title {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
}
.kib-sb-sub { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.kib-sb-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.kib-sb-side {
  background: rgba(63,132,96,0.07); border-radius: 14px; padding: 12px 10px;
  text-align: center; border: 1px solid transparent;
}
.kib-sb-side.base { border-color: rgba(63,132,96,0.22); }
.kib-sb-side.short { background: rgba(243,198,82,0.12); border-color: rgba(211,159,44,0.3); }
.kib-sb-tag { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.kib-sb-acc { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); margin: 6px 0 5px; }
.kib-sb-side.short .kib-sb-acc { color: var(--gold-deep); }
.kib-sb-meta { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--ink-soft); }
.kib-sb-meta .rps { font-size: 9px; letter-spacing: 0.06em; color: var(--ink-faint); }
.kib-sb-vs {
  display: grid; place-items: center; color: var(--ink-faint);
  font-family: var(--font-display); font-size: 18px;
}
.kib-sb-fill {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(0,0,0,0.07);
  text-align: center; font-size: 11.5px; color: var(--ink-soft);
}

/* ---------- featured-match label + section heads ---------- */
.kib-feature-tag {
  display: inline-block; margin: 2px 0 10px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.kib-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 2px 10px;
}
.kib-section-head > span {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--page-ink);
}
.kib-link {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-weight: 700; font-size: 11.5px;
  color: var(--gold); -webkit-tap-highlight-color: transparent;
}
.kib-link svg { width: 13px; height: 13px; }

/* ---------- dual-prediction card ---------- */
.kib-dual {
  display: block; width: 100%; text-align: left;
  padding: 14px 15px 13px; margin-bottom: 12px; border: none;
  font-family: var(--font-ui); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .2s ease;
}
.kib-dual:active { transform: scale(0.99); }
.kib-dual.differ { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--gold); }
.kib-dual-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 11px;
}
.kib-dual-head .grp {
  background: rgba(63,132,96,0.12); color: var(--euc-deep);
  padding: 3px 8px; border-radius: 6px;
}
.kib-dual-teams {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 12px;
}
.kib-dual-teams .t {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 19px; letter-spacing: 0.02em; color: var(--ink);
}
.kib-dual-teams .t.right { flex-direction: row; }
.kib-dual-teams .t .f {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--card), 0 2px 5px rgba(0,0,0,0.15);
}
.kib-dual-teams .x { font-family: var(--font-display); font-size: 13px; color: var(--ink-faint); }

/* confidence bar (one per model) */
.kib-dual-bars { display: flex; flex-direction: column; gap: 9px; }
.kib-cb { }
.kib-cb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.kib-cb-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.kib-cb-pick { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.kib-cb-flag { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--card); }
.kib-cb-track { height: 8px; border-radius: 5px; background: rgba(0,0,0,0.08); overflow: hidden; }
.kib-cb-track i { display: block; height: 100%; border-radius: 5px; background: var(--euc-deep); transition: width .5s ease; }
.kib-cb.base .kib-cb-track i { background: var(--euc-deep); }
.kib-cb.short .kib-cb-track i { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.kib-cb.agree .kib-cb-track i { background: linear-gradient(90deg, var(--euc), var(--euc-deep)); }
.kib-cb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; font-size: 10px; color: var(--ink-faint); }

/* agree state */
.kib-dual-agree { display: flex; flex-direction: column; gap: 9px; }
.kib-confirm {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--euc-deep); background: rgba(63,132,96,0.14);
  padding: 4px 9px; border-radius: 999px;
}
.kib-confirm svg { width: 12px; height: 12px; }

/* differ swing banner */
.kib-swing {
  display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
  background: rgba(243,198,82,0.16); border: 1px solid rgba(211,159,44,0.32);
  border-radius: 11px; padding: 8px 10px;
  font-size: 12px; color: var(--ink); font-weight: 600;
}
.kib-swing svg { color: var(--gold-deep); flex-shrink: 0; }
.kib-swing b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; }

/* short-term news note */
.kib-newsnote {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 11.5px; line-height: 1.4; color: var(--ink-soft);
}
.kib-newsnote svg { color: var(--gold-deep); flex-shrink: 0; margin-top: 1px; }
.kib-newsnote.subtle { opacity: 0.85; }
.kib-newsnote.subtle svg { color: var(--euc-deep); }

/* pending knockout (teams TBD) */
.kib-dual.pending { opacity: 0.7; cursor: default; box-shadow: var(--shadow); }
.kib-dual.pending:active { transform: none; }
.kib-dual-tbd {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 4px 0 8px;
}
.kib-dual-tbd .lbl {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center;
}
.kib-dual-tbd .vs { font-size: 11px; color: var(--ink-faint); }
.kib-dual-tbd-note {
  text-align: center; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- schedule screen ---------- */
.kib-sched-head { margin-bottom: 16px; }
.kib-sched-head h2 {
  font-family: var(--font-display); font-size: 25px; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; line-height: 1; color: var(--page-ink);
}
.kib-sched-head .sub {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 5px;
}
.kib-sched-group { margin-bottom: 18px; }
.kib-sched-day {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--page-ink);
  margin: 0 2px 9px; display: flex; align-items: baseline; gap: 9px;
}
.kib-sched-day .lbl { flex-shrink: 0; }
.kib-sched-day .kib-sched-date {
  font-family: var(--font-ui); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.04em; text-transform: none; color: var(--page-soft);
  flex-shrink: 0;
}
.kib-sched-day::after {
  content: ""; order: 9; flex: 1; align-self: center; height: 1px; background: var(--card-edge);
}

/* compact dual schedule row */
/* fixed-width right columns (two pick chips + a status slot) so the picks and the
   check stack in straight vertical columns down the list regardless of code width */
.kib-srow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) var(--pk-col) var(--pk-col) var(--flag-col);
  align-items: center; gap: 9px;
  width: 100%; text-align: left; border: none;
  background: var(--card); color: var(--ink);
  border-radius: 13px; padding: 10px 12px; margin-bottom: 8px;
  font-family: var(--font-ui); cursor: pointer; box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
  --pk-col: 44px;   /* width of each 3-letter pick chip column */
  --flag-col: 62px; /* width of the agreement-check / "changed" slot */
}
.kib-srow:active { transform: scale(0.99); }
.kib-srow-time {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.kib-srow-match { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.kib-srow-match .sf {
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--card);
}
.kib-srow-match b { font-family: var(--font-display); font-size: 14px; color: var(--ink); letter-spacing: 0.02em; }
.kib-srow-match i { font-style: normal; font-size: 10px; color: var(--ink-faint); }
/* the two pick chips are each their own fixed grid column (kib-srow-picks is
   `display: contents` so its children sit directly on the row grid and align) */
.kib-srow-picks { display: contents; }
.kib-srow-picks .pk {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.02em;
  padding: 3px 4px; border-radius: 7px; line-height: 1;
  text-align: center; justify-self: stretch;
}
.kib-srow-picks .pk.base { background: rgba(63,132,96,0.14); color: var(--euc-deep); }
.kib-srow-picks .pk.short { background: rgba(243,198,82,0.2); color: var(--gold-deep); }
.kib-srow-flag { justify-self: end; }
.kib-srow-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0 6px;
}
.kib-srow-badge.ok { background: rgba(63,132,96,0.12); color: var(--euc-deep); }
.kib-srow-badge.changed { background: rgba(243,198,82,0.22); color: var(--gold-deep); }
.kib-srow-badge.tbd { background: rgba(0,0,0,0.06); color: var(--ink-faint); }
/* pending rows have no picks — collapse the two pick columns, keep the right slot
   aligned with the resolved rows above/below */
.kib-srow.pending {
  grid-template-columns: 42px minmax(0, 1fr) var(--flag-col);
  opacity: 0.7; cursor: default; box-shadow: var(--shadow);
}
.kib-srow.pending:active { transform: none; }
.kib-srow.pending .kib-srow-badge.tbd { justify-self: end; }
.kib-srow-tbd { font-size: 11px; color: var(--ink-soft); line-height: 1.3; }
.kib-srow-tbd i { font-style: normal; color: var(--ink-faint); margin: 0 3px; }

/* ---------- track-record dual additions ---------- */
.kib-hist-compare { padding: 14px 16px 13px; margin-bottom: 12px; }
.kib-hc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.kib-hc-title {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
}
.kib-hc-sub { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.kib-hc-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.kib-hc-side { background: rgba(63,132,96,0.07); border-radius: 13px; padding: 11px 10px; text-align: center; border: 1px solid transparent; }
.kib-hc-side.base { border-color: rgba(63,132,96,0.22); }
.kib-hc-side.short { background: rgba(243,198,82,0.12); border-color: rgba(211,159,44,0.3); }
.kib-hc-lbl { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.kib-hc-acc { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--ink); margin: 5px 0 4px; }
.kib-hc-side.short .kib-hc-acc { color: var(--gold-deep); }
.kib-hc-meta { display: flex; flex-direction: column; gap: 1px; font-size: 9.5px; color: var(--ink-soft); }
.kib-hc-vs { display: grid; place-items: center; color: var(--ink-faint); font-family: var(--font-display); font-size: 16px; }

/* the two per-model badges in a history row head */
.kib-dualbadges { display: inline-flex; gap: 5px; }
.kib-badge.mini { padding: 3px 7px; gap: 4px; }
.kib-badge.mini .mb-lbl { font-size: 9px; }
.kib-badge.mini svg { width: 10px; height: 10px; }

/* ---------- 4-up tab bar (Home · Schedule · Groups · Record) ---------- */
/* tighten the bar so four icon+label tabs fit a ~390px phone */
.kib-tabs { gap: 3px; }
.kib-tab { gap: 5px; padding: 10px 3px; font-size: 11.5px; }
.kib-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.kib-tab span { white-space: nowrap; }

/* ============================================================
   Groups overview screen
   ============================================================ */
.kib-groups-head { margin-bottom: 16px; }
.kib-groups-head h2 {
  font-family: var(--font-display); font-size: 25px; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; line-height: 1; color: var(--page-ink);
}
.kib-groups-head .sub {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 5px;
}
.kib-groups-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }

.kib-group { padding: 13px 14px 12px; }
.kib-group-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.kib-group-letter {
  font-family: var(--font-display); font-size: 17px; line-height: 1;
  letter-spacing: 0.02em; color: #fff; text-transform: uppercase;
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--euc) 0%, var(--euc-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.kib-group-head::before { content: "Group"; order: 1;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-right: auto;
}
.kib-group-cols {
  order: 2; display: grid; grid-template-columns: 52px 30px 26px; gap: 8px;
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; text-align: right;
}

.kib-group-rows { display: flex; flex-direction: column; }
.kib-grow {
  display: grid;
  grid-template-columns: 18px 22px minmax(0, 1fr) 52px 30px 26px;
  align-items: center; gap: 8px;
  padding: 7px 0; border-top: 1px solid rgba(0,0,0,0.06);
}
.kib-grow:first-child { border-top: none; }
.kib-grow-rank {
  font-family: var(--font-display); font-size: 12px; color: var(--ink-faint);
  text-align: center; display: grid; place-items: center;
}
.kib-grow-flag {
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--card), 0 1px 3px rgba(0,0,0,0.15);
}
.kib-grow-team { min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.kib-grow-team b { font-family: var(--font-display); font-size: 13px; color: var(--ink); letter-spacing: 0.02em; }
.kib-grow-team i {
  font-style: normal; font-size: 10px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.kib-grow-win { display: flex; align-items: center; gap: 6px; }
.kib-grow-track {
  flex: 1; height: 6px; border-radius: 4px; background: rgba(0,0,0,0.08);
  overflow: hidden; min-width: 18px;
}
.kib-grow-track i { display: block; height: 100%; border-radius: 4px; background: var(--euc-deep); }
.kib-grow-winpct {
  font-size: 10px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; width: 26px; text-align: right; flex-shrink: 0;
}
.kib-grow-adv {
  font-size: 11px; color: var(--ink-soft); text-align: right;
  font-variant-numeric: tabular-nums;
}
.kib-grow-pts {
  font-family: var(--font-display); font-size: 14px; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* predicted leader — gold highlight on the top row */
.kib-grow.lead {
  margin: 0 -8px; padding: 8px; border-top: none; border-radius: 11px;
  background: linear-gradient(90deg, rgba(243,198,82,0.20), rgba(243,198,82,0.08));
  box-shadow: inset 0 0 0 1px rgba(211,159,44,0.35);
}
.kib-grow.lead + .kib-grow { border-top: none; }
.kib-grow.lead .kib-grow-rank svg { display: block; }
.kib-grow.lead .kib-grow-track i { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.kib-grow.lead .kib-grow-winpct { color: var(--gold-deep); }
.kib-grow.lead .kib-grow-pts { color: var(--gold-deep); }
.kib-grow.lead .kib-grow-flag { box-shadow: 0 0 0 1.5px var(--gold), 0 1px 4px rgba(0,0,0,0.18); }

/* ============================================================
   Per-match detail page
   ============================================================ */
.kib-detail-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.kib-detail-top h2 {
  font-family: var(--font-display); font-size: 25px; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; line-height: 1; color: var(--page-ink);
  white-space: nowrap;
}
.kib-detail-top .sub {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.kib-match-detail .kib-match-meta { justify-content: center; }
.kib-detail .kib-section-head { margin-top: 16px; }

/* pending knockout on the detail page */
.kib-detail-pending { padding: 20px 16px; text-align: center; margin-bottom: 14px; }
.kib-detail-tbd {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 16px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-soft);
}
.kib-detail-tbd .vs { font-family: var(--font-ui); font-size: 11px; color: var(--ink-faint); }
.kib-detail-pending p { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 10px auto 0; max-width: 34ch; }

/* expected-scoreline panel (both models) */
.kib-scoreline-panel { padding: 14px 16px 14px; margin-bottom: 12px; }
.kib-score-title {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 11px;
}
.kib-score-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.kib-score-cell {
  background: rgba(63,132,96,0.07); border-radius: 13px; padding: 11px 10px;
  text-align: center; border: 1px solid transparent;
}
.kib-score-cell.base { border-color: rgba(63,132,96,0.22); }
.kib-score-cell.short { background: rgba(243,198,82,0.12); border-color: rgba(211,159,44,0.3); }
.kib-score-lbl { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.kib-score-val { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--ink); margin: 5px 0 4px; }
.kib-score-cell.short .kib-score-val { color: var(--gold-deep); }
.kib-score-pick {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-soft); font-weight: 600;
}
.kib-score-pick .f {
  width: 16px; height: 16px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--card);
}
.kib-score-pick b { font-family: var(--font-display); font-weight: 400; color: var(--ink); letter-spacing: 0.02em; }
.kib-score-vs { display: grid; place-items: center; color: var(--ink-faint); font-family: var(--font-display); font-size: 16px; }

/* dual foot under a history scoreline */
.kib-pred-foot.dual { flex-wrap: wrap; gap: 6px 14px; }
.kib-pred-foot.dual .pmodel { display: inline-flex; align-items: center; gap: 6px; }
.kib-pred-foot.dual .pmodel .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.kib-pred-foot.dual .pmodel .dot.base { background: var(--euc-deep); }
.kib-pred-foot.dual .pmodel .dot.short { background: var(--gold-deep); }
.kib-pred-foot.dual .presult { margin-left: auto; }

/* ============================================================
   Road to the Final — projected knockout bracket
   ============================================================ */
.kib-bracket-link { margin-top: 16px; }
.kib-bracket-link .nl-ico {
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #2a1f06;
}

.kib-bracket-screen { animation: kibFade .25s ease; }
.kib-bracket-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.kib-bracket-top h2 {
  font-family: var(--font-display); font-size: 25px; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; line-height: 1; color: var(--page-ink);
  white-space: nowrap;
}
.kib-bracket-top .sub {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 4px;
}
.kib-bracket-hint {
  font-size: 12px; line-height: 1.5; color: var(--page-soft);
  margin: 0 0 12px;
}
.kib-bracket-scrollnote {
  display: block; margin-top: 4px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}

/* full-bleed horizontal scroller: break out of the 480px .kib column so the wide
   tree gets room, then scroll sideways. The negative margins pull it to the page
   edges; padding restores a comfortable gutter inside the scroll area. */
.kib-bracket-scroll {
  margin: 0 -16px 16px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
}
.kib-bracket-scroll::-webkit-scrollbar { height: 7px; }
.kib-bracket-scroll::-webkit-scrollbar-thumb {
  background: var(--gold-deep); border-radius: 99px;
}
.kib-bracket-scroll::-webkit-scrollbar-track { background: transparent; }

/* the wide inner track: left columns · final · right columns. Each column is a
   flex column at a shared height with space-around, so every later round's nodes
   sit at the vertical midpoint of their feeding pair — the classic bracket fan. */
.kib-bracket-track {
  display: flex; align-items: stretch; gap: 10px;
  width: max-content; min-width: 100%;
}
.kib-bracket-col {
  display: flex; flex-direction: column;
  min-width: 86px;
}
.kib-bracket-rlabel {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--page-soft); font-weight: 700; text-align: center;
  margin-bottom: 8px; height: 12px;
}
.kib-bracket-rlabel.final { color: var(--gold); font-size: 10px; }
.kib-bracket-rlabel.third { color: var(--page-soft); margin-top: 14px; }
.kib-bracket-ties {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-around;
}
.kib-bracket-cell {
  display: flex; align-items: center; justify-content: center;
  flex: 1;
}

/* a single tie node — two team rows around a thin midline */
.kib-bnode {
  width: 100%; background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 5px 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
}
.kib-bnode.empty {
  background: var(--chip); border: 1px dashed var(--card-edge);
  box-shadow: none; min-height: 46px;
  display: grid; place-items: center;
}
.kib-bnode-tbd {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--page-soft); font-weight: 700;
}
.kib-bnode-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 2px; border-radius: 6px;
  transition: background .25s ease, opacity .25s ease;
}
.kib-bnode-flag {
  width: 18px; height: 18px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  display: grid; place-items: center; background: #fff;
}
.kib-bnode-code {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink); line-height: 1; flex: 1;
}
.kib-bnode-tick {
  color: var(--gold-deep); display: inline-flex; flex-shrink: 0;
}
.kib-bnode-row.win {
  background: linear-gradient(90deg, rgba(243,198,82,0.32), rgba(243,198,82,0.12));
}
.kib-bnode-row.win .kib-bnode-code { color: var(--ink); font-weight: 700; }
.kib-bnode-row.lose { opacity: 0.42; }
.kib-bnode.decided { border-color: rgba(211,159,44,0.45); }
.kib-bnode-mid {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 11px; margin: 1px 0;
}
.kib-bnode-conf {
  font-size: 8px; letter-spacing: 0.06em; color: var(--ink-faint);
  font-weight: 700;
}
.kib-bnode-result {
  font-size: 7.5px; letter-spacing: 0.08em; font-weight: 800;
  color: #fff; background: var(--euc-deep);
  border-radius: 4px; padding: 1px 4px; line-height: 1.3;
}
.kib-bnode.played { box-shadow: 0 6px 16px rgba(0,0,0,0.28), 0 0 0 1.5px var(--euc-deep); }

/* the Final column in the centre — wider node + the champion plate beneath */
.kib-bracket-finalcol {
  display: flex; flex-direction: column; align-items: center;
  min-width: 116px; justify-content: center;
}
.kib-bnode.big { padding: 8px 8px; border-radius: 12px; box-shadow: var(--shadow); }
.kib-bnode.big .kib-bnode-code { font-size: 15px; }
.kib-bnode.big .kib-bnode-flag { width: 22px; height: 22px; }
.kib-bnode[data-side="final"] {
  background:
    linear-gradient(180deg, #fffdf6 0%, var(--card) 100%);
  border: 1px solid rgba(211,159,44,0.4);
}

.kib-bracket-champ {
  margin-top: 10px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--chip); border: 1px solid var(--card-edge);
  border-radius: 12px; padding: 9px 8px;
}
.kib-bracket-champ .lbl {
  font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--page-soft); font-weight: 700;
}
.kib-bracket-champ.hidden .q {
  font-family: var(--font-display); font-size: 20px; color: var(--gold);
  letter-spacing: 0.08em; line-height: 1;
}
.kib-bracket-champ.shown {
  background: linear-gradient(180deg, rgba(243,198,82,0.22), rgba(243,198,82,0.08));
  border-color: rgba(211,159,44,0.55);
  animation: champPop .5s cubic-bezier(.2,1.2,.3,1) both;
}
.kib-bracket-champ.shown .flag {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px var(--gold), 0 4px 10px rgba(0,0,0,0.25);
}
.kib-bracket-champ.shown .name {
  font-family: var(--font-display); font-size: 17px; color: var(--ink);
  letter-spacing: 0.02em; line-height: 1;
}

.kib-bracket-third { margin-top: 4px; width: 100%; }

/* ── hidden-champion CTA (before the reveal) ── */
.kib-champ-cta {
  text-align: center; margin-bottom: 16px;
  background: var(--card); color: var(--ink);
  border-radius: 22px; padding: 20px 16px 18px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.kib-champ-cover {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px; color: var(--ink-soft);
}
.kib-champ-cover-txt { text-align: left; }
.kib-champ-cover-txt .lbl {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.kib-champ-cover-txt .qmark {
  font-family: var(--font-display); font-size: 30px; color: var(--gold-deep);
  letter-spacing: 0.1em; line-height: 0.9;
}
.kib-champ-cta-sub {
  font-size: 12px; color: var(--ink-soft); margin: 10px 0 0;
}

.kib-champ-ritual { animation: kibFade .25s ease; }

/* ── the celebratory champion reveal ── */
.kib-champ-reveal { padding-top: 22px; }
.kib-champ-crown {
  display: flex; justify-content: center; margin-bottom: 4px;
  animation: champPop .6s cubic-bezier(.2,1.2,.3,1) both;
}
.kib-champ-reveal .winner .wname { font-size: 30px; }
.kib-champ-line {
  font-size: 13px; color: var(--ink-soft); margin: 12px 0 0;
}
.kib-champ-line b { color: var(--ink); font-weight: 800; }

@keyframes champPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes kibFade {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kib-bracket-champ.shown, .kib-champ-crown,
  .kib-bracket-screen, .kib-champ-ritual { animation: none !important; }
}

/* ============================================================
   How it works (explainer) + the home link to it
   ============================================================ */
.kib-how-link { margin-top: 14px; }
.kib-how-link .nl-ico { color: var(--gold); }

.kib-how-lead {
  font-size: 15px; line-height: 1.55; color: var(--page-ink);
  margin: 18px 2px 18px;
}
.kib-how-lead b { color: var(--gold); }

.kib-how-models { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .kib-how-models { grid-template-columns: 1fr; } }
.kib-how-model {
  background: var(--card); border-radius: 16px; padding: 14px;
  box-shadow: var(--shadow);
}
.kib-how-model .tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px;
}
.kib-how-model.long .tag  { background: rgba(20,60,40,0.10); color: var(--ink-soft); }
.kib-how-model.short .tag { background: var(--gold); color: #3a2c06; }
.kib-how-model h3 { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin: 0 0 6px; letter-spacing: 0.01em; }
.kib-how-model p  { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.kib-how-model p b { color: var(--ink); }

.kib-how-note {
  font-size: 12.5px; line-height: 1.5; color: var(--page-soft);
  margin: 12px 2px 6px;
}
.kib-how-note b { color: var(--page-ink); }

.kib-how-h {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--page-soft); margin: 24px 2px 10px;
}
.kib-how-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.kib-how-steps li { font-size: 13px; line-height: 1.5; color: var(--page-soft); }
.kib-how-steps li b { color: var(--page-ink); }
.kib-how-steps li::marker { color: var(--gold); font-weight: 700; }

.kib-how-factors { display: flex; flex-direction: column; gap: 8px; }
.kib-how-factor {
  background: var(--chip); border: 1px solid var(--card-edge); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.kib-how-factor b { font-size: 13px; color: var(--page-ink); }
.kib-how-factor span { font-size: 12px; line-height: 1.45; color: var(--page-soft); }

.kib-how .kib-foot { margin-top: 26px; }

/* "How it works" link shown in every page footer */
.kib-foot-how {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold); font-weight: 700;
  text-align: center; text-decoration: underline; text-underline-offset: 3px;
}
.kib-foot-how:hover { color: var(--gold-deep); }

/* ============================================================
   RESPONSIVE LAYOUT — tablet (≥768) + desktop (≥1120)
   Mobile (<768px) is intentionally untouched: every rule below
   lives inside a min-width media query, so phones render exactly
   as before. Content-dense screens (Schedule, Groups, Track
   record) spread into responsive grids that use the wider
   container; single-focus screens (Home, Match detail, How it
   works) stay a centred reading column within that container.
   ============================================================ */

/* ---------- TABLET: 768px and up ---------- */
@media (min-width: 768px) {
  /* widen + centre the app container; a touch more breathing room */
  .kib {
    max-width: 760px;
    padding: 28px 24px calc(44px + env(safe-area-inset-bottom));
  }

  /* Single-focus views: keep a comfortable centred column inside the
     wider container so they never stretch awkwardly. The brand bar +
     tab bar sit above these (direct children of .kib) and still span
     the full width. */
  .kib-home,
  .kib-detail,
  .kib-how { max-width: 600px; margin-left: auto; margin-right: auto; }

  /* GROUPS — 12 cards into a responsive grid (≈2 cols here). */
  .kib-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
  }

  /* SCHEDULE — each day's matches become a grid; the day header spans
     the full row above its grid. Rows drop their stacked margin and
     use the grid gap so the pick columns still line up per row. */
  .kib-sched-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    align-items: start;
  }
  .kib-sched-day { grid-column: 1 / -1; margin-bottom: 2px; }
  .kib-srow { margin-bottom: 0; }
}

/* ---------- DESKTOP: 1120px and up ---------- */
@media (min-width: 1120px) {
  .kib {
    max-width: 1120px;
    padding: 34px 40px calc(52px + env(safe-area-inset-bottom));
  }

  /* a touch more presence for single-focus reading columns */
  .kib-home { max-width: 620px; }
  .kib-detail,
  .kib-how { max-width: 640px; }

  /* GROUPS → 3 columns at this width (auto-fill handles it). */
  .kib-groups-grid { gap: 16px; }

  /* SCHEDULE → 3 columns per day at this width. */
  .kib-sched-group { gap: 12px; }

  /* TRACK RECORD — comparison + summary cards stay full-width on top
     (they live outside .kib-pred-list); the settled-match list splits
     into two columns. */
  .kib-pred-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .kib-pred-list .kib-pred { margin-bottom: 0; }

  /* subtle big-screen polish — scale the hero + section heads a touch
     so the page feels designed at 1280px, not blown up. */
  .kib-hero h1 { font-size: 58px; }
  .kib-hero p { max-width: 320px; font-size: 14px; }
}