/* How to Play.
   ------------------------------------------------------------------------------------------------
   Split out of legal.css deliberately. That file is the stylesheet for Terms, Privacy and Support:
   a column of text in a card, which is exactly right for a document somebody reads once under
   duress and exactly wrong for the page that teaches the game. Sharing it made the guide inherit
   the furniture of a legal page, and that is most of why it read as a leaflet rather than as part
   of Cobra Royale.

   legal.css still comes first and still owns the shell — the tokens, the background, the wordmark,
   the nav and its touch targets — so the four public pages remain recognisably one site. Everything
   below is the guide's own.

   Every colour here is a token set by public-theme.js, which reads the theme the player picked in
   the game: this page renders on blush and mint as well as midnight. That is why there are no
   literal greys. The ones that were here — `var(--text-dim, #94a0b8)`, a token nothing ever defines
   on these pages, so always the fallback — put mid-grey captions on a near-white panel at about
   2.6:1 on every light theme. */

.guide-page main {
  width: min(1060px, calc(100% - 32px));
  padding: 44px 0 64px;
}

/* ---- the shell -------------------------------------------------------------------------------- */

.guide-page nav { margin-bottom: 30px; }
.guide-page nav .sep { color: var(--muted); font-weight: 700; padding: 0 2px; }

.guide-hero {
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 46%),
    var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.pill {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guide-page h1 {
  margin: 0 0 14px;
  font-size: clamp(38px, 8vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.lede { margin: 0; max-width: 60ch; font-size: clamp(16px, 2.2vw, 18px); }
.lede strong { color: var(--text); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* The one button on the page. A guide whose last line is not "go and play" has stopped short. */
.go {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.go:hover { background: var(--accent-hover); color: var(--bg); }

.go.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.go.secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ---- the card grid ----------------------------------------------------------------------------
   Two columns that fill. The old grid put a four-line card beside a forty-line one and left a
   column of empty panel down the right of the page; spans are what stop that. */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  margin-top: 18px;
}

.card {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 30%),
    var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.card.wide { grid-column: 1 / -1; }

.card h2 {
  margin: 0 0 12px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.card h3 {
  margin: 22px 0 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.card h3:first-of-type { margin-top: 0; }
.card p { margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 0; padding-left: 18px; }
.card li + li { margin-top: 7px; }

/* A label above a card's title, so a card announces what kind of thing it is before it is read. */
.tag {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Two blocks inside one wide card. Below 700px they stack, which is what the whole page does. */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.note strong { color: var(--text); }

/* ---- keys ------------------------------------------------------------------------------------- */

kbd {
  display: inline-block;
  min-width: 26px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.keyline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.keyline .what { color: var(--muted); }

/* ---- the match picture ------------------------------------------------------------------------
   A picture of a real match with numbered pins over it. The pins are positioned in percentages so
   they stay on the right part of the image at any width, which a pixel offset would not — but
   below 720px the whole 1200px frame is about 358px wide and there is nothing left to point at, so
   the pins go and the captions carry it alone. They are written to stand up without them. */

.shot { margin: 18px 0 0; }

.shot-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}

.shot-frame img { width: 100%; height: auto; display: block; }

.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 70%, transparent), 0 6px 16px rgba(0, 0, 0, 0.45);
  line-height: 1;
}

.shot figcaption {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.shot figcaption b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 800;
  vertical-align: -3px;
}

.shot figcaption strong { color: var(--text); }

/* ---- drawn diagrams ---------------------------------------------------------------------------
   Three of them, all inline SVG so they recolour with the theme and cost no asset. They exist for
   the three things a screenshot cannot show: which half of the glass does what, the shape of the
   closing ring, and which contact between two snakes is fatal. */

.diagram { width: 100%; height: auto; display: block; margin: 4px 0 0; }

/* Capped, because a circle stretched to the full width of a card is a target, not a diagram. */
.ring-map { max-width: 260px; margin: 12px auto 4px; }
.diagram-label { fill: var(--muted); font: 700 11px system-ui, sans-serif; text-anchor: middle; letter-spacing: 0.06em; }
.diagram-title { fill: var(--muted); font: 800 12px system-ui, sans-serif; text-anchor: middle; letter-spacing: 0.09em; }

.halves { max-width: 340px; }
.halves-screen { fill: color-mix(in srgb, var(--text) 3%, transparent); stroke: var(--line); }
.halves-split { stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 7; }
.halves-boost { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2; }
.halves-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.75; }
.halves-knob { fill: var(--accent); }

/* The seven rings of a Royale, at their real radii — 5000 down to 200 — each one landing inside
   the last but off its centre, which is what RoyaleMap actually does and what makes "head for the
   middle" the wrong instinct. */
.ring { fill: none; stroke: var(--accent); }
.ring-outer { stroke-width: 1.6; opacity: 0.9; }
.ring-step { stroke-width: 1; opacity: 0.34; }
.ring-final { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke-width: 1.6; opacity: 1; }

/* Storm outside, safe inside — the way round it actually is. Tinting the disc instead, which is
   what this first drew, says the opposite of the paragraph beside it.

   The safe disc is painted with the opaque panel token rather than another wash: on the pink
   themes a danger tint over a pink page and an accent tint over the same page were within a shade
   of each other, and the whole point of the picture is which side of the line you are on. */
.storm { fill: color-mix(in srgb, var(--danger, #ff4d6d) 20%, transparent); }
.zone { fill: var(--panel-strong); }

.verdicts { max-width: 420px; margin-top: 14px; }
.verdict-good { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.verdict-bad { fill: none; stroke: var(--danger, #ff4d6d); stroke-width: 9; stroke-linecap: round; }
.verdict-head { fill: var(--danger, #ff4d6d); }
.verdict-head-safe { fill: var(--accent); }
.mark { font: 900 20px system-ui, sans-serif; text-anchor: middle; }
.mark-bad { fill: var(--danger, #ff4d6d); }
.mark-good { fill: var(--accent); }

/* ---- the numbers the server owns ---------------------------------------------------------------
   Priced in the markup so the page is right with scripting off, and corrected from /coins on load
   so it cannot drift. */
.figure-live { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- narrow ------------------------------------------------------------------------------------ */

@media (max-width: 860px) {
  .guide-grid { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
}

@media (max-width: 700px) {
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .guide-page main { padding: 26px 0 44px; }
  .guide-page nav { align-items: flex-start; margin-bottom: 22px; }
  .pin { display: none; }
}