/* =====================================================================
   World Cup 2026 — "Apple Lisa" desktop theme
   Monochrome / gray, hard-edged shadows, pinstripe title bars,
   beveled rounded-rect controls. One restrained accent (LIVE red).
   ===================================================================== */

:root {
  --ink:    #1a1a1a;
  --paper:  #ffffff;
  --desk:   #8f8f8f;   /* desktop gray */
  --panel:  #dcdcdc;   /* window furniture gray */
  --panel2: #eaeaea;   /* lighter inset */
  --panel3: #f4f4f4;
  --edge:   #000000;   /* hard black borders */
  --muted:  #6a6a6a;
  --muted2: #8a8a8a;
  --hair:   #c4c4c4;
  --live:   #c0182b;   /* the single accent */
  --live-2: #e23b4d;
  --shadow: 3px 3px 0 rgba(0,0,0,0.55);
  --font:   "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif;
  --mono:   "SF Mono", "Geneva", "Monaco", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--desk);
  /* subtle dithered "desktop" stipple */
  background-image:
    radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================ Boot / loading screen ============================ */
#bootScreen {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--desk);
  background-image:
    radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
  transition: opacity 0.5s ease;
}
#bootScreen.done { opacity: 0; pointer-events: none; }
.boot-card {
  width: min(340px, 86vw);
  background: var(--paper);
  border: 2px solid var(--edge);
  border-radius: 4px;
  box-shadow: 5px 6px 0 rgba(0,0,0,0.5);
  padding: 26px 28px 22px;
  text-align: center;
  animation: bootPop 0.22s cubic-bezier(.2,.85,.25,1);
}
.boot-logo {
  width: 60px; height: 60px; object-fit: contain;
  filter: grayscale(1) contrast(1.04);
  margin-bottom: 8px;
}
.boot-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.boot-sub {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.4px; margin-top: 3px;
}
.boot-bar {
  position: relative; height: 14px; margin: 18px 0 12px;
  border: 2px solid var(--edge); border-radius: 8px;
  background: var(--panel2); overflow: hidden;
}
.boot-bar span {
  position: absolute; top: 0; bottom: 0; width: 42%; left: -45%;
  background: repeating-linear-gradient(45deg, var(--ink) 0 5px, #3a3a3a 5px 10px);
  animation: bootSlide 1.15s cubic-bezier(.4,.1,.5,.95) infinite;
}
.boot-tip {
  font-size: 12px; font-weight: 700; color: var(--muted);
  font-family: var(--mono); letter-spacing: 0.3px;
}

/* Beta / consent gate that lives inside the boot card */
.boot-gate { margin-top: 4px; }
.boot-note {
  font-size: 12px; line-height: 1.5; font-weight: 600; color: #333;
  text-align: left; margin: 0 0 14px;
}
.boot-btn {
  display: block; width: 100%; font: 800 13px var(--font);
  padding: 9px 12px; border: 2px solid var(--edge); border-radius: 8px;
  cursor: pointer; box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.boot-btn.primary { background: var(--ink); color: #fff; margin-bottom: 8px; }
.boot-btn.primary:hover { filter: brightness(1.12); }
.boot-btn.ghost { background: var(--panel2); color: var(--ink); }
.boot-btn.ghost:hover { background: var(--panel3); }
.boot-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
@keyframes bootSlide { from { left: -45%; } to { left: 103%; } }
@keyframes bootPop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .boot-card { animation: none; }
  .boot-bar span { animation: none; left: 0; width: 100%; opacity: 0.5; }
}

/* ============================ Menu bar ============================ */
.menubar {
  height: 30px;
  background: var(--paper);
  border-bottom: 2px solid var(--edge);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
  user-select: none;
  z-index: 10;
}
.menubar-apple { font-size: 14px; }
.menubar-apple::before { content: ""; } /* leaves the glyph from HTML */
.menubar-item { font-weight: 700; letter-spacing: 0.2px; }
.menubar-spacer { flex: 1; }
.menubar-live {
  font-family: var(--font); font-weight: 800; font-size: 11px; letter-spacing: 0.5px;
  color: #fff; background: var(--live); border: 1px solid rgba(0,0,0,0.45);
  border-radius: 9px; padding: 1px 8px 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase;
}
.menubar-live[hidden] { display: none; }
.menubar-live:hover { filter: brightness(1.08); }
.menubar-live:active { transform: translateY(1px); }
.menubar-live .ml-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff; display: inline-block;
  animation: pulse 1.4s ease-out infinite;
}
/* idle "Today" state — neutral, no red, no pulse */
.menubar-live.is-idle {
  background: var(--panel2); color: var(--ink); border-color: var(--edge);
}
.menubar-live.is-idle:hover { filter: none; background: var(--ink); color: #fff; }
.menubar-live.is-idle:hover .ml-dot { background: #fff; }
.menubar-live.is-idle .ml-dot { background: var(--muted2); animation: none; }
.menubar-clock {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* ============================ Desktop ============================ */
.desktop {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--desk);
}
/* Fixed desktop backdrop: a real stadium photo (MetLife — host of the 2026
   Final), desaturated to grayscale to stay on-theme with the gray Lisa desktop,
   under a soft scrim. It lives on a ::before layer (z-index 0) so ONLY the
   backdrop is greyed — the window and its contents keep their colour, and the
   desk-icons (z-index 6) and window (later in the DOM) paint on top. If the
   photo can't load (offline), the desktop's --desk gray shows through. */
.desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(143,143,143,0.30), rgba(120,120,120,0.42)),
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Metlife_stadium_%28Aerial_view%29.jpg/1280px-Metlife_stadium_%28Aerial_view%29.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  filter: grayscale(1) contrast(1.02);
  opacity: 0.92;
}

/* ============================ Window ============================ */
.window {
  position: absolute;
  left: 0; top: 34px;
  width: min(1080px, calc(100vw - 32px));
  /* leave room at the foot of the desktop for the floating dock (~78px tall)
     plus the top menu bar — keeps the window from sitting under the dock */
  height: min(900px, calc(100vh - 150px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.window.dragging { box-shadow: 6px 6px 0 rgba(0,0,0,0.5); }
.window.active { box-shadow: 5px 5px 0 rgba(0,0,0,0.5); } /* focused window sits proud */
body.is-dragging { cursor: grabbing; user-select: none; }

/* ---- Title bar with pinstripes ---- */
.titlebar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: var(--paper);
  border-bottom: 2px solid var(--edge);
  flex: 0 0 auto;
}
.titlebar-stripes {
  flex: 1;
  height: 12px;
  background: repeating-linear-gradient(
    to bottom,
    var(--edge) 0, var(--edge) 1px,
    transparent 1px, transparent 3px
  );
  opacity: 0.85;
}
.titlebar-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  padding: 0 10px;
  background: var(--paper);
}
.closebox, .titlebar-zoom {
  width: 15px; height: 15px;
  border: 2px solid var(--edge);
  background: var(--paper);
  border-radius: 2px;
  flex: 0 0 auto;
  position: relative;
}
.closebox { cursor: pointer; padding: 0; }
.closebox:active { background: var(--ink); }
/* X glyph — two diagonal strokes, crossed */
.closebox::before, .closebox::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 2px;
  background: var(--edge);
}
.closebox::before { transform: translate(-50%, -50%) rotate(45deg); }
.closebox::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.closebox:active::before, .closebox:active::after { background: var(--paper); }
.titlebar-zoom::after {
  content: "";
  position: absolute; inset: 2px;
  border: 1px solid var(--edge);
}

/* ============================ Tabs ============================ */
.tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
  background: var(--panel);
  flex: 0 0 auto;
}
.tab {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 7px 16px 8px;
  background: var(--panel2);
  color: var(--ink);
  border: 2px solid var(--edge);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  cursor: pointer;
  position: relative;
  top: 2px;
  box-shadow: inset 0 1px 0 #fff;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tab:hover { background: var(--panel3); }
.tab[aria-selected="true"] {
  background: var(--paper);
  top: 0;
  padding-bottom: 10px;
  z-index: 2;
}

/* live LED on the tab */
.live-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hair);
  border: 1px solid rgba(0,0,0,0.4);
  display: inline-block;
}
.live-led.on {
  background: var(--live);
  border-color: var(--live);
  box-shadow: 0 0 0 0 rgba(192,24,43,0.6);
  animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192,24,43,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(192,24,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,24,43,0); }
}

