/* ══════════════════════════════════════════════════════════════════════════
   AURORA APP SHELL — Play / My Game / Last 10 Hands
   "The clubhouse, not a dashboard." Visual language inherited from the
   approved pregame-flow direction: felt greens, brass, parchment, slab-serif
   display. Reference: mockups/aurora-app-shell-mockup-v3.html +
   AURORA-APP-SHELL-V3-BRIEF.md.

   Everything is scoped under #auroraShell (plus two body-level exceptions at
   the end) so nothing here can leak into table styling. Tokens use an --ash-
   prefix — table-theme.css's --tt- families stay untouched.
   ══════════════════════════════════════════════════════════════════════════ */

#auroraShell {
  --ash-felt-950: #050f0b;
  --ash-felt-800: #0c2a20;
  --ash-felt-650: #164a38;
  --ash-brass-300: #eed6a0;
  --ash-brass-500: #c9a24b;
  --ash-brass-700: #8f7333;
  --ash-parchment: #f4ead7;
  --ash-ink-300: #a8bab0;
  --ash-ink-500: #75897f;
  --ash-win: #6fd6a0;   /* validated pair: CVD ΔE 22.8 vs --ash-loss on felt */
  --ash-loss: #b0584a;
  --ash-card-face: #f6efdd;
  --ash-card-red: #b23b35;
  --ash-card-black: #232a25;
  --ash-line: rgba(238, 214, 160, .10);
  --ash-font-display: 'Rockwell', 'Roboto Slab', 'Sitka Small', Georgia, 'Times New Roman', serif;
  --ash-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --ash-font-mono: 'SF Mono', ui-monospace, 'Menlo', monospace;

  position: fixed;
  inset: 0;
  z-index: 10500; /* above the orientation gate (9999) and every table layer */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--ash-font-body);
  color: var(--ash-parchment);
  background:
    radial-gradient(ellipse 900px 480px at 50% -60px, rgba(201, 162, 75, .09), transparent 62%),
    radial-gradient(ellipse 1400px 900px at 50% 0%, #0a1712 0%, var(--ash-felt-950) 55%, #020604 100%);
}
#auroraShell.hidden { display: none; }
#auroraShell * { box-sizing: border-box; }
#auroraShell button { font: inherit; color: inherit; }
#auroraShell .ash-num { font-family: var(--ash-font-mono); font-variant-numeric: tabular-nums; }

/* ── Frame ── */
.ash-frame {
  max-width: 1180px; margin: 0 auto; min-height: 100%;
  display: grid; grid-template-columns: 1fr;
}
.ash-rail { display: none; }
.ash-main {
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));
  max-width: 680px; margin: 0 auto; width: 100%;
}
@media (min-width: 900px) {
  .ash-frame { grid-template-columns: 220px 1fr; }
  .ash-rail {
    display: flex; flex-direction: column; gap: 6px;
    padding: 30px 18px; border-right: 1px solid var(--ash-line);
    position: sticky; top: 0; height: 100dvh;
  }
  .ash-rail .ash-brand { margin-bottom: 30px; }
  .ash-rail > button {
    border: 0; background: transparent; text-align: left; cursor: pointer;
    padding: 12px 14px; border-radius: 12px; color: var(--ash-ink-300);
    font-size: 14.5px; letter-spacing: .02em;
  }
  .ash-rail > button:hover { background: rgba(238, 214, 160, .05); color: var(--ash-parchment); }
  .ash-rail > button.active {
    color: var(--ash-brass-300); background: rgba(201, 162, 75, .09);
    box-shadow: inset 2px 0 0 var(--ash-brass-500);
  }
  .ash-main { padding: 34px 40px 60px; max-width: 760px; }
  .ash-mobile-nav { display: none !important; }
  .ash-main .ash-brand { visibility: hidden; }
}

/* ── Brand & header ── */
.ash-brand { display: flex; align-items: center; gap: 11px; }
.ash-mark {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1px solid rgba(238, 214, 160, .55);
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(238, 214, 160, .14), transparent 60%);
}
.ash-mark::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(145deg, var(--ash-brass-300), var(--ash-brass-700));
  box-shadow: 0 0 16px rgba(201, 162, 75, .55);
}
.ash-brand b { font-family: var(--ash-font-display); font-size: 17px; letter-spacing: .12em; display: block; }
.ash-brand small { font-family: var(--ash-font-mono); font-size: 9px; letter-spacing: .24em; color: var(--ash-brass-500); display: block; margin-top: 2px; }

.ash-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; }
.ash-profile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ash-unlock-dot { font-size: 15px; line-height: 1; flex: none; }
.ash-profile b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ash-seat-coin {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ash-brass-300), var(--ash-brass-700));
  color: #1c1206; font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 1px rgba(238, 214, 160, .4), 0 4px 12px rgba(0, 0, 0, .45);
}

