/* -------------------------------------------------------------------------
   /how-to-play-demo -- the playable explanation of 33 Rotation.

   Arcade cabinet on the outside, site palette underneath: the same #07090d
   ground, green and gold as every other learn page, so this reads as part of
   33Pool rather than something bolted on. The retro cues are the chunky frame,
   the phosphor scanlines over the felt and the monospace numerals -- not a
   different colour scheme.

   The ball rail rules near the bottom are lifted from casual-overlay.css
   deliberately: ball-rail.js emits `.ov-ball`, and this page draws the same
   balls as the stream overlay for the same reason it uses the same scoring
   engine.
   ------------------------------------------------------------------------- */

.pd-page {
  --pd-bg: #07090d;
  --pd-panel: #10141c;
  --pd-line: rgba(255, 255, 255, 0.1);
  --pd-green: #22c55e;
  --pd-gold: #d99a32;
  --pd-red: #ef4444;
  --pd-text: rgba(255, 255, 255, 0.74);
  --ov-pending: #f2c230;
  --pd-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  background: var(--pd-bg);
  color: #fff;
}

/* `display` on a flex or grid block beats the browser's own [hidden] rule, and
   the console hides whole panels that way as it moves between lessons. */
.pd-page [hidden] { display: none !important; }

/* ----- Hero ------------------------------------------------------------- */

.pd-hero {
  padding: 96px 20px 40px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 197, 94, 0.22), transparent 42%),
    radial-gradient(circle at 88% 10%, rgba(44, 117, 255, 0.22), transparent 40%),
    var(--pd-bg);
}

.pd-hero__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.pd-eyebrow {
  margin: 0 0 12px;
  font-family: var(--pd-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pd-gold);
}

.pd-hero h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 0.95;
}

.pd-hero__sub {
  width: min(720px, 100%);
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--pd-text);
}

.pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: 0.18s ease;
}

.pd-btn--primary {
  background: var(--pd-green);
  color: #07130a;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.28);
}

.pd-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pd-line);
  color: rgba(255, 255, 255, 0.88);
}

.pd-btn:hover { transform: translateY(-1px); }
.pd-btn[disabled] { opacity: 0.35; cursor: default; transform: none; }

/* ----- The cabinet ------------------------------------------------------ */

.pd-console {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 20px 40px;
}

.pd-console__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.pd-stagewrap { min-width: 0; }

/* The screen. The inset shadow and the scanlines are the whole retro trick. */
.pd-crt {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #05070a;
  padding: 14px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 0 90px rgba(0, 0, 0, 0.7);
}

.pd-crt::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 10px;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: soft-light;
}

.pd-crt canvas {
  display: block;
  width: 100%;
  aspect-ratio: 114 / 64;
  border-radius: 8px;
}

/* Your Turn is the only level you touch, and on a phone a drag across the
   table was being taken as a page scroll: the browser claimed the gesture
   halfway through and fired pointercancel, so the shot never went. The table
   keeps the gesture here, and only here -- on every other level the canvas is
   just a picture and the page should still scroll under your finger. */
#play-demo[data-kind="play"] .pd-crt canvas {
  touch-action: none;
}

/* The commentary under the shot.
   It lived inside .pd-crt, absolutely positioned over the bottom of the felt,
   and covered the bottom third of the table -- which is where a lot of the
   shots finish. Out here it covers nothing, and the reserved height stops the
   page jumping every time a line appears or clears. */
.pd-caption {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--pd-line);
  border-left: 3px solid var(--pd-green);
  background: var(--pd-panel);
  font-family: var(--pd-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  opacity: 0;
  transition: opacity 0.22s ease, border-color 0.22s ease;
}

.pd-caption.is-on { opacity: 1; }
.pd-caption--aim { border-left-color: var(--pd-gold); }
.pd-caption--bad { border-left-color: var(--pd-red); }
.pd-caption--end { border-left-color: rgba(255, 255, 255, 0.55); }

/* ----- Controls --------------------------------------------------------- */

.pd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.pd-chip {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--pd-line);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--pd-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.pd-chip:hover { border-color: rgba(255, 255, 255, 0.28); }
.pd-chip[aria-pressed="true"] { border-color: var(--pd-gold); color: var(--pd-gold); }

.pd-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pd-call__ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--pd-line);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--pd-mono);
  font-weight: 800;
  cursor: pointer;
}

