/* ════════════════════════════════════════════════════════════════════
   roll-flagship.css · craps/flagship-pass/v1 · DH #238 (motion beats)
   ────────────────────────────────────────────────────────────────────
   LiveRoll motion ported onto the LIVE felt: point-establish gold ring-
   lock + point pop, and odds-active ambient breathe on the working line.
   The brief's #1 beat ("the single most important beat in craps").
   Composes with winloss.css (DH #240). Shared tokens from the live
   /livegames/livegames-base.css motion layer (DH #239). Gold via --lg-*.
   transform/opacity only · honors prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* the point zone carries a settled gold ring while the point is ON */
.felt .zone.is-point { z-index: 2; }
.felt .zone.is-point:not(.flash-win):not(.flash-loss)::after {
  content:''; position:absolute; inset:-2px; border-radius:6px;
  border:2px solid rgba(232,200,117,0.85);
  box-shadow:0 0 12px rgba(232,200,117,0.40);
  pointer-events:none; opacity:0;
  transition:opacity 200ms var(--lg-ease-out, ease);
}
.felt[data-point-on="true"] .zone.is-point:not(.flash-win):not(.flash-loss)::after { opacity:1; }

/* transient LOCK pulse — fires once when the point is established */
.felt[data-point-just] .zone.is-point::before {
  content:''; position:absolute; inset:-2px; border-radius:6px;
  border:2px solid rgba(232,200,117,0.92);
  pointer-events:none; z-index:3; opacity:0;
  animation: rf-ring-out 900ms var(--lg-ease-out, cubic-bezier(0.22,1,0.36,1)) 1;
}
@keyframes rf-ring-out {
  0%   { opacity:0; transform:scale(0.6); }
  18%  { opacity:1; }
  100% { opacity:0; transform:scale(1.6); }
}
/* the point NUMBER pops on establish */
.felt[data-point-just] .zone.is-point .num.point {
  animation: rf-point-pop 640ms var(--lg-ease-out, cubic-bezier(0.22,1,0.36,1)) 1;
}
@keyframes rf-point-pop {
  0%   { transform:scale(1); }
  30%  { transform:scale(1.4); }
  100% { transform:scale(1); }
}

/* odds-active ambient gold breathe on the working pass line while point is on */
.felt[data-point-on="true"] .zone.passline-bar::after {
  content:''; position:absolute; inset:0; border-radius:4px; pointer-events:none;
  box-shadow:0 0 0 1px rgba(232,200,117,0.40), 0 0 10px rgba(212,168,67,0.25);
  animation: rf-breathe var(--lg-breathe, 1.4s) var(--lg-ease-out, ease) infinite;
}
@keyframes rf-breathe {
  0%,100% { opacity:0.45; }
  50%     { opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  .felt[data-point-just] .zone.is-point::before,
  .felt[data-point-just] .zone.is-point .num.point,
  .felt[data-point-on="true"] .zone.passline-bar::after { animation:none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Keystone 1 · CLARITY — hero state panel + More-bets disclosure (DH #238)
   Mobile-game-first: point · odds · what's-next · working→payout read at a
   glance; the full bet matrix demotes behind "More bets" (demote, NOT delete).
   ════════════════════════════════════════════════════════════════════ */
.felt-hero {
  position: relative; margin: 8px 10px 6px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(212,168,67,0.06), rgba(212,168,67,0.015)), var(--lr-graphite-2);
  border: 1px solid rgba(212,168,67,0.22);
}
.felt-hero .fh-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.fh-phase { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--lr-ink-dim); }
.fh-odds { display:inline-flex; align-items:center; gap:5px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--lr-ink-faint); }
.fh-odds i { width:5px; height:5px; border-radius:50%; background:var(--lr-edge-2); }
.felt-hero[data-odds="on"] .fh-odds { color:var(--lr-gold-soft); }
.felt-hero[data-odds="on"] .fh-odds i { background:var(--lr-gold-soft); box-shadow:0 0 8px var(--lr-gold-soft); animation:rf-breathe var(--lg-breathe,1.4s) ease infinite; }
.fh-main { display:flex; align-items:center; gap:12px; }
.fh-point { display:flex; align-items:baseline; gap:4px; min-width:64px; }
.fh-x { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.1em; color:var(--lr-ink-faint); }
.fh-pn { font-family:'JetBrains Mono',monospace; font-weight:800; font-size:44px; line-height:1; color:var(--lr-gold-soft); text-shadow:0 0 16px rgba(232,200,117,0.35); }
.fh-co { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:23px; letter-spacing:0.04em; color:var(--lr-ink); }
.fh-next { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.fh-next-line { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; color:var(--lr-ink-dim); letter-spacing:0.02em; }
.fh-next-line .arr { color:var(--lr-gold); }
.fh-next-line b { color:var(--lr-ink); font-weight:800; }
.fh-bar { display:flex; height:5px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,0.05); }
.fh-bar-win { background:linear-gradient(90deg,var(--lr-gold),var(--lr-gold-soft)); }
.fh-bar-7 { background:rgba(229,115,115,0.5); }
.fh-bar-cap { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.04em; color:var(--lr-ink-faint); }
.fh-bar-cap b { color:var(--lr-gold-soft); }
.fh-money { display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:7px; border-top:1px solid var(--lr-edge); }
.fh-cell { display:flex; flex-direction:column; gap:1px; }
.fh-cell span { font-family:'Barlow Condensed',sans-serif; font-size:8px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--lr-ink-faint); }
.fh-cell b { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; color:var(--lr-ink); }
.fh-cell.win b { color:var(--lr-gold-soft); }
.fh-arrow { color:var(--lr-ink-faint); font-size:12px; }

.felt-more {
  display:flex; align-items:center; gap:8px; width:calc(100% - 20px); margin:2px 10px 6px; padding:8px 12px;
  background:rgba(255,255,255,0.02); border:1px solid var(--lr-edge); border-radius:8px; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--lr-gold-soft);
}
.felt-more .felt-more-hint { flex:1; text-align:left; font-weight:600; font-size:9px; letter-spacing:0.03em; color:var(--lr-ink-faint); text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.felt-more .felt-more-chev { transition:transform 200ms var(--lg-ease-out,ease); }
.felt-more[data-open="true"] .felt-more-chev { transform:rotate(180deg); }
.felt-advanced[data-open="false"] { display:none; }