/* Bot Rivals public website, in the game's style F
   (docs/design/stile-icone.md, game/skin.gd, game/ui.gd):
   - lobby background: saturated blue gradient, soft central light and the
     Workshop motif (gear + hex nut) a little darker than the background;
   - rectangular buttons with 10 px corners, a pure black outline (5 px on
     the sides and top, 10 px at the bottom) and three flat bands: 10 px of
     light on top, the colour, 14 px of darker edge at the bottom; no shadows;
   - navy panels (PANEL_TOP -> PANEL_BOTTOM) with the same outline;
   - Lilita One (OFL, /fonts) for titles: white with a black outline.
   Mobile first, 16 px gutters. No external fonts or scripts. */

@font-face {
  font-family: "Lilita One";
  src: url("/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Lobby background (Ui.lobby_background). */
  --lobby-top: #1a6bfa;
  --lobby-bottom: #0a33a8;
  --lobby-light: rgba(115, 204, 255, .32);
  /* Panels (GameSkin.PANEL_TOP / PANEL_BOTTOM). */
  --panel-top: #2e479e;
  --panel-bottom: #1c2b6b;
  --panel-light: #637db1;
  /* Gold (GameSkin.tones of #ffbe20) and the icon golds. */
  --gold-light: #ffe575;
  --gold: #ffbe20;
  --gold-edge: #c76b0b;
  --gold-hi: #fce35c;
  --engrave: #80161c;
  /* Slate (secondary / disabled buttons). */
  --slate-light: #8ea4c8;
  --slate: #4a5c8a;
  --slate-edge: #363a6b;
  --red: #fa383d;
  --ink: #000;
  --text: #15192a;
  --muted: #4b5470;
  --paper: #ffffff;
  --paper-soft: #eef2fb;
  --line: #d3d9e8;
  --display: "Lilita One", "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Outline thicknesses (GameSkin.EDGE_LINE / EDGE_BOTTOM). */
  --edge: 5px;
  --edge-bottom: 10px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  color: #fff;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
  background-color: var(--lobby-bottom);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 128 128'%3E%3Cg fill='%23001a5c' fill-opacity='.17' fill-rule='evenodd'%3E%3Cpath d='M32 13 L35.5 13.4 L37.7 7.2 L44.6 10.1 L42 16 L44.6 18.3 L46.9 20.9 L52.8 18.3 L55.7 25.2 L49.5 27.4 L49.9 32 L49.5 36.6 L55.7 38.8 L52.8 45.7 L46.9 43.1 L44.6 45.7 L42 48 L44.6 53.9 L37.7 56.8 L35.5 50.6 L32 51 L28.5 50.6 L26.3 56.8 L19.4 53.9 L22 48 L19.4 45.7 L17.1 43.1 L11.2 45.7 L8.3 38.8 L14.5 36.6 L14.1 32 L14.5 27.4 L8.3 25.2 L11.2 18.3 L17.1 20.9 L19.4 18.3 L22 16 L19.4 10.1 L26.3 7.2 L28.5 13.4 Z M32 24 A8 8 0 1 0 32.01 24 Z'/%3E%3Cpath transform='translate(64 64)' d='M32 8 L52.8 20 V44 L32 56 L11.2 44 V20 Z M32 22.5 A9.5 9.5 0 1 0 32.01 22.5 Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 55% at 50% 38%, var(--lobby-light), transparent 70%),
    linear-gradient(180deg, var(--lobby-top) 0%, var(--lobby-bottom) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 160px 160px, 100% 100vh, 100% 100%;
}

a { color: #1747a8; text-underline-offset: 2px; }
a:hover { color: var(--engrave); }
:focus-visible { outline: 4px solid var(--gold-hi); outline-offset: 3px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: var(--gold); color: var(--ink); padding: 8px 14px;
  border: 3px solid var(--ink); border-radius: 10px; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 880px; }

/* --- Titles: white with a black outline (as in the game). ------------- */
.title, h1, .hero-tag, .section-title, .step h3, .feature h3, .cta h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .3px;
  line-height: 1.1;
  color: #fff;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}

/* --- Top bar ---------------------------------------------------------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 48px; height: auto; display: block; }
.brand span {
  font-family: var(--display); font-size: 24px; color: #fff;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
}

/* --- Style F buttons -------------------------------------------------- */
.btn {
  --c-light: var(--gold-light);
  --c: var(--gold);
  --c-edge: var(--gold-edge);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 24px 14px;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-decoration: none;
  border: var(--edge) solid var(--ink);
  border-bottom-width: var(--edge-bottom);
  border-radius: 10px;
  background: linear-gradient(180deg,
    var(--c-light) 0, var(--c-light) 10px,
    var(--c) 10px, var(--c) calc(100% - 14px),
    var(--c-edge) calc(100% - 14px), var(--c-edge) 100%);
  cursor: pointer;
}
.btn:hover { color: #fff; filter: brightness(1.06); }
.btn:active { border-bottom-width: 6px; transform: translateY(4px); }
.btn.small { min-height: 44px; font-size: 18px; padding: 6px 16px 10px; -webkit-text-stroke-width: 4px; }
.btn.big { min-height: 76px; font-size: 30px; padding: 14px 40px 20px; -webkit-text-stroke-width: 6px; }
.btn.slate { --c-light: var(--slate-light); --c: var(--slate); --c-edge: var(--slate-edge); }

/* --- Panels and cards ------------------------------------------------- */
.panel {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: var(--edge) solid var(--ink);
  border-bottom-width: var(--edge-bottom);
  border-radius: 16px;
  box-shadow: inset 0 4px 0 var(--panel-light);
  padding: 20px 18px;
  color: #fff;
}
.card {
  background: var(--paper);
  color: var(--text);
  border: var(--edge) solid var(--ink);
  border-bottom-width: var(--edge-bottom);
  border-radius: 16px;
  padding: 18px 14px;
}
@media (min-width: 720px) {
  .panel { padding: 28px 32px; }
  .card { padding: 34px 40px; }
}

/* --- Landing ---------------------------------------------------------- */
.hero { text-align: center; padding-top: 8px; padding-bottom: 40px; }
.hero .logo { width: min(52vw, 240px); height: auto; display: block; margin: 0 auto; }
.hero-tag { font-size: clamp(36px, 9vw, 72px); margin: 14px 0 10px; -webkit-text-stroke-width: 8px; }
.hero-sub { max-width: 36em; margin: 0 auto 22px; font-size: 17px; font-weight: 600; color: #eaf1ff; }
.hero-note { margin: 16px 0 0; font-weight: 700; color: var(--gold-hi); }

.section { padding: 36px 0; }
.section-title { font-size: clamp(32px, 6vw, 48px); text-align: center; margin: 0 0 24px; }
.section-lead { text-align: center; max-width: 40em; margin: -8px auto 26px; color: #eaf1ff; font-weight: 600; }

.steps-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; flex-direction: column; gap: 12px; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 52px; flex: none;
  font-family: var(--display); font-size: 28px; color: #fff;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  border: 4px solid var(--ink); border-bottom-width: 8px; border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-light) 0 8px, var(--gold) 8px calc(100% - 10px), var(--gold-edge) calc(100% - 10px));
}
.step header { display: flex; align-items: center; gap: 12px; }
.step h3 { font-size: 28px; margin: 0; }
.step p { margin: 0; color: #e3ebff; }
.shot {
  display: block; width: 100%; height: auto;
  border: 4px solid var(--ink); border-radius: 10px; background: #0b1a4a;
}

.features { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .features { grid-template-columns: 1fr 1fr; } }
.feature { display: flex; flex-direction: column; gap: 12px; }
.feature h3 { font-size: 26px; margin: 0; }
.feature p { margin: 0; color: #e3ebff; }
.feature.wide { grid-column: 1 / -1; }
.badge {
  display: inline-block; align-self: flex-start;
  font-family: var(--display); font-size: 16px; color: var(--ink);
  background: var(--gold-hi); border: 3px solid var(--ink); border-radius: 8px; padding: 2px 10px;
}

.cta { text-align: center; }
.cta h2 { font-size: clamp(30px, 6vw, 46px); margin: 0 0 10px; }
.cta p { margin: 0 auto 22px; max-width: 32em; color: #e3ebff; font-weight: 600; }

/* --- Download page ---------------------------------------------------- */
.download {
  min-height: calc(100svh - 76px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px 16px 40px;
}
.download .logo { width: min(64vw, 340px); height: auto; }
.download .hero-tag { margin: 14px 0 28px; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 56px 28px; width: 100%; margin-bottom: 30px; }
/* The official badges, unaltered. Google's PNG carries its own transparent
   margin, so it is drawn taller to match Apple's badge height (60 px). */
.store-badge { position: relative; display: inline-block; line-height: 0; }
.store-badge img { height: 60px; width: auto; }
.store-badge img.gp { height: 90px; margin: -15px -12px; }
.ribbon {
  /* Sotto il bollino, mai sopra: i bollini ufficiali non si coprono. */
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) rotate(-2deg);
  line-height: 1; white-space: nowrap;
  font-family: var(--display); font-size: 15px; color: #fff;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  background: var(--red); border: 3px solid var(--ink); border-radius: 8px;
  padding: 6px 10px 7px;
}
/* A badge whose URL is still empty is "Coming soon": not clickable (works
   without JS: the state comes from the empty href). */
.store-badge:not([href=""]) .ribbon { display: none; }
.store-badge[href=""] { pointer-events: none; cursor: default; }
.download .tm-note { margin-top: 18px; max-width: 560px; font-size: 12px; color: #cfdcff; }
.download .hero-note { margin-top: 26px; color: #fff; font-weight: 600; }
.download .hero-note a { color: var(--gold-hi); }

/* --- Legal and help pages --------------------------------------------- */
.page-head { text-align: center; padding: 10px 0 22px; }
.page-head h1 { font-size: clamp(36px, 8vw, 58px); margin: 0 0 8px; -webkit-text-stroke-width: 7px; }
.page-head .meta { margin: 0; color: var(--gold-hi); font-weight: 700; font-size: 15px; }

.prose { max-width: 70ch; margin: 0 auto; }
.card.doc { margin: 0 auto 28px; max-width: calc(70ch + 90px); }
.doc h2 {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: 25px; line-height: 1.2; margin: 36px 0 10px;
}
.doc h3 { font-size: 18px; margin: 24px 0 6px; color: var(--ink); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc address { font-style: normal; }

.summary {
  background: var(--paper-soft);
  border: 4px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px 4px;
  margin: 0 0 8px;
}
@media (min-width: 720px) { .summary { padding: 14px 18px 6px; } .hero-sub { font-size: 19px; } }
.summary h2 { margin-top: 0; font-size: 22px; }
.toc { font-size: 15px; }
.toc ol { margin: 6px 0 0; }
@media (min-width: 720px) { .toc ol { columns: 2; column-gap: 32px; } }

.note {
  border-left: 6px solid var(--gold);
  background: #fff6d8;
  padding: 10px 14px;
  border-radius: 0 10px 10px 0;
  margin: 14px 0;
}

.table { width: 100%; overflow-x: auto; margin: 12px 0 18px; border: 3px solid var(--ink); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--paper-soft); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
pre {
  white-space: pre-wrap;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
}
details { border: 3px solid var(--ink); border-radius: 10px; padding: 8px 14px; margin: 12px 0; }
summary { cursor: pointer; font-weight: 700; }
details[open] summary { margin-bottom: 8px; }

ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps li { counter-increment: step; position: relative; padding-left: 48px; margin: 14px 0; min-height: 36px; }
ol.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 36px;
  border: 3px solid var(--ink); border-bottom-width: 6px; border-radius: 8px;
  background: linear-gradient(180deg, var(--gold-light) 0 6px, var(--gold) 6px calc(100% - 7px), var(--gold-edge) calc(100% - 7px));
  font-family: var(--display); color: #fff; font-size: 19px;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-align: center; line-height: 27px;
}

/* --- Footer ----------------------------------------------------------- */
.foot {
  margin-top: 24px;
  background: linear-gradient(180deg, var(--panel-bottom), #0d1640);
  border-top: var(--edge) solid var(--ink);
  color: #dfe7fb;
  font-size: 14px;
  padding: 26px 0 34px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; }
.foot nav a { color: #fff; font-weight: 700; text-decoration: none; }
.foot nav a:hover { color: var(--gold-hi); text-decoration: underline; }
.foot p { margin: 4px 0; }
.foot a.mail { color: var(--gold-hi); }

/* --- Landing: hero with the recording of the Workshop ---------------- */
.hero-grid { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 960px) {
  .hero { text-align: left; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; }
  .hero .logo { margin: 0; width: 300px; }
  .hero-sub { margin-left: 0; }
}
.hero-tag.hero-h { font-size: clamp(38px, 8vw, 66px); }
.hero-video { margin: 0; }
.hero-video-frame {
  aspect-ratio: 4 / 3;
  width: min(100%, 560px);
  margin: 0 auto;
  border: var(--edge) solid var(--ink);
  border-bottom-width: var(--edge-bottom);
  border-radius: 16px;
  overflow: hidden;
  background: #2a5cc8 url("/img/hero-poster.jpg?v=1") center / cover no-repeat;
}
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-video figcaption { text-align: center; margin-top: 12px; font-weight: 700; color: #eaf1ff; }

/* --- Landing: strategy cards, arsenal, facts --------------------------- */
.strategy { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 900px) { .strategy { grid-template-columns: repeat(3, 1fr); } }
.strategy h3, .arsenal h3 {
  font-family: var(--display); font-weight: 400; font-size: 25px; line-height: 1.15; margin: 10px 0 6px;
  color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
}
.strategy p { margin: 0; color: #e3ebff; }
.glyph { width: 96px; height: 60px; display: block; }
.glyph path, .glyph circle { fill: var(--gold); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.strategy article:nth-child(3) .glyph path { fill: none; stroke: var(--gold); stroke-linecap: round; }
.arsenal ul { margin: 8px 0 18px; padding-left: 22px; color: #e3ebff; }
.arsenal li { margin: 8px 0; }
.arsenal strong { color: var(--gold-hi); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 22px; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact {
  text-align: center; padding: 12px 8px 14px;
  border: var(--edge) solid var(--ink); border-bottom-width: var(--edge-bottom); border-radius: 12px;
  background: linear-gradient(180deg, var(--gold-light) 0 10px, var(--gold) 10px calc(100% - 14px), var(--gold-edge) calc(100% - 14px));
}
.fact b {
  display: block; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
}
.fact span { display: block; margin-top: 4px; font-weight: 800; color: #2a1600; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; }
.arsenal ul, .arsenal p { max-width: 75ch; }