/* Same palette and card layout as the Drag Ball game (Tailwind zinc + emerald). */
:root {
  --zinc-200: #e4e4e7;
  --zinc-400: #a1a1aa;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-600: #059669;
  --emerald-700: #047857;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--zinc-950);
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}
body { height: 100%; }
.wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.game-card {
  width: 100%;
  max-width: 366px; /* wide enough for "Bubble Bangerz" on one line at 390 px (and 360/375); room for 5 games, page scrolls vertically */
  background: var(--zinc-900);
  border-radius: 1.5rem;
  padding-bottom: 0.75rem;
}
.game-head {
  position: relative;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--zinc-800);
  text-align: center;
}
/* DS logo left of the title, like the icons left of the game names; centred as a group. */
.title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.head-logo {
  flex: none;
  width: 5.25rem;
  height: auto;
}
.game-title {
  margin: 0;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 800;
}
.game-sub {
  margin: 0.25rem 0 0;
  color: var(--zinc-400);
  font-size: 0.875rem;
  font-weight: 800;
}
.stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  background: var(--zinc-950);
}
.stat-label {
  font-size: 10px;
  color: var(--zinc-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stat-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  color: var(--emerald-400);
}
.play-area {
  position: relative;
  width: 100%;
  margin: 0.5rem 0;
  padding: 1.25rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border: 2px solid var(--zinc-700);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--zinc-950) url('./assets/play_area.svg') center / cover no-repeat;
}
.play-area::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.play-area::before { background: rgba(0, 0, 0, 0.6); }
.game-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--emerald-700); /* white text 5.48:1 (small description text needs AA) */
  border: 2px solid var(--emerald-600);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}
