/* How to play with its practice arena (#72 later item 26; Shell/ShellScreens.HowTo, js/practice.ts):
   the rules and a small live arena side by side on wide screens (the arena stays in view while the
   rules scroll), and on any screen held sideways; the arena first and short on upright ones
   that are not wide.
   In A · Console (#414, docs/plans/console-redesign.md 2.6): the game's picture behind, faded
   dark (solid where the words are); the goal as the big title, "How you win" in yellow capitals;
   each step a dark card with its clip; the controls as key caps; the practice a dark card. No
   yellow fill here: the screen has no step forward (Back is quiet, the arena is what you try). */

/* Inside the safe area at any text size, as Home (#405, plan 3.4: 5 % on a TV), so the logo and
   the ☰ Menu stay where Home has them. */
:root .screen.how-to {
  padding-block: max(1.1em, var(--safe-top)) max(2em, var(--safe-bottom));
  padding-inline: max(2em, var(--safe-start)) max(2em, var(--safe-end));
}

:root[data-fit='narrow'] .screen.how-to {
  padding-block: max(0.8em, var(--safe-top)) max(1.2em, var(--safe-bottom));
  padding-inline: max(0.5em, var(--safe-start)) max(0.5em, var(--safe-end));
}

.how-to > .topbar {
  margin-top: 0;
}

/* Home's bar is as tall as its badges: the same height here, so the logo and the ☰ Menu sit on the
   same line as on Home (home.css .badges: the badge, its ring and 0.3 em each side). */
@media (min-width: 1200px) and (min-height: 500px) {
  .how-to > .topbar {
    min-height: calc(var(--badge) * 1.12 + 0.6em);
  }
}

/* ------------------------------------------------------------ the game's picture behind (2.6) */

/* Fixed, under everything on the screen (#app is its own stacking context): it stays while the
   rules scroll. The picture shows through at about 15 % (85 % dark), and not at all where the words
   are: the start side is solid, then it fades in. Mirrored right to left, with the words (the hero
   stills have no text, #407). */
.how-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}

.how-pic {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.16;
}

:root[dir='rtl'] .how-pic {
  transform: scaleX(-1);
}

.how-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fade-top), linear-gradient(var(--fade-dir), var(--bg) 0 38%, transparent 62%);
}

/* Upright and not wide: the picture is a band at the top, behind Back and the title, fading into the
   page under them; it scrolls away with them. */
@media (orientation: portrait) {
  :root:not([data-fit='wide']) .how-bg {
    position: absolute;
    inset: 0 0 auto;
    height: 60vh;
  }

  /* As dark as sideways (#506 review): about 84 % dark, so the quiet title line stays readable over
     a bright picture where the band's fade has not started yet. */
  :root:not([data-fit='wide']) .how-pic {
    opacity: 0.16;
  }

  :root:not([data-fit='wide']) .how-bg::after {
    background: linear-gradient(0deg, var(--bg), transparent 70%);
  }

  :root:not([data-fit='wide']) .screen.how-to {
    position: relative;
    isolation: isolate;
  }
}

/* High contrast: solid, no picture (plan 3.1). */
.high-contrast .how-pic {
  display: none;
}

/* ------------------------------------------------------------ the layout */

.how-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18em, 1fr);
  gap: 1.6em;
  align-items: start;
  width: 100%;
  max-width: 96em;
  margin: 0 auto;
}

/* The rules lie on the dark side of the picture: no panel round them; their steps are the cards. */
.how-wrap .help-panel {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Back, and "▶ Try it here" where the arena comes after the rules (below). */
.how-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}

.how-top .try-here {
  display: none;
}

/* The title: "How to play Tipping Point" as the quiet line over the goal, which is the big title
   (the guide, below). */
