/* ============================================================
   Brain Rot Politics — shared styles
   Look: Ceefax teletext meets a wet Tuesday on the pier.
   Palette bridges the games (Clacton Decides uses the same golds/teals).
   ============================================================ */
:root{
  --bg:#0a0908; --panel:#14110d; --panel2:#1b1712; --line:#2e2820;
  --ink:#f0e8d2; --mut:#9a8f79; --dim:#6d6455;
  --gold:#ffd75e; --teal:#7edcc8; --orange:#e2905e; --red:#c9403a; --green:#8fd07a;
  --magenta:#cf8fd6;
  --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
  --head:Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:Georgia,"Times New Roman",serif; line-height:1.65;
  -webkit-text-size-adjust:100%; }

/* faint CRT scanlines. Kept very light: heavier values stripe light-on-dark
   text and turn the yellow pills into hazard tape. */
body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.055) 0 1px,transparent 1px 4px); }

a{ color:var(--teal); }
a:hover{ color:var(--gold); }

/* ---------- teletext header ---------- */
.tt-bar{ font-family:var(--mono); font-size:13px; background:#000; color:#fff;
  padding:6px 14px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  border-bottom:1px solid var(--line); }
.tt-bar .pg{ color:var(--green); }
.tt-bar .nm{ color:var(--gold); letter-spacing:2px; }
.tt-bar .clock{ margin-left:auto; color:var(--teal); font-variant-numeric:tabular-nums; }

.site-head{ position:sticky; top:0; z-index:20; background:rgba(10,9,8,.97);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding:12px 18px; flex-wrap:wrap; }
.logo{ font:normal 25px/1 var(--head); letter-spacing:1.5px; text-decoration:none;
  display:inline-flex; align-items:baseline; gap:7px; }
.logo .b1{ color:var(--ink); }
.logo .b2{ color:var(--gold); }
.logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--red);
  display:inline-block; box-shadow:0 0 9px var(--red); animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* FASTEXT-style coloured nav, like the buttons at the bottom of a teletext page */
nav.fastext{ display:flex; gap:6px; flex:1; flex-wrap:wrap; font-family:var(--mono); }
nav.fastext a{ font-size:12.5px; letter-spacing:.6px; text-decoration:none; color:var(--ink);
  padding:5px 11px; border-radius:4px; border:1px solid var(--line);
  border-top-width:3px; background:var(--panel); }
