/* 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);
}

/* `.card p` is (0,1,1) and `.note` is (0,1,0), so inside a card the more specific rule won and
   every note on this page lost the 12px it asks for — it sat flush against whatever it followed,
   which reads as the last line of that thing rather than as an aside about it. Qualified so the
   note wins in the one place notes actually live. The same trap cost the browser lobby a
   fortnight ago: a declaration that never applies looks identical to one that does. */
.note,
.card p.note {
  margin: 14px 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; }
}

/* ---- the crown key ----------------------------------------------------------------------------
   Three crowns a player meets on other people, drawn rather than described. The marks are the
   game's own crown geometry (Core's WinnerCrown: the same seven-point path, the same band, the
   same three stones) rather than an emoji or a second drawing, because a key that does not match
   what is on the screen is worse than no key — it teaches the wrong shape.

   Colour is never the only thing said. Each row names the colour AND where the crown sits, so the
   key still works for a reader who cannot tell blue from purple, which is exactly the reader most
   likely to need a key at all. */

.crown-key { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }

.crown-key li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

/* Sized in the em of the text beside it, so the mark grows with the reader's own font setting
   rather than staying a fixed 34px next to type they have doubled. */
.crown-mark { width: 100%; height: auto; max-width: 2.6em; }

.crown-key span { color: var(--muted); }
.crown-key strong { color: var(--text); }

@media (max-width: 420px) {
  .crown-key li { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
}