/* learn.css — interactive tutorial layout + spotlight + drag-demo system.
 * Reuses the live felt's CSS variables so the lesson renders identically. */

:root { --learn-panel-bg: linear-gradient(180deg, rgba(20,40,30,.98), rgba(0,0,0,.99)); }

.learn-page {
  background: radial-gradient(ellipse at top, #0d1f17 0%, #050a08 100%);
  min-height: 100vh;
  margin: 0;
  color: var(--cream);
  font-family: 'Bodoni Moda', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  /* Reserve space for the chip drawer at the bottom so nothing hides behind it. */
  padding-bottom: var(--chip-drawer-h, 130px);
}

/* ---- Header ---- */
.learn-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(212,175,55,.25);
  background: linear-gradient(180deg, rgba(20,40,30,.6), rgba(0,0,0,.3));
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 50;
}
.learn-back {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--cream);
}
.learn-back-logo { width: 32px; height: 32px; }
.learn-back-text {
  font-family: 'Cinzel', serif; font-weight: 800;
  font-size: 14px; letter-spacing: .14em;
  color: var(--brass);
}
.learn-pagetitle {
  flex: 1; text-align: center;
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 18px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
}
.learn-skip {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .14em;
  color: var(--cream-mut); text-decoration: none;
  text-transform: uppercase; font-weight: 700;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  transition: color .15s, border-color .15s, background .15s;
}
.learn-skip:hover {
  color: var(--brass); border-color: var(--brass);
  background: rgba(212,175,55,.08);
}

/* ---- Stage layout ---- */
.learn-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.learn-board {
  border-radius: 14px;
  overflow: visible;             /* lit chips can breach the edge for emphasis */
  border: 2px solid var(--brass);
  background: linear-gradient(180deg, #1a3a2a 0%, #0f2a1d 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.learn-bankroll {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  color: var(--brass);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45);
  background: rgba(0,0,0,.3);
}

/* ---- Spotlight system ----
 *
 * When .lit-mode is on the felt, every interactive bet/band that ISN'T
 * highlighted dims and locks. The lit spot pulses and stays clickable.
 * The chip drawer + props tab participate too, since they're "spots" we
 * need to highlight in some steps. */
.felt.lit-mode .learn-spot:not(.lit) {
  opacity: .25;
  filter: grayscale(.4);
  pointer-events: none;
}
.learn-spot.lit {
  position: relative;
  z-index: 4;
  animation: learnPulse 1.6s ease-in-out infinite;
}
.point-puck.lit, #pbPhase.lit {
  animation: learnPulse 1.6s ease-in-out infinite;
}
@keyframes learnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,102,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,215,102,.45),
                         0 0 28px rgba(255,215,102,.6); }
}

/* Dim the chip drawer when it's not the lit element. The drawer is fixed
 * at body level so it doesn't inherit .felt.lit-mode — gate via body. */
body.lit-mode #chipDrawer:not(:has(.lit)) { opacity: .55; }
body.lit-mode #chipDrawer .lit { z-index: 9200; }

/* Same for the rolls strip — when it's the focus, glow the whole strip. */
body.lit-mode #rollsStrip.lit {
  box-shadow: 0 0 0 3px rgba(255,215,102,.4), 0 0 24px rgba(255,215,102,.45);
  border-radius: 8px;
  animation: learnPulse 1.6s ease-in-out infinite;
}

/* Props panel as a single highlight target. */
body.lit-mode #propsHalf.lit {
  box-shadow: 0 0 0 3px rgba(255,215,102,.4), 0 0 24px rgba(255,215,102,.45);
  border-radius: 12px;
  animation: learnPulse 1.6s ease-in-out infinite;
}

/* Mobile props slide-in tab. */
body.lit-mode #propsTab.lit {
  box-shadow: 0 0 0 3px rgba(255,215,102,.6), 0 0 28px rgba(255,215,102,.7);
  animation: learnPulse 1.4s ease-in-out infinite;
}

/* Tutorial chip placed on a felt spot — mirrors the live app's stack
 * format: a denomination-colored disc, then a brass dollar-amount pill
 * beneath. JS picks the disc color from CHIP_COLORS so $25 = green, etc. */
.learn-chip {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse;
  align-items: center; gap: 4px;
  z-index: 6;
  pointer-events: none;
  animation: chipIn .35s cubic-bezier(.3, 1.6, .5, 1);
}
.learn-chip .tut-chip-disc {
  display: inline-block;
}
.tut-chip-label {
  background: rgba(0,0,0,.92);
  color: #ffd966;
  border: 1.5px solid #d4af37;
  border-radius: 999px;
  padding: 2px 9px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 900; font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
  white-space: nowrap;
}
@keyframes chipIn {
  0%   { transform: translateX(-50%) translateY(-30px) scale(.6); opacity: 0; }
  60%  { transform: translateX(-50%) translateY(2px)   scale(1.05); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0)     scale(1); opacity: 1; }
}
.learn-spot { position: relative; }

/* Bands (Pass Line, Don't Pass, Come, etc.) are short and wide — pin the
 * chip to the right side instead of bottom-center so the line label stays
 * readable. Mirrors the real .chip-stack anchoring in bet.js. */