.game-btn:active { background: #065f46; transform: scale(0.98); }
.game-btn:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 3px; }
.icon { flex: none; width: 3rem; height: 3rem; }
.icon.bubbles { position: relative; }
.icon.bubbles i {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle, rgba(191, 233, 255, 0.15) 55%, rgba(191, 233, 255, 0.95) 90%, rgba(191, 233, 255, 0) 100%);
}
.icon.bubbles i:first-child { width: 2.25rem; height: 2.25rem; left: 0; top: 0.1rem; }
.icon.bubbles i:last-child { width: 1.4rem; height: 1.4rem; right: 0; bottom: 0.1rem; }
.icon.echo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; padding: 0.3rem; }
.icon.echo i { border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.icon.echo i:nth-child(1), .icon.echo i:nth-child(5), .icon.echo i:nth-child(9) { background: #fde047; box-shadow: 0 0 6px rgba(253, 224, 71, 0.8); }
/* Flash: two answer tiles, B picked (yellow) */
.icon.flash { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.2rem 0.15rem; }
.icon.flash i { display: flex; align-items: center; height: 1.05rem; padding-left: 0.3rem; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 0.3rem; font: 700 0.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; color: #fff; }
.icon.flash i:last-child { border-color: #fde047; background: rgba(253, 224, 71, 0.25); box-shadow: 0 0 6px rgba(253, 224, 71, 0.6); }
/* Pairs: two tiles joined by a line (the right one matched, green) */
.icon.pairs { position: relative; }
.icon.pairs i { position: absolute; top: 0.85rem; width: 1.15rem; height: 1.3rem; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 0.3rem; }
.icon.pairs i:first-child { left: 0.1rem; border-color: #fde047; background: rgba(253, 224, 71, 0.25); box-shadow: 0 0 6px rgba(253, 224, 71, 0.6); }
.icon.pairs i:nth-child(2) { right: 0.1rem; border-color: #34d399; background: rgba(52, 211, 153, 0.3); }
.icon.pairs b { position: absolute; top: 1.42rem; left: 1.25rem; right: 1.25rem; height: 3px; border-radius: 2px; background: #fff; }
.txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.name { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; line-height: 1.6rem; }
.desc { font-size: 0.85rem; line-height: 1.15rem; color: #fff; opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { font-size: 2rem; font-weight: 300; line-height: 1; }
.brand {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--zinc-400);
}

.total-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.added {
  position: absolute;
  left: 100%;
  margin-left: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fde047;
  white-space: nowrap;
  animation: added 2.6s ease-out forwards;
}
@keyframes added {
  0% { opacity: 0; transform: translateY(6px); }
  12% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}
.brand a { color: var(--zinc-400); text-decoration: underline; }
.brand a:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }

/* ---------- Sport dropdown (applies to every game; saved in localStorage) ---------- */
.sport-picker { position: relative; z-index: 3; display: flex; align-items: center; gap: 0.6rem; }
.sport-cap { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zinc-200); }
.sport-btn {
  flex: 1; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem; border-radius: 0.75rem;
  background: rgba(24, 24, 27, 0.92); color: #fff;
  border: 2px solid var(--emerald-600);
  font: inherit; font-size: 1rem; font-weight: 800; text-transform: uppercase; text-align: left; cursor: pointer;
}
.sport-btn:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }
.sport-btn[aria-expanded="true"] { border-color: var(--emerald-400); }
.sport-icon { width: 1.75rem; height: 1.75rem; flex: none; }
.sport-name { flex: 1; }
.caret {
  width: 0.55rem; height: 0.55rem; margin: 0 0.2rem 0.25rem 0;
  border-right: 2.5px solid var(--emerald-400); border-bottom: 2.5px solid var(--emerald-400);
  transform: rotate(45deg); transition: transform 0.15s;
}
.sport-btn[aria-expanded="true"] .caret { transform: translateY(0.3rem) rotate(-135deg); }
.sport-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.35rem);
  margin: 0; padding: 0.3rem; list-style: none;
  background: var(--zinc-900); border: 2px solid var(--emerald-600); border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.sport-list:focus { outline: none; }
.sport-list li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 0.5rem;
  color: var(--zinc-200); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; cursor: pointer;
}
.sport-list li img { width: 1.6rem; height: 1.6rem; }
.sport-list li.active { background: var(--zinc-800); color: #fff; }
.sport-list li[aria-selected="true"] { color: var(--emerald-300); }
.sport-list li[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--emerald-400); }

/* Narrow phones (320-360 px): keep the short descriptions on one line. */
@media (max-width: 360px) {
  .game-btn { gap: 0.5rem; padding: 0.75rem 0.625rem; }
  .desc { font-size: 0.75rem; }
}
/* Title as two explicit lines so its box hugs the text and the logo+title group centres exactly. */
.game-title .tl { display: block; white-space: nowrap; }

/* ---------- Language pulldown (native select, styled like the sport button) ---------- */
.sport-cap { flex: 0 0 5.6rem; }
.lang-wrap { position: relative; flex: 1; display: flex; }
.lang-select {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
}
.lang-select option { background: var(--zinc-900); color: #fff; text-transform: none; }
.lang-wrap .caret { position: absolute; right: 0.95rem; top: 50%; margin: -0.4rem 0 0; pointer-events: none; }
.lang-picker { z-index: 2; } /* below the open sport list (z-index 3) */

/* ---------- Topic field (Flash and Pairs content; hub-topic.js) ---------- */
.topic-box { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 0.4rem; }
.topic-line { display: flex; align-items: center; gap: 0.6rem; }
.topic-cap-wrap { flex: 0 0 5.6rem; display: flex; align-items: center; gap: 0.3rem; }
.topic-cap { flex: none; }
.topic-info {
  flex: none; width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--emerald-400); background: transparent; color: var(--emerald-300);
  font: inherit; font-size: 0.75rem; font-weight: 800; font-style: italic; line-height: 1; cursor: help;
}
.topic-info:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }
.topic-info[aria-expanded="true"] { background: var(--emerald-700); color: #fff; }
.topic-field { flex: 1; min-width: 0; display: flex; gap: 0.4rem; }
.topic-input {
  flex: 1; min-width: 0; padding: 0.5rem 0.7rem; border-radius: 0.75rem;
  background: rgba(24, 24, 27, 0.92); color: #fff; border: 2px solid var(--emerald-600);
  font: inherit; font-size: 1rem; font-weight: 700;
}
.topic-input:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }
.topic-input:disabled { opacity: 0.7; }
.topic-check {
  flex: none; width: 2.75rem; border-radius: 0.75rem; border: 2px solid var(--emerald-600);
  background: var(--emerald-700); color: #fff; font: inherit; font-size: 1.25rem; font-weight: 800; cursor: pointer;
}
.topic-check:disabled { background: rgba(24, 24, 27, 0.92); color: var(--zinc-400); border-color: var(--zinc-700); cursor: default; }
.topic-check:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }
.topic-help {
  position: absolute; left: 0; right: 0; top: calc(2.6rem + 0.3rem); z-index: 4;
  padding: 0.6rem 0.75rem; border-radius: 0.75rem; background: var(--zinc-900);
  border: 2px solid var(--emerald-600); color: var(--zinc-200); font-size: 0.85rem; line-height: 1.35;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.topic-lock { display: flex; align-items: center; gap: 0.6rem; padding-left: 6.2rem; }
.topic-lock[hidden], .topic-help[hidden], .topic-status[hidden], .topic-pw[hidden] { display: none; }
.topic-pw { font-size: 0.95rem; padding: 0.4rem 0.7rem; }
.topic-demo { flex: none; display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--zinc-200); white-space: nowrap; }
.topic-demo input { width: 1rem; height: 1rem; accent-color: var(--emerald-600); }
.topic-status {
  margin: 0; padding: 0.35rem 0.6rem; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 700; line-height: 1.3;
  display: flex; align-items: center; gap: 0.45rem; background: rgba(9, 9, 11, 0.85); color: var(--zinc-200);
}
.topic-status[data-kind="ok"] { color: var(--emerald-300); }
.topic-status[data-kind="error"] { color: #fca5a5; }
.topic-status[data-kind="warn"] { color: #fde68a; }
.topic-spin { display: none; flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid var(--zinc-700); border-top-color: var(--emerald-400); animation: topic-spin 0.8s linear infinite; }
.topic-status[data-kind="busy"] .topic-spin { display: inline-block; }
@keyframes topic-spin { to { transform: rotate(360deg); } }
@media (max-width: 360px) { .topic-lock { padding-left: 0; } }
.sport-picker:not(.lang-picker) { z-index: 4; } /* the open sport list stays above the Topic box */
.topic-input-wrap { flex: 1; min-width: 0; position: relative; display: flex; }
.topic-input-wrap .topic-input { padding-right: 2.1rem; }
.topic-clear {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--zinc-700); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.topic-clear[hidden] { display: none; }
.topic-clear:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }

/* ---------- Match: Event + Minute fields (hub-match.js) and the game button icon ---------- */
.match-box { z-index: 2; }
.match-confirmed { display: flex; align-items: center; gap: 0.5rem; margin-left: 6.2rem; padding: 0.45rem 0.6rem; border: 2px solid var(--emerald-600); border-radius: 0.6rem; background: rgba(5, 150, 105, 0.15); }
.match-box[hidden], .match-confirmed[hidden], #minute-line[hidden] { display: none; }
.match-ok { flex: none; color: var(--emerald-300); font-weight: 900; }
.match-ev { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.match-teams { font-size: 0.85rem; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.match-meta { font-size: 0.7rem; color: var(--zinc-200); overflow-wrap: anywhere; }
.match-state { flex: none; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.4rem; border-radius: 9999px; background: var(--zinc-700); color: #fff; }
.match-state[data-status="live"] { background: #dc2626; }
.match-state[data-status="finished"] { background: var(--emerald-700); }
.minute-input { flex: 0 0 4.5rem; width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.match-ready { flex: 1; width: auto; font-size: 0.9rem; font-weight: 800; text-transform: uppercase; }
@media (max-width: 360px) { .match-confirmed { margin-left: 0; } }
.icon.match { display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; padding: 0.25rem 0.15rem; }
.icon.match i { height: 0.7rem; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 0.25rem; }
.icon.match i:nth-child(2) { border-color: #22c55e; background: rgba(34, 197, 94, 0.3); box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }

/* Event combo box (hub-match.js): ▾ opens our own list of demo matches. Text 16px+ (no iOS zoom), rows 44px+. */
.match-box .topic-input { font-size: max(1rem, 16px); }
.event-list-btn { flex: none; min-width: 44px; min-height: 44px; font-size: 1.1rem; }
.event-list-btn[hidden], .event-list[hidden], .moment-box[hidden] { display: none; }
.event-list {
  list-style: none; margin: 0 0 0 6.2rem; padding: 0.25rem; display: flex; flex-direction: column; gap: 0.25rem;
  border: 2px solid var(--emerald-600); border-radius: 0.6rem; background: rgba(9, 9, 11, 0.97); max-height: 60vh; overflow-y: auto;
}
.event-opt {
  min-height: 44px; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 0.45rem;
  cursor: pointer; color: #fff; font-size: 1rem; line-height: 1.25;
}
.event-opt[aria-selected="true"], .event-opt:hover { background: rgba(5, 150, 105, 0.3); }
.event-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.event-opt-main { font-weight: 800; overflow-wrap: anywhere; }
.event-opt-sub { font-size: 0.85rem; color: var(--zinc-200); overflow-wrap: anywhere; }
.demo-tag { flex: none; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: 9999px; background: var(--emerald-700); color: #fff; }
.match-confirmed .demo-tag { margin-left: 0.25rem; }
.moment-box { margin-left: 6.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.moment-cap { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--zinc-200); }
.moment-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.moment-btn {
  min-height: 44px; min-width: 64px; padding: 0.35rem 0.75rem; border-radius: 0.6rem; border: 2px solid var(--emerald-600);
  background: rgba(5, 150, 105, 0.15); color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.moment-btn small { font-size: 0.65rem; font-weight: 700; color: var(--emerald-300); }
.moment-btn[aria-pressed="true"] { background: var(--emerald-700); }
.moment-btn.moment-other { border-color: var(--zinc-700); background: rgba(24, 24, 27, 0.92); }
.moment-btn:disabled { opacity: 0.6; cursor: default; }
.moment-btn:focus-visible, .event-opt:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }
@media (max-width: 360px) { .event-list, .moment-box { margin-left: 0; } }
.event-list-btn { background: rgba(24, 24, 27, 0.92); }
.event-list-btn[aria-expanded="true"] { background: var(--emerald-700); }

/* ---------- "‹ Main" link (hub-main.js), own row above the title; hidden for outsiders ---------- */
.main-link {
  display: block; width: max-content; margin: -0.25rem 0 0.25rem -0.25rem;
  font-size: 0.8rem; font-weight: 800; color: var(--emerald-300); text-decoration: none;
  padding: 0.15rem 0.35rem; border-radius: 0.4rem;
}
.main-link[hidden] { display: none; }
.main-link:focus-visible { outline: 3px solid var(--emerald-300); outline-offset: 2px; }

/* ---------- Style dropdown (skins, demo only; hub-skin.js). The menu itself stays Default. ---------- */
.skin-picker[hidden] { display: none; }
.sport-picker.skin-picker { z-index: 2; } /* above the game buttons (z-index 1); beats the Topic rule .sport-picker:not(.lang-picker) */
.sport-picker:has(> .sport-list:not([hidden])) { z-index: 5; } /* whichever list is open stays on top (Sport, Style) */
.skin-swatch { width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); background: var(--sw, #059669); }
.sport-list li .skin-swatch { width: 1.4rem; height: 1.4rem; }