.pd-call__ball.is-on {
  background: var(--pd-gold);
  border-color: var(--pd-gold);
  color: #140d02;
}

/* ----- Scoreboard ------------------------------------------------------- */

.pd-score {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--pd-line);
  background: var(--pd-panel);
}

.pd-score__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pd-score__label {
  font-family: var(--pd-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pd-score__total {
  font-family: var(--pd-mono);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
}

.pd-score__total.is-good { color: var(--pd-green); }
.pd-score__total.is-bad { color: var(--pd-red); }

.pd-score__rail {
  min-height: 34px;
  margin-top: 12px;
  font-size: 20px;
}

.pd-score__notes {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pd-note {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--pd-line);
  font-family: var(--pd-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.78);
}

.pd-note--good, .pd-note--great { border-color: rgba(34, 197, 94, 0.5); color: #86efac; }
.pd-note--pending { border-color: rgba(242, 194, 48, 0.6); color: var(--ov-pending); border-style: dashed; }
.pd-note--bad { border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }
.pd-note--end { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.7); }

/* ----- Lesson panel ----------------------------------------------------- */

.pd-lesson {
  position: sticky;
  top: 20px;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--pd-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

.pd-lesson__level {
  margin: 0 0 8px;
  font-family: var(--pd-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pd-gold);
}

.pd-lesson h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
}

.pd-lesson__tagline {
  margin: 10px 0 0;
  font-family: var(--pd-mono);
  font-size: 13px;
  color: var(--pd-green);
}

.pd-lesson__body {
  margin-top: 16px;
  color: var(--pd-text);
  line-height: 1.7;
}

.pd-lesson__body p { margin: 0 0 12px; }
.pd-lesson__body strong { color: #fff; }

.pd-lesson__points {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pd-line);
}

.pd-lesson__points li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--pd-line);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.pd-lesson__points li::before {
  content: "\25B8";
  position: absolute;
  left: 2px;
  color: var(--pd-green);
}

.pd-lesson__nav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* ----- The stepper ------------------------------------------------------ */

/* Across the top, next to the table, so it is obvious there are other steps
   and which one you are on. It scrolls sideways rather than wrapping: a step
   list that reflows to three rows stops reading as a sequence. */
.pd-steps {
  display: flex;
  gap: 2px;
  margin: 0 0 18px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pd-steps::-webkit-scrollbar { display: none; }

.pd-step {
  position: relative;
  flex: 1 1 0;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.16s ease;
}

/* The rail the dots sit on. Drawn per step rather than as one line behind them
   so it can be coloured in as far as you have got. */
.pd-step::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.pd-step:first-child::before { left: 50%; }
.pd-step:last-child::before { right: 50%; }

.pd-step.is-done::before,
.pd-step.is-on::before { background: rgba(34, 197, 94, 0.45); }

.pd-step__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: var(--pd-bg);
  font-family: var(--pd-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  transition: 0.16s ease;
}

.pd-step__title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.pd-step:hover { color: #fff; }
.pd-step:hover .pd-step__dot { border-color: rgba(255, 255, 255, 0.45); }

.pd-step.is-done .pd-step__dot {
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--pd-green);
}

.pd-step.is-on { color: #fff; }

.pd-step.is-on .pd-step__dot {
  border-color: var(--pd-green);
  background: var(--pd-green);
  color: #07130a;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.pd-noscript {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed var(--pd-line);
  font-family: var(--pd-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

/* ----- The three-round scorecard (level 02) ----------------------------- */

.pd-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pd-line);
}

.pd-card__rounds {
  display: flex;
  gap: 8px;
}

.pd-card__round {
  min-width: 78px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--pd-line);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--pd-mono);
  text-align: center;
}

.pd-card__round span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pd-card__round b {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.55);
}

.pd-card__round.is-done { border-color: rgba(34, 197, 94, 0.45); }
.pd-card__round.is-done b { color: var(--pd-green); }

.pd-card__round.is-live {
  border-color: var(--pd-gold);
  background: rgba(217, 154, 50, 0.1);
}

.pd-card__round.is-live b { color: var(--pd-gold); }

.pd-card__total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--pd-mono);
}