.ash-kicker {
  font-family: var(--ash-font-mono); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ash-brass-500); margin: 0 0 8px;
}
.ash-h1 {
  font-family: var(--ash-font-display); font-weight: 700;
  font-size: clamp(23px, 5.4vw, 31px); margin: 0; letter-spacing: .01em; text-wrap: balance;
}
.ash-subtitle { color: var(--ash-ink-300); font-size: 14px; margin-top: 7px; line-height: 1.5; }

/* ── Screens & entrance ── */
.ash-screen { display: none; }
.ash-screen.active { display: block; }
.ash-rise { opacity: 0; transform: translateY(14px); animation: ash-rise .55s cubic-bezier(.22, .8, .3, 1) forwards; }
.ash-rise.d1 { animation-delay: .06s; } .ash-rise.d2 { animation-delay: .14s; }
.ash-rise.d3 { animation-delay: .22s; } .ash-rise.d4 { animation-delay: .30s; }
@keyframes ash-rise { to { opacity: 1; transform: none; } }

/* ── Resume marquee: a miniature table, not a card ── */
.ash-resume {
  position: relative; overflow: hidden; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 16px; padding: 15px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, .28);
  background:
    radial-gradient(ellipse at 22% 50%, rgba(38, 120, 86, .28), transparent 55%),
    linear-gradient(180deg, rgba(22, 74, 56, .5), rgba(8, 23, 17, .9));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), inset 0 -14px 30px rgba(0, 0, 0, .25), 0 14px 34px rgba(0, 0, 0, .4);
  transition: border-color .2s, transform .2s;
}
.ash-resume:hover { border-color: rgba(238, 214, 160, .5); transform: translateY(-1px); }
.ash-resume.hidden { display: none; }
.ash-mini-table {
  flex: none; width: 84px; height: 46px; border-radius: 999px; position: relative;
  border: 2px solid #1a130c;
  background: radial-gradient(ellipse at 50% 40%, var(--ash-felt-650), var(--ash-felt-800) 75%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .35), inset 0 -8px 14px rgba(0, 0, 0, .35);
}
.ash-pip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ash-ink-500); }
.ash-pip.n1 { top: -4px; left: 17px; } .ash-pip.n2 { top: -4px; right: 17px; }
.ash-pip.n3 { top: 19px; left: -4px; } .ash-pip.n4 { top: 19px; right: -4px; }
.ash-pip.n5 { bottom: -4px; right: 15px; }
.ash-pip.you {
  bottom: -5px; left: 15px; width: 11px; height: 11px;
  background: linear-gradient(145deg, var(--ash-brass-300), var(--ash-brass-700));
  box-shadow: 0 0 0 1.5px rgba(238, 214, 160, .5);
  animation: ash-pulse 2.4s ease-in-out infinite;
}
@keyframes ash-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(238, 214, 160, .5); }
  50% { box-shadow: 0 0 0 1.5px rgba(238, 214, 160, .5), 0 0 14px 3px rgba(201, 162, 75, .45); }
}
.ash-resume .txt { flex: 1; min-width: 170px; }
.ash-resume .txt b { font-family: var(--ash-font-display); font-size: 16px; letter-spacing: .02em; }
.ash-resume .txt small { display: block; color: var(--ash-ink-300); font-size: 12.5px; margin-top: 4px; }
.ash-resume .go {
  flex: none; font-family: var(--ash-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ash-brass-300); border: 1px solid rgba(201, 162, 75, .4); border-radius: 999px;
  padding: 9px 15px; background: rgba(201, 162, 75, .07);
}

/* ── Play doors ── */
.ash-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
@media (max-width: 560px) { .ash-doors { grid-template-columns: 1fr; } }
.ash-door {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  border-radius: 18px; padding: 18px 16px 16px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  border: 1px solid var(--ash-line);
  background: linear-gradient(180deg, rgba(16, 42, 33, .92), rgba(8, 23, 17, .97));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.ash-door:hover { transform: translateY(-3px); border-color: rgba(201, 162, 75, .35); box-shadow: 0 20px 44px rgba(0, 0, 0, .5); }
.ash-door .suit {
  position: absolute; top: -14px; right: -8px;
  font-size: 88px; line-height: 1; color: rgba(238, 214, 160, .06);
  font-family: Georgia, serif; pointer-events: none;
  transition: transform .3s, color .3s;
}
.ash-door:hover .suit { transform: rotate(-8deg) scale(1.06); color: rgba(238, 214, 160, .11); }
.ash-door h3 { margin: 0; font-family: var(--ash-font-display); font-size: 18px; letter-spacing: .01em; }
.ash-door p { margin: 0; color: var(--ash-ink-300); font-size: 12.5px; line-height: 1.45; }
.ash-door .cta {
  margin-top: 8px; align-self: flex-start;
  font-family: var(--ash-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, .35); color: var(--ash-brass-300); background: rgba(201, 162, 75, .05);
}
.ash-door.primary { border-color: rgba(201, 162, 75, .4);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(201, 162, 75, .16), transparent 55%),
    linear-gradient(180deg, rgba(24, 52, 40, .95), rgba(8, 23, 17, .98));
}
.ash-door.primary .cta {
  border: 0;
  background: linear-gradient(160deg, var(--ash-brass-300), var(--ash-brass-500) 60%, var(--ash-brass-700));
  color: #1c1206; font-weight: 700; position: relative; overflow: hidden;
}
.ash-door.primary .cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 250, 235, .55), transparent);
  animation: ash-sheen 3.6s ease-in-out 1.1s infinite;
}
@keyframes ash-sheen { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }

