/* ===================================================================
   Proper Football Boss — landing page (TELETEXT / CEEFAX style)
   Palette + fonts lifted from the game (TeletextRenderer.js, CeefaxHeader.js).
   Authentic but kept legible & responsive.
   =================================================================== */

@font-face {
  font-family: 'Teletext';
  src: url('assets/Teletext50.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'TeletextDH';
  src: url('assets/Teletext50ExtraCondensed.otf') format('opentype');
  font-display: swap;
}

:root {
  /* CEEFAX "CRT" palette (softer variant from the game) */
  --tt-black:   #0a0a0a;
  --tt-red:     #cc3333;
  --tt-green:   #33cc33;
  --tt-yellow:  #cccc33;
  --tt-blue:    #2222bb;
  --tt-bblue:   #5555ff;
  --tt-magenta: #cc33cc;
  --tt-cyan:    #33cccc;
  --tt-white:   #cccccc;
  --tt-bwhite:  #ffffff;
  --max: 860px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tt-black);
  color: var(--tt-white);
  font-family: 'Teletext', 'Share Tech Mono', Courier, monospace;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

img { max-width: 100%; display: block; }
a { color: var(--tt-cyan); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 18px; }
section { padding: 0 0 30px; }

/* ---------- CEEFAX header — exact 3-bar layout from CeefaxHeader.js ----------
   Colours and structure match the game's PURE palette + IBM Plex Mono:
   bar1 black (cyan page / yellow clock, white underline),
   bar2 red (yellow bold title), bar3 black (cyan subtitle, grey underline). */
/* CEEFAX header — exact game layout: white info row + PFB-boxes / blue wordmark bar.
   Top row uses the Teletext font in WHITE (TeletextRenderer.renderTopBar). */
/* Header shares the same centred column (max-width + side padding) as the
   content boxes, so margins line up on desktop. On mobile both are full-width. */
.ceefax-header {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  font-family: 'Teletext', 'Share Tech Mono', monospace;
}
.cx-bar1 {
  background: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 18px;
  font-size: clamp(11px, 2.5vw, 16px);
  color: var(--tt-white);            /* #cccccc — palette.WHITE */
  white-space: nowrap;
}
.cx-bar1 .cx-info { display: inline-flex; align-items: baseline; }
.cx-bar1 .cx-pageno { margin: 0 1.2em; }
.cx-bar1 .cx-time { color: var(--tt-white); }
/* Row 2 — the combined PFB + wordmark banner on black */
.cx-bar2 {
  background: #000000;
  padding: 0;
  line-height: 0;
  text-align: center;
}
.cx-bar2 picture { display: block; width: 100%; }
.cx-combo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ---------- Teletext section header bars (the coloured title blocks) ---------- */
.tt-bar {
  font-family: 'TeletextDH', 'Teletext', monospace;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.04;
  text-transform: uppercase;
  padding: 7px 16px;
  margin: 0 auto 18px;
  max-width: var(--max);
  color: var(--tt-yellow);
  background: var(--tt-red);
}
.tt-bar .pageno { color: var(--tt-cyan); margin-right: 12px; }
.tt-bar--red     { background: var(--tt-red);     color: var(--tt-yellow); }
.tt-bar--blue    { background: var(--tt-blue);    color: var(--tt-bwhite); }
.tt-bar--magenta { background: var(--tt-magenta); color: var(--tt-yellow); }
.tt-bar--green   { background: var(--tt-green);   color: var(--tt-black); }
.tt-bar--yellow  { background: var(--tt-yellow);  color: var(--tt-black); }
.tt-bar--green .pageno { color: var(--tt-blue); }
.tt-bar.tt-greentext { color: var(--tt-green); }   /* green text on the blue box */
/* Clickable coloured box (the play CTA) */
.tt-link { display: block; text-decoration: none; cursor: pointer; }
.tt-link:hover { background: var(--tt-yellow); }

/* ---------- Masthead — full-width, one-row tagline ---------- */
.site-header { background: var(--tt-black); padding: 10px 0 14px; text-align: center; overflow: hidden; }
.site-header .tagline {
  font-family: 'TeletextDH', 'Teletext', monospace;
  color: var(--tt-green);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;          /* one row, never wraps */
  line-height: 1.0;
  font-size: 6vw;               /* fitted precisely to the screen width by site.js */
}
/* Boss pic now sits in the hero (where the Mexico 86 logo was) */
.hero-boss { margin-top: 26px; }
.hero-boss img {
  display: block;
  width: min(300px, 64vw);
  height: auto;
  margin: 0 auto;
  border: 3px solid var(--tt-blue);
}

/* Announcement line under the logo (text only, centred, tight gaps) */
.steam-line {
  font-family: 'Teletext', 'Share Tech Mono', monospace;
  text-align: center;
  color: var(--tt-yellow);
  letter-spacing: 1px;
  font-size: clamp(18px, 4vw, 28px);
  margin: 6px auto 18px;
}

/* ---------- MEXICO 86 demo hero ---------- */
.demo-hero { background: var(--tt-black); text-align: center; padding: 8px 0 6px; }
.demo-hero .tt-bar { text-align: left; max-width: var(--max); margin-left: auto; margin-right: auto; }
.demo-hero__body { max-width: var(--max); margin: 0 auto; padding: 0 18px; }
.demo-hero__imglink {
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 6px auto 40px;
  line-height: 0;
  border: 3px solid var(--tt-cyan);
}
.demo-hero__img { width: 100%; }
.demo-hero p {
  font-size: clamp(17px, 2.6vw, 20px);
  color: var(--tt-bwhite);
  max-width: 620px;
  margin: 0 auto 8px;
}
.demo-hero p strong { color: var(--tt-yellow); }

/* Intro blurb — directly below the logo */
.intro-blurb {
  max-width: 640px;            /* desktop: wraps to ~4 rows; full-width on mobile */
  margin: 10px auto 34px;
  padding: 0 18px;
  text-align: center;
  font-size: clamp(17px, 2.6vw, 20px);
  color: var(--tt-bwhite);
}
.intro-blurb strong { color: var(--tt-yellow); }
.flash-red { color: #ff4444; font-weight: 700; animation: tt-blink 0.9s steps(1) infinite; }

/* Big clickable demo banner (replaces the old play button) */
.demo-banner {
  display: block;
  font-family: 'TeletextDH', 'Teletext', monospace;
  font-size: clamp(28px, 7vw, 50px);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  background: var(--tt-green);
  color: var(--tt-black);
  border: 4px solid var(--tt-bwhite);
  padding: 12px 18px;
  margin: 8px auto 0;
  max-width: var(--max);
}
.demo-banner:hover { background: var(--tt-yellow); }

/* ---------- Buttons (teletext blocks) ---------- */
.demo-cta { margin-top: 22px; }
.demo-cta__desktop { display: none; }
.demo-cta__mobile  { display: block; }
body.is-desktop .demo-cta__desktop { display: block; }
body.is-desktop .demo-cta__mobile  { display: none; }

.btn {
  display: inline-block;
  font-family: 'Teletext', monospace;
  text-transform: uppercase;
  text-decoration: none;
  font-size: clamp(18px, 2.6vw, 24px);
  padding: 14px 26px;
  border: 0;
  cursor: pointer;
  letter-spacing: 1px;
}
.btn--play {
  background: var(--tt-green);
  color: var(--tt-black);
  border: 3px solid var(--tt-bwhite);
}
.btn--play:hover { background: var(--tt-yellow); }
.btn--ghost {
  background: var(--tt-black);
  color: var(--tt-yellow);
  border: 3px solid var(--tt-yellow);
}
.btn--ghost:hover { background: var(--tt-yellow); color: var(--tt-black); }
.demo-cta__mobile .mobile-msg { color: var(--tt-cyan); font-size: 16px; margin: 0 0 14px; }

/* Mexico 86 logo badge (white backing keeps the black-line globe legible) */
.m86-badge {
  display: inline-block;
  background: var(--tt-bwhite);
  padding: 14px 20px;
  margin-top: 26px;
  border: 3px solid var(--tt-cyan);
}
.m86-badge img { display: block; width: min(230px, 56vw); height: auto; margin: 0 auto; }

/* ---------- Email signup ---------- */
.cta { padding-bottom: 30px; }
.cta .form-host { width: 400px; max-width: 100%; margin: 0 auto; border: 3px solid var(--tt-blue); background: #000; }

/* ---------- "The boss's office" — boss pic one side, social links the other ---------- */
.office {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.office-boss { flex: 0 0 auto; }
.office-boss img {
  display: block;
  width: min(320px, 72vw);
  height: auto;
  border: 3px solid var(--tt-blue);
}
.office-social { flex: 1 1 0; min-width: 0; max-width: 420px; }
.office-social .social-row { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 620px) {
  .office { flex-direction: column; }          /* image on top, links below */
  .office-social { width: 100%; max-width: 100%; }
}
.social-row a {
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  color: var(--tt-cyan);
  border: 2px solid var(--tt-cyan);
  padding: 9px 16px;
}
.social-row a:hover { background: var(--tt-cyan); color: var(--tt-black); }

/* ---------- About / blurb ---------- */
.blurb-box { border: 3px solid var(--tt-blue); padding: 16px 18px; }
/* Flashing double-height "coming soon" line below the blurb (no box) */
.coming-soon {
  font-family: 'TeletextDH', 'Teletext', monospace;
  text-transform: uppercase;
  text-align: center;
  color: var(--tt-yellow);
  font-size: clamp(28px, 7vw, 48px);
  line-height: 1.05;
  margin: 20px 0 0;
  animation: tt-blink 0.9s steps(1) infinite;
}
.features {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 26px;
}
.features li { position: relative; padding-left: 26px; font-size: 16px; color: var(--tt-bwhite); }
.features li::before { content: "\25AE"; position: absolute; left: 0; color: var(--tt-green); }
.lead { font-size: clamp(17px, 2.6vw, 20px); color: var(--tt-cyan); margin: 0 0 14px; }

/* ---------- Video ---------- */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border: 3px solid var(--tt-blue);
  overflow: hidden;
}
.video-frame iframe,
.video-frame .video-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--tt-yellow); background: #000; text-align: center;
  padding: 20px; text-transform: uppercase;
}

/* ---------- Gameplay + Screenshots (one box) ---------- */
.shots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shots-grid img { width: 100%; border: 3px solid var(--tt-blue); }
.media .shots-grid { margin-top: 12px; }   /* gap below the video == gap between shots */
@media (max-width: 620px) {
  .shots-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
}

/* ---------- CEEFAX footer strip ---------- */
.site-footer { background: #000; border-top: 2px solid var(--tt-bwhite); padding: 0; }
.cx-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 12px;
  font-size: 15px;
}
.cx-nav a { text-decoration: none; text-transform: uppercase; }
.cx-nav .n-red    { color: var(--tt-red); }
.cx-nav .n-green  { color: var(--tt-green); }
.cx-nav .n-yellow { color: var(--tt-yellow); }
.cx-nav .n-cyan   { color: var(--tt-cyan); }
.cx-foot-note { color: var(--tt-white); text-align: center; font-size: 13px; padding: 4px 12px 14px; }
.blink { animation: tt-blink 1.1s steps(1) infinite; color: var(--tt-yellow); }
@keyframes tt-blink { 50% { opacity: 0; } }

/* ---------- Cookie consent banner (teletext) ---------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #000; border-top: 2px solid var(--tt-yellow);
  padding: 14px 16px; z-index: 1000;
}
.consent[hidden] { display: none; }
.consent__inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.consent p { margin: 0; font-size: 14px; max-width: 620px; color: var(--tt-white); }
.consent a { color: var(--tt-cyan); }
.consent__btns { display: flex; gap: 10px; }
.consent button {
  font-family: 'Teletext', monospace; text-transform: uppercase;
  border: 2px solid; padding: 9px 16px; cursor: pointer; font-size: 14px;
}
.consent .accept  { background: var(--tt-green); color: #000; border-color: #fff; }
.consent .decline { background: #000; color: var(--tt-yellow); border-color: var(--tt-yellow); }