.pd-card__total span {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pd-card__total b {
  font-size: 28px;
  color: #fff;
}

.pd-card__total i {
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

/* ----- Written recap ---------------------------------------------------- */

.pd-recap {
  padding: 20px 20px 100px;
  background: var(--pd-bg);
}

.pd-recap__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.pd-recap h2 {
  margin: 0 0 6px;
  font-size: clamp(26px, 3.4vw, 40px);
}

.pd-recap__lead {
  margin: 0 0 26px;
  max-width: 720px;
  color: var(--pd-text);
  line-height: 1.7;
}

.pd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.pd-card-rule {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--pd-line);
  background: var(--pd-panel);
}

.pd-card-rule h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.pd-card-rule ul {
  margin: 0;
  padding-left: 18px;
  color: var(--pd-text);
  line-height: 1.7;
  font-size: 14.5px;
}

.pd-card-rule strong { color: #fff; }

.pd-recap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ----- Ball rail (shared with the stream overlay) ------------------------ */

.ov-balls {
  display: flex;
  align-items: center;
  gap: 0.15em;
  flex-wrap: wrap;
}

.ov-ball {
  display: block;
  width: 1.55em;
  height: 1.55em;
  flex: none;
}

.ov-ball svg { display: block; width: 100%; height: 100%; }

.ov-ball.is-pending {
  opacity: 0.55;
  border-radius: 50%;
  outline: 0.12em dashed var(--ov-pending);
  outline-offset: -0.06em;
}

.ov-ball.is-lost {
  opacity: 0.38;
  border-radius: 50%;
  outline: 0.12em dashed rgba(245, 247, 250, 0.45);
  outline-offset: -0.06em;
}

.ov-ball--slop,
.ov-ball--scratch,
.ov-ball--badbreak { opacity: 0.75; }

/* ----- Narrow ----------------------------------------------------------- */

@media (max-width: 960px) {
  .pd-console__inner { grid-template-columns: minmax(0, 1fr); }
  .pd-lesson { position: static; }
  .pd-step { min-width: 88px; }
}

@media (max-width: 560px) {
  .pd-hero { padding-top: 70px; }
  .pd-crt { padding: 9px; border-radius: 14px; }
  .pd-crt::after { inset: 9px; }
  .pd-caption { font-size: 12px; min-height: 40px; }
  .pd-step { min-width: 76px; padding-top: 10px; }
  .pd-step__title { font-size: 10px; }
  .pd-card { justify-content: flex-start; }
  .pd-score__total { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-caption { transition: none; }
  .pd-steps { scroll-behavior: auto; }
}

/* ----- The shot builder (Your Turn) -------------------------------------- */

/* Dragging an angle and a speed out of one gesture is hard with a mouse and
   hopeless on a phone, so the shot is built by tapping: ball, pocket, power.
   Which is also how a shot is called at a real table. */
.pd-shot {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--pd-line);
  background: var(--pd-panel);
}

.pd-shot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pd-shot__row + .pd-shot__row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pd-shot__label {
  flex: none;
  width: 62px;
  font-family: var(--pd-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pd-power {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Everything tappable is at least 40px: a 32px chip is a miss on a phone. */
.pd-power__step {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--pd-line);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--pd-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pd-power__step.is-on {
  border-color: var(--pd-gold);
  background: rgba(217, 154, 50, 0.16);
  color: var(--pd-gold);
}

/* What has been called. A readout, not a control -- the calling happens on the
   table, where the balls are. */
.pd-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
}

.pd-callout em {
  font-style: normal;
  font-family: var(--pd-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.pd-callout b { color: var(--pd-green); }

.pd-callout .ov-ball {
  display: block;
  width: 1.9em;
  height: 1.9em;
  flex: none;
}

.pd-callout .ov-ball svg { display: block; width: 100%; height: 100%; }

.pd-clear {
  margin-left: auto;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--pd-line);
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--pd-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.pd-clear:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }

.pd-shoot {
  margin-left: auto;
  min-height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--pd-green);
  color: #07130a;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.28);
}

.pd-shoot[disabled] {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  cursor: default;
}

@media (max-width: 560px) {
  .pd-shot { padding: 10px; }
  .pd-shot__label { width: 100%; }
  .pd-shoot { width: 100%; margin-left: 0; margin-top: 4px; }
  .pd-power__step { padding: 0 12px; flex: 1 1 auto; }
  .pd-clear { margin-left: 0; }
}