/* playfutbolium.com, in the game's own panel (16 October 2026).
 *
 * The tokens are core/designsystem's: the plate's face, readout, lip and
 * shadow (theme/Plate.kt), the title bar's green and its gold rule, and the
 * chalk page behind them (theme/Colour.kt). A plate is raised by a two-point
 * bevel, lit top and left, shaded bottom and right, as Modifier.plate draws
 * it; pressed, the light swaps sides. The game draws in the platform's own
 * font, so the site does too. */

:root {
  --page: #F7F9F7;
  --ink: #161D1A;
  --ink-soft: #3F4A45;
  --face: #DCDFDB;
  --readout: #F1F3EE;
  --on-readout: #14201A;
  --lip: #FFFFFF;
  --shadow: #6E7570;
  --title-bar: #0B5B2E;
  --on-title-bar: #FFFFFF;
  --rule: #C9A227;
  --emphasis: #6B4E00;
  --hero: #0B5B2E;
  --hero-deep: #084522;
  --bevel: 2px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101613;
    --ink: #E0E5E2;
    --ink-soft: #BFC9C4;
    --face: #3A4046;
    --readout: #14171A;
    --on-readout: #F0E3B4;
    --lip: #6E7A80;
    --shadow: #0D0F10;
    --emphasis: #F0CB63;
    --hero-deep: #06301A;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.5 var(--font);
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* The bevel, as Modifier.plate draws it. */
.plate, .plate-btn, .readout, .phone {
  box-shadow:
    inset var(--bevel) var(--bevel) 0 var(--lip),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--shadow);
}

/* The green strip a plate is labelled with, and its gold hairline. */
.plate-title, .band {
  margin: 0;
  background: var(--title-bar);
  color: var(--on-title-bar);
  border-bottom: 2px solid var(--rule);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* Top bar */

.bar {
  background: var(--title-bar);
  color: var(--on-title-bar);
  border-bottom: 2px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
}

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 20px;
}

.brand img { border-radius: 9px; }

.lang {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.lang:hover { background: rgba(255, 255, 255, 0.12); }

/* Hero */

.hero {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 80px, transparent 80px 160px),
    linear-gradient(180deg, var(--hero) 0%, var(--hero-deep) 100%);
  color: #FFFFFF;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0 72px;
}

.kicker {
  margin: 0 0 12px;
  color: var(--rule);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 14px;
}

h1 {
  margin: 0;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.lede {
  font-size: 19px;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.88);
  margin: 22px 0 28px;
}

.hero-phone { display: flex; justify-content: center; }

.hero-phone .phone { width: min(330px, 80%); transform: rotate(2deg); }

/* A screenshot set in the panel, rather than in a drawing of a phone. */
.phone {
  background: var(--face);
  padding: 10px;
}

.phone img { box-shadow: 0 0 0 1px var(--shadow); }

/* The release date, as a plate of readouts */

.plate {
  background: var(--face);
  color: var(--ink);
}

.plate .plate-title { font-size: 12px; padding: 7px 12px; }

.release { max-width: 560px; }

.release-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

.readout {
  background: var(--readout);
  color: var(--on-readout);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* A readout is punched into the panel: the light comes from below. */
  box-shadow:
    inset var(--bevel) var(--bevel) 0 var(--shadow),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--lip);
}

.readout-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.readout b {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  color: var(--emphasis);
  line-height: 1.1;
}

.readout time {
  font-size: 20px;
  font-weight: 700;
  color: var(--emphasis);
}

/* Beta buttons: plates that press */

.beta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.plate-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 20px 10px 16px;
  background: var(--face);
  color: var(--ink);
  text-decoration: none;
}

.plate-btn:hover { background: var(--readout); }

.plate-btn:active {
  box-shadow:
    inset var(--bevel) var(--bevel) 0 var(--shadow),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--lip);
}

.plate-btn:focus-visible { outline: 3px solid var(--rule); outline-offset: 2px; }

.btn-text { display: flex; flex-direction: column; line-height: 1.2; }

.btn-small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.btn-big { font-size: 17px; font-weight: 700; }

.plate-btn.is-off { cursor: default; opacity: 0.85; }

.plate-btn.is-off .btn-big { color: var(--emphasis); }

/* Section bands */

section { padding: 56px 0; }

.band {
  display: inline-block;
  font-size: clamp(15px, 2.2vw, 18px);
  padding: 10px 18px;
  margin-bottom: 28px;
}

.section-lede {
  max-width: 44em;
  color: var(--ink-soft);
  margin: -8px 0 28px;
}

/* The tour */

.shots {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}

.shot { margin: 0; scroll-snap-align: start; }

.shot figcaption { margin-top: 12px; }

.cap-title { display: block; font-weight: 800; line-height: 1.25; }

.cap-text { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 4px; }

/* Feature plates */

.features { padding-top: 8px; }

.plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.plates .plate p,
.beta-grid .plate p { margin: 0; padding: 14px 16px 18px; }

/* Wide screens */

.duo {
  max-width: 960px;
  background: var(--face);
  padding: 12px;
  box-shadow:
    inset var(--bevel) var(--bevel) 0 var(--lip),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--shadow);
}

/* Beta */

.beta { background: var(--readout); }

.beta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.beta-grid .plate { display: flex; flex-direction: column; }

.beta-grid .plate-btn { margin: 0 16px 16px; align-self: flex-start; }

/* Footer */

.foot {
  background: var(--title-bar);
  color: rgba(255, 255, 255, 0.85);
  border-top: 2px solid var(--rule);
  padding: 32px 0 40px;
  font-size: 15px;
}

.foot nav { margin: 8px 0; }

.foot a { color: #FFFFFF; }

.made { opacity: 0.7; }

/* Phones */

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding: 40px 0 48px; gap: 36px; }
  .hero-phone .phone { width: min(280px, 75%); transform: none; }
  .plates { grid-template-columns: 1fr 1fr; }
  .shots { grid-template-columns: repeat(5, 62%); }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .plates, .beta-grid { grid-template-columns: 1fr; }
  .release-row { grid-template-columns: 1fr 1fr 1fr; }
  .release-row .date { grid-column: 1 / -1; }
  .plate-btn { width: 100%; }
  .beta-grid .plate-btn { width: auto; align-self: stretch; }
  .shots { grid-template-columns: repeat(5, 78%); }
}

@media (prefers-reduced-motion: no-preference) {
  .plate-btn { transition: background 0.15s; }
}