/* =============================================================
   pssc-games.css — the live Games page. Phone first: this is the
   page behind the QR codes on the day.
   ============================================================= */

/* ---------- competition + stage colour system ---------- */
.gmx{
  --gm-pool-bg:#eef2f9;   --gm-pool-fg:#475569;
  --gm-semi-bg:#fef3c7;   --gm-semi-fg:#92400e;
  --gm-final-bg:#fee2e2;  --gm-final-fg:#b91c1c;
  --gm-live-bg:#dcfce7;   --gm-live-fg:#15803d;
}

/* schedule rows carry their competition colour and their stage colour */
.gmx .sched-s{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--gm-pool-bg); color:var(--gm-pool-fg);
  font-size:.74rem; letter-spacing:.02em;
}
.gmx .sched-row[data-stage="semi"] .sched-s{ background:var(--gm-semi-bg); color:var(--gm-semi-fg) }
.gmx .sched-row[data-stage="final"] .sched-s{ background:var(--gm-final-bg); color:var(--gm-final-fg) }
.gmx .sched-row[data-stage="final"] .sched-t{ color:var(--gm-final-fg) }
.gmx .sched-name{ color:var(--tint,#1049a9) }

/* the key under the schedule */
.gm-key{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none }
.gm-key li{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:700; color:#475569;
  background:#fff; border:1px solid #e4e9f2; border-radius:999px; padding:6px 12px;
}
.gm-key i{ width:10px; height:10px; border-radius:3px; background:var(--c,#cbd5e1); flex:0 0 auto }
.gm-key .is-pill{ width:auto; height:auto; border-radius:999px; padding:2px 8px; font-style:normal;
  font-size:.68rem; background:var(--c); color:var(--f) }

/* ---------- phone ---------- */
@media (max-width:760px){
  /* the competition switcher sits in a tidy grid - never a sideways scroll */
  .gm-tabs{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px; overflow:visible; padding:0; margin:0;
  }
  .gm-tab{ width:100%; text-align:center; justify-content:center }

  /* the facts stay a 2 x 2 block instead of a tall stack */
  .evx-facts{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px }
  .evx-fact{ padding:11px 12px; min-height:0 }
  .evx-fact__k{ font-size:.6rem; letter-spacing:.13em }
  .evx-fact__v{ font-size:.88rem; margin-top:4px }
  .evx-fact__s{ font-size:.72rem; margin-top:2px }

  /* nothing hides behind the app bar at the bottom */
  main.gmx{ padding-bottom:78px }
}
@media (max-width:379px){
  .evx-facts{ grid-template-columns:minmax(0,1fr) !important }
}
/* clicking a competition lands you back on the switcher, not at the top */
.gm-tabs{ scroll-margin-top:92px }

/* nothing on this page scrolls sideways */
.gmx img, .gmx table{ max-width:100% }

/* ---------- the scoreboard panel in the hero ---------- */
.gmx-panel{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:18px; padding:16px 16px 14px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.gmx-panel__k{
  margin:0 0 10px; font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  font-weight:800; color:var(--accent);
}
.gmx-panel__list{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.gmx-panel__list li{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--tint,#8fb6ff); border-radius:12px; padding:11px 13px;
}
.gmx-panel__list li.is-live{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.28) }
.gmx-t{ display:block; font-weight:700; color:#fff; font-size:.98rem; line-height:1.32 }
.gmx-t em{ font-style:normal; color:rgba(255,255,255,.5); padding:0 5px; font-weight:600 }
.gmx-m{ display:block; margin-top:4px; font-size:.8rem; color:rgba(255,255,255,.66) }
.gmx-panel__empty{ margin:0; color:rgba(255,255,255,.7); font-size:.9rem; line-height:1.5 }
.gmx-panel__foot{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; padding-top:11px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.8rem; color:rgba(255,255,255,.62);
}
.gmx-panel__foot b{ color:#fff }

/* the state chip: a live day gets a heartbeat */
.gmx-state.is-live{ background:rgba(220,38,38,.30); border-color:rgba(255,255,255,.34) }
.gmx-state.is-live .evx-chip__dot{ background:#ff4d63; animation:gmx-pulse 1.6s ease-out infinite }
.gmx-state.is-done .evx-chip__dot{ background:#8fe3b4 }
@keyframes gmx-pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,77,99,.65) }
  70%  { box-shadow:0 0 0 9px rgba(255,77,99,0) }
  100% { box-shadow:0 0 0 0 rgba(255,77,99,0) }
}
@media (prefers-reduced-motion:reduce){ .gmx-state.is-live .evx-chip__dot{ animation:none } }
@media (max-width:1019px){ .gmx-panel{ margin-top:clamp(24px,4vw,36px) } }
/* ---------- the hero slider: one slide per game ---------- */
.gmx-slider{ display:grid }
.gmx-slide{
  grid-area:1 / 1; opacity:0; transform:translateY(5px);
  transition:opacity .45s ease, transform .45s ease; pointer-events:none;
}
.gmx-slide.is-current{ opacity:1; transform:none; pointer-events:auto }
.gmx-k-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--tint,#8fb6ff); margin-right:8px; vertical-align:1px;
}
.gmx-dots{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.gmx-dot{
  font-family:inherit; font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.72); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:7px 13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.gmx-dot::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--tint,#8fb6ff) }
.gmx-dot.on{ background:rgba(255,255,255,.17); color:#fff; border-color:rgba(255,255,255,.34) }
.gmx-dot:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@media (prefers-reduced-motion:reduce){ .gmx-slide{ transition:none } }

/* ===== polish v144 ===== */
.gmx .sched-row{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.gmx .sched-row:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,26,60,.10)}
.gmx .gm-tab{transition:transform .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.gmx .gm-tab:hover{transform:translateY(-1px);border-color:#b9c6e4}
.gmx .gmx-dot{transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
.gmx .gmx-dot:hover{transform:translateY(-1px)}
.gmx table tbody tr{transition:background-color .12s ease}
.gmx table tbody tr:hover{background:#f3f6fd}
@media (prefers-reduced-motion:reduce){.gmx .sched-row,.gmx .gm-tab,.gmx .gmx-dot{transition:none}}

html:has(.gmx){scroll-behavior:auto}


/* ===== team colours - v145 ===== */
.gmx .tm{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;
  background:var(--tm-bg,#eef1f7);color:var(--tm-fg,#1c2b4a);font-weight:700;line-height:1.35;max-width:100%}
.gmx .tm i{width:8px;height:8px;border-radius:50%;background:var(--tm-dot,#64748b);flex:none;display:inline-block}
.gmx .tm-0{--tm-dot:#2563eb;--tm-bg:#e8eefc;--tm-fg:#1d3f8f}
.gmx .tm-1{--tm-dot:#dc2626;--tm-bg:#fdecec;--tm-fg:#8f1d1d}
.gmx .tm-2{--tm-dot:#059669;--tm-bg:#e5f6ef;--tm-fg:#065f46}
.gmx .tm-3{--tm-dot:#d97706;--tm-bg:#fdf3e2;--tm-fg:#92400e}
.gmx .tm-4{--tm-dot:#7c3aed;--tm-bg:#f1ebfd;--tm-fg:#5b21b6}
.gmx .tm-5{--tm-dot:#0d9488;--tm-bg:#e2f6f4;--tm-fg:#115e59}
.gmx .tm-6{--tm-dot:#db2777;--tm-bg:#fdeaf3;--tm-fg:#9d174d}
.gmx .tm-7{--tm-dot:#4f46e5;--tm-bg:#ebeafc;--tm-fg:#3730a3}
.gmx .tm-8{--tm-dot:#ea580c;--tm-bg:#fdeee3;--tm-fg:#9a3412}
.gmx .tm-9{--tm-dot:#0891b2;--tm-bg:#e2f5fa;--tm-fg:#155e75}
.gmx .tm-10{--tm-dot:#65a30d;--tm-bg:#f0f7e2;--tm-fg:#3f6212}
.gmx .tm-11{--tm-dot:#a21caf;--tm-bg:#f9e9fb;--tm-fg:#701a75}
/* on the dark hero panel the dot carries the colour; no pastel pill */
.gmx .gmx-t .tm{background:transparent;color:inherit;padding:0;gap:7px;font-weight:800}
/* pool tables - dot only, keep the row calm */
.gmx table .tm{background:transparent;color:inherit;padding:0;gap:7px}

/* ===== olympic dressing - v146 ===== */
.gmx{
  --oly-blue:#0081C8; --oly-yellow:#FCB131; --oly-ink:#141a24;
  --oly-green:#00A651; --oly-red:#EE334E;
  /* stage pills speak medal: pool = ring blue, semi-final = silver, final = gold */
  --gm-pool-bg:#e2f1fa; --gm-pool-fg:#00639a;
  --gm-semi-bg:#edeff3; --gm-semi-fg:#4d5666;
  --gm-final-bg:#fcf0d3; --gm-final-fg:#8a5b00;
}
.gmx .evx-hero{overflow:hidden}
.gmx .evx-rule{
  width:110px; height:5px; border-radius:3px;
  background:linear-gradient(90deg,var(--oly-blue) 0 20%,var(--oly-yellow) 20% 40%,#f4f6fa 40% 60%,var(--oly-green) 60% 80%,var(--oly-red) 80% 100%);
}
.gmx .gmx-rings{display:block; width:176px; height:auto; opacity:.95; margin:20px 0 4px}
.gmx .gmx-rings circle{fill:none; stroke-width:8}
.gmx .gmx-rings circle:nth-child(1){stroke:var(--oly-blue)}
.gmx .gmx-rings circle:nth-child(2){stroke:#e8edf5}
.gmx .gmx-rings circle:nth-child(3){stroke:var(--oly-red)}
.gmx .gmx-rings circle:nth-child(4){stroke:var(--oly-yellow)}
.gmx .gmx-rings circle:nth-child(5){stroke:var(--oly-green)}
@media (max-width:760px){ .gmx .gmx-rings{width:146px; margin:16px 0 2px} }
.gmx .gm-h{position:relative; padding-bottom:12px}
.gmx .gm-h::after{
  content:""; position:absolute; left:0; bottom:0; width:54px; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--oly-blue) 0 20%,var(--oly-yellow) 20% 40%,var(--oly-ink) 40% 60%,var(--oly-green) 60% 80%,var(--oly-red) 80% 100%);
}
.gmx .sched-name{display:flex; align-items:center}
.gmx .sched-pict{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:27px; height:27px; border-radius:50%; margin-right:9px; font-size:14px; font-style:normal;
  background:var(--tint,#1049a9); box-shadow:0 2px 6px rgba(13,35,80,.25);
}
/* the schedule reads like a start list: one lane per team */
.gmx .sched-m{display:grid; gap:6px; justify-items:start}
.gmx .sched-m em{display:none}
.gmx .sched-m .tm{width:auto; max-width:100%; border-radius:9px; padding:5px 11px 5px 9px; font-size:.93rem}
/* podium numbers in the pool tables */
.gmx .gm-c-pos{font-weight:800}
.gmx tbody tr:first-child .gm-c-pos{color:#a16207}
.gmx tbody tr:nth-child(2) .gm-c-pos{color:#64748b}

/* quiet page before kick-off: an empty Playing-now block says nothing - hide it */
#gm-live:has(.gm-empty){display:none}

/* How a drawn knock-out was settled, under the two team lines. */
.sched-pens{display:block;width:100%;margin-top:3px;font-size:.78rem;font-weight:600;
  letter-spacing:.01em;color:#b45309}