/* ============================ Toolbar ============================ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  background: var(--paper);
  border-bottom: 2px solid var(--edge);
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.toolbar-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.toolbar-field span { color: var(--muted); }
.toolbar select {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 22px 3px 8px;
  border: 2px solid var(--edge);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: inset 0 1px 0 #fff, var(--shadow);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 9px center, right 4px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  max-width: 230px;
}
.toolbar-spacer { flex: 1; }

/* sync indicator (clickable to refresh) */
.sync {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border: 2px solid var(--edge);
  border-radius: 14px;
  background: var(--panel2);
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.sync:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.sync-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted2);
  border: 1px solid rgba(0,0,0,0.4);
}
.sync-dot.ok   { background: #2f2f2f; }
.sync-dot.live { background: var(--live); border-color: var(--live); animation: pulse 1.4s ease-out infinite; }
.sync-dot.err  { background: #fff; }

/* ============================ Content ============================ */
.content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.012) 0 8px, transparent 8px 16px),
    var(--paper);
  padding: 14px;
}
.loading, .empty {
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
}

/* Day / group section headers */
.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 2px 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
}
.section-head:first-child { margin-top: 2px; }
.section-head::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 2px dotted var(--hair);
}
.section-head .count {
  font-weight: 700;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

/* ============================ Match card ============================ */
.match {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: stretch;
  gap: 12px;
  background: var(--paper);
  border: 2px solid var(--edge);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 9px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
}
.match.is-live { box-shadow: 2px 2px 0 rgba(192,24,43,0.45); border-color: #2a2a2a; }

/* left rail: kickoff time + status */
.match-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 2px dotted var(--hair);
  padding-right: 10px;
}
.match-time .clock {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}
.match-time .ampm { font-size: 10px; color: var(--muted); font-weight: 700; }
.match-time .status {
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 9px;
  border: 1.5px solid var(--edge);
  background: var(--panel2);
  white-space: nowrap;
}
.status.s-live { background: var(--live); color: #fff; border-color: var(--live); }
.status.s-ft   { background: var(--ink); color: #fff; border-color: var(--ink); }
.status.s-soon { background: #fff; }

/* center: teams + score */
.match-main { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.team-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
}
.team-row.win .team-name { font-weight: 800; }
.team-row.loss .team-name { color: var(--muted); font-weight: 600; }
.flag {
  font-size: 17px;
  line-height: 1;
  filter: grayscale(1) contrast(1.05);  /* keep on-theme monochrome */
  width: 22px; text-align: center; flex: 0 0 auto;
}
.team-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-name.placeholder { color: var(--muted2); font-style: italic; font-weight: 600; }
.team-score {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 800;
  min-width: 20px;
  text-align: right;
  flex: 0 0 auto;
}
.team-score.dim { color: var(--hair); }

/* goals list under a played match */
.goals {
  margin: 2px 0 0 31px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.live-note { margin: 3px 0 0 31px; font-size: 11px; font-weight: 800; color: var(--live); letter-spacing: 0.2px; }
.goal { white-space: nowrap; }
.goal .ball { filter: grayscale(1); }
.goal .min { font-family: var(--mono); color: var(--ink); }
.goal .tag { font-size: 9px; font-weight: 800; color: var(--live); letter-spacing: 0.3px; }

/* right: venue + meta */
.match-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  gap: 3px;
  border-left: 2px dotted var(--hair);
  padding-left: 12px;
  min-width: 130px;
}
.match-meta .badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 1px 7px;
  border: 1.5px solid var(--edge);
  border-radius: 9px;
  background: var(--panel2);
  text-transform: uppercase;
}
.match-meta .stadium { font-size: 12px; font-weight: 700; line-height: 1.15; }
.match-meta .city { font-size: 11px; color: var(--muted); }
.match-meta .country { font-size: 14px; filter: grayscale(1); }

/* live minute pill */
.live-min {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  color: var(--live);
}

/* ============================ Standings ============================ */
.standings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.group-card {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
  overflow: hidden;
}
.group-card h3 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 11px;
  background: linear-gradient(180deg, #ffffff, #f1f1f1);
  border-bottom: 2px solid var(--edge);
}
table.standings { width: 100%; border-collapse: collapse; font-size: 12px; }
table.standings th {
  font-size: 10px; color: var(--muted); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 5px 4px; text-align: center; border-bottom: 1px solid var(--hair);
}
table.standings th.team-col, table.standings td.team-col { text-align: left; padding-left: 10px; }
table.standings td { padding: 6px 4px; text-align: center; border-bottom: 1px dotted var(--hair); font-weight: 700; }
table.standings tr:last-child td { border-bottom: none; }
table.standings tr.qualify td.team-col { box-shadow: inset 3px 0 0 var(--ink); }
table.standings td.pts { font-family: var(--mono); font-weight: 800; }
.standings .flag { font-size: 14px; width: 18px; }
.std-team { display: flex; align-items: center; gap: 7px; }

/* Golden boot / stats panel */
.stats-panel {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
  margin-bottom: 16px;
  overflow: hidden;
}
.stats-panel h3 {
  margin: 0; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 7px 11px; border-bottom: 2px solid var(--edge);
}
.scorer-row, .stat-line {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px dotted var(--hair); font-size: 13px;
}
.scorer-row:last-child, .stat-line:last-child { border-bottom: none; }
.scorer-row .rank { font-family: var(--mono); color: var(--muted); width: 20px; font-weight: 800; }
.scorer-row .who { flex: 1; font-weight: 700; }
.scorer-row .who small { color: var(--muted); font-weight: 600; }
.scorer-row .num { font-family: var(--mono); font-weight: 800; font-size: 15px; }
.scorer-row .bars { letter-spacing: -2px; }
.gb-mini { gap: 0; }
.gb-mini .scorer-row .bars { color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
.stat-cell { padding: 11px 12px; border-right: 1px dotted var(--hair); border-bottom: 1px dotted var(--hair); }
.stat-cell .big { font-family: var(--mono); font-size: 24px; font-weight: 800; line-height: 1; }
.stat-cell .lab { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; }

/* ============================ Status bar ============================ */
.statusbar {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--panel);
  border-top: 2px solid var(--edge);
  flex: 0 0 auto;
}
.statusbar-grow { flex: 1; text-align: center; }

/* ============================ Scrollbar (chunky Mac) ============================ */
.content::-webkit-scrollbar { width: 15px; }
.content::-webkit-scrollbar-track {
  background:
    repeating-linear-gradient(45deg, #fff 0 2px, #d9d9d9 2px 4px);
  border-left: 2px solid var(--edge);
}
.content::-webkit-scrollbar-thumb {
  background: var(--panel2);
  border: 2px solid var(--edge);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #fff;
}
.content::-webkit-scrollbar-thumb:hover { background: var(--panel3); }

/* ============================ Responsive ============================ */
@media (max-width: 720px) {
  .desktop { overflow: auto; }
  .window { position: static !important; width: 100%; height: 100%; border-radius: 0; box-shadow: none; border-left: none; border-right: none; left: 0 !important; top: 0 !important; }
  #titlebar { cursor: default; }
  .match { grid-template-columns: 56px 1fr; }
  .match-meta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start;
    border-left: none; border-top: 2px dotted var(--hair); padding: 8px 0 0; min-width: 0; gap: 8px; }
  .toolbar select { max-width: 150px; }
  .titlebar-name { font-size: 11px; padding: 0 6px; }
}
@media (max-width: 460px) {
  .menubar { gap: 12px; font-size: 12px; }
  .menubar-item:nth-child(n+3) { display: none; }
  .team-row { font-size: 14px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .live-led.on, .sync-dot.live, .menubar-live .ml-dot { animation: none; }
}

/* =====================================================================
   v2 — menus, dialogs, dashboard, team/venue/match views, navigation
   ===================================================================== */

/* ---- clickable affordances (no underlines — subtle highlight instead) ---- */
[data-nav] { cursor: pointer; }
.team-name[data-nav]:hover, .badge[data-nav]:hover, .stadium[data-nav]:hover, .city[data-nav]:hover,
.goal [data-nav]:hover, .scorer-row [data-nav]:hover, .std-team [data-nav]:hover,
.ms-name:hover, .crumb[data-nav]:hover, .mv-info-row .vv[data-nav]:hover,
.team-stand:hover, .gt-name[data-nav]:hover {
  background: rgba(0,0,0,0.07); border-radius: 3px; box-shadow: 0 0 0 2px rgba(0,0,0,0.07);
}
.match.clickable:hover { background: #fbfbfb; box-shadow: 3px 3px 0 rgba(0,0,0,0.34); }
.match.clickable:active { transform: translate(1px,1px); }

/* ---- menu bar triggers ---- */
.menu-trigger {
  font-weight: 700; letter-spacing: 0.2px; padding: 4px 10px; border-radius: 5px;
  cursor: pointer; user-select: none; outline: none;
}
.menu-trigger.apple { font-size: 15px; padding: 4px 8px; }
.menu-trigger:hover, .menu-trigger.active { background: var(--ink); color: #fff; }
.menu-trigger:focus-visible { box-shadow: 0 0 0 2px var(--ink); }

/* ---- pull-down menus ---- */
.menu-dropdown {
  position: fixed; z-index: 2000; min-width: 210px;
  background: var(--paper); border: 2px solid var(--edge); border-radius: 0 0 6px 6px;
  box-shadow: 3px 4px 0 rgba(0,0,0,0.5); padding: 4px 0;
}
.menu-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-family: var(--font); font-size: 13px; font-weight: 600; text-align: left;
  padding: 4px 12px 4px 6px; background: none; border: none; cursor: pointer; color: var(--ink);
}
.menu-item:hover { background: var(--ink); color: #fff; }
.menu-item.disabled { color: var(--muted2); cursor: default; font-style: italic; }
.menu-item.disabled:hover { background: none; color: var(--muted2); }
.mi-check { width: 14px; text-align: center; font-size: 12px; }
.mi-label { flex: 1; }
.mi-key { color: var(--muted); font-size: 11px; letter-spacing: 0.5px; }
.menu-item:hover .mi-key { color: #cfcfcf; }
.menu-sep { height: 0; border-top: 1px solid var(--hair); margin: 4px 0; }

/* ---- skeuomorphic folder tabs (active tab merges into the panel) ---- */
.tabs {
  position: relative; z-index: 3;
  background: linear-gradient(180deg, #e7e7e7, var(--panel));
  padding: 9px 10px 0;
  border-bottom: 2px solid var(--edge);   /* the shelf the tabs sit on (always present) */
}
.tab {
  transition: background .1s var(--ease), color .1s ease;
  outline: none;
  top: 0;                                 /* all tabs flush to the shelf */
  border-radius: 9px 9px 0 0;
  color: #4d4d4d;
  background: linear-gradient(180deg, #ededed 0%, #d6d6d6 55%, #c4c4c4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -9px 9px -8px rgba(0,0,0,0.30);
}
.tab:hover:not([aria-selected="true"]) {
  background: linear-gradient(180deg, #f7f7f7 0%, #e2e2e2 55%, #d2d2d2 100%);
  color: var(--ink);
}
/* the lit active tab — its ::after covers the shelf so it joins the panel below */
.tab[aria-selected="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 70%, #ffffff 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    -3px 0 5px -3px rgba(0,0,0,0.22),
    3px 0 5px -3px rgba(0,0,0,0.22);
  z-index: 5;
}
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 3px;
  background: var(--paper);   /* paints over the 2px shelf → seamless join to content */
}
.tab:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
/* push the Live/Today tab to the far right of the strip */
.tab.tab-right { margin-left: auto; }

/* ---- generic note / small empty ---- */
.note { color: var(--muted); font-size: 12px; font-weight: 600; padding: 14px 8px; text-align: center; }
.empty.small { padding: 22px 8px; font-size: 13px; }

/* ---- form dots ---- */
.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.form-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; font-size: 9px; font-weight: 800; color: #fff;
  border: 1px solid var(--edge);
}
.f-W { background: #2a2a2a; } .f-D { background: var(--muted2); } .f-L { background: #fff; color: var(--ink); }

/* ============================ Dashboard ============================ */
.dash { display: block; }
.hero {
  border: 2px solid var(--edge); border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f4f4f4);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28); padding: 16px 18px; margin-bottom: 12px;
}
.hero-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.hero-sub { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hero-stats b { font-family: var(--mono); font-size: 17px; color: var(--ink); }

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.panel { border: 2px solid var(--edge); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); overflow: hidden; display: flex; flex-direction: column; }
.panel.span2 { grid-column: 1 / -1; }
.panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-bottom: 2px solid var(--edge); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ffffff, #f1f1f1);
}
.panel-b { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.panel-b.nogap { gap: 0; padding: 8px; }
.panel-b.nogap .match { margin-bottom: 8px; } .panel-b.nogap .match:last-child { margin-bottom: 0; }
.mini-btn {
  font-family: var(--font); font-size: 11px; font-weight: 700; padding: 2px 9px;
  border: 1.5px solid var(--edge); border-radius: 10px; background: var(--panel2); cursor: pointer; text-transform: none; letter-spacing: 0;
}
.mini-btn:hover { background: var(--ink); color: #fff; }

.live-tag { color: var(--live); font-weight: 800; }

/* countdown card */
.countdown-card { text-align: center; padding: 8px; cursor: pointer; }
.cd-teams { font-size: 16px; font-weight: 800; }
.cd-v { color: var(--muted); font-weight: 600; margin: 0 4px; }
.cd-clock { font-family: var(--mono); font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 6px 0 4px; }
.cd-meta { font-size: 12px; color: var(--muted); font-weight: 600; }

.mini-scorer { display: grid; grid-template-columns: 18px 22px 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.mini-scorer .rank { font-family: var(--mono); color: var(--muted); font-weight: 800; }
.mini-scorer .ms-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-scorer b { font-family: var(--mono); }
.venue-list { gap: 2px; }
.venue-link { display: flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 700; padding: 4px 4px; border-bottom: 1px dotted var(--hair); cursor: pointer; }
.venue-link:last-child { border-bottom: none; }
.venue-link small { color: var(--muted); font-weight: 600; margin-left: auto; }
.venue-link:hover { background: #fafafa; }

/* ============================ Crumbs / back ============================ */
.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; font-weight: 700; }
.crumb-back { font-family: var(--font); font-size: 12px; font-weight: 800; padding: 3px 12px; border: 2px solid var(--edge); border-radius: 14px; background: var(--panel2); cursor: pointer; box-shadow: 2px 2px 0 rgba(0,0,0,0.3); }
.crumb-back:hover { background: var(--ink); color: #fff; }
.crumb-back:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.crumb { color: var(--muted); } .crumb.cur { color: var(--ink); }
.crumb-sep { color: var(--hair); }

/* ============================ Team / Venue hero ============================ */
.team-hero { display: flex; align-items: center; gap: 16px; border: 2px solid var(--edge); border-radius: 10px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); padding: 14px 18px; margin-bottom: 12px; }
.team-hero-flag { font-size: 46px; line-height: 1; filter: grayscale(1) contrast(1.05); }
body.colour-flags .team-hero-flag { filter: none; }
.team-hero-name { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.team-hero-sub { font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 5px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.team-stand { cursor: pointer; }
.team-stand b { color: var(--ink); }
.team-stats { margin-bottom: 4px; }

/* ---- Real stadium photo banner (full colour, on purpose) ---- */
.venue-banner {
  position: relative;
  height: 230px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
  overflow: hidden;
  margin-bottom: 12px;
}
.venue-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fallback when the photo can't load: a dithered gray field like the desktop */
.venue-banner.noimg {
  background-color: var(--desk);
  background-image:
    radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
}
.venue-banner-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 18px 12px;
  color: #fff;
  /* legibility scrim so white text reads over any photo */
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.40) 45%, rgba(0,0,0,0) 100%);
}
.venue-banner-name {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.venue-banner-sub {
  font-size: 13px;
  font-weight: 700;
  margin-top: 5px;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ============================ Match view ============================ */
.mv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; border: 2px solid var(--edge); border-radius: 10px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); padding: 18px 14px; margin-bottom: 12px; }
.mv-team { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.mv-flag { font-size: 40px; filter: grayscale(1) contrast(1.05); }
body.colour-flags .mv-flag { filter: none; }
.mv-name { font-size: 16px; font-weight: 800; text-align: center; }
.mv-name.placeholder { color: var(--muted2); font-style: italic; font-weight: 600; }
.mv-center { text-align: center; min-width: 110px; }
.mv-score { font-family: var(--mono); font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.mv-score span { color: var(--muted); margin: 0 4px; }
.mv-kick { font-family: var(--mono); font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.mv-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; color: var(--muted); }
.mv-status.s-live { color: var(--live); } .mv-status.s-ft { color: var(--ink); }
.mv-info { border: 2px solid var(--edge); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); overflow: hidden; margin-bottom: 4px; }
.mv-info-row { display: flex; gap: 12px; padding: 9px 14px; border-bottom: 1px dotted var(--hair); font-size: 13px; }
.mv-info-row:last-child { border-bottom: none; }
.mv-info-row .k { width: 110px; flex: 0 0 auto; color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: 0.3px; padding-top: 1px; }
.mv-info-row .vv { font-weight: 700; }
.goal-timeline { border: 2px solid var(--edge); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); padding: 8px 0; }
.gt-row { display: flex; align-items: center; gap: 9px; padding: 4px 14px; font-size: 13px; font-weight: 700; }
.gt-row.right { flex-direction: row-reverse; text-align: right; }
.gt-min { font-family: var(--mono); color: var(--ink); width: 34px; }
.gt-ball { filter: grayscale(1); }
.mv-forms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mv-form { display: flex; align-items: center; gap: 8px; border: 2px solid var(--edge); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); padding: 10px 12px; font-weight: 800; cursor: pointer; }

/* ============================ Highlights (YouTube) ============================ */
.yt-embed { margin-bottom: 6px; }
/* The clickable poster (lite facade) — clicking it opens the player popup. */
.yt-facade {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 2px solid var(--edge); border-radius: 8px; overflow: hidden;
  background: var(--ink); box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
  cursor: pointer; padding: 0; text-align: left; text-decoration: none;
}
.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04); }
body.colour-flags .yt-thumb { filter: none; }
/* Dithered gray field (matches the desktop) for the search tile / missing poster */
.yt-thumb.noimg {
  background-color: var(--desk);
  background-image:
    radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
}
.yt-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.18) 46%, rgba(0,0,0,0) 72%); }
/* The play button — the single splash of colour, like the LIVE indicator */
.yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 46px; background: var(--live); border: 2px solid #fff; border-radius: 11px; box-shadow: 2px 2px 0 rgba(0,0,0,0.45); transition: background 0.12s ease, transform 0.12s ease; }
.yt-play::after { content: ''; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-play.search { background: var(--ink); }
.yt-play.search::after { border-width: 9px 0 9px 15px; }
.yt-facade:hover .yt-play { background: var(--live-2); transform: translate(-50%, -50%) scale(1.06); }
.yt-facade:hover .yt-play.search { background: var(--live); }
.yt-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 11px; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.yt-cap-title { font-size: 14px; font-weight: 800; line-height: 1.18; text-shadow: 0 1px 3px rgba(0,0,0,0.75); }
.yt-cap-sub { font-size: 11px; font-weight: 700; opacity: 0.92; text-shadow: 0 1px 2px rgba(0,0,0,0.75); }
.yt-alt { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; }
.yt-alt:hover { color: var(--ink); text-decoration: underline; }

/* Square, frameless replay popup — plays in-app, floats over everything */
#ytpop { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; }
.ytpop-backdrop { position: absolute; inset: 0; background: rgba(16,16,16,0.66);
  backdrop-filter: blur(3px) saturate(0.7); -webkit-backdrop-filter: blur(3px) saturate(0.7); animation: fadeIn .12s ease; }
.ytpop-box { position: relative; width: min(86vmin, 720px); aspect-ratio: 1 / 1;
  background: #000; border: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 64px rgba(0,0,0,0.62); animation: palIn .15s var(--ease); }
/* the player fills the square box; the YT API replaces #ytpop-player with an iframe */
.ytpop-stage { position: absolute; inset: 0; }
.ytpop-stage iframe, #ytpop-player { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; display: block; }
/* graceful fallback when a clip can't be embedded (owner-disabled / unavailable) */
.ytpop-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px; text-align: center; background: #0c0c0c; color: #fff; }
.ytpop-fb-title { font-size: 16px; font-weight: 800; }
.ytpop-fb-sub { font-size: 12px; font-weight: 600; color: #bdbdbd; max-width: 320px; line-height: 1.45; }
.ytpop-fb-btn { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 9px; background: var(--live); color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; }
.ytpop-fb-btn:hover { background: var(--live-2); }
/* floating, frameless controls */
.ytpop-btn { position: absolute; top: 9px; z-index: 2; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; text-decoration: none; }
.ytpop-btn:hover { background: rgba(0,0,0,0.85); }
.ytpop-close { right: 9px; }
.ytpop-yt { right: 47px; font-size: 14px; }
@media (max-width: 560px) { .ytpop-box { width: 94vw; } }

/* "▶ Highlights" marker on result cards (gray = search available, red = embedded clip) */
.hl-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.3px; padding: 1px 7px; border: 1.5px solid var(--edge); border-radius: 9px; background: var(--panel2); color: var(--muted); text-transform: uppercase; }
.hl-badge.has-vid { background: var(--live); color: #fff; border-color: var(--live); }
.rw-hl { font-size: 9px; font-weight: 800; color: var(--muted2); margin-left: auto; margin-right: 6px; }
.rw-hl.has-vid { color: var(--live); }

/* ============================ Results page + Replays ============================ */
.results-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 14px; margin-bottom: 4px;
  border: 2px solid var(--edge); border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f3f3f3);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
}
.rh-stat { font-size: 13px; font-weight: 600; color: var(--muted); }
.rh-stat b { font-family: var(--mono); font-size: 17px; color: var(--ink); }
.rh-link { margin-left: auto; font: 700 12px var(--font); color: #fff; background: var(--live);
  border: 1.5px solid var(--live); border-radius: 11px; padding: 3px 12px; cursor: pointer;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.rh-link:hover { filter: brightness(1.08); }

/* ---- Replays feed (blog of video posts) ---- */
.feed-head { padding: 2px 2px 14px; border-bottom: 2px dotted var(--hair); margin-bottom: 18px; }
.feed-title { font-size: 23px; font-weight: 800; letter-spacing: -0.4px; }
.feed-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.feed { display: flex; flex-direction: column; gap: 20px; max-width: 640px; margin: 0 auto; }
.post {
  border: 2px solid var(--edge); border-radius: 10px; background: var(--paper);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.28); padding: 14px 16px 16px;
}
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.post-src { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); border: 1.5px solid var(--edge); border-radius: 9px; padding: 1px 8px; background: var(--panel2); }
.post-src.on { background: var(--live); color: #fff; border-color: var(--live); }
.post-meta { font-size: 11px; font-weight: 700; color: var(--muted); }
.post-meta [data-nav] { cursor: pointer; }
.post-meta [data-nav]:hover { color: var(--ink); text-decoration: underline; }
.post-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 19px; font-weight: 800; margin: 2px 0 12px; cursor: pointer; }
.post-title .flag { font-size: 21px; }
.post-title:hover .pt-name { text-decoration: underline; }
.pt-score { font-family: var(--mono); font-size: 20px; font-weight: 800; padding: 0 3px; }
.post-media { margin: 0 0 11px; }
.post-media .yt-embed { margin-bottom: 0; }
.post-excerpt { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 11px; }
.post-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.replays-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); flex: 0 0 auto; }
.replay-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.replay-chip {
  font: 700 11px var(--font); display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border: 1.5px solid var(--edge); border-radius: 11px;
  background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
.replay-chip:hover { background: var(--ink); color: #fff; }
.replay-chip.has-vid { background: var(--live); color: #fff; border-color: var(--live); }
.replay-chip.has-vid:hover { filter: brightness(1.08); }
.replay-chip.active { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ============================ Dialog ============================ */
#dialogLayer { position: fixed; inset: 0; pointer-events: none; z-index: 1500; }
.dialog { position: fixed; pointer-events: auto; background: var(--panel); border: 2px solid var(--edge); border-radius: 3px; box-shadow: 5px 6px 0 rgba(0,0,0,0.5); }
.dialog.active { box-shadow: 7px 8px 0 rgba(0,0,0,0.55); }
.dlg-bar { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--paper); border-bottom: 2px solid var(--edge); cursor: grab; }
.dlg-title { font-size: 12px; font-weight: 700; padding: 0 8px; background: var(--paper); white-space: nowrap; }
.dlg-body { padding: 18px; background: var(--paper); }

/* ---- Resize grip (classic corner box) — sits at the foot-right of any
   resizable window or dialog. Both #appWindow (absolute) and .dialog (fixed)
   are positioned, so the grip anchors to their own corner. ---- */
.wc-resize-grip {
  position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px;
  cursor: nwse-resize; z-index: 6; touch-action: none; opacity: .45;
  background: repeating-linear-gradient(-45deg, var(--edge) 0 1px, transparent 1px 3px);
  transition: opacity .12s var(--ease);
}
.wc-resize-grip:hover { opacity: .85; }
.window > .wc-resize-grip { right: 2px; bottom: 2px; }
.window.resizing, .dialog.resizing { user-select: none; }
/* A dialog only flips to fill-mode once the user actually drags the grip, so
   its default (content-sized, inner-scroller capped) open behaviour is untouched. */
.dialog.wc-resized { display: flex; flex-direction: column; }
.dialog.wc-resized .dlg-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dialog.wc-resized .dlg-body > * { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Drilled-in pages inside a floating window scroll within the window (Finder-style),
   matching the list windows' own scrollers. */
.win-scroll { max-height: calc(100vh - 150px); overflow-y: auto; margin: -6px; padding: 6px; }
.win-scroll::-webkit-scrollbar { width: 12px; }
.win-scroll::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }
.dlg-body .view-in { animation: viewIn .17s var(--ease); }
.about { text-align: center; }
.about-logo { font-size: 44px; }
.about h2 { margin: 6px 0; font-size: 20px; }
.about p { font-size: 13px; color: #333; line-height: 1.5; margin: 8px 0; }
.about-meta { color: var(--muted) !important; font-size: 12px !important; }
.about-tip { text-align: left; font-size: 12px !important; color: var(--muted) !important; border-top: 1px dotted var(--hair); padding-top: 10px; }

@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; }
  .mv-head { grid-template-columns: 1fr; gap: 14px; }
}

/* =====================================================================
   v3 — squads, player profiles, teams browser, squad profile
   ===================================================================== */
.panel-h-btns { display: flex; gap: 6px; }
.confed-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; padding: 1px 8px; border: 1.5px solid var(--edge); border-radius: 9px; background: var(--panel2); text-transform: uppercase; }
.hero-meta { font-size: 12px; color: var(--muted); font-weight: 700; }
.muted-note { color: var(--muted2); font-style: italic; font-weight: 600; }

/* squad profile panel */
.profile-body { padding: 4px 0; }
.shape-row { display: flex; gap: 14px; align-items: baseline; padding: 7px 12px; border-bottom: 1px dotted var(--hair); font-size: 13px; }
.shape-k { width: 110px; flex: 0 0 auto; color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: 0.3px; }
.shape-v { font-weight: 700; }
.shape-v.gbp { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.shape-v.gbp i { font-style: normal; letter-spacing: -2px; color: var(--ink); }
.profile-note { font-size: 11px; color: var(--muted); font-weight: 600; padding: 9px 12px 2px; line-height: 1.4; }

/* squad roster */
.squad { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.squad-group { border: 2px solid var(--edge); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); overflow: hidden; }
.squad-group h4 { margin: 0; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 11px; border-bottom: 2px solid var(--edge); background: var(--panel2); }
.squad-list { display: flex; flex-direction: column; }
.player-cell { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 9px; padding: 6px 11px; border-bottom: 1px dotted var(--hair); cursor: pointer; font-size: 13px; }
.player-cell:last-child { border-bottom: none; }
.player-cell:hover { background: #f6f6f6; }
.pnum { font-family: var(--mono); font-weight: 800; color: var(--muted); text-align: right; }
.pname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; }
.pname small { font-weight: 600; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgoals { filter: grayscale(1); font-size: 11px; }
.page { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 700; }

/* teams browser */
.teams-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.team-search { flex: 1; font-family: var(--font); font-size: 14px; font-weight: 600; padding: 7px 12px; border: 2px solid var(--edge); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.3); -webkit-appearance: none; caret-color: var(--ink); }
.team-search::selection { background: var(--ink); color: var(--paper); }
.team-search:focus { outline: none; box-shadow: 2px 2px 0 rgba(0,0,0,0.3), inset 0 0 0 1px var(--ink); }
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 9px; margin-bottom: 8px; }
.team-card { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border: 2px solid var(--edge); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,0.28); padding: 9px 11px; cursor: pointer; }
.team-card:hover { background: #fafafa; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(0,0,0,0.34); }
.team-card:active { transform: translate(1px,1px); }
.tc-flag { font-size: 24px; filter: grayscale(1) contrast(1.05); }
body.colour-flags .tc-flag { filter: none; }
.tc-main { display: flex; flex-direction: column; min-width: 0; }
.tc-name { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-sub { font-size: 11px; color: var(--muted); font-weight: 700; }

@media (max-width: 720px) {
  .squad { grid-template-columns: 1fr; }
  .teams-grid { grid-template-columns: 1fr; }
  .shape-row { flex-direction: column; gap: 4px; }
  .shape-k { width: auto; }
}

/* =====================================================================
   v4 — Omarchy/Hyprland energy: command palette, snappy motion, kbd-first
   ===================================================================== */
:root { --ease: cubic-bezier(.2,.85,.25,1); }

/* small keycaps */
kbd { font-family: var(--mono); font-size: 10px; font-weight: 700; background: #fff; color: var(--ink);
  border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; line-height: 1.5; }

/* launcher hint in the menu bar */
.launcher-hint { font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--ink);
  background: var(--panel2); border: 1.5px solid var(--edge); border-radius: 13px; padding: 1px 9px 2px;
  display: flex; align-items: center; gap: 6px; cursor: pointer; margin-right: 4px; }
.launcher-hint:hover { background: var(--ink); color: #fff; }
.launcher-hint:hover kbd { background: #fff; }

/* ---- command palette / launcher ---- */
#palette { position: fixed; inset: 0; z-index: 3000; display: flex; justify-content: center; align-items: flex-start; }
.pal-backdrop { position: absolute; inset: 0; background: rgba(40,40,40,0.28);
  backdrop-filter: blur(3px) saturate(0.7); -webkit-backdrop-filter: blur(3px) saturate(0.7); animation: fadeIn .12s ease; }
.pal-box { position: relative; margin-top: 11vh; width: min(640px, 92vw); background: var(--paper);
  border: 2px solid var(--edge); border-radius: 12px; box-shadow: 6px 8px 0 rgba(0,0,0,0.45), 0 0 0 1px #fff inset;
  overflow: hidden; animation: palIn .15s var(--ease); }
.pal-input { width: 100%; border: none; border-bottom: 2px solid var(--edge); outline: none;
  font-family: var(--font); font-size: 17px; font-weight: 600; padding: 15px 18px; background: linear-gradient(180deg,#fff,#f6f6f6); }
.pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-item { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px;
  padding: 8px 12px; border-radius: 7px; cursor: pointer; }
.pal-item .pal-icon { font-size: 17px; text-align: center; filter: grayscale(1) contrast(1.05); }
body.colour-flags .pal-item .pal-icon { filter: none; }
.pal-item .pal-label { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-item .pal-sub { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.pal-item.sel { background: var(--ink); }
.pal-item.sel .pal-label { color: #fff; }
.pal-item.sel .pal-sub { color: #c9c9c9; }
.pal-empty { padding: 26px; text-align: center; color: var(--muted); font-weight: 600; }
.pal-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 2px solid var(--edge);
  background: var(--panel2); font-size: 11px; font-weight: 700; color: var(--muted); }
.pal-foot kbd { font-size: 9px; }

/* ---- snappy motion ---- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes palIn  { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes winIn  { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }
.content.view-in { animation: viewIn .17s var(--ease); }
.window.win-in { animation: winIn .24s var(--ease); }
.dialog { animation: palIn .15s var(--ease); }

/* keyboard-first row focus (j/k) */
.kb-focus { outline: 2.5px solid var(--ink); outline-offset: -2px; }

/* press feedback — snappy, not bouncy */
.mini-btn, .crumb-back, .tab, .sync, .menu-trigger, .launcher-hint, .team-card, .player-cell, .match.clickable, .venue-link {
  transition: transform .07s var(--ease), background .1s ease, color .1s ease, box-shadow .1s ease;
}
.mini-btn:active, .crumb-back:active, .team-card:active, .player-cell:active, .venue-link:active { transform: translateY(1px) scale(.99); }

@media (prefers-reduced-motion: reduce) {
  .content.view-in, .window.win-in, .dialog, .pal-box, .pal-backdrop, .dlg-body .view-in { animation: none; }
  * { transition: none !important; }
}

/* =====================================================================
   v5 — body layout with right news feed, stage headers, tab tweaks
   ===================================================================== */
.body-row { flex: 1 1 auto; min-height: 0; display: flex; }
.body-row .content { flex: 1 1 auto; min-height: 0; }

/* right-hand live/news feed rail */
.feed-rail {
  flex: 0 0 286px; width: 286px; min-height: 0;
  display: flex; flex-direction: column;
  border-left: 2px solid var(--edge);
  background: linear-gradient(180deg, #f3f3f3, #e9e9e9);
}
.feed-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 2px solid var(--edge);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  background: linear-gradient(180deg, #fff, #f1f1f1);
}
.feed-live { font-size: 11px; font-weight: 800; color: var(--muted2); }
.feed-live.on { color: var(--live); animation: pulse 1.4s ease-out infinite; }
.feed-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.feed-sec {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); padding: 9px 8px 5px;
}
.feed-item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; border: 1px solid transparent;
}
.feed-item:hover { background: #fff; border-color: var(--hair); }
.fi-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 800; text-align: center;
  min-width: 38px; padding: 2px 6px; border-radius: 9px; border: 1.5px solid var(--edge);
  background: var(--panel2); white-space: nowrap;
}
.fi-tag.t-live { background: var(--live); color: #fff; border-color: var(--live); }
.fi-tag.t-ft { background: var(--ink); color: #fff; border-color: var(--ink); }
.fi-tag.t-soon { background: #fff; }
.fi-text { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-text b { font-weight: 700; }
.fi-text b.w { font-weight: 800; }
.fi-text .flag, .feed-item .flag { filter: grayscale(1) contrast(1.05); }
body.colour-flags .fi-text .flag { filter: none; }
.fi-cd { font-family: var(--mono); color: var(--muted); }
.feed-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-weight: 600; font-size: 12px; }
.feed-list::-webkit-scrollbar { width: 12px; }
.feed-list::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }

/* big stage headers in Fixtures */
.stage-head {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 2px 12px; padding: 8px 14px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.4px;
  color: #fff; background: linear-gradient(180deg, #2c2c2c, #161616);
  border: 2px solid var(--edge); border-radius: 8px; box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.stage-head:first-child { margin-top: 2px; }
.stage-head .count { margin-left: auto; font-size: 12px; font-weight: 700; color: #bdbdbd; letter-spacing: 0; }

/* hide the feed on narrower windows (its content lives in the Today/Live tab too) */
@media (max-width: 860px) {
  .feed-rail { display: none; }
}
@media (max-width: 720px) {
  .body-row { display: block; }
  .stage-head { font-size: 14px; }
}

/* =====================================================================
   v6 — draggable Latest Results window, feed pop-out, mobile overflow fixes
   ===================================================================== */
.feed-head-r { display: flex; align-items: center; gap: 8px; }
.feed-pop { font-size: 13px; font-weight: 800; background: var(--panel2); border: 1.5px solid var(--edge);
  border-radius: 6px; padding: 0 7px; cursor: pointer; line-height: 1.6; color: var(--ink); }
.feed-pop:hover { background: var(--ink); color: #fff; }

/* Latest Results draggable window */
.rw-list { max-height: 60vh; overflow-y: auto; margin: -6px; padding: 6px; }
.rw-row { padding: 9px 10px; border-bottom: 1px dotted var(--hair); cursor: pointer; border-radius: 6px; }
.rw-row:hover { background: #f6f6f6; }
.rw-row:last-child { border-bottom: none; }
.rw-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.rw-date { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: 0.4px; }
.rw-badge { font-size: 9px; font-weight: 800; border: 1.5px solid var(--edge); border-radius: 8px; padding: 0 6px; text-transform: uppercase; }
.rw-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-size: 14px; }
.rw-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rw-t.rev { justify-content: flex-end; }
.rw-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-t b.w { font-weight: 800; }
.rw-sc { font-family: var(--mono); font-weight: 800; font-size: 16px; }
.rw-sc .rw-vs { color: var(--muted2); font-weight: 700; font-size: 13px; }
.rw-goals { font-size: 11px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.rw-list .flag { filter: grayscale(1) contrast(1.05); flex: 0 0 auto; }
body.colour-flags .rw-list .flag { filter: none; }
.rw-list::-webkit-scrollbar { width: 12px; }
.rw-list::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }

/* ---- mobile: scrollable tabs + trimmed menu bar (fix overflow) ---- */
@media (max-width: 720px) {
  .tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
  .tab.tab-right { margin-left: 6px; }
}
@media (max-width: 600px) {
  .menubar { gap: 11px; }
  .menu-trigger[data-menu="view"], .menu-trigger[data-menu="special"] { display: none; }
  .lh-text { display: none; }
  .launcher-hint { padding: 1px 7px 2px; }
}

/* =====================================================================
   v7 — search reduced to an icon + "Results" desktop icon (Lisa style)
   ===================================================================== */
.launcher-hint.icon-only {
  padding: 0; width: 26px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; box-shadow: none;
}
.launcher-hint.icon-only:hover { background: var(--ink); }
.search-ico { display: block; }
.launcher-hint.icon-only:active { transform: translateY(1px); }

/* a classic desktop icon sitting on the gray desktop */
.desk-icon {
  position: absolute; top: 46px; right: 20px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 66px; padding: 4px; background: none; border: none; cursor: pointer;
  touch-action: none; /* let pointer-drag work without the page scrolling */
}
.desk-icon.dragging { z-index: 1700; cursor: grabbing; transform: none; }
.desk-icon.dragging .di-glyph { box-shadow: 4px 4px 0 rgba(0,0,0,0.5); }
.di-glyph {
  width: 42px; height: 34px; display: block; position: relative;
  background: #fff; border: 2px solid var(--edge); border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  background-image: repeating-linear-gradient(to bottom, transparent 0 6px, var(--hair) 6px 7px);
  background-position: 0 9px;
}
.di-glyph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: repeating-linear-gradient(to bottom, var(--edge) 0 1px, #fff 1px 2px); border-bottom: 1px solid var(--edge); }
.di-label {
  font-size: 11px; font-weight: 700; color: var(--ink);
  padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.desk-icon:hover .di-label { background: var(--ink); color: #fff; }
.desk-icon:hover .di-glyph { box-shadow: 3px 3px 0 rgba(0,0,0,0.5); }
.desk-icon:active { transform: translateY(1px); }
.desk-icon:active .di-glyph { box-shadow: 1px 1px 0 rgba(0,0,0,0.4); }

@media (max-width: 820px) { .desk-icon { display: none; } }

/* stacked desktop icons: Results, Golden Boot, then Kickabout (game.js) — kept from colliding.
   The #desktop prefix raises specificity so it wins over game.js's injected #kickaboutIcon rule. */
#resultsIcon { top: 46px; }
#goldenBootIcon { top: 128px; }
#groupsIcon { top: 210px; }
#teamsIcon { top: 292px; }
#desktop #kickaboutIcon { top: 374px; }

/* History folder — the one desktop icon we keep VISIBLE in the top-right corner.
   dock.js parks every .desk-icon (display:none !important) because apps live in the
   dock; this folder is a deliberate Finder-style exception that sits on the desktop.
   The higher-specificity #id + !important beats dock.js; gated to real desktop widths
   so it never fights the mobile iOS skin or a cramped narrow window. */
#desktop #historicIcon { top: 46px; right: 20px; }
@media (min-width: 821px) {
  body:not(.is-mobile) #desktop #historicIcon { display: flex !important; }
}
/* A manila-folder glyph (tab + body + front pocket) instead of the document/pinstripe glyph. */
#historicIcon .di-glyph {
  width: 44px; height: 34px; background: #fff; background-image: none;
  border: 2px solid var(--edge); border-radius: 1px 3px 0 0; overflow: visible;
}
#historicIcon .di-glyph::before {            /* folder tab (top-left) */
  content: ""; position: absolute; left: -2px; top: -7px; width: 20px; height: 9px;
  background: #fff; border: 2px solid var(--edge); border-bottom: none;
  border-radius: 3px 6px 0 0; background-image: none;
}
#historicIcon .di-glyph::after {             /* folder front pocket (gives it depth) */
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 14px;
  background: #fff; border: 2px solid var(--edge); border-radius: 0 0 3px 3px;
}
#historicIcon:hover .di-glyph { box-shadow: 3px 3px 0 rgba(0,0,0,0.5); }

/* Golden Boot desktop icon uses the pixel-art image instead of the CSS document glyph */
.di-img {
  width: 46px; height: 42px;
  display: flex; align-items: flex-end; justify-content: center;
}
.di-img img { max-width: 100%; max-height: 100%; display: block; }

/* Golden Boot window (movable dialog opened from the desktop icon) */
.gb-list { max-height: 60vh; overflow-y: auto; margin: -6px; padding: 6px; }
.gb-list .flag { filter: grayscale(1) contrast(1.05); flex: 0 0 auto; }
body.colour-flags .gb-list .flag { filter: none; }
.gb-list .scorer-row .bars { color: var(--muted); }
.gb-list::-webkit-scrollbar { width: 12px; }
.gb-list::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }

/* ===== History folder window — a Finder-style gallery that reflows with the window ===== */
.hist-win { max-height: 66vh; overflow-y: auto; margin: -6px; padding: 8px; }
.hist-intro { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 0 2px 12px; }
/* Responsive icon grid: columns auto-fill to the available width, so dragging the
   resizable window wider/narrower reflows the tiles (no fixed column count). */
.hist-grid {
  display: grid; gap: 12px 10px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.hist-tile {
  display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 7px; border: 2px solid transparent;
  background: none; text-align: center; font: inherit; cursor: pointer; border-radius: 6px;
}
.hist-tile:hover { background: var(--panel2); border-color: var(--hair); }
.hist-tile:active { transform: translateY(1px); }
/* a uniform, Finder-like icon well; the image is fit (not cropped) inside it */
.hist-thumb-wrap {
  width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: #ededed; border: 2px solid var(--edge); border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.32); overflow: hidden;
}
.hist-tile:hover .hist-thumb-wrap { box-shadow: 3px 3px 0 rgba(0,0,0,0.45); }
.hist-thumb {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  filter: grayscale(1) contrast(1.06);   /* keep the desktop tastefully gray */
}
.hist-tile.is-anim .hist-thumb-wrap { background: #fff; }
.hist-tile.is-anim .hist-thumb { filter: none; image-rendering: pixelated; }
.hist-cap b { display: block; font-size: 11px; font-weight: 800; color: var(--ink); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-cap small { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.colour-flags .hist-thumb { filter: none; }   /* respect the "Colour flags" toggle */
.hist-credit {
  margin: 14px 2px 2px; padding-top: 9px; border-top: 1px solid var(--hair);
  font-size: 10px; color: var(--muted); line-height: 1.5;
}
.hist-credit a { color: inherit; }
.hist-win::-webkit-scrollbar { width: 12px; }
.hist-win::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }

/* ===== Quick Look–style preview: big image + prev/next + counter + filmstrip ===== */
#histbox { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; }
#histbox .histbox-backdrop { position: absolute; inset: 0; background: rgba(20,20,20,0.58); }
#histbox .histbox-box {
  position: relative; width: min(90vw, 760px); max-height: 90vh;
  background: var(--paper); border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5); padding: 10px; display: flex; flex-direction: column;
}
#histbox .histbox-stage { position: relative; display: flex; align-items: center; justify-content: center; }
#histbox .histbox-img {
  max-width: 100%; max-height: 66vh; object-fit: contain; display: block;
  border: 1px solid var(--edge); background: #ededed; filter: grayscale(1) contrast(1.06);
}
#histbox.is-anim .histbox-img { filter: none; image-rendering: pixelated; background: #fff; }
body.colour-flags #histbox .histbox-img { filter: none; }
/* prev / next arrows floating over the image */
#histbox .histbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 46px;
  background: rgba(255,255,255,0.9); border: 2px solid var(--edge); cursor: pointer;
  font: 800 22px/1 var(--font); color: var(--ink); box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
#histbox .histbox-nav.prev { left: 8px; border-radius: 4px 8px 8px 4px; }
#histbox .histbox-nav.next { right: 8px; border-radius: 8px 4px 4px 8px; }
#histbox .histbox-nav:hover { background: #fff; }
#histbox .histbox-nav:active { transform: translateY(-50%) translateY(1px); }
#histbox .histbox-cap { font-size: 12px; color: var(--ink); margin-top: 9px; }
#histbox .histbox-cap b { font-weight: 800; }
#histbox .histbox-count { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 6px; }
#histbox .histbox-cap small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
#histbox .histbox-by { color: var(--muted2); font-style: italic; }
/* the filmstrip of thumbnails */
#histbox .histbox-strip {
  display: flex; gap: 6px; margin-top: 10px; padding: 7px; overflow-x: auto;
  background: var(--panel2); border: 2px solid var(--edge); border-radius: 5px;
}
#histbox .histbox-strip::-webkit-scrollbar { height: 8px; }
#histbox .histbox-strip::-webkit-scrollbar-thumb { background: var(--panel); border-radius: 4px; }
#histbox .histbox-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: #ededed; border: 2px solid var(--edge); border-radius: 3px; overflow: hidden;
}
#histbox .histbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); }
#histbox .histbox-thumb.is-anim img { object-fit: contain; filter: none; image-rendering: pixelated; }
body.colour-flags #histbox .histbox-thumb img { filter: none; }
#histbox .histbox-thumb.cur { border-color: var(--edge); box-shadow: 0 0 0 2px var(--ink) inset; }
#histbox .histbox-thumb:not(.cur) { opacity: 0.55; }
#histbox .histbox-thumb:hover { opacity: 1; }
#histbox .histbox-close {
  position: absolute; right: -12px; top: -12px; width: 28px; height: 28px; z-index: 2;
  background: #fff; border: 2px solid var(--edge); border-radius: 50%; cursor: pointer;
  font: 800 14px/1 var(--font); color: var(--ink); box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
#histbox .histbox-close:active { transform: translateY(1px); }
@media (max-width: 560px) {
  #histbox .histbox-box { width: 94vw; }
  #histbox .histbox-img { max-height: 56vh; }
}

/* ============================ Pixel-art imagery (World Cup icons) ============================ */
/* Black-and-white, transparent-background icons that sit on the gray desktop like Mac stickers. */

/* Tab icons — small monochrome marks before each tab label */
.tab-ico {
  width: 16px; height: 16px; object-fit: contain;
  vertical-align: -3px; margin-right: 6px;
  opacity: 0.72; transition: opacity .1s ease;
}
.tab:hover .tab-ico { opacity: 0.92; }
.tab[aria-selected="true"] .tab-ico { opacity: 1; }
.tab-glyph { display: inline-block; width: 16px; margin-right: 6px; font-size: 11px; color: var(--live); vertical-align: 0; }

/* Inline section-header icon (panel headers, section heads, h3) */
.sec-ico {
  width: 20px; height: 20px; object-fit: contain;
  vertical-align: -5px; flex: 0 0 auto;
}
.panel-h .sec-ico { width: 17px; height: 17px; vertical-align: -4px; margin-right: 3px; }
.section-head .sec-ico { vertical-align: -5px; margin-right: -2px; }
h3 .sec-ico { margin-right: 6px; }
.panel-h-l { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }

/* The red "● LIVE" pill badge, used in the Live-now panel header */
.badge-live-img { height: 17px; width: auto; vertical-align: -4px; margin-left: 4px; }

/* Big hero graphic for venue / player drill-down pages (replaces the giant flag glyph) */
.hero-ico {
  width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto;
}

/* About dialog — the early-Macintosh desktop screenshot as the logo */
.about-splash {
  display: block; width: 100%; max-width: 300px; height: auto;
  margin: 2px auto 10px;
  border: 2px solid var(--edge);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.28);
}

/* Empty-state graphic — a little folder-with-ball above the big "nothing here" messages */
.empty:not(.small)::before {
  content: ""; display: block;
  width: 92px; height: 70px; margin: 0 auto 14px;
  background: url("assets/icon-fixtures.png") center / contain no-repeat;
  opacity: 0.9;
}
.feed-empty::before {
  content: ""; display: block;
  width: 60px; height: 46px; margin: 0 auto 10px;
  background: url("assets/icon-fixtures.png") center / contain no-repeat;
  opacity: 0.85;
}

/* =====================================================================
   v8 — Groups standalone window (group tables + tournament stats)
   ===================================================================== */
/* Live window — same scroll shell as the other list windows */
.live-win { max-height: calc(100vh - 150px); overflow-y: auto; margin: -6px; padding: 6px; }
.live-win .section-head:first-child { margin-top: 2px; }
.live-win::-webkit-scrollbar { width: 12px; }
.live-win::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }

.groups-win { max-height: calc(100vh - 150px); overflow-y: auto; margin: -6px; padding: 6px; }
.groups-win .standings-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.groups-win .stats-panel { margin-bottom: 12px; }
.groups-win .note { padding: 12px 4px 2px; }
.groups-win::-webkit-scrollbar { width: 12px; }
.groups-win::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }

/* Teams directory window — same scroll shell as Groups; the search field stays pinned on top */
.teams-win { max-height: calc(100vh - 150px); overflow-y: auto; margin: -6px; padding: 6px; }
.teams-win .teams-toolbar { position: sticky; top: -6px; z-index: 2; margin: -6px -6px 12px; padding: 6px 6px 8px; background: var(--paper); border-bottom: 1px solid var(--edge); }
.teams-win .teams-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.teams-win::-webkit-scrollbar { width: 12px; }
.teams-win::-webkit-scrollbar-thumb { background: var(--panel2); border: 2px solid var(--edge); border-radius: 3px; }