/* ── Section titles / tiles ── */
.ash-section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 12px; gap: 10px; }
.ash-section-title h3 { font-family: var(--ash-font-display); font-size: 17px; margin: 0; letter-spacing: .02em; }
.ash-section-title button, .ash-section-title .note {
  border: 0; background: transparent; color: var(--ash-brass-500); cursor: pointer;
  font-size: 12px; font-family: var(--ash-font-mono); letter-spacing: .06em;
}
.ash-section-title .note { color: var(--ash-ink-500); text-transform: uppercase; font-size: 10px; letter-spacing: .14em; cursor: default; }
.ash-section-title button:hover { color: var(--ash-brass-300); }

.ash-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .ash-quick { grid-template-columns: 1fr 1fr; } .ash-quick .wide { grid-column: span 2; } }
.ash-tile {
  border: 1px solid var(--ash-line); border-radius: 16px; padding: 15px 16px;
  background: linear-gradient(180deg, rgba(12, 32, 25, .9), rgba(7, 19, 14, .95));
}
.ash-tile.tap { cursor: pointer; transition: border-color .2s, transform .2s; }
.ash-tile.tap:hover { border-color: rgba(201, 162, 75, .3); transform: translateY(-2px); }
.ash-tile .label { font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash-ink-500); margin-bottom: 9px; }
.ash-tile .value { font-family: var(--ash-font-display); font-size: 23px; letter-spacing: .01em; }
.ash-tile .meta { color: var(--ash-ink-300); font-size: 11.5px; margin-top: 5px; }
#auroraShell .pos { color: var(--ash-win); }
#auroraShell .neg { color: var(--ash-loss); }
.ash-soon {
  display: inline-block; margin-top: 6px; font-family: var(--ash-font-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ash-ink-500);
  border: 1px dashed rgba(117, 137, 127, .5); border-radius: 999px; padding: 4px 9px;
}

/* Clay-chip glyph preceding chip amounts */
.ash-chip {
  display: inline-block; width: .78em; height: .78em; border-radius: 50%; vertical-align: -2%;
  background: radial-gradient(circle at 35% 32%, #f0dfae, var(--ash-brass-500) 62%, var(--ash-brass-700));
  border: 1.5px dashed rgba(28, 18, 6, .55); margin-right: .22em;
}

/* ── My Game: ledger ── */
.ash-ledger {
  border: 1px solid rgba(201, 162, 75, .22); border-radius: 20px; padding: 20px 20px 16px; margin-top: 18px;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(201, 162, 75, .09), transparent 55%),
    linear-gradient(180deg, rgba(14, 36, 28, .95), rgba(7, 19, 14, .98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}
.ash-ledger .lbl { font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash-ink-500); }
.ash-ledger .net {
  font-family: var(--ash-font-display); font-size: clamp(36px, 9vw, 50px);
  letter-spacing: .01em; line-height: 1; margin: 8px 0 2px;
}
.ash-ledger .net .unit { font-size: .38em; color: var(--ash-ink-300); font-family: var(--ash-font-body); letter-spacing: .04em; margin-left: .35em; }
.ash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 16px; }
@media (max-width: 430px) { .ash-kpis { grid-template-columns: repeat(2, 1fr); } }
.ash-kpi { border: 1px solid var(--ash-line); border-radius: 13px; padding: 11px 12px; background: rgba(238, 214, 160, .025); }
.ash-kpi span { font-family: var(--ash-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ash-ink-500); }
.ash-kpi b { display: block; font-family: var(--ash-font-display); font-size: 21px; margin-top: 5px; }
.ash-ledger-foot { margin-top: 13px; font-family: var(--ash-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ash-ink-500); }

/* Last-10 diverging run. Polarity is encoded by direction from the baseline
   and the printed sign — color is redundant, never the sole channel. */
.ash-run { margin-top: 18px; }
.ash-run-head { display: flex; justify-content: space-between; font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash-ink-500); margin-bottom: 8px; }
@media (max-width: 460px) { .ash-run-head span:last-child { display: none; } }
.ash-runbars { display: flex; gap: 3px; align-items: center; height: 60px; }
.ash-runcol { flex: 1; display: flex; flex-direction: column; height: 100%; position: relative; }
.ash-runcol .up, .ash-runcol .dn { flex: 1; position: relative; }
.ash-runcol .bar { position: absolute; left: 15%; right: 15%; border-radius: 3px; }
.ash-runcol .up .bar { bottom: 0; background: linear-gradient(180deg, var(--ash-win), #4c9d74); border-radius: 3px 3px 1px 1px; }
.ash-runcol .dn .bar { top: 0; background: linear-gradient(180deg, #8a4238, var(--ash-loss)); border-radius: 1px 1px 3px 3px; }
.ash-runcol .zero { position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--ash-ink-500); }
.ash-runbase { height: 1px; background: rgba(238, 214, 160, .22); }
.ash-endlabels { display: flex; justify-content: space-between; font-family: var(--ash-font-mono); font-size: 9.5px; color: var(--ash-ink-500); margin-top: 6px; letter-spacing: .06em; }

/* Career stat chips (ring gauges) */
.ash-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .ash-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.ash-statchip {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
  border: 1px solid var(--ash-line); border-radius: 16px; padding: 15px 10px 13px;
  background: linear-gradient(180deg, rgba(12, 32, 25, .9), rgba(7, 19, 14, .95));
}
.ash-ring {
  position: relative; width: 70px; height: 70px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ash-brass-300) 0 calc(var(--p, 0) * 1%), rgba(238, 214, 160, .10) 0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.ash-ring::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #123227, #0a1d16 78%);
  border: 1px dashed rgba(201, 162, 75, .32);
}
.ash-ring b { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-family: var(--ash-font-display); font-size: 16px; }
.ash-statchip .s-label { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.ash-statchip .s-def { font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ash-ink-500); line-height: 1.5; }
.ash-stat-plains { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 430px) { .ash-stat-plains { grid-template-columns: 1fr; } }

/* Patterns + variant coins */
.ash-patterns { display: grid; gap: 8px; }
.ash-pattern {
  display: flex; gap: 10px; align-items: baseline;
  padding: 11px 14px; border-radius: 12px; background: rgba(238, 214, 160, .028);
  font-size: 13px; line-height: 1.45; color: #ddd6c6;
}
.ash-pattern::before { content: '—'; color: var(--ash-brass-700); flex: none; }
.ash-coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .ash-coins { grid-template-columns: 1fr; } }
.ash-coin-card {
  display: flex; align-items: center; gap: 13px; border: 1px solid var(--ash-line); border-radius: 16px; padding: 13px 15px;
  background: linear-gradient(180deg, rgba(12, 32, 25, .9), rgba(7, 19, 14, .95));
}
.ash-vcoin {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ash-font-mono); font-size: 10px; letter-spacing: .03em; color: var(--ash-brass-300);
  border: 1px solid rgba(201, 162, 75, .45);
  background: radial-gradient(circle at 35% 30%, rgba(238, 214, 160, .13), rgba(8, 23, 17, .6) 70%);
  box-shadow: inset 0 0 0 3px rgba(8, 23, 17, .8), inset 0 0 0 4px rgba(201, 162, 75, .25);
}
.ash-coin-card .cnum { font-family: var(--ash-font-display); font-size: 18px; }
.ash-coin-card small { display: block; color: var(--ash-ink-500); font-size: 11px; margin-top: 3px; }

