/* Caught Up — "real phone" light theme.
   Loaded after the inline styles; equal-specificity rules here win, so this
   file owns the app's look: light iMessage-style thread, system phone font,
   player avatars on bubbles, belief meter. Gold stays as the brand accent. */
:root{
  --bg:#f6f1e6; --thread:#ffffff; --text:#161512; --text-dim:#8e897d;
  --line:#ece5d5; --bg-card:#ffffff; --bg-elev:#f7f2e6;
  --gold:#c9962e; --gold-bright:#e8b33d; --gold-dim:#e5d5ae;
  --danger:#ff3b30; --safe:#34c759; --blue:#007aff;
  --dark:#15151f;
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(30,24,8,.07);
  --sh-md:0 4px 14px rgba(30,24,8,.09);
  --sh-lg:0 10px 32px rgba(30,24,8,.14);
}
*{ -webkit-tap-highlight-color:transparent; }
body, body.splash-bg{
  background:var(--bg) url('assets/ui/bg-texture.jpg') top center / 900px auto repeat-y !important;
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  padding:0 0 40px;
}
body.splash-bg::before{ display:none; }
.app{
  max-width:430px; min-height:100vh; background:transparent;
  box-shadow:none; padding:0 14px 30px;
}

/* ---- fake phone status bar ---- */
.statusbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 10px 6px; font-size:14px; font-weight:600; color:var(--text);
}
.statusbar .sb-right{ display:flex; gap:5px; align-items:center; font-size:12px; letter-spacing:-.5px; }
.sb-batt{ width:22px; height:11px; border:1.5px solid #3c3c43; border-radius:3px; position:relative; }
.sb-batt::after{ content:''; position:absolute; inset:1.5px; right:5px; background:#3c3c43; border-radius:1px; }
.sb-batt::before{ content:''; position:absolute; right:-4px; top:2.5px; width:2px; height:4px; background:#3c3c43; border-radius:0 1px 1px 0; }

.brand{ margin:2px 0 14px; align-items:center; }
/* Sticker-style CSS wordmark — always crisp, never a cropped image */
.wordmark{ display:flex; align-items:center; gap:6px; user-select:none; }
.wm-caught{ font-size:23px; font-weight:900; font-style:italic; letter-spacing:-0.035em; color:var(--text); }
.wm-up{ font-size:17px; font-weight:900; font-style:italic; letter-spacing:-0.02em; color:#241a02;
  background:linear-gradient(160deg, var(--gold-bright), #d99f26); padding:2px 9px 3px; border-radius:9px;
  transform:rotate(-4deg); box-shadow:0 2px 7px rgba(200,150,40,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.brand h1{ color:var(--text); }
.brand .tag{ color:var(--text-dim); font-family:inherit; font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; }

/* ---- splash screen: logo, tagline, Play — nothing else ---- */
.splash-wordmark{ animation:splashLogo .65s cubic-bezier(.2,.9,.3,1.15) both; }
.splash-tagline{ animation:splashRise .5s ease .35s both; }
.splash-play-btn{ animation:splashRise .5s ease .55s both; position:relative; }
.splash-play-btn::after{ content:''; position:absolute; inset:-4px; border-radius:38px;
  border:2px solid var(--gold-bright); opacity:0; animation:splashPulse 2.4s ease 1.6s infinite; pointer-events:none; }
@keyframes splashLogo{ from{ opacity:0; transform:scale(.7) rotate(-4deg); } to{ opacity:1; transform:scale(1) rotate(0); } }
@keyframes splashRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes splashPulse{ 0%{ opacity:.55; transform:scale(1); } 70%{ opacity:0; transform:scale(1.12); } 100%{ opacity:0; } }
.splash-screen{ min-height:100vh; box-sizing:border-box; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:64px; padding:24px; text-align:center; }
.splash-center{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.splash-wordmark .wm-caught{ font-size:48px; }
.splash-wordmark .wm-up{ font-size:35px; padding:5px 18px 8px; border-radius:16px; }
.splash-tagline{ color:var(--text-dim); font-size:13.5px; font-weight:600; max-width:230px; line-height:1.4; }
.splash-play-btn{ width:min(240px, 80vw); font-size:18px; font-weight:800; padding:17px 0; border-radius:34px; }

/* ---- cards / panels ---- */
.card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); }
body.splash-bg .card{ background:var(--bg-card); backdrop-filter:none; }
label{ color:var(--text-dim); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
.section-label{ display:block; color:var(--text-dim); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.03em; margin:4px 2px 8px; }
input[type=text]{ background:var(--bg-elev); border:1px solid var(--line); color:var(--text); }
input[type=text]::placeholder{ color:#b8ae94; }
button{ font-family:inherit; }
.btn-primary{ background:var(--gold-bright); color:#241a02; box-shadow:0 2px 8px rgba(200,150,40,.4);
  display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn-primary:disabled{ background:#efe4c8; color:#b9a877; box-shadow:none; }
.btn-danger{ background:#ffecec; color:var(--danger); border:1px solid #ffc9c5; }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--text-dim); }
.player-chip{ background:var(--bg-elev); border:1px solid var(--line); color:var(--text); box-shadow:var(--sh-sm); }
.player-chip{ cursor:pointer; }
.chip-av{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
div.chip-av{ display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; }
.player-chip button{ color:var(--danger); }
.host-crown{ display:inline-flex; vertical-align:-4px; margin-left:1px; }
.host-crown svg{ width:15px; height:15px; }

/* ---- hero banner (setup / join screens) ---- */
.hero-banner{ border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px; box-shadow:var(--sh-md);
  border:1px solid var(--line); }
.hero-banner img{ width:100%; display:block; aspect-ratio:16/7; object-fit:cover; }
.hero-banner.small img{ aspect-ratio:16/6; }

/* ---- mode tiles ---- */
.mode-toggle{ display:flex; gap:8px; margin-top:8px; margin-bottom:0; }
.mode-tile{ flex:1; background:var(--bg-elev); border:1.5px solid var(--line); border-radius:var(--r-md);
  color:var(--text-dim); padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center;
  gap:4px; transition:transform .12s, border-color .12s; }
.mode-tile .mode-icon{ color:var(--text-dim); margin-bottom:2px; }
.mode-tile .mode-label{ font-size:12.5px; font-weight:700; color:var(--text); line-height:1.25; }
.mode-tile small{ font-size:10px; color:var(--text-dim); }
.mode-tile.selected{ border-color:var(--gold-bright); background:#fdf6e4; box-shadow:var(--sh-sm); }
.mode-tile.selected .mode-icon{ color:var(--gold); }
.mode-tile:active{ transform:scale(.97); }

/* ---- host / join choice cards ---- */
.choice-card{ width:100%; display:flex; align-items:center; gap:14px; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--r-lg); padding:16px; margin-bottom:10px; box-shadow:var(--sh-sm); text-align:left; }
.choice-card:active{ transform:scale(.985); }
.choice-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.choice-icon.host{ background:#fdf6e4; color:var(--gold); }
.choice-icon.join{ background:#eaf3ff; color:var(--blue); }
.choice-text{ display:flex; flex-direction:column; gap:2px; }
.choice-text b{ font-size:15px; font-weight:700; color:var(--text); }
.choice-text small{ font-size:11.5px; color:var(--text-dim); line-height:1.3; }

/* ---- thread header (contact card) ---- */
/* Contact-card header: persona-colored ring, presence dot, soft glow —
   reads like opening their contact page mid-argument. */
.thread-head{ position:relative; text-align:center; padding:12px 0 12px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.thread-head::before{ content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:170px; height:100px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--pc, #e8b33d) 24%, transparent), transparent); }
.th-avatar{ position:relative; width:80px; margin:0 auto 7px; }
.thread-head .persona-avatar, .thread-head .persona-dot{ width:80px; height:80px; border-radius:50%; display:block;
  object-fit:cover; border:3px solid #fff; outline:3px solid var(--pc, var(--gold-bright));
  box-shadow:0 5px 16px rgba(0,0,0,.18); margin:0; }
.th-dot{ position:absolute; bottom:2px; right:2px; width:17px; height:17px; border-radius:50%;
  background:var(--safe); border:2.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.th-dot.typing{ background:var(--gold-bright); animation:pulseDot 1s ease infinite; }
@keyframes pulseDot{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.3) } }
.thread-head .persona-name{ font-size:16.5px; font-weight:800; position:relative; }
.th-presence{ font-size:11px; color:var(--text-dim); font-style:italic; margin-top:1px; position:relative; }
.thread-head .sub{ font-size:11px; color:var(--text-dim); margin-top:3px; position:relative; }

/* ---- belief meter ---- */
.belief{ margin:8px auto 0; max-width:300px; }
.belief .b-track{ height:10px; border-radius:8px; position:relative;
  background:linear-gradient(90deg, #ff3b30, #ffcc00, #34c759); }
.belief .b-marker{ position:absolute; top:-4px; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2.5px solid #3c3c43; transform:translateX(-50%); transition:left .6s cubic-bezier(.3,1.2,.4,1); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.belief .b-labels{ display:flex; justify-content:space-between; font-size:10px; font-weight:700;
  color:var(--text-dim); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }
.mood-track, .mood-label{ display:none; }

/* ---- message thread ---- */
.transcript{ gap:10px; padding:8px 2px; max-height:380px; }
.msg-row{ display:flex; gap:8px; align-items:flex-end; max-width:88%; align-self:flex-start; }
.msg-row.mine{ align-self:flex-end; flex-direction:row-reverse; }
.msg-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.msg-avatar.fallback{ display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.msg-col{ display:flex; flex-direction:column; }
.msg-name{ font-size:10.5px; font-weight:600; color:var(--text-dim); margin:0 6px 2px; }
.msg-row.mine .msg-name{ text-align:right; }
.bubble{ background:#eeece4; color:#161512; border-radius:18px 18px 18px 5px; font-size:15px;
  line-height:1.35; padding:9px 13px; max-width:100%; align-self:auto; }
.bubble.you{ background:var(--blue); color:#fff; border-radius:18px 18px 5px 18px; }
.bubble .who{ display:none; }
.photo-bubble{ background:var(--blue); }
.photo-caption{ color:rgba(255,255,255,.85); }

.context-note{ align-self:stretch; background:linear-gradient(180deg,#fffaf0,#fdf6e4); border:1px solid #ecd9a8;
  border-left:4px solid var(--gold-bright); color:var(--text); border-radius:12px; text-align:left;
  box-shadow:var(--sh-sm); font-size:12.5px; line-height:1.55; padding:12px 14px; }
.context-note .cn-label{ display:flex; align-items:center; gap:6px; color:var(--gold); font-family:inherit;
  font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.context-note .cn-label svg{ flex-shrink:0; }
.system-note{ background:#fdf6e4; border:1px solid #ecd9a8; color:#8a6410; font-family:inherit; font-weight:600; font-size:11.5px; }
.evidence-mock{ background:var(--bg-elev); border:1px dashed #c9c9d2; font-family:'JetBrains Mono',monospace; }
.evidence-mock .ev-label{ color:var(--gold); }
.evidence-mock .ev-line{ color:var(--text-dim); }
.evidence-photo{ border:4px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.18); border-radius:12px; }

.accused-banner{ color:#0a7d3e; background:#e8f8ee; border-radius:10px; padding:6px 10px;
  font-family:inherit; font-weight:700; font-size:10.5px; margin:8px 0 2px; text-align:center; }
.accused-banner[style*="danger"]{ background:#ffecec; }
.turn-banner{ color:#8a6410; background:#fdf6e4; border-radius:10px; padding:7px 10px;
  font-family:inherit; font-weight:700; font-size:11px; text-align:center; }
.turn-banner.mine{ color:#0a7d3e; background:#e8f8ee; }
.loading{ color:var(--text-dim); font-family:inherit; font-weight:600; }

/* ---- hand cards (mini versions of the printed cards) ---- */
.frag{ background:#fff; border:1.5px solid var(--line); border-radius:12px; color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.06); }
.frag:hover{ border-color:#b8b8c2; }
.frag .frag-tag{ color:var(--gold); font-family:inherit; font-weight:800; }
.pt-badge{ color:var(--text-dim); background:var(--bg-elev); border:1px solid var(--line); font-family:inherit; font-weight:700; }
.frag.whosmans{ border-color:#c85cff; background:#faf3ff; }
.frag.whosmans .frag-tag{ color:#a13fd6; }
.frag.kcard{ border-color:#ff8d86; background:#fff3f2; color:var(--danger); }
.frag.emoji{ background:#f0fbf8; border-color:#8fe6d3; }
.frag.photo{ border-color:#7cc0ec; background:#f0f8ff; }
.frag.photo .frag-tag{ color:#1a76b5; }
.frag.new-card{ box-shadow:0 0 0 2px var(--safe); }
.new-tag{ color:#0a7d3e; background:#e8f8ee; font-family:inherit; font-weight:800; }

.search-item{ background:var(--bg-elev); border:1px solid var(--line); color:var(--text); border-radius:10px; }
.search-item .tag{ color:var(--gold); font-family:inherit; font-weight:700; }
.wager-tier{ background:var(--bg-elev); border:1px solid var(--line); color:var(--text); font-family:inherit; font-weight:700; }
.wager-tier.selected{ border-color:var(--gold-bright); background:#fdf6e4; color:#8a6410; }
.wager-target{ background:var(--bg-elev); border:1px solid var(--line); color:var(--text); border-radius:10px; }
.wager-target.selected{ border-color:var(--danger); background:#ffecec; }

.verdict-believed{ background:#e8f8ee; color:#0a7d3e; font-family:inherit; font-weight:800; }
.verdict-caught{ background:#ffecec; color:var(--danger); font-family:inherit; font-weight:800; }
.score-grid .label{ color:var(--text-dim); }
.leaderboard-row{ border-bottom:1px solid var(--line); }
.leaderboard-pts{ color:var(--gold); font-family:inherit; font-weight:800; }
.error{ color:var(--danger); background:#ffecec; border:1px solid #ffc9c5; font-family:inherit; }
.footer-note{ color:var(--text-dim); }

.join-banner{ background:#fdf6e4; border:1px solid #ecd9a8; color:#8a6410; border-radius:10px;
  padding:8px 12px; font-size:13px; font-weight:600; text-align:center; margin-bottom:12px; }

/* ---- "you're invited" landing (shared link) ---- */
.invite-card{ text-align:center; padding:22px 18px 20px; animation:splashRise .4s ease both; }
.invite-emoji{ font-size:44px; line-height:1; margin-bottom:10px; animation:splashLogo .55s cubic-bezier(.2,.9,.3,1.15) both; }
.invite-title{ font-size:19px; font-weight:800; line-height:1.35; margin-bottom:6px; }
.invite-title b{ color:var(--gold); }
.invite-sub{ font-size:13px; color:var(--text-dim); line-height:1.5; margin-bottom:14px; }
.invite-lobby{ display:flex; align-items:center; justify-content:center; gap:0; margin:10px 0 4px; }
.invite-av{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); margin-left:-8px; }
.invite-av:first-child{ margin-left:0; }
.invite-lobby span{ font-size:12px; font-weight:600; color:var(--text-dim); margin-left:8px; }
.invite-card .avatar-strip{ justify-content:center; }
.invite-card label{ display:block; text-align:left; }
.invite-join-btn{ width:100%; margin-top:14px; font-size:16.5px; padding:15px 0; border-radius:28px; }
.invite-alt{ width:100%; margin-top:10px; font-size:12.5px; }

/* ---- header menu (leave / end game) ---- */
.brand-right{ display:flex; align-items:center; gap:10px; }
.header-menu-wrap{ position:relative; }
.icon-btn{ width:32px; height:32px; padding:0; border-radius:50%; background:var(--bg-elev);
  border:1px solid var(--line); color:var(--text-dim); display:flex; align-items:center; justify-content:center; }
.icon-btn:active{ background:#eee6d1; }
.header-menu{ position:absolute; top:40px; right:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-lg); min-width:210px; overflow:hidden; z-index:20; }
.menu-item{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:none;
  padding:13px 15px; font-size:13.5px; font-weight:600; color:var(--text); text-align:left;
  border-bottom:1px solid var(--line); }
.menu-item:last-child{ border-bottom:none; }
.menu-item.danger{ color:var(--danger); }

/* ---- game options: pack shelf + avatar picker ---- */
/* The box art reserves its lower third for the title, like a real game box —
   so the name/tagline/details sit ON the art, not stacked under it. */
.pack-rail{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 12px; margin:0 -2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pack-rail::-webkit-scrollbar{ display:none; }
.pack-box{ position:relative; flex:0 0 168px; width:168px; aspect-ratio:2/3; border-radius:var(--r-md);
  background:var(--bg-card); border:1.5px solid var(--line); box-shadow:var(--sh-md); overflow:hidden; cursor:pointer; }
.pack-box.locked{ cursor:default; }
.pack-box.selected{ border-color:var(--gold-bright); box-shadow:0 0 0 2px rgba(232,179,61,.3), var(--sh-md); }
.pack-box-art{ position:absolute; inset:0; background-size:cover; background-position:center top;
  display:flex; align-items:flex-start; justify-content:center; padding-top:18%; }
.pack-box-icon{ font-size:40px; }
.pack-box-icon.big{ font-size:52px; }
.pack-box-badge{ position:absolute; top:8px; left:8px; background:rgba(20,16,6,.55); color:#fff;
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px;
  border-radius:20px; display:flex; align-items:center; gap:4px; backdrop-filter:blur(2px); }
.pack-box.selected .pack-box-badge{ background:var(--gold-bright); color:#241a02; }
.pack-box-badge.price{ background:#1c1917; color:var(--gold-bright); }
.pack-box-rating{ position:absolute; top:8px; right:8px; background:rgba(255,255,255,.85); color:var(--text);
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 7px; border-radius:20px; }

/* ---- unlock sheet (buy or redeem a box code) ---- */
.unlock-box{ margin-top:12px; border:1.5px solid var(--gold-dim); border-radius:14px; padding:12px;
  background:linear-gradient(180deg,#fffdf6,#fff); }
.unlock-box label{ margin-top:0; }
.unlock-price{ font-size:17px; font-weight:800; color:var(--text); margin-bottom:8px; }
.unlock-price span{ font-size:11px; font-weight:600; color:var(--text-dim); }
.unlock-divider{ display:flex; align-items:center; gap:10px; margin:10px 0 8px; color:var(--text-dim);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.unlock-divider::before, .unlock-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.unlock-success{ text-align:center; font-size:16px; font-weight:800; color:#0a7d3e; padding:6px 0; }
.pack-box-info{ position:absolute; left:0; right:0; bottom:0; padding:26px 12px 11px;
  background:linear-gradient(180deg, rgba(246,241,230,0) 0%, rgba(246,241,230,.88) 34%, rgba(246,241,230,.97) 100%); }
.pack-box-name{ font-size:14px; font-weight:800; color:var(--text); line-height:1.2; }
.pack-box-tagline{ font-size:10.5px; color:#6d6754; margin-top:2px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pack-details-btn{ width:100%; margin-top:8px; background:rgba(255,255,255,.85); border:1px solid var(--line);
  color:var(--text-dim); font-size:10.5px; font-weight:700; padding:6px 0; border-radius:20px;
  display:flex; align-items:center; justify-content:center; gap:5px; }
@media (min-width: 430px){ .pack-box{ flex-basis:186px; width:186px; } }

/* ---- It's Lit toggle ---- */
.lit-card{ display:flex; gap:12px; align-items:flex-start; margin-top:14px; cursor:pointer;
  border:1.5px solid var(--line); padding:13px 14px; }
.lit-card.on{ border-color:#ff9d2e; background:linear-gradient(160deg,#fff7ec,#fff); }
.lit-check{ flex:0 0 24px; height:24px; border-radius:8px; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:#fff; margin-top:2px; }
.lit-card.on .lit-check{ background:#ff9d2e; border-color:#ff9d2e; }
.lit-text b{ font-size:14.5px; }
.lit-text small{ display:block; color:var(--text-dim); font-size:11px; line-height:1.5; margin-top:3px; }

/* ---- physical card entry (QR camera scan + search) ---- */
.scan-banner{ display:flex; align-items:center; gap:9px; background:var(--bg-elev); border:1.5px dashed #c2b896;
  border-radius:12px; padding:10px 12px; font-size:12px; color:var(--text-dim); line-height:1.4; }
.scan-banner span{ flex:1; }
.scan-banner .btn-sm{ width:auto; padding:7px 12px; font-size:11.5px; margin:0; }

.scan-view{ position:relative; width:100%; aspect-ratio:1; border-radius:16px; overflow:hidden;
  background:#0a0a0f; box-shadow:var(--sh-md); }
.scan-view video{ width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame{ position:absolute; inset:14%; border:3px solid var(--gold-bright); border-radius:18px;
  box-shadow:0 0 0 999px rgba(0,0,0,.28); pointer-events:none; }
.scan-hint{ position:absolute; left:0; right:0; bottom:14px; text-align:center; color:#fff;
  font-size:12.5px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.6); }

/* ---- score reveal pop ---- */
.score-pop{ position:fixed; top:16%; left:50%; transform:translateX(-50%); z-index:80;
  font-size:19px; font-weight:800; padding:12px 22px; border-radius:30px; box-shadow:var(--sh-lg);
  animation:scorePop 2.6s cubic-bezier(.2,.8,.3,1) forwards; pointer-events:none; white-space:nowrap; }
.score-pop.good{ background:#e8f8ee; color:#0a7d3e; border:1.5px solid #b4e6c6; }
.score-pop.bad{ background:#ffecec; color:var(--danger); border:1.5px solid #ffc9c5; }
@keyframes scorePop{
  0%{ opacity:0; transform:translateX(-50%) translateY(14px) scale(.85); }
  12%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1.06); }
  20%{ transform:translateX(-50%) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(-18px); }
}

.swap-btn{ margin-top:10px; font-size:11.5px; padding:9px 12px; }

/* ---- the Free Text card ---- */
.frag.freetext{ border:1.5px dashed var(--gold); background:linear-gradient(160deg,#fffbef,#fdf3d8);
  font-weight:700; color:#7a5c12; }
.frag.freetext .frag-tag{ color:var(--gold); }
textarea#ftInput{ width:100%; background:var(--bg-elev); border:1.5px solid var(--gold-dim); color:var(--text);
  border-radius:12px; padding:12px; font-family:inherit; font-size:15px; line-height:1.45; resize:none;
  margin-top:8px; }
textarea#ftInput:focus{ outline:none; border-color:var(--gold-bright); }

/* ---- It's Lit drink notes in the thread ---- */
.system-note.lit{ background:linear-gradient(90deg,#fff3e2,#ffe9d2); border:1px solid #ffd39e; color:#8a4b00;
  font-weight:700; }

/* ---- pack details modal ----
   Generous, airy layout: a real hero banner, roomy type, and the persona +
   sample-plays grouped into one distinct "preview panel" card so the sheet
   reads like a proper product page instead of a stack of cramped rows. */
.pack-modal-sheet{ max-width:430px; }
.pack-modal-art{ position:relative; aspect-ratio:16/8.5; background-size:cover; background-position:center 20%;
  display:flex; align-items:center; justify-content:center; }
.pack-modal-close{ position:absolute; top:12px; right:12px; background:rgba(20,16,6,.5); color:#fff; }
.pack-modal-body{ padding:18px 20px 26px; }
.pack-modal-body h3{ font-size:19px; font-weight:800; margin:0 0 7px; color:var(--text); letter-spacing:-.01em; }
.pack-modal-desc{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* preview panel — persona trigger + sample plays live inside one framed card */
.pd-preview-panel{ background:var(--bg-elev); border:1px solid var(--line); border-radius:18px;
  padding:14px 14px 16px; }
.pd-preview-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:800;
  color:var(--gold); margin:0 0 10px; }
.pd-preview-panel + .pd-preview-panel{ margin-top:10px; }

/* the persona's opening line, styled as a real received bubble */
.pd-example-row{ display:flex; gap:10px; align-items:flex-start; }
.pd-persona-thumb{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  outline:2px solid var(--pc, var(--gold-bright)); box-shadow:0 1px 3px rgba(0,0,0,.15); }
div.pd-persona-thumb.fallback{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; }
.pd-example-bubble{ position:relative; font-size:13px; line-height:1.5; padding:10px 14px 22px; min-width:0;
  max-height:88px; overflow:hidden; }
.pd-example-bubble::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:26px;
  background:linear-gradient(to bottom, rgba(238,236,228,0), rgba(238,236,228,1)); border-radius:0 0 18px 5px; }
.pd-example-bubble b{ font-weight:700; }

/* example plays — one card type per slide, swiped like flipping through texts.
   Each slide: a type tag (so the reader learns the card types) above a WIDE
   sent-style bubble — landscape, like a real message, not a portrait card. */
.swipe-hint{ float:right; font-size:10px; font-weight:700; color:var(--text-dim);
  text-transform:none; letter-spacing:0; animation:hintNudge 1.8s ease 3; }
@keyframes hintNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-4px); } }
.example-swiper{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
  margin-top:10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.example-swiper::-webkit-scrollbar{ display:none; }
.example-slide{ flex:0 0 100%; min-width:0; scroll-snap-align:center; }
.example-type-tag{ display:block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; margin:0 0 7px 2px; color:var(--gold); }
.example-type-tag small{ font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-dim); margin-left:4px; }
.example-type-tag.type-whosmans{ color:#7b3fc9; }
.example-type-tag.type-photo{ color:var(--blue); }
.example-bubble{ display:flex; align-items:center; gap:0; background:var(--blue); color:#fff;
  border-radius:18px 18px 5px 18px; overflow:hidden; min-height:76px;
  box-shadow:0 3px 8px rgba(0,90,200,.28); }
.example-bubble-img{ width:96px; height:96px; object-fit:cover; flex-shrink:0; display:block; align-self:stretch; }
.example-bubble-text{ padding:14px 16px; font-size:13.5px; line-height:1.45; min-width:0; }
.example-bubble.type-whosmans{ background:#7b3fc9; box-shadow:0 3px 8px rgba(123,63,201,.3); }
.swipe-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.swipe-dots span{ width:7px; height:7px; border-radius:50%; background:var(--gold-dim); transition:all .2s ease; }
.swipe-dots span.on{ background:var(--gold-bright); width:18px; border-radius:5px; }

.pack-modal-select{ width:100%; margin-top:14px; }
.pack-modal-select.selected-state{ background:var(--bg-elev); color:var(--text-dim); box-shadow:none;
  border:1.5px solid var(--gold-dim); }

/* ---- inline Stripe payment ---- */
.stripe-loading{ text-align:center; font-size:12px; color:var(--text-dim); padding:20px 0; }
#stripe-payment-element{ margin-top:4px; }
.avatar-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.av-opt{ width:44px; height:44px; border-radius:50%; object-fit:cover; cursor:pointer;
  border:2.5px solid transparent; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.av-opt.selected{ border-color:var(--gold-bright); }
.av-opt.custom{ border-color:var(--safe); }
.av-btn{ width:auto; padding:10px 12px; border-radius:22px; background:var(--bg-elev);
  border:1.5px dashed #c2b896; color:var(--text-dim); font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; }

/* ---- lobby ticket ---- */
.ticket{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); margin-bottom:16px; overflow:hidden; }
.ticket-top{ padding:16px 18px 14px; text-align:center; }
.ticket-name{ font-size:18px; font-weight:800; color:var(--text); }
.ticket-packs{ font-size:11px; color:var(--text-dim); margin-top:3px; }
.ticket-perf{ height:0; border-top:2px dashed var(--line); position:relative; }
.ticket-perf::before, .ticket-perf::after{ content:''; position:absolute; top:-9px; width:18px; height:18px;
  border-radius:50%; background:var(--bg); }
.ticket-perf::before{ left:-9px; } .ticket-perf::after{ right:-9px; }
.ticket-bottom{ padding:16px 18px 18px; text-align:center; background:linear-gradient(180deg,#fffdf6,#fff); }
.ticket-code-label{ font-size:10.5px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.ticket-code{ font-family:'JetBrains Mono',monospace; font-size:42px; font-weight:700; letter-spacing:.28em;
  color:var(--gold); margin:4px 0 12px; }
.ticket-hint{ font-size:10.5px; color:var(--text-dim); margin-top:8px; }

/* ---- game stats ---- */
.stats-card{ background:linear-gradient(180deg, #fffdf6, #fff); border-color:#ecd9a8; overflow:hidden; padding:0; }
.stats-banner{ position:relative; height:78px; overflow:hidden; }
.stats-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.stats-banner-label{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-weight:800;
  font-size:12.5px; letter-spacing:.03em; color:var(--text); text-transform:uppercase; }
.stats-card > *:not(.stats-banner){ padding-left:18px; padding-right:18px; }
.stats-card > .podium:last-child, .stats-card > .stats-rest:last-child,
.stats-card > .play-of-round:last-child, .stats-card > .menace-line:last-child{ padding-bottom:18px; }

.podium{ display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:18px 18px 6px; }
.podium-slot{ flex:1; max-width:110px; display:flex; flex-direction:column; align-items:center; }
.podium-icon{ margin-bottom:4px; }
.podium-slot.second .podium-icon, .podium-slot.third .podium-icon{ opacity:.9; }
.podium-av{ width:46px; height:46px; border-radius:50%; object-fit:cover; box-shadow:var(--sh-sm); border:2px solid #fff; }
div.podium-av{ display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:17px; }
.podium-slot.first .podium-av{ width:58px; height:58px; border-color:var(--gold-bright); }
.podium-name{ font-size:12.5px; font-weight:700; margin-top:5px; text-align:center; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium-base{ width:100%; margin-top:7px; border-radius:10px 10px 0 0; display:flex; align-items:flex-start;
  justify-content:center; padding-top:8px; font-weight:800; font-size:15px; color:#7a5c12; }
.podium-slot.first .podium-base{ background:linear-gradient(180deg,#ffe6a3,#f6cf6e); color:#5c4108; font-size:17px; }
.podium-slot.second .podium-base{ background:linear-gradient(180deg,#e9ecef,#cfd4da); color:#4d5157; }
.podium-slot.third .podium-base{ background:linear-gradient(180deg,#f0d3ae,#dba36a); color:#5c3d1c; }

.stats-rest{ margin-top:4px; }
.stat-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.stat-row:last-of-type{ border-bottom:none; }
.stat-rank{ width:22px; text-align:center; font-weight:800; font-size:14px; color:var(--text-dim); }
.stat-av{ width:36px; height:36px; border-radius:50%; object-fit:cover; box-shadow:0 1px 3px rgba(0,0,0,.2); }
div.stat-av{ display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:14px; }
.stat-name{ font-weight:700; font-size:14.5px; }
.stat-delta{ margin-left:auto; font-size:11px; font-weight:800; color:#0a7d3e; background:#e8f8ee; border-radius:12px; padding:3px 9px; white-space:nowrap; }
.stat-pts{ font-weight:800; font-size:19px; color:var(--gold); min-width:48px; text-align:right; }
.stat-row .stat-delta + .stat-pts{ margin-left:8px; }
.stat-row:not(:has(.stat-delta)) .stat-pts{ margin-left:auto; }
.podium-slot .stat-delta{ margin:4px 0 0; }
.play-of-round{ margin:14px 0 0; background:#fdf6e4; border:1px solid #ecd9a8; border-radius:12px;
  padding:10px 12px; font-size:13px; line-height:1.45; }
.play-of-round span{ color:var(--text-dim); font-size:12px; }
.menace-line{ margin:10px 0 0; font-size:12.5px; color:var(--text-dim); }

/* ---- modals: rules + onboarding ---- */
.modal-overlay{ position:fixed; inset:0; background:rgba(20,16,6,.45); display:flex;
  align-items:flex-end; justify-content:center; z-index:100; animation:fadeIn .15s ease; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.modal-sheet{ background:#fff; width:100%; max-width:430px; max-height:88vh; overflow-y:auto;
  border-radius:24px 24px 0 0; box-shadow:var(--sh-lg); animation:slideUp .22s cubic-bezier(.2,.8,.3,1); position:relative; }
@keyframes slideUp{ from{ transform:translateY(24px); opacity:.6 } to{ transform:none; opacity:1 } }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:1; }
.modal-header b{ display:flex; align-items:center; gap:8px; font-size:16px; color:var(--text); }
.modal-body{ padding:6px 20px 26px; font-size:13.5px; line-height:1.55; color:var(--text); }
.modal-body h4{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold);
  font-weight:800; margin:18px 0 6px; }
.modal-body h4:first-child{ margin-top:16px; }
.modal-body p{ color:var(--text); }
.rules-table{ width:100%; border-collapse:collapse; margin-top:4px; }
.rules-table td{ padding:8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.rules-table td:first-child span{ color:var(--text-dim); font-size:12px; }
.rules-table td:last-child{ text-align:right; font-weight:800; color:var(--gold); white-space:nowrap; padding-left:10px; }
.rules-table td:last-child small{ font-weight:600; color:var(--text-dim); margin-left:2px; }

.onboard-sheet{ border-radius:24px; margin:auto; max-width:400px; overflow:hidden; }
.modal-skip{ position:absolute; top:14px; right:14px; z-index:2; background:rgba(0,0,0,.35); color:#fff;
  border:none; border-radius:14px; padding:6px 12px; font-size:12px; font-weight:700; width:auto; }
.onboard-img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.onboard-body{ padding:20px 22px 24px; text-align:center; }
.onboard-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:14px; }
.onboard-dots .dot{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.onboard-dots .dot.on{ background:var(--gold-bright); width:20px; border-radius:5px; }
.onboard-body h3{ font-size:18px; font-weight:800; margin-bottom:8px; }
.onboard-body p{ font-size:13.5px; color:var(--text-dim); line-height:1.55; margin-bottom:18px; }
.onboard-body .btn-primary{ width:100%; }

.replay-link{ width:100%; background:none; border:none; color:var(--text-dim); font-size:12px;
  font-weight:600; padding:12px 0 4px; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ---- one-time hints ---- */
.hint{ display:flex; align-items:flex-start; gap:8px; background:#eaf3ff; border:1px solid #cde3fb;
  color:#0a4d8a; border-radius:12px; padding:10px 12px; font-size:12px; line-height:1.4; margin-bottom:8px; }
.hint svg{ flex-shrink:0; margin-top:1px; }
.hint span{ flex:1; }
.hint-dismiss{ width:auto; flex-shrink:0; background:#fff; border:1px solid #cde3fb; color:#0a4d8a;
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:10px; }

/* ---- round recap share ---- */
.recap-wrap{ text-align:center; }
.recap-wrap img{ width:62%; border-radius:14px; border:1px solid var(--line); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.recap-actions{ display:flex; gap:8px; margin-top:10px; }
.recap-actions button{ flex:1; }

/* ---- polish pass: typing bubble, loaders, micro-interactions ---- */
/* iMessage-style typing indicator: three bouncing dots in a received bubble */
.typing-row{ display:flex; flex-direction:column; gap:4px; padding:6px 0 2px; }
.typing-bubble{ background:#eeece4; border-radius:18px 18px 18px 5px; width:64px; height:38px;
  display:flex; align-items:center; justify-content:center; gap:5px;
  animation:typingIn .25s cubic-bezier(.2,.8,.3,1) both; }
.typing-bubble span{ width:8px; height:8px; border-radius:50%; background:#a9a49a;
  animation:typingDot 1.2s ease-in-out infinite; }
.typing-bubble span:nth-child(2){ animation-delay:.15s; }
.typing-bubble span:nth-child(3){ animation-delay:.3s; }
.typing-name{ font-size:11.5px; color:var(--text-dim); font-weight:600; padding-left:4px; }
@keyframes typingDot{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-5px); opacity:1; } }
@keyframes typingIn{ from{ opacity:0; transform:translateY(6px) scale(.9); } to{ opacity:1; transform:none; } }

/* inline loader: three pulsing dots before status text */
.loader-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 0; }
.loader-dots{ display:inline-flex; gap:4px; }
.loader-dots span{ width:6px; height:6px; border-radius:50%; background:var(--gold-bright);
  animation:typingDot 1.2s ease-in-out infinite; }
.loader-dots span:nth-child(2){ animation-delay:.15s; }
.loader-dots span:nth-child(3){ animation-delay:.3s; }

/* press feedback everywhere — buttons and cards respond to touch */
.btn-primary:active, .btn-ghost:active, .btn-danger:active, .icon-btn:active,
.pack-box:active, .frag:active, .av-opt:active, .wager-target:active, .menu-item:active{
  transform:scale(.97); transition:transform .08s ease; }
.btn-primary, .btn-ghost, .btn-danger, .icon-btn, .pack-box, .frag{ transition:transform .12s ease, box-shadow .12s ease; }

/* onboarding: content animates in on each step, back link stays quiet */
.onboard-img{ animation:fadeIn .3s ease both; }
.onboard-body h3, .onboard-body p{ animation:splashRise .3s ease both; }
.onboard-body p{ animation-delay:.06s; }
.onboard-back{ width:100%; margin-top:6px; font-size:12.5px; color:var(--text-dim); }

/* new messages slide into the thread instead of teleporting */
.transcript .msg-row:last-child, .transcript .system-note:last-child{
  animation:msgIn .28s cubic-bezier(.2,.8,.3,1) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }