/*
 * Frame v2 — main.css
 * Shell ported from frame-mobile-v10.html (canonical UI).
 * Card design from card-design-v3.html (canonical card): white stock,
 * Geist 900 rank, SVG suit paths. Plus iOS/100dvh/safe-area handling.
 * v2 delta: the chip-stack selector is replaced by the extra-bet strip
 * (0/+1/+2/+3); everything else is the v1 visual system, untouched.
 */

:root {
  --bg: #0A0A0B;
  --surface: #131316;
  --elevated: #1C1C20;
  --text-primary: #EDEDF0;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  --accent: #10B981;
  --accent-bright: #34D399;
  --accent-dim: #047857;
  --border-subtle: #27272A;
  --border-strong: #3F3F46;
  --warning: #F59E0B;
  --danger: #EF4444;

  /* canonical card (v3) */
  --card-bg: #FFFFFF;
  --card-red: #C4444D;
  --card-black: #0E0E12;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #1A1A1F;
  min-height: 100dvh;
  font-family: 'Geist', sans-serif;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* ─────── App frame ─────── */
.app {
  width: min(414px, 100vw);
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  touch-action: manipulation;
}

/* Desktop: render as a centered phone frame */
@media (min-width: 460px) {
  body { padding: 24px 0; align-items: center; }
  .app {
    height: min(860px, calc(100dvh - 48px));
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px -10px rgba(0,0,0,0.7);
  }
}

.app::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 30% at 50% -5%, rgba(16,185,129,0.10), transparent),
    radial-gradient(ellipse 80% 25% at 50% 105%, rgba(245,158,11,0.04), transparent);
  pointer-events: none;
  z-index: 0;
}
.app::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
.app > * { position: relative; z-index: 2; }

/* ─────── Masthead ─────── */
.masthead {
  flex-shrink: 0;
  padding: calc(16px + env(safe-area-inset-top)) 18px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}