nav.fastext a:nth-child(1){ border-top-color:var(--red); }
nav.fastext a:nth-child(2){ border-top-color:var(--green); }
nav.fastext a:nth-child(3){ border-top-color:var(--gold); }
nav.fastext a:nth-child(4){ border-top-color:var(--teal); }
nav.fastext a:hover{ background:var(--panel2); color:#fff; }
/* the sister site: magenta was a teletext colour too, and the arrow plus the
   dimmer text mark it as leaving the site rather than another page here */
nav.fastext a.offsite{ border-top-color:var(--magenta); color:var(--mut); }
nav.fastext a.offsite:hover{ color:#fff; border-top-color:#e6a9ef; }
nav.fastext a.offsite span{ color:var(--magenta); }
.play-btn{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.5px;
  background:var(--red); color:#fff; border:2px solid var(--gold); border-radius:6px;
  padding:7px 15px; text-decoration:none; white-space:nowrap; }
.play-btn:hover{ filter:brightness(1.12); color:#fff; }

/* ---------- layout ---------- */
main.wrap{ max-width:900px; margin:0 auto; padding:26px 18px 60px; }
main.wrap.wide{ max-width:1100px; }
.crumb{ font-family:var(--mono); color:var(--mut); font-size:12.5px; letter-spacing:.5px; margin:0 0 6px; }
h1{ font:normal clamp(30px,5.6vw,50px)/1.06 var(--head); letter-spacing:1px; margin:8px 0 12px; color:#fff; }
h2{ font:normal 27px/1.15 var(--head); letter-spacing:.8px; color:var(--gold); margin:26px 0 8px; }
h3{ font:700 18px var(--mono); color:#fff; margin:24px 0 6px; letter-spacing:.3px; }
p,li{ font-size:16.5px; color:#ddd3bd; }
.lede{ font-size:19px; color:var(--ink); }
ul,ol{ padding-left:22px; } li{ margin:7px 0; }
strong{ color:#fff; }
hr.rule{ border:0; height:1px; background:var(--line); margin:38px 0; }

/* hero */
.hero{ padding:26px 0 4px; }
.hero .kicker{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:2.5px;
  color:#0a0908; background:var(--gold); padding:3px 9px; border-radius:3px; margin-bottom:14px; }

/* ---------- featured game (the one you can actually play) ---------- */
.hero-game{ display:grid; grid-template-columns:1.35fr 1fr; gap:0; margin:26px 0 10px;
  text-decoration:none; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.hero-game:hover{ transform:translateY(-4px); border-color:var(--gold); color:var(--ink);
  box-shadow:0 14px 40px rgba(0,0,0,.55); }
.hero-game .shot{ position:relative; background:#000; overflow:hidden; }
.hero-game .shot img{ display:block; width:100%; height:100%; object-fit:cover; }
/* strung bulbs along the top of the shot, same motif as the old cards */
.hero-game .shot::after{ content:""; position:absolute; left:-10%; right:-10%; top:10px; height:12px;
  background-image:radial-gradient(circle,rgba(255,215,94,.8) 2.2px,transparent 2.6px);
  background-size:26px 12px; opacity:.45; pointer-events:none; }
.hero-game .pitch{ padding:26px 28px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.hero-game h3{ font:normal 34px/1.05 var(--head); letter-spacing:.8px; color:#fff; margin:8px 0 10px; }
.hero-game p{ font-size:15.5px; color:#cfc4ad; margin:0 0 16px; }
.hero-game .cta{ align-self:flex-start; font-family:var(--mono); font-size:14px; font-weight:700;
  letter-spacing:.6px; background:var(--red); color:#fff; border:2px solid var(--gold);
  border-radius:7px; padding:10px 20px; }
.hero-game:hover .cta{ filter:brightness(1.12); }
.hero-game .meta{ font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-top:12px; }
@media (max-width:760px){
  .hero-game{ grid-template-columns:1fr; }
  .hero-game .pitch{ padding:20px 20px 24px; }
  .hero-game h3{ font-size:29px; }
}

/* ---------- game cards ---------- */
.game-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin:30px 0 10px; }
.game-card{ display:block; text-decoration:none; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.game-card:hover{ transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.5); color:var(--ink); }
.game-card .art{ height:158px; position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(165deg,#241426,#120c14 60%,#0a0908);
  border-bottom:1px solid var(--line); overflow:hidden; }
.game-card .art .em{ font-size:60px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
/* pier bulbs strung across the card art */
.game-card .art::after{ content:""; position:absolute; left:-10%; right:-10%; top:16px; height:12px;
  background-image:radial-gradient(circle,rgba(255,215,94,.85) 2.2px,transparent 2.6px);
  background-size:26px 12px; opacity:.5; }
.game-card .body{ padding:16px 18px 20px; }
.game-card .tag{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:1.4px;
  color:var(--gold); border:1px solid var(--line); border-radius:4px; padding:3px 8px; margin-bottom:9px; }
.game-card h2{ font:normal 22px var(--head); letter-spacing:.6px; color:#fff; margin:0 0 7px; }
.game-card p{ font-size:14.5px; color:var(--mut); margin:0 0 10px; }
.game-card .meta{ font-family:var(--mono); font-size:11.5px; color:var(--dim); }

/* "coming soon" teletext index rows */
.tt-list{ font-family:var(--mono); font-size:14px; border:1px solid var(--line);
  border-radius:8px; background:var(--panel); padding:6px 0; margin:16px 0 8px; }
.tt-list .row{ display:flex; gap:12px; padding:7px 16px; align-items:baseline; flex-wrap:wrap; }
.tt-list .row + .row{ border-top:1px dashed #241f18; }
.tt-list .n{ color:var(--green); }
.tt-list .t{ color:var(--ink); flex:1; }
.tt-list .s{ color:var(--dim); font-size:12.5px; }

/* callout / disclaimer */
.callout{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:8px; padding:15px 18px; margin:22px 0; }
.callout p{ margin:8px 0; font-size:15px; }
.callout p:first-child{ margin-top:0; } .callout p:last-child{ margin-bottom:0; }

/* facts strip */
.strip{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 6px; font-family:var(--mono); font-size:12px; }
.strip span{ border:1px solid var(--line); background:var(--panel); border-radius:20px;
  padding:5px 13px; color:var(--mut); }

/* candidate / feature panels */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; margin:18px 0; }
.panel h3{ margin-top:0; }
.panel .nick{ font-family:var(--mono); font-size:13px; color:var(--gold); }
.two-col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }

/* key/controls table */
table.keys{ width:100%; border-collapse:collapse; margin:14px 0; font-size:15px; }
table.keys th,table.keys td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
table.keys th{ font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--gold); text-transform:uppercase; }
table.keys td:first-child{ font-family:var(--mono); color:var(--teal); white-space:nowrap; }

/* ad slots — grey until AdSense units are pasted in */
.ad{ display:flex; align-items:center; justify-content:center; color:#3d3629;
  font-family:var(--mono); font-size:11px; letter-spacing:1px;
  background:#0e0c09; border:1px dashed #241f18; border-radius:6px; margin:22px auto; }
.ad-top,.ad-bottom{ width:100%; max-width:728px; min-height:90px; }

/* game embed frame */
.game-stage{ background:#000; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  margin:18px 0 6px; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.game-stage iframe{ display:block; width:100%; height:min(76vh,620px); border:0; background:#000; }
.stage-note{ font-family:var(--mono); font-size:12px; color:var(--dim); text-align:center; margin:0 0 24px; }

/* consent banner */
#consent{ position:fixed; left:12px; right:12px; bottom:12px; z-index:60; max-width:760px;
  margin:0 auto; background:#12100c; border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:10px; padding:15px 18px; box-shadow:0 14px 44px rgba(0,0,0,.7);
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
#consent[hidden]{ display:none; }
#consent p{ margin:0; flex:1; min-width:240px; font-size:14px; color:var(--ink); }
#consent .btns{ display:flex; gap:8px; flex-wrap:wrap; }
#consent button{ font-family:var(--mono); font-size:13px; font-weight:700; cursor:pointer;
  border-radius:6px; padding:9px 15px; border:1px solid var(--line); background:var(--panel2); color:var(--ink); }
#consent button.accept{ background:var(--gold); color:#0a0908; border-color:var(--gold); }
#consent button:hover{ filter:brightness(1.12); }

/* footer */
footer{ border-top:1px solid var(--line); text-align:center; padding:26px 16px 34px;
  margin-top:26px; color:var(--mut); font-size:13.5px; font-family:var(--mono); }
footer p{ margin:7px 0; font-size:13.5px; color:var(--mut); }
footer .disclaim{ font-size:12px; color:var(--dim); max-width:720px; margin:12px auto; line-height:1.6; }
footer a{ color:var(--teal); }
.linkbtn{ background:none; border:0; color:var(--teal); font:inherit; cursor:pointer; padding:0;
  text-decoration:underline; }

/* ad slots stay hidden until AdSense is approved and BRP.adsOn is flipped on;
   empty grey boxes look broken and reviewers want to see content, not holes */
.ad{ display:none; }
body.ads-live .ad{ display:flex; }

@media (max-width:640px){
  /* flex-basis:0 from `flex:1` beats width:100%, which squeezed the nav into a
     narrow column beside the logo. Force it onto its own full-width row. */
  nav.fastext{ order:3; flex:0 0 100%; }
  .play-btn{ order:4; flex:0 0 100%; text-align:center; }
  .site-head{ gap:12px 14px; }
  .logo{ font-size:22px; }
  .tt-bar{ font-size:11.5px; gap:9px; }
  h2{ font-size:23px; }
  p,li{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}