.band.learn-spot > .learn-chip,
.inner-line.learn-spot > .learn-chip,
.inner-odds.learn-spot > .learn-chip {
  bottom: auto; top: 50%; left: auto; right: 12px;
  transform: translateY(-50%);
}
@keyframes chipInBand {
  0%   { transform: translateY(-50%) scale(.6); opacity: 0; }
  60%  { transform: translateY(-50%) scale(1.05); opacity: 1; }
  100% { transform: translateY(-50%) scale(1); opacity: 1; }
}
.band.learn-spot > .learn-chip,
.inner-line.learn-spot > .learn-chip,
.inner-odds.learn-spot > .learn-chip {
  animation-name: chipInBand;
}

/* Ghost chip — animated demo of the drag-to-bet gesture. Wraps a real
 * disc so it visually IS the chip the user just "grabbed". */
.ghost-chip {
  position: fixed;
  margin-left: -22px; margin-top: -22px;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.6))
          drop-shadow(0 0 14px rgba(255,215,102,.45));
}
.chip-source-pulse {
  animation: chipSourcePulse .85s ease-out;
}
@keyframes chipSourcePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,215,102,.7); }
  100% { box-shadow: 0 0 0 18px rgba(255,215,102,0); }
}

/* ---- Teaching panel ---- */
.learn-panel {
  background: var(--learn-panel-bg);
  border: 1.5px solid var(--brass);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.lp-progress {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.lp-step {
  font-family: 'Cinzel', serif;
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 800;
  color: var(--brass);
  flex: 0 0 auto;
}
.lp-bar {
  flex: 1 1 auto;
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.lp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #fff5cc);
  border-radius: 999px;
  transition: width .35s ease;
}
.lp-title {
  margin: 0 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 22px; font-weight: 900; letter-spacing: .04em;
  color: var(--brass);
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.lp-body {
  margin: 0 0 18px;
  font-size: 15px; line-height: 1.55;
  color: var(--cream);
}
.lp-body b { color: var(--brass); font-weight: 800; }
.lp-body i { color: var(--cream-mut); font-style: italic; }
.lp-actions {
  display: flex; gap: 10px;
  align-items: center; justify-content: flex-end;
}
.lp-back, .lp-next {
  font-family: 'Cinzel', serif;
  letter-spacing: .12em; font-weight: 800;
  text-transform: uppercase;
  padding: 10px 18px;
  font-size: 13px;
}
.lp-back:disabled, .lp-next:disabled {
  opacity: .4; cursor: not-allowed;
}

/* ---- Faux topbar (just for tutorial steps that introduce the pickers) ---- */
.learn-faketopbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px 0;
}
.learn-topbar-inner { position: static; pointer-events: none; }
.learn-topbar-inner .topbar-pickers > .learn-spot { pointer-events: auto; }
.learn-topbar-inner .tp-trigger,
.learn-topbar-inner .fp-trigger { cursor: default; }

/* ---- Final-score panel inside the dice reveal ----
 *
 * Box-score style: shooter team on left with a glowing run total,
 * opponent on right, "—" between. Win/lose pill below. */
.reveal-score {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin: 0 0 10px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.rs-team {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.rs-team img { width: 32px; height: 32px; object-fit: contain; }
.rs-abbr {
  font-family: 'Cinzel', serif;
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  color: var(--cream-mut);
}
.rs-runs {
  font-size: 38px; font-weight: 900;
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.rs-runs.rs-team-runs {
  font-size: 52px;
  color: var(--brass);
  text-shadow: 0 0 22px rgba(255,215,102,.55), 0 3px 0 rgba(0,0,0,.5);
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255,215,102,.08);
}
.rs-vs {
  font-family: 'Cinzel', serif;
  font-size: 18px; color: var(--cream-mut);
}
.reveal-wl {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; font-weight: 800;
  text-align: center;
  margin: 4px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212,175,55,.3);
}
.reveal-wl.wl-win  { color: #86efac; }
.reveal-wl.wl-lose { color: #fca5a5; }
.reveal-wl.wl-tie  { color: var(--cream-mut); }

@media (max-width: 480px) {
  .rs-runs { font-size: 30px; }
  .rs-runs.rs-team-runs { font-size: 42px; }
  .rs-team img { width: 26px; height: 26px; }
  .reveal-wl { font-size: 11px; letter-spacing: .2em; }
}

/* Mobile props slide-in pre-state — start collapsed so the tutorial can
 * teach the gesture. felt.css handles the open behavior via [data-open]. */
@media (max-width: 480px) {
  .props-half[data-open="false"] {
    /* Mirrors what bet.css does on small screens. */
  }
}

/* ---- Desktop refinements: panel side-by-side with felt ---- */
@media (min-width: 900px) {
  .learn-main {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
  .learn-board { grid-column: 1; }
  .learn-panel {
    grid-column: 2;
    position: sticky;
    top: 84px;
  }
}

/* ---- Mobile: tighter padding ---- */
@media (max-width: 600px) {
  .learn-header { padding: 10px 14px; gap: 10px; }
  .learn-pagetitle { font-size: 14px; letter-spacing: .14em; }
  .learn-back-text { display: none; }
  .learn-skip { font-size: 10px; padding: 5px 8px; }
  .learn-main { padding: 10px 8px 20px; gap: 10px; }
  .learn-panel { padding: 14px 16px; border-radius: 12px; }
  .lp-title { font-size: 18px; }
  .lp-body  { font-size: 13.5px; line-height: 1.5; }
  .lp-back, .lp-next { padding: 9px 14px; font-size: 12px; }
  .learn-chip { width: 36px; height: 36px; font-size: 11px; border-width: 2px; }
  .ghost-chip { width: 38px; height: 38px; margin-left: -19px; margin-top: -19px; font-size: 11px; }
}