.wordmark {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1;
}
.wordmark .chevron { color: var(--accent); font-weight: 600; }
.game-title {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-style: italic;
  font-size: 20px;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ─────── Stage ─────── */
.stage-wrap {
  flex: 1;
  padding: 14px;
  display: flex;
  align-items: stretch;
  min-height: 0; min-width: 0;
}
.stage {
  flex: 1; min-width: 0;
  position: relative;
  padding: 18px 14px 0; /* no bottom padding: lets the readout center with equal gaps above/below */
  background: linear-gradient(180deg, var(--surface) 0%, #0F0F11 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(16,185,129,0.04),
    0 14px 28px -10px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ─────── Grid ─────── */
.grid-container { flex-shrink: 0; display: flex; justify-content: center; margin-top: 4px; }
.grid {
  --card-w: clamp(74px, 30vw, 100px); /* fallback for browsers without dvh/min() */
  /* Height-aware sizing: iPhone Safari's chrome shrinks the visible height and the
     fixed zones don't flex, so the grid must scale with dvh or it pushes the readout
     through the stage's bottom border. Calibrated so 860px-tall viewports still hit
     the 100px cap (desktop look unchanged) while ~740px Safari gets ~84px cards. */
  --card-w: clamp(64px, min(30vw, calc(13.75dvh - 18px)), 100px);
  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  gap: 10px;
  padding: 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
  border: 1px solid rgba(16,185,129,0.06);
}

/* ─────── Card (face-down back + v3 face, 3D flip on reveal) ─────── */
.card {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: 7px;
  position: relative;
  cursor: pointer;
  perspective: 700px;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,0.5);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.card.selected {
  transform: rotate(-13deg) translateY(-4px);
  box-shadow:
    0 0 0 2px var(--accent),
    0 8px 16px -3px rgba(16,185,129,0.4),
    0 4px 8px -2px rgba(0,0,0,0.6);
  z-index: 2;
}
/* glow hint on the cell(s) that would complete a line (shown when 2 selected) */
.card.hint {
  box-shadow:
    0 2px 6px -1px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(0,0,0,0.08),
    0 0 0 2px rgba(16,185,129,0.5),
    0 0 14px 0 rgba(16,185,129,0.45);
}
/* losing line: red outline instead of green (3 classes → beats .card.selected) */
.card.selected.loss {
  box-shadow:
    0 0 0 2px var(--danger),
    0 8px 16px -3px rgba(239,68,68,0.4),
    0 4px 8px -2px rgba(0,0,0,0.6);
}
.card.win { animation: winpulse 0.6s ease; }
@keyframes winpulse {
  0% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(16,185,129,0.6); }
  50% { box-shadow: 0 0 0 2px var(--accent-bright), 0 0 22px 6px rgba(16,185,129,0.65); }
  100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(16,185,129,0); }
}
/* staggered deal-in — animation-delay set per card in JS. 'backwards' shows the
   from-state during the delay then releases to declarative transforms, so the
   .selected tilt still works after the deal. */
.card.deal-in { animation: deal-in 0.4s backwards; }
@keyframes deal-in {
  from { opacity: 0; transform: translateY(-12px) rotate(1deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* flip mechanism */
.card-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card.revealed .card-flip { transform: rotateY(180deg); }

.card-back, .card-face {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* face-down back: chevron pattern + shovd> wordmark (card-back-v1) */
.card-back { background: #0A0A0B; }
.card-back-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card-back-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', sans-serif; font-weight: 600;
  font-size: calc(var(--card-w) * 0.125);
  color: var(--accent); letter-spacing: -0.02em; line-height: 1;
  user-select: none; pointer-events: none;
}
.card-back-mark .chevron { font-weight: 700; }

/* face (v3): white stock, on the back side of the flip */
.card-face {
  background: var(--card-bg);
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.card-corner {
  position: absolute; top: 5%; left: 7%;
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 0.82;
}
.card-rank {
  font-family: 'Geist', sans-serif;
  font-weight: 900;
  font-size: calc(var(--card-w) * 0.375);
  line-height: 0.85;
  letter-spacing: -0.06em;
}
.card-rank.double { font-size: calc(var(--card-w) * 0.30); letter-spacing: -0.11em; }
.card-corner-suit { width: calc(var(--card-w) * 0.27); height: calc(var(--card-w) * 0.27); margin-top: 2%; display: block; }
.card-suit-large { position: absolute; bottom: 5%; right: 6%; width: calc(var(--card-w) * 0.55); height: calc(var(--card-w) * 0.55); }
.red { color: var(--card-red); }
.black { color: var(--card-black); }

/* ─────── Hand readout ─────── */
.hand-readout {
  flex-shrink: 0;
  margin: auto 0; /* center vertically in the space below the grid */
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(16,185,129,0.12) 0%, transparent 100%);
  border: 1px solid var(--accent);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: opacity 0.2s ease;
}
.hand-readout.idle { border-color: var(--border-subtle); background: rgba(255,255,255,0.02); }
.hand-readout::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.hand-readout.idle::before { opacity: 0.15; }
.hand-readout-name {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-style: italic;
  font-size: 20px;
  color: var(--text-primary);
  line-height: 1.1; letter-spacing: -0.01em;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hand-readout.idle .hand-readout-name { color: var(--text-tertiary); }
.hand-readout-payout {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-style: italic;
  font-size: 22px;
  color: var(--accent);
  line-height: 1.1; letter-spacing: -0.02em;
  flex-shrink: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hand-readout-payout.loss { color: var(--text-tertiary); }

/* ─────── Bet zone (v2: ante chips ↔ raise strip, swapped by phase) ─────── */
.bet-zone { flex-shrink: 0; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
/* min-height keeps the zone from jumping when the unlabeled chips swap with the labeled raise strip */
.bet-col { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; min-height: 55px; justify-content: center; }
.bet-col.hidden { display: none; }
.zone-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent); line-height: 1; font-weight: 500;
}
.chips-row { display: flex; gap: 6px; flex-shrink: 0; }
.chip {
  background: transparent; border: none; padding: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: transform 0.15s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(0.95); }
.chip:disabled { opacity: 0.35; cursor: not-allowed; }
.chip-face {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 3px 7px -2px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(0,0,0,0.25), inset 0 2px 4px rgba(255,255,255,0.18);
}
.chip-face.red { background: linear-gradient(180deg, #E0353E 0%, #B82C34 100%); }
.chip-face.green { background: linear-gradient(180deg, #10B981 0%, #047857 100%); }
.chip-face.black { background: linear-gradient(180deg, #2A2A30 0%, #0E0E12 100%); }
.chip-face.purple { background: linear-gradient(180deg, #9B6CF6 0%, #6D28D9 100%); }
.chip-face::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,0.4); pointer-events: none;
}
.chip-value {
  font-family: 'Fraunces', serif; font-weight: 600; font-style: italic;
  font-size: 15px; color: #fff; line-height: 1; z-index: 1; letter-spacing: -0.02em;
}
.chip.active .chip-face {
  box-shadow:
    0 0 18px 0 rgba(16,185,129,0.7),
    0 3px 7px -2px rgba(0,0,0,0.5),
    inset 0 0 0 2px rgba(255,255,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,0.18);
}
.raise-strip { display: flex; gap: 6px; }
.raise-btn {
  width: 52px; height: 40px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-secondary); cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.raise-btn:active { transform: scale(0.95); }
.raise-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.raise-btn.active {
  background: rgba(16,185,129,0.14);
  border-color: var(--accent);
  color: var(--accent-bright);
  box-shadow: 0 0 14px 0 rgba(16,185,129,0.35), inset 0 0 0 1px rgba(16,185,129,0.4);
}
.bankroll-col { margin-left: auto; margin-right: 4px; width: 100px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.bankroll-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent); line-height: 1; font-weight: 500;
}
.bankroll-value {
  font-family: 'Fraunces', serif; font-weight: 500; font-style: italic;
  font-size: 26px; color: var(--text-primary); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  padding-right: 4px; /* pull the italic number's right edge in to line up with the BANKROLL label */
}


/* ─────── Action zone ─────── */
.action-zone {
  flex-shrink: 0;
  padding: 18px 14px calc(28px + env(safe-area-inset-bottom));
  display: flex; gap: 10px;
}
.primary-action {
  flex: 1;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 16px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  position: relative; overflow: hidden; line-height: 1;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.primary-action::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btn-shimmer 3s infinite;
}
@keyframes btn-shimmer { 0% { left: -100%; } 100% { left: 100%; } }
.primary-action:not(.disabled):hover { background: var(--accent-bright); }
.primary-action:not(.disabled):active { transform: scale(0.98); }
.primary-action.disabled { opacity: 0.5; cursor: not-allowed; }
.primary-action.disabled::before { display: none; }
.action-verb {
  font-family: 'Geist', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 0.04em; color: var(--bg); z-index: 1;
}
.action-amount {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  font-size: 18px; color: var(--bg); z-index: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.secondary-action {
  flex-shrink: 0; width: 100px;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-secondary); padding: 16px 0; border-radius: 6px; cursor: pointer;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 14px;
  letter-spacing: 0.06em; transition: all 0.15s; line-height: 1;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.secondary-action:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.secondary-action:active { transform: scale(0.98); }

/* ─────── Toast (refill notice) ─────── */
.toast {
  position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(8px);
  background: var(--elevated); color: var(--text-primary);
  border: 1px solid var(--accent);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 20; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─────── Masthead info button ─────── */
.mast-right { display: flex; align-items: center; gap: 12px; }
.info-btn {
  background: transparent; border: none; padding: 4px; cursor: pointer;
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  transition: color 0.15s, background 0.15s, transform 0.1s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.info-btn:hover { color: var(--accent); background: rgba(16,185,129,0.08); }
.info-btn:active { transform: scale(0.94); }

/* ─────── Paytable / rules sheet ─────── */
.sheet {
  position: absolute; inset: 0; z-index: 30;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 25px; /* roomy section breaks (JH), sized to stay no-scroll at ~812px heights */
  padding: calc(14px + env(safe-area-inset-top)) 20px calc(10px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2,0.7,0.2,1), visibility 0.22s;
  overflow-y: auto;
}
.sheet.open { opacity: 1; visibility: visible; transform: translateY(0); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-title {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  font-size: 26px; color: var(--text-primary); letter-spacing: -0.01em;
}
.sheet-close {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary);
  width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sheet-close:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.sheet-section { display: flex; flex-direction: column; gap: 6px; }
.sheet-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent);
}
.paytable { width: 100%; border-collapse: collapse; }
.paytable td { padding: 5px 0; border-bottom: 1px solid var(--border-subtle); }
.paytable tr:last-child td { border-bottom: none; }
.pt-name { font-family: 'Geist', sans-serif; font-size: 16px; color: var(--text-primary); }
.pt-mult {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 16px; text-align: right; font-weight: 500;
}
.pt-mult.win { color: var(--accent); }
.pt-mult.lose { color: var(--text-tertiary); }
.sheet-note { font-size: 12px; color: var(--text-tertiary); }

/* prominent 4-lines diagram — left-aligned, capped by width AND height so it can't force a scroll */
.lines-diagram-wrap { display: flex; justify-content: flex-start; padding: 2px 0 0; }
.lines-diagram { width: min(170px, 48vw, 11.5vh); height: auto; }

/* how-to-play steps */
.sheet-steps {
  margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px;
}
.sheet-steps li {
  font-size: 14px; line-height: 1.4; color: var(--text-secondary); padding-left: 4px;
}
.sheet-steps li::marker {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent);
}
.sheet-steps strong, .sheet-facts strong { color: var(--text-primary); font-weight: 600; }

/* good-to-know facts */
.sheet-facts {
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px;
}
.sheet-facts li {
  font-size: 13px; line-height: 1.4; color: var(--text-secondary);
  padding-left: 16px; position: relative;
}
.sheet-facts li::before {
  content: ''; position: absolute; left: 2px; top: 0.5em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .card, .card-flip, .primary-action, .chip, .raise-btn, .toast, .sheet { transition: none; }
  .primary-action::before, .card.win, .card.deal-in { animation: none; }
}