/* WC*POOL '26 — teletext / CRT stylesheet */
:root {
  --bg: #000;
  --fg: #e8e8e8;
  --yellow: #ffff00;
  --cyan: #00ffff;
  --green: #00ff66;
  --magenta: #ff66ff;
  --red: #ff4444;
  --blue: #0033cc;
  --amber: #ffaa00;
  --dim: #777;
}
* { box-sizing: border-box; }
html { background: #111; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 22px;
  line-height: 1.25;
  max-width: 860px;
  margin: 0 auto;
  min-height: 100vh;
}
.crt {
  position: relative;
  padding: 8px 10px 24px;
  min-height: 100vh;
  text-shadow: 0 0 6px rgba(160,255,160,.25);
}
/* scanlines + vignette */
.crt::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  z-index: 99;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { background: var(--cyan); color: #000; }

/* header */
.tt-topbar {
  /* equal 1fr flanks keep the title truly centred whatever P-number/clock width */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  gap: 8px;
}
.tt-page { color: var(--fg); }
.tt-clock { text-align: right; }
.tt-title {
  color: var(--yellow);
  background: var(--blue);
  padding: 0 12px;
  font-size: 1.5em;
  letter-spacing: 2px;
  white-space: nowrap;
}
.tt-clock { color: var(--green); }
.tt-sub {
  color: var(--cyan);
  border-bottom: 2px solid var(--blue);
  padding: 2px 0 4px;
  margin-bottom: 8px;
  font-size: .85em;
  letter-spacing: 1px;
}

/* nav — coloured fastext keys */
.tt-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.key {
  padding: 1px 10px; color: #000; font-weight: bold; letter-spacing: 1px;
}
.key:hover { filter: brightness(1.3); color: #000; }
.key-red    { background: var(--red); }
.key-green  { background: var(--green); }
.key-yellow { background: var(--yellow); }
.key-cyan   { background: var(--cyan); }
.key-white  { background: var(--fg); }
.key-magenta{ background: var(--magenta); }
.key-amber  { background: var(--amber); }

.flash {
  background: var(--blue); color: var(--yellow);
  padding: 4px 10px; margin: 8px 0; letter-spacing: 1px;
}

/* panels */
.panel { border: 2px solid var(--blue); margin: 14px 0; }
.panel-title {
  background: var(--blue); color: var(--yellow);
  padding: 2px 10px; letter-spacing: 2px; display: flex;
  justify-content: space-between; flex-wrap: wrap; gap: 6px;
}
.panel-body { padding: 8px 10px; }

h1, h2 { font-weight: normal; letter-spacing: 2px; }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.big { font-size: 1.6em; }
.dim { color: var(--dim); }
.yellow { color: var(--yellow); }
.cyan { color: var(--cyan); }
.green { color: var(--green); }
.magenta { color: var(--magenta); }
.red { color: var(--red); }
.amber { color: var(--amber); }

/* next match hero */
.hero {
  border: 2px solid var(--green);
  text-align: center; padding: 12px 8px; margin: 14px 0;
}
.hero .teams { font-size: 1.7em; color: var(--yellow); margin: 6px 0; }
.hero .when { color: var(--cyan); font-size: 1.1em; }
.hero .venue { color: var(--dim); font-size: .9em; }
.hero .countdown { color: var(--green); font-size: 1.4em; letter-spacing: 2px; }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 3px 6px; }
th { color: var(--cyan); border-bottom: 1px solid var(--blue); font-weight: normal; }
tr:nth-child(even) td { background: rgba(0,51,204,.15); }
td.num, th.num { text-align: right; }
.rank { color: var(--yellow); }
.pts { color: var(--yellow); font-size: 1.2em; text-align: right; }
.move-up { color: var(--green); }
.move-down { color: var(--red); }
.move-flat { color: var(--dim); }

/* schedule */
.day-header {
  background: var(--blue); color: var(--yellow); padding: 2px 10px;
  margin: 16px 0 4px; letter-spacing: 2px; position: sticky; top: 0; z-index: 5;
}
.day-header.today { background: var(--yellow); color: #000; }
.match { display: grid; grid-template-columns: 64px 1fr auto; gap: 6px;
         padding: 5px 4px; border-bottom: 1px dashed #222; align-items: center; }
.match .time { color: var(--green); }
.match .fixture { }
.match .meta { color: var(--dim); font-size: .8em; text-align: right; }
.match .score { color: var(--yellow); font-size: 1.15em; white-space: nowrap; }
.match.finished .time { color: var(--dim); }
.placeholder { color: var(--dim); }

/* owner chips */
.chip {
  display: inline-block; font-size: .68em; padding: 0 6px; margin-left: 4px;
  color: #000; vertical-align: middle; letter-spacing: 1px; white-space: nowrap;
}
.chip.darkhorse::after { content: " ×2"; font-weight: bold; }

/* groups */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.qual td { background: rgba(0,255,102,.12) !important; }
.maybe td { background: rgba(255,170,0,.10) !important; }

/* forms */
input, select, button {
  font-family: inherit; font-size: inherit;
  background: #000; color: var(--green);
  border: 1px solid var(--cyan); padding: 2px 6px;
}
input[type=number] { width: 60px; }
button { background: var(--blue); color: var(--yellow); cursor: pointer; letter-spacing: 1px; }
button:hover { background: var(--cyan); color: #000; }
button.danger { background: #000; color: var(--red); border-color: var(--red); }
form.inline { display: inline; }

.paid-yes { color: var(--green); }
.paid-no { color: var(--red); }

.tt-footer {
  margin-top: 28px; border-top: 2px solid var(--blue);
  padding-top: 6px; color: var(--dim); font-size: .85em; letter-spacing: 1px;
}

/* draw night */
.draw-stage { text-align: center; }
.draw-status {
  color: var(--amber); font-size: 1.25em; letter-spacing: 2px;
  margin: 6px 0 10px; min-height: 1.3em;
}
.mixing {
  color: var(--green); font-size: 1.5em; letter-spacing: 3px;
  margin: 4px 0 10px; min-height: 1.3em;
}
.draw-slots {
  list-style: none; padding: 0; margin: 0 auto 12px; max-width: 460px;
  text-align: left;
}
.slot {
  display: flex; gap: 12px; align-items: baseline;
  padding: 4px 8px; border-bottom: 1px dashed #222;
}
.slot-num { color: var(--cyan); min-width: 110px; }
.slot-name { color: var(--dim); letter-spacing: 1px; font-size: 1.15em; }
.slot.active { background: var(--blue); }
.slot.active .slot-name { color: var(--green); }
.slot.revealed .slot-name { color: var(--yellow); }
.slot.flash-in { animation: slotflash .8s steps(2); }
@keyframes slotflash { 0% { background: var(--yellow); } 100% { background: none; } }
.draw-controls { margin: 14px 0 4px; }
.draw-controls button.big { font-size: 1.3em; padding: 6px 18px; }
.dim-btn {
  background: #000; color: var(--dim); border-color: var(--dim);
  font-size: .8em; margin-left: 10px;
}

/* the board — 48 teams by pot */
.pot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.pot-grid .panel { margin: 0; }
.pot-teams { list-style: none; margin: 0; padding: 0; }
.pot-teams li { padding: 2px 0; border-bottom: 1px dashed #1a1a1a; }
.pot-teams li.taken .pot-team-name {
  text-decoration: line-through; text-decoration-color: var(--red);
  text-decoration-thickness: 2px; color: var(--dim);
}

@media (max-width: 520px) {
  body { font-size: 18px; }
  .match { grid-template-columns: 52px 1fr; }
  .match .meta { grid-column: 1 / -1; text-align: left; }
  .group-grid { grid-template-columns: 1fr; }
}

/* Act II — the Lucky Dip fruit machine */
.dip-reel {
  border: 2px solid var(--cyan);
  background: #000;
  margin: 10px auto;
  max-width: 420px;
  text-align: center;
  padding: 4px 0;
}
.dip-reel-line {
  font-size: 1.1em;
  padding: 2px 8px;
  overflow: hidden;
  white-space: nowrap;
}
.dip-reel-mid {
  font-size: 1.5em;
  color: var(--yellow);
  background: var(--blue);
}
.dip-verdict {
  text-align: center;
  font-size: 1.4em;
  letter-spacing: 2px;
  margin: 6px 0;
}