.screen.how-to .help-panel > h2 {
  margin: 0.4em 0 -0.4em;
  color: var(--ui-dim);
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.practice-panel {
  position: sticky;
  top: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 0;
  padding: 1em;
  border: 0;
  border-radius: var(--r-l);
  background: var(--ui);
}

.high-contrast .practice-panel {
  border: 2px solid var(--ui-line);
}

.screen .practice-panel > h3 {
  margin: 0;
  color: var(--ui-dim);
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.practice-arena {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-m);
  background: var(--bg);
  /* The mouse and fingers play here: no scrolling or zooming from the arena. */
  touch-action: none;
  cursor: crosshair;
}

.practice-panel p {
  margin: 0;
  color: var(--ui-dim);
  line-height: calc(1.4 * var(--line-k));
}

.practice-panel .practice-who {
  color: var(--ui-text);
  font-weight: 800;
}

/* The how-to clip's line (#749): which of how many, then what it shows. */
.practice-panel .practice-clip {
  color: var(--ui-text);
}

.practice-panel .practice-clip:empty {
  display: none;
}

.practice-clip .clip-of {
  display: inline-block;
  margin-inline-end: 0.5em;
  padding: 0 0.45em;
  border-radius: 0.4em;
  background: var(--ui-raised);
  font-weight: 800;
  font-size: 0.85em;
}

/* Back on How to play is the Start button only with a gamepad (the keyboard's is Esc). */
.no-gamepad .how-to .pb-start {
  display: none;
}

/* Not wide but held sideways (a TV or 720p screen at large text, a phone on its side): still two
   columns, so the rules start right under the title; the arena column is narrower (never over
   about two fifths) and stays in view, short enough to fit the screen's height. */
:root:not([data-fit='wide']) .how-wrap {
  grid-template-columns: minmax(0, 1.25fr) minmax(min(12em, 38%), 0.8fr);
  gap: 0.8em;
}

:root:not([data-fit='wide']) .practice-panel {
  padding: 0.6em;
}

:root:not([data-fit='wide']) .practice-arena {
  width: min(100%, (100vh - 12em) * 16 / 9);
  width: min(100%, (100dvh - 12em) * 16 / 9);
  margin: 0 auto;
}

:root[data-fit-y='short']:not([data-fit='wide']) .practice-panel {
  top: 0.4em;
  gap: 0.35em;
}

:root[data-fit-y='short']:not([data-fit='wide']) .practice-panel > h3 {
  display: none;
}

/* Upright and not wide (a phone, an upright tablet): one column. Back and the title, then the
   rules, then the arena (below, with the guide). */
@media (orientation: portrait) {
  :root:not([data-fit='wide']) .how-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  :root:not([data-fit='wide']) .how-wrap .help-panel {
    display: contents;
  }

  :root:not([data-fit='wide']) .how-wrap .help-panel > .how-top {
    align-self: stretch;
  }

  :root:not([data-fit='wide']) .practice-panel {
    order: 1;
    position: static;
  }

  :root:not([data-fit='wide']) .how-wrap .help-body {
    order: 2;
  }

  :root:not([data-fit='wide']) .practice-arena {
    width: min(100%, 25vh * 16 / 9);
    width: min(100%, 25dvh * 16 / 9);
  }

  :root[data-fit-y='short']:not([data-fit='wide']) .practice-panel > h3 {
    display: block;
  }
}

/* ------------------------------------------------------------ the guide */

/* A game's guide (#297; Shell/Guide.cs): the goal, how you win, a step per idea with its clip, then
   the controls. The clip beside the words while there is room, over them when not (at any text
   size: the width counts in the page's own em). The same parts in the pause menu (.pause-help). */
.guide {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}

.help-body .guide-goal {
  margin: 0;
  font-size: 1.35em;
  font-weight: 900;
  line-height: calc(1.2 * var(--line-k));
  color: var(--ui-text);
}

/* The goal is How to play's big title (2.6): the title size, and the heading size where it would
   take many lines (under 36 ems wide: a phone, 200 % text on a TV). */
.how-to .help-body .guide-goal {
  font-size: var(--fs-title);
  font-weight: 1000;
  line-height: calc(1.12 * var(--line-k));
  overflow-wrap: break-word;
}

:root[data-fit='narrow'] .how-to .help-body .guide-goal {
  font-size: var(--fs-heading);
}

.guide-win {
  margin: 0;
  line-height: calc(1.45 * var(--line-k));
}

/* "How you win" as the meta line: yellow capitals over its sentence (yellow text only for a meta
   line, plan 3.1). */
.help-body .guide-win > b:first-child {
  display: block;
  margin-bottom: 0.15em;
  color: var(--do);
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.guide-steps {
  list-style: none;
  counter-reset: step;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  margin: 0;
  padding: 0;
}

/* A step: a dark card, the clip and the words. */
.guide-step {
  counter-increment: step;
  display: grid;
  /* The clip as big as the words leave room for: it is what teaches. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.6em 1em;
  align-items: center;
  padding: 0.6em;
  border-radius: var(--r-l);
  background: var(--ui-card);
}

.high-contrast .guide-step,
.high-contrast .guide-keys > li {
  border: 2px solid var(--ui-line);
}

/* Offline: no still, no clip: the step is its words. */
.guide-step:has(.guide-clip.no-still) {
  grid-template-columns: minmax(0, 1fr);
}

.guide-clip.no-still {
  display: none;
}

.guide-text {
  padding-inline-end: 0.4em;
}

.help-body .guide-text h3 {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: 0 0 0.25em;
  color: var(--ui-text);
  font-size: 1.1em;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

/* The step's number on a small round key-cap disc. */
.guide-text h3::before {
  content: counter(step);
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  border-radius: var(--r-pill);
  background: var(--ui-key);
  color: var(--ui-text);
  font-size: max(var(--fs-small), 0.8em);
  line-height: 1;
}

.guide-text p {
  margin: 0;
  line-height: calc(1.45 * var(--line-k));
}

@container (max-width: 30em) {
  .guide-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-text {
    padding: 0 0.3em 0.3em;
  }
}

/* The still, with the clip over it once it plays (js/clips.ts), rounded inside its card. */
.guide-clip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--bg);
}

.guide-clip img,
.guide-clip video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-clip video {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.guide-clip.playing video {
  opacity: 1;
}

/* The controls: a dark row each, what it does and how, with the keys as key caps. */
.guide-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.4em;
}

.help-body .guide-controls h3 {
  margin: 0;
  color: var(--ui-text);
  font-size: 1.25em;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.guide-keys,
.help-body .guide-keys {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
  padding: 0;
}

.guide-keys > li {
  padding: 0.6em 0.9em;
  border-radius: var(--r-l);
  background: var(--ui-card);
  line-height: calc(1.45 * var(--line-k));
}

.guide-keys small {
  color: var(--ui-dim);
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 600;
}

/* One sentence of keys and words (a flex box split it into pieces: "W A S D" then ", the arrow keys"). */
.guide-how {
  display: block;
  margin-top: 0.3em;
}

.guide-how em {
  color: var(--ui-dim);
  font-style: normal;
}

/* Key caps: raised, rounded, with the light edge every key cap has (#509), a little deeper here. */
.guide-how kbd {
  min-width: 1.7em;
  margin: 0.1em 0.12em;
  padding: 0.12em 0.45em;
  border-radius: var(--r-s);
  border-bottom-width: 0.18em;
  font-size: max(var(--fs-small), 0.85em);
  line-height: calc(1.3 * var(--line-k));
}

/* The pause menu's guide: the same parts in the dialog, on its own dark, so its cards are a step
   lighter. */
.pause-help .guide-step,
.pause-help .guide-keys > li {
  background: var(--ui-raised);
}

/* Its clips no taller than 30 % of the screen (4:3), so a whole step shows in the box at 720p (#791). */
.pause-help .guide-clip {
  width: min(100%, 40vh);
  margin-inline: auto;
}

/* Upright: read first, then try it, so the goal is the first thing on the page. The arena is then
   a long scroll down: "▶ Try it here" beside Back takes you there (ShellScreens.HowTo; Ⓨ too). */
@media (orientation: portrait) {
  :root:not([data-fit='wide']) .how-wrap:has(.guide) .practice-panel {
    order: 3;
  }

  /* On Back's row, never under it (a small phone at 200 % text has its header on most of the first
     screen): the label wraps inside the button instead. */
  :root:not([data-fit='wide']) .how-wrap:has(.guide) .how-top {
    flex-wrap: nowrap;
  }

  :root:not([data-fit='wide']) .how-wrap:has(.guide) .how-top .try-here {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    flex: 0 1 auto;
    min-width: 0;
    margin-inline-start: auto;
    white-space: normal;
    text-align: center;
    border-color: var(--ui-text);
    font-weight: 800;
  }
}

/* The tutorial's offer before a first solo game (#749): the game's clips under the question, as tall
   as leaves the line and the two buttons in sight. */
.tutorial-offer .offer-arena {
  width: min(100%, 36em, (100vh - 20em) * 16 / 9);
  width: min(100%, 36em, (100dvh - 20em) * 16 / 9);
  min-width: min(100%, 12em);
  margin-inline: auto;
  cursor: default;
}

.tutorial-offer .practice-clip {
  max-width: 36em;
  margin-inline: auto;
  text-align: center;
}