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

/* Level number on the left, Back/Next hard right. On a phone this bar sticks
   to the top of the viewport while the lesson text scrolls under it, so the way
   on to the next level is always one thumb away -- `--pd-panel` rather than a
   transparent background for exactly that reason. */
.pd-lesson__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 12px;
}

.pd-lesson__level {
  margin: 0;
  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: 8px;
  flex-shrink: 0;
}

/* Shorter than the hero buttons: two of these sit beside the level number.
   `.pd-btn` is an inline-flex, so text-overflow has nothing to work on -- the
   label is kept whole and given room instead, which is why the bar wraps rather
   than shrinking the button on a narrow screen. */
.pd-btn--nav {
  min-height: 40px;
  padding: 9px 15px;
  font-size: 13px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

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

  /* The panel stops being sticky here, so the nav bar takes over the job. It
     is pulled out to the panel's edges so its background covers the full width
     of the card as the text scrolls beneath it. */
  .pd-lesson__top {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: -24px -24px 12px;
    padding: 14px 24px;
    background: var(--pd-panel);
    border-bottom: 1px solid var(--pd-line);
    border-radius: 18px 18px 0 0;
  }
}

@media (max-width: 620px) {
  /* "Next: Shooting In Rotation" will not sit beside a Back button and a level
     number on a phone, and the destination is the whole point of the label. So
     the bar takes two rows: the level number on its own, then the buttons
     across the full width with Next taking whatever Back does not. */
  .pd-lesson__level { flex: 1 1 100%; }
  .pd-lesson__nav { width: 100%; }
  .pd-btn--nav[data-pd="next"] { flex: 1 1 auto; }
  .pd-btn--nav { font-size: 12px; padding: 9px 12px; }
}

@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; }
}