/* ── Hand tickets ── */
.ash-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.ash-segmented { display: flex; padding: 3px; border: 1px solid var(--ash-line); background: rgba(238, 214, 160, .03); border-radius: 11px; }
.ash-segmented button { border: 0; background: transparent; color: var(--ash-ink-300); padding: 8px 13px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.ash-segmented button.active { background: rgba(201, 162, 75, .14); color: var(--ash-brass-300); }
.ash-segmented button:disabled { color: var(--ash-ink-500); cursor: not-allowed; opacity: .6; }
.ash-segmented button:disabled small { font-family: var(--ash-font-mono); font-size: 8px; letter-spacing: .1em; display: block; margin-top: 1px; }

.ash-tickets { display: grid; gap: 10px; }
.ash-ticket {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: 13px 16px; border-radius: 16px; border: 1px solid var(--ash-line);
  background: linear-gradient(180deg, rgba(13, 33, 26, .92), rgba(7, 19, 14, .96));
  transition: border-color .2s, transform .2s;
}
.ash-ticket:hover { border-color: rgba(201, 162, 75, .32); transform: translateY(-1px); }
.ash-ticket .id { display: flex; align-items: center; gap: 11px; min-width: 96px; }
.ash-ticket .hno { font-family: var(--ash-font-mono); font-size: 12px; color: var(--ash-ink-300); letter-spacing: .04em; }
.ash-ticket .mid { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ash-ticket .sum { min-width: 0; }
.ash-ticket .sum b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ash-ticket .sum small { display: block; color: var(--ash-ink-500); font-size: 11px; margin-top: 3px; font-family: var(--ash-font-mono); letter-spacing: .04em; }
.ash-ticket .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ash-ticket .net-amt { font-family: var(--ash-font-display); font-size: 17px; }
@media (max-width: 560px) {
  .ash-ticket { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 10px; }
  .ash-ticket .id { grid-column: 1; }
  .ash-ticket .right { grid-column: 2; grid-row: 1; }
  .ash-ticket .mid { grid-column: 1 / -1; }
}

.ash-seal {
  display: inline-block; font-family: var(--ash-font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid;
}
.ash-seal.won { color: var(--ash-brass-300); border-color: rgba(201, 162, 75, .5); background: rgba(201, 162, 75, .08); }
.ash-seal.scoop { color: #1c1206; border-color: var(--ash-brass-300); background: linear-gradient(160deg, var(--ash-brass-300), var(--ash-brass-500)); font-weight: 700; }
.ash-seal.lost { color: var(--ash-ink-300); border-color: rgba(168, 186, 176, .3); }
.ash-seal.chopped { color: var(--ash-ink-300); border-color: rgba(168, 186, 176, .3); background: rgba(168, 186, 176, .06); }
.ash-seal.folded { color: var(--ash-ink-500); border-color: rgba(117, 137, 127, .35); border-style: dashed; }
.ash-seal.incomplete, .ash-seal.voided { color: var(--ash-ink-500); border-color: rgba(117, 137, 127, .35); }

/* Mini playing cards */
.ash-fan { display: flex; flex: none; }
.ash-mcard {
  width: 27px; height: 37px; border-radius: 4px; flex: none;
  background: linear-gradient(170deg, #fbf6e8, var(--ash-card-face) 60%, #e8dfc8);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .07);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; line-height: 1;
  transition: transform .22s cubic-bezier(.22, .8, .3, 1);
}
.ash-mcard .r { font-size: 12.5px; }
.ash-mcard .s { font-size: 10px; margin-top: 1px; }
.ash-mcard.red { color: var(--ash-card-red); }
.ash-mcard.blk { color: var(--ash-card-black); }
.ash-fan .ash-mcard + .ash-mcard { margin-left: -13px; }
.ash-fan .ash-mcard:nth-child(2) { transform: rotate(4deg) translateY(1px); }
.ash-fan .ash-mcard:nth-child(3) { transform: rotate(8deg) translateY(2.5px); }
.ash-fan .ash-mcard:nth-child(4) { transform: rotate(12deg) translateY(4.5px); }
.ash-fan .ash-mcard:nth-child(5) { transform: rotate(16deg) translateY(7px); }
.ash-fan .ash-mcard:nth-child(n+6) { transform: rotate(20deg) translateY(9px); }
.ash-ticket:hover .ash-fan .ash-mcard + .ash-mcard { margin-left: -6px; }
.ash-ticket:hover .ash-fan .ash-mcard:nth-child(2) { transform: rotate(2deg); }
.ash-ticket:hover .ash-fan .ash-mcard:nth-child(3) { transform: rotate(4deg) translateY(1px); }
.ash-ticket:hover .ash-fan .ash-mcard:nth-child(4) { transform: rotate(6deg) translateY(2px); }
.ash-ticket:hover .ash-fan .ash-mcard:nth-child(5) { transform: rotate(8deg) translateY(3px); }
.ash-flat .ash-mcard { transform: none !important; }
.ash-flat { gap: 6px; }
.ash-flat .ash-mcard + .ash-mcard { margin-left: 0; }

/* ── Empty / unavailable states ── */
.ash-empty {
  border: 1px dashed rgba(117, 137, 127, .4); border-radius: 18px;
  padding: 30px 22px; text-align: center; margin-top: 16px;
}
.ash-empty h4 { font-family: var(--ash-font-display); font-size: 17px; margin: 0 0 8px; }
.ash-empty p { color: var(--ash-ink-300); font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.ash-empty .ash-empty-cta {
  cursor: pointer; border: 0; border-radius: 999px; padding: 10px 18px;
  font-family: var(--ash-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(160deg, var(--ash-brass-300), var(--ash-brass-500) 60%, var(--ash-brass-700));
  color: #1c1206; font-weight: 700;
}
.ash-skeleton { border-radius: 16px; height: 64px; background: linear-gradient(100deg, rgba(238,214,160,.04) 40%, rgba(238,214,160,.09) 50%, rgba(238,214,160,.04) 60%); background-size: 300% 100%; animation: ash-shimmer 1.4s infinite; }
@keyframes ash-shimmer { to { background-position: -300% 0; } }

/* ── Hand detail sheet ── */
.ash-scrim {
  position: fixed; inset: 0; z-index: 10800; background: rgba(3, 8, 6, .7); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.ash-scrim.open { opacity: 1; pointer-events: auto; }
.ash-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10900;
  max-width: 640px; margin: 0 auto; max-height: 82dvh; overflow-y: auto;
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(201, 162, 75, .3); border-bottom: 0;
  background: linear-gradient(180deg, #0e241c, #081711 40%);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
  padding: 14px 22px calc(26px + env(safe-area-inset-bottom));
  transform: translateY(102%); transition: transform .32s cubic-bezier(.22, .8, .3, 1);
  color: var(--ash-parchment); font-family: var(--ash-font-body);
}
.ash-sheet.open { transform: none; }
.ash-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(238, 214, 160, .25); margin: 0 auto 16px; }
.ash-sheet .sh-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.ash-sheet h3 { font-family: var(--ash-font-display); font-size: 19px; margin: 0; }
.ash-sheet .sh-head small { font-family: var(--ash-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ash-ink-500); text-transform: uppercase; }
.ash-sheet .close { border: 0; background: transparent; color: var(--ash-ink-300); font-size: 22px; cursor: pointer; padding: 4px 8px; }
.ash-blk-label { font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash-brass-500); margin: 18px 0 9px; }
.ash-acts { display: grid; gap: 6px; }
.ash-act {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 12px; border-radius: 10px; background: rgba(238, 214, 160, .03); font-size: 12.5px;
}
.ash-act .st { font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash-ink-500); }
.ash-act .amt { font-family: var(--ash-font-mono); font-size: 11.5px; color: var(--ash-ink-300); }
.ash-points { display: grid; gap: 6px; }
.ash-point { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ash-line); font-size: 12.5px; }
.ash-point .who { font-family: var(--ash-font-mono); font-size: 11px; letter-spacing: .04em; }
.ash-point .who.me { color: var(--ash-brass-300); }
.ash-settle {
  margin-top: 18px; padding: 13px 16px; border-radius: 13px; border: 1px solid rgba(201, 162, 75, .3);
  background: rgba(201, 162, 75, .06); display: flex; justify-content: space-between; align-items: center;
}
.ash-settle b { font-family: var(--ash-font-display); font-size: 18px; }
.ash-analysis-slot {
  margin-top: 13px; padding: 12px 16px; border-radius: 13px; border: 1px dashed rgba(117, 137, 127, .4);
  color: var(--ash-ink-500); font-size: 12px; line-height: 1.5;
}
.ash-missing { color: var(--ash-ink-500); font-size: 12px; font-style: italic; }

/* ── Footnote & mobile nav ── */
.ash-flow-note {
  margin-top: 26px; padding: 13px 18px; border-radius: 14px;
  border: 1px dashed rgba(201, 162, 75, .25); background: rgba(201, 162, 75, .04);
  color: var(--ash-ink-300); font-size: 12px; line-height: 1.55;
}
.ash-flow-note b { color: var(--ash-brass-300); }
.ash-mobile-nav {
  position: sticky; bottom: 0; z-index: 5; margin: 0 -18px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(4, 12, 9, .92); backdrop-filter: blur(16px);
  border-top: 1px solid var(--ash-line);
}
/* The nav is fixed to the shell overlay, not the page */
#auroraShell .ash-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; }
.ash-mobile-nav button {
  border: 0; background: transparent; cursor: pointer; border-radius: 11px;
  padding: 9px 6px 7px; color: var(--ash-ink-500);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ash-mobile-nav .glyph { font-size: 16px; line-height: 1; font-family: Georgia, serif; }
.ash-mobile-nav small { font-family: var(--ash-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.ash-mobile-nav button.active { color: var(--ash-brass-300); background: rgba(201, 162, 75, .09); }

/* ── Game Guide ── */
.agd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
@media (max-width: 640px) { .agd-cards { grid-template-columns: 1fr; } }
.agd-card {
  text-align: left; cursor: pointer; border-radius: 18px; padding: 16px;
  border: 1px solid var(--ash-line);
  background: linear-gradient(180deg, rgba(13, 33, 26, .92), rgba(7, 19, 14, .96));
  transition: border-color .2s, transform .2s;
}
.agd-card:hover { border-color: rgba(201, 162, 75, .35); transform: translateY(-2px); }
.agd-card-head { display: flex; gap: 12px; align-items: center; }
.agd-card-head b { font-family: var(--ash-font-display); font-size: 16.5px; display: block; }
.agd-card-head small { display: block; color: var(--ash-ink-300); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.agd-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.agd-facts span {
  font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ash-ink-500); border: 1px solid var(--ash-line); border-radius: 999px; padding: 4px 9px;
}

.agd-back {
  border: 0; background: transparent; cursor: pointer; color: var(--ash-brass-500);
  font-family: var(--ash-font-mono); font-size: 11.5px; letter-spacing: .08em;
  padding: 0 0 14px; display: block;
}
.agd-back:hover { color: var(--ash-brass-300); }

/* FAQ accordion (native <details>) */
.agd-faq { display: grid; gap: 10px; margin-top: 18px; }
.agd-qa {
  border: 1px solid var(--ash-line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(13, 33, 26, .92), rgba(7, 19, 14, .96));
}
.agd-qa summary {
  cursor: pointer; list-style: none; padding: 15px 18px;
  font-family: var(--ash-font-display); font-size: 15.5px; letter-spacing: .01em;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.agd-qa summary::-webkit-details-marker { display: none; }
.agd-qa summary::after { content: '+'; color: var(--ash-brass-500); font-family: Georgia, serif; font-size: 18px; flex: none; }
.agd-qa[open] summary::after { content: '−'; }
.agd-qa[open] summary { border-bottom: 1px solid var(--ash-line); }
.agd-qa > div { padding: 14px 18px 18px; }
.agd-qa p { margin: 0 0 10px; color: #ddd6c6; font-size: 13.5px; line-height: 1.6; }
.agd-qa p:last-child { margin-bottom: 0; }
.agd-qa p b, .agd-qa div b { color: var(--ash-parchment); }

/* Board diagram — rows/slots derived from GAME_VARIANTS at render time.
   Reveal identity is the printed number on each slot; color is redundant. */
.agd { margin-top: 6px; display: grid; gap: 9px; }
.agd-row { display: flex; align-items: center; gap: 12px; }
.agd-row-label {
  flex: none; width: 92px; text-align: right;
  font-family: var(--ash-font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash-ink-500); line-height: 1.35;
}
.agd-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.agd-slot {
  width: 30px; height: 41px; border-radius: 5px; display: grid; place-items: center;
  border: 1px solid rgba(238, 214, 160, .28);
  transition: box-shadow .2s, opacity .2s, border-color .2s;
}
.agd-slot span {
  font-family: var(--ash-font-mono); font-size: 10px; font-weight: 700;
  color: rgba(244, 234, 215, .8);
}
.agd-slot.r1 { background: linear-gradient(170deg, #1c5540, #12382b); }
.agd-slot.r2 { background: linear-gradient(170deg, #7d6430, #4f3f1e); }
.agd-slot.r3 { background: linear-gradient(170deg, #8a8368, #57523d); }
.agd-slot.lit { border-color: var(--ash-brass-300); box-shadow: 0 0 0 2px rgba(238, 214, 160, .55), 0 0 14px rgba(201, 162, 75, .5); }
.agd-slot.dim { opacity: .28; }
.agd-slot.mini { width: 20px; height: 27px; border-radius: 4px; }
.agd-slot.mini span { font-size: 8.5px; }
.agd-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.agd-leg {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ash-ink-300);
}
.agd-note { font-size: 12px; color: var(--ash-ink-500); line-height: 1.5; margin-top: 4px; }

/* Points list (tap to highlight the slots that point can use) */
.agd-points { display: grid; gap: 8px; }
.agd-point {
  text-align: left; cursor: pointer; border-radius: 13px; padding: 12px 14px;
  border: 1px solid var(--ash-line); background: rgba(238, 214, 160, .028);
  transition: border-color .2s;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px;
}
.agd-point:hover { border-color: rgba(201, 162, 75, .3); }
.agd-point.lit { border-color: var(--ash-brass-300); background: rgba(201, 162, 75, .08); }
.agd-point b { font-size: 13.5px; letter-spacing: .01em; }
.agd-point small { grid-column: 1 / -1; color: var(--ash-ink-300); font-size: 11.5px; line-height: 1.45; font-family: var(--ash-font-mono); letter-spacing: .02em; }
.agd-share {
  font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ash-brass-300); border: 1px solid rgba(201, 162, 75, .4); border-radius: 999px; padding: 3px 8px;
}
.agd-points-hint { margin-top: 9px; font-size: 11.5px; color: var(--ash-ink-500); font-style: italic; }

/* Hole-card fan in the guide */
.agd-hole { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; border-radius: 12px; padding: 8px; transition: box-shadow .2s; }
.agd-hole.lit { box-shadow: 0 0 0 2px rgba(238, 214, 160, .55), 0 0 14px rgba(201, 162, 75, .5); }
.agd-hole .ash-mcard.down {
  background:
    repeating-linear-gradient(45deg, rgba(238, 214, 160, .16) 0 2px, transparent 2px 5px),
    linear-gradient(170deg, #12382b, var(--ash-felt-800));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(201, 162, 75, .3);
}
.agd-hole-cap { margin-left: 8px; font-family: var(--ash-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ash-ink-500); }

/* Origin badge + note (hlh + countdown only — see aurora-guide.js ENHANCED) */
.agd-origin-badge {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-family: var(--ash-font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; font-weight: 700;
}
.agd-origin-badge.real { border: 1px solid var(--ash-brass-300); background: rgba(201, 162, 75, .14); color: var(--ash-brass-300); }
.agd-origin-badge.original { border: 1px dashed rgba(201, 162, 75, .55); background: transparent; color: var(--ash-brass-300); }
.agd-origin-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ash-ink-500); line-height: 1.5; max-width: 640px; }

/* Worked-example tab strip (multiple examples per variant — "See it in
   action" switcher). Pill look borrowed from .agd-share's badge treatment so
   it reads as part of the same system, not a new control. */
.agd-ex-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.agd-ex-tab {
  cursor: pointer; border-radius: 999px; padding: 6px 12px;
  border: 1px solid var(--ash-line); background: rgba(238, 214, 160, .028);
  font-family: var(--ash-font-mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ash-ink-300);
  transition: border-color .2s, background .2s, color .2s;
}
.agd-ex-tab:hover { border-color: rgba(201, 162, 75, .3); }
.agd-ex-tab.active {
  border-color: var(--ash-brass-300); background: rgba(201, 162, 75, .14);
  color: var(--ash-brass-300); font-weight: 700;
}
.agd-ex-panels { display: grid; }
.agd-ex-panel[hidden] { display: none; }

/* Worked example ("See it in action" — hlh + countdown only) */
.agd-ex { display: grid; gap: 12px; }
.agd-ex-rule {
  font-family: var(--ash-font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ash-brass-500); margin: 0;
}
.agd-ex-board, .agd-ex-board-row { display: flex; gap: 6px; flex-wrap: wrap; }
.agd-ex-board.stair { flex-direction: column; gap: 6px; }
.agd-ex-contenders { display: grid; gap: 8px; }
.agd-ex-contender {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px;
  border: 1px solid var(--ash-line); background: rgba(238, 214, 160, .028);
  transition: border-color .2s, background .2s;
}
.agd-ex-contender.winner { border-color: var(--ash-brass-300); background: rgba(201, 162, 75, .08); }
.agd-ex-trophy { width: 16px; text-align: center; font-size: 14px; flex: none; }
.agd-ex-who { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.agd-ex-who b { font-size: 13px; }
.agd-ex-who small { color: var(--ash-ink-300); font-size: 11px; font-family: var(--ash-font-mono); letter-spacing: .02em; }
.agd-ex-cards { display: flex; gap: 4px; flex-wrap: wrap; }
.agd-ex.revealed .agd-ex-card.win .ash-mcard { box-shadow: 0 0 0 2px var(--ash-brass-300), 0 0 12px rgba(201, 162, 75, .5), 0 1px 0 rgba(0, 0, 0, .35); }
.agd-ex-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 2px; }
.agd-ex-reveal {
  cursor: pointer; border: 0; border-radius: 999px; padding: 10px 18px;
  font-family: var(--ash-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(160deg, var(--ash-brass-300), var(--ash-brass-500) 60%, var(--ash-brass-700));
  color: #1c1206; font-weight: 700;
}
.agd-ex-verdict { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ash-parchment); }

/* Strategy tip (hlh: real tip / countdown: honest no-borrowed-strategy note) */
.agd-tip {
  border-radius: 16px; padding: 16px 18px; border: 1px solid var(--ash-line);
  background: linear-gradient(180deg, rgba(13, 33, 26, .92), rgba(7, 19, 14, .96));
}
.agd-tip.real { border-color: rgba(201, 162, 75, .35); }
.agd-tip-kicker { font-family: var(--ash-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash-brass-500); margin: 0 0 8px; }
.agd-tip h4 { font-family: var(--ash-font-display); font-size: 15.5px; margin: 0 0 8px; }
.agd-tip p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #ddd6c6; }
.agd-tip.none p { color: var(--ash-ink-300); }

/* ── Body-level exceptions (the only rules outside #auroraShell) ── */
/* The portrait rotation gate is a table concern. The shell is deliberately
   usable in portrait (implementation brief §13), so suppress the gate while
   a shell screen is on top — it returns the moment the shell hands off to
   the table flow and removes this class. */
body.aurora-shell-open #auroraOrientationGate { display: none !important; }
/* Bug fix (2026-07-29): the pre-game #homeOverlay screens (name entry, Create
   Table config incl. the Claude-seats picker, lobby wait) are plain forms —
   no more landscape-dependent than the shell's own doors — but goFriends()
   drops aurora-shell-open the instant it hands off from the shell, so a
   still-portrait phone got the opaque gate slammed over Create Table with
   zero warning and every tap silently eaten (the gate, not the button,
   received the tap). Extends the same suppression through that whole
   pre-game window; mp.js's enterOnlineMode() clears this class the moment
   real gameplay starts (mg:online-mode) — NOT aurora-shell.js, which never
   even loads for invite-link (?join=) guests and was the P0 black-screen
   root cause until this was moved (2026-08-08). */
body.aurora-preflight-open #auroraOrientationGate { display: none !important; }
/* The shell overlay owns scrolling while open; stop the page underneath
   from double-scrolling behind it (iOS rubber-banding). */
body.aurora-shell-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #auroraShell *, #auroraShell *::before, #auroraShell *::after,
  .ash-sheet, .ash-scrim {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}