/*
 * BetBattles components (Party Night kit). Use these; don't restyle them in owner files. Owner: ARCHITECT.
 *   app bar ....... .bar .bar-in .brand .wordmark .bar-right .wallet .wallet-open .wallet-l .wallet-add .me-av
 *   buttons ....... .btn .btn-go .btn-grape .btn-gold .btn-soft .btn-hot .btn-xl .btn-lg .btn-sm .btn-link .kbd .icon-btn
 *   surfaces ...... .card .tile .code-in .code-tiles .or .pill .pill.gold .tag (.bot .host .rnd .you .practice .met)
 *                   .un (your @username next to "You") .me-nm
 *   game kit ...... .tabs .tab .field .inp (.pre .post) .quick .q .odds .live .delta .seg .stepper .badge .flash
 *   moments ....... #toasts .toast · #overlay .cd .cd-num .timesup · #confetti
 *   sheets/menus .. #sheets .sheet .sheet-scrim .sheet-grab .sheet-head .sheet-body .is-modal · .menu-pop .menu-item
 *   social ........ .bubble (.bubble-emote .bubble-speech) · .eyes-badge · .mini-stack
 */

/* ---------- app bar ---------- */
.bar {
  position: sticky; top: 0; z-index: var(--z-bar);
  height: var(--bar-h);
  background: rgba(13, 10, 28, .74);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.bar:empty { display: none; }
.bar-in { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-radius: 12px; cursor: pointer; background: none; border: 0; padding: 0; -webkit-touch-callout: none; user-select: none; }
.brand .chip { transition: transform .3s var(--spring); }
.brand:hover .chip { transform: rotate(-12deg) scale(1.06); }
.wordmark { font: 800 21px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.wallet {
  display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px 0 4px;
  background: var(--night-2); border: 1px solid var(--line-2); border-radius: 14px;
}
.wallet-open { appearance: none; border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 12px; border-radius: 11px; color: var(--ink); }
.wallet-open:hover { background: rgba(255,255,255,.04); }
.wallet-l { font: 800 11px/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.wallet b { font: 800 16px/1 var(--f-ui); font-variant-numeric: tabular-nums; display: inline-block; }
.wallet-add {
  width: 32px; height: 32px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--go); color: var(--go-ink); font: 900 20px/1 var(--f-ui);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 var(--go-edge);
  display: grid; place-items: center; margin-bottom: 3px;
}
.wallet-add:active { transform: translateY(3px); box-shadow: 0 0 0 var(--go-edge); }
/* (fix) every tap target is at least 44px: the small + and the wallet button grow their hit areas, not their looks */
.wallet-add, .wallet-open, .me-av { position: relative; }
.wallet-add::after { content: ""; position: absolute; inset: -8px -6px; }
.wallet-open::after { content: ""; position: absolute; inset: -4px 0; }
.me-av::after { content: ""; position: absolute; inset: -3px; }
.wallet.bump b { animation: bump .5s var(--spring); }
.me-av { width: 44px; height: 44px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--line-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.me-av:hover { border-color: var(--line-3); }

@media (max-width: 700px) {
  .bar-in { gap: 10px; }
  .wordmark { font-size: 17px; }
  .wallet { height: 40px; }
  .wallet-open { height: 36px; padding: 0 6px 0 10px; }
  .wallet-l { display: none; }
  .wallet b { font-size: 15px; }
  .wallet-add { width: 28px; height: 28px; font-size: 18px; }
  .me-av { width: 40px; height: 40px; }
}
@media (max-width: 380px) { .wordmark { font-size: 15px; } .me-av { display: none; } }

/* ---------- surfaces ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%), var(--night-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 40px 80px -40px rgba(0,0,0,.7);
}
@media (max-width: 700px) { .card { padding: 20px; border-radius: 26px; } }

/* ---------- buttons: chunky, tactile (4px edge; press = down 4px, edge gone) ---------- */
.btn {
  --bg: var(--night-3); --edge: #110C26; --fg: var(--ink);
  appearance: none; border: 0; cursor: pointer; position: relative; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 20px; margin-bottom: 4px;
  border-radius: 14px;
  font: 800 15px/1 var(--f-ui); letter-spacing: .005em; color: var(--fg); white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 0 var(--edge), 0 12px 24px -8px rgba(0,0,0,.6);
  transition: transform .09s var(--out), box-shadow .09s var(--out), filter .15s, opacity .2s, background-color .2s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { filter: brightness(1.07); }
.btn:active, .btn.pressed { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 var(--edge), 0 4px 10px -4px rgba(0,0,0,.5); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; filter: saturate(.15) brightness(.62); }
.btn:disabled:active { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 0 var(--edge); }
.btn-go { --bg: var(--go); --edge: var(--go-edge); --fg: var(--go-ink); }
.btn-grape { --bg: var(--grape); --edge: var(--grape-edge); --fg: #fff; }
.btn-gold { --bg: var(--gold); --edge: var(--gold-edge); --fg: var(--gold-ink); }
.btn-soft { --bg: var(--night-4); --edge: #16102F; }
.btn-hot { --bg: var(--hot); --edge: var(--hot-edge); --fg: #fff; }
.btn-xl { height: 64px; width: 100%; font-size: 19px; border-radius: 18px; padding: 0 26px; }
.btn-lg { height: 56px; font-size: 17px; border-radius: 16px; }
.btn-sm { height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 11px; margin-bottom: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 var(--edge), 0 8px 16px -8px rgba(0,0,0,.6); }
.btn-sm:active { transform: translateY(3px); }
.btn small { font: 700 12px/1 var(--f-ui); opacity: .72; }
.btn .ic { flex: none; }
.btn-link { appearance: none; border: 0; background: none; cursor: pointer; padding: 8px 4px; min-height: 36px; font: 800 14.5px/1.2 var(--f-ui); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 4px; border-radius: 8px; }
.btn-link:hover { color: var(--ink); text-decoration-color: var(--ink-2); }
.btn-link.quiet { text-decoration: none; color: var(--ink-3); }
.kbd { font: 800 11px/1 var(--f-ui); padding: 4px 6px; border-radius: 6px; background: rgba(0,0,0,.18); opacity: .8; }
.btn.nudge { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 0 var(--edge), 0 0 0 0 rgba(123,97,255,0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 0 var(--edge), 0 0 0 8px rgba(123,97,255,.22); } }
.btn.replica { pointer-events: none; cursor: default; }
.icon-btn { appearance: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--night-2); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; flex: none; padding: 0; }
.icon-btn:hover { color: var(--ink); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 20px; height: 20px; }
@media (max-width: 700px) { .icon-btn { width: 44px; height: 44px; } }

/* ---------- tiles, code input ---------- */
.tile {
  appearance: none; cursor: pointer; height: 74px; border-radius: 18px;
  background: var(--night-2); border: 2px solid var(--line-2); color: var(--ink);
  font: 800 21px/1 var(--f-display); letter-spacing: -.02em;
  box-shadow: 0 4px 0 var(--edge-dark); margin-bottom: 4px;
  transition: transform .1s var(--out), border-color .15s, background .15s, box-shadow .1s;
}
.tile:hover { border-color: var(--line-3); }
.tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge-dark); }
.tile[aria-pressed="true"] { border-color: var(--go); background: linear-gradient(180deg, rgba(43,216,129,.2), rgba(43,216,129,.08)); box-shadow: 0 4px 0 var(--go-edge); }
.code-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.code-in input {
  width: 100%; height: 74px; border-radius: 18px; text-align: center; text-transform: uppercase;
  background: var(--night-0); border: 2px solid var(--line-2); caret-color: var(--grape);
  font: 800 30px/1 var(--f-display); letter-spacing: 0;
  box-shadow: inset 0 3px 0 rgba(0,0,0,.35);
  transition: border-color .15s, background .15s;
}
.code-in input:focus { outline: none; border-color: var(--grape); background: #120E26; }
.code-in input.filled { border-color: rgba(123,97,255,.55); }
.code-tiles { display: flex; gap: 8px; }
.code-tiles b {
  width: 50px; height: 60px; display: grid; place-items: center; border-radius: 14px;
  font: 800 28px/1 var(--f-display); color: #fff;
  background: linear-gradient(180deg, #8F7BFF, var(--grape)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 var(--grape-edge);
}
.or { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font: 800 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
@media (max-width: 700px) {
  .tile { height: 64px; font-size: 20px; }
  .code-in input { height: 66px; font-size: 26px; }
  .code-tiles b { width: 42px; height: 52px; font-size: 24px; border-radius: 12px; }
}

/* ---------- pills, tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--night-2); border: 1px solid var(--line-2); font: 800 13.5px/1 var(--f-ui); color: var(--ink); white-space: nowrap;
}
.pill svg { width: 15px; height: 15px; }
.pill.gold { background: var(--gold-soft); border-color: rgba(255,200,61,.35); color: var(--gold); }
.pill.grape { background: var(--grape-soft); border-color: rgba(123,97,255,.4); color: var(--grape-ink); }
.pill.go { background: var(--go-soft); border-color: rgba(43,216,129,.35); color: var(--go); }
.tag { display: inline-flex; align-items: center; font: 800 10px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; background: var(--grape-soft); color: #B9A9FF; white-space: nowrap; flex: none; }
.tag.rnd { background: rgba(255,255,255,.08); color: var(--ink-3); }
.tag.bot { background: rgba(51, 214, 224, .14); color: #7FE7EE; }
.tag.you { background: rgba(61, 181, 255, .16); color: #8FD3FF; }
.tag.host { background: var(--grape-soft); color: #B9A9FF; }
.tag.practice { background: rgba(255,255,255,.08); color: var(--ink-2); }
/* a regular you keep meeting: "Played 3×" (quiet, mixed case so it reads as words) */
.tag.met { background: rgba(255,255,255,.05); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); text-transform: none; letter-spacing: .01em; }
/* your @username next to "You" (seats, party rows, results): small and quiet, and the first thing to give way */
.un { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.2 var(--f-ui); color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.un::before { content: "· "; }
.me-nm { flex: none !important; }

/* ---------- game kit: tabs, fields, quick chips, info row ---------- */
.tabs { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--night-0); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { appearance: none; border: 0; cursor: pointer; height: 36px; padding: 0 14px; border-radius: 11px; background: transparent; font: 800 14px/1 var(--f-ui); color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none; }
.tab:hover { color: var(--ink-2); }
.tab.on, .tab[aria-selected="true"] { background: var(--night-3); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 var(--edge-dark); }
.tab:disabled { opacity: .45; cursor: not-allowed; }
.tab i { font-style: normal; font: 800 9.5px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.field { min-width: 0; }
.field > label, .field > .field-l { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 800 12px/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.field > label span, .field > .field-l span { text-transform: none; letter-spacing: 0; font-weight: 700; }
.inp { display: flex; align-items: center; height: 56px; padding: 0 8px 0 16px; border-radius: 16px; background: var(--night-0); border: 2px solid var(--line-2); box-shadow: inset 0 3px 0 rgba(0,0,0,.3); transition: border-color .15s; }
.inp:focus-within { border-color: var(--grape); }
.inp input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: none; font: 800 21px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.inp .pre, .inp .post { font: 800 19px/1 var(--f-ui); color: var(--ink-3); }
.inp .pre { margin-right: 4px; }
.inp .post { margin: 0 6px 0 4px; }
.inp .x { appearance: none; border: 0; background: none; color: var(--ink-3); font: 800 19px/1 var(--f-ui); padding: 0 6px; }
.inp.changed, .flash { animation: changed .8s var(--out); }
@keyframes changed { 0% { border-color: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 30%, transparent); } }
.inp.readonly { pointer-events: none; }
.inp.readonly input { color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; }
.quick { display: flex; gap: 6px; margin-top: 8px; }
.q { appearance: none; flex: 1; cursor: pointer; height: 34px; min-width: 0; border: 0; border-radius: 10px; background: var(--night-3); color: var(--ink-2); font: 800 13px/1 var(--f-ui); box-shadow: 0 3px 0 var(--edge-dark); margin-bottom: 3px; white-space: nowrap; }
.q:hover { color: var(--ink); }
.q:active { transform: translateY(3px); box-shadow: none; }
.q.on { background: var(--grape-soft); color: var(--grape-ink); box-shadow: 0 3px 0 var(--grape-edge); }
.q:disabled { opacity: .5; cursor: not-allowed; }
.odds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.odds span { display: block; font: 700 13px/1 var(--f-ui); color: var(--ink-3); margin-bottom: 6px; }
.odds b { font: 800 19px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.live { display: inline-flex; align-items: center; gap: 6px; font: 800 10.5px/1 var(--f-ui); letter-spacing: .1em; color: #fff; background: var(--hot); padding: 4px 7px; border-radius: 6px; text-transform: uppercase; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: askPulse 1.2s infinite; }
.delta { font: 800 12.5px/1 var(--f-ui); padding: 4px 7px; border-radius: 8px; background: var(--night-3); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta.up { background: var(--go-soft); color: var(--go); }
/* segmented control (game length, risk): .seg > button[aria-pressed] ; .seg.readonly for non-hosts */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--night-0); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { appearance: none; flex: 1 0 auto; min-width: 0; height: 36px; padding: 0 8px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--ink-3); font: 800 13.5px/1 var(--f-ui); white-space: nowrap; }
.seg button:hover { color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--night-3); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 var(--edge-dark); }
.seg.readonly button { cursor: default; }
.seg.readonly button:not([aria-pressed="true"]) { opacity: .55; }
.seg.readonly button[aria-pressed="true"] { background: var(--grape-soft); color: var(--grape-ink); box-shadow: none; }
.seg.pulse button[aria-pressed="true"] { animation: winPop .5s var(--spring); }
/* stepper: [−] value [+] */
.stepper { display: flex; align-items: center; gap: 6px; height: 56px; padding: 6px; border-radius: 16px; background: var(--night-0); border: 2px solid var(--line-2); }
.stepper button { appearance: none; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--night-3); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 var(--edge-dark); }
.stepper button:active { transform: translateY(3px); box-shadow: none; }
.stepper button:disabled { opacity: .4; }
.stepper .val { flex: 1; min-width: 0; text-align: center; font: 800 21px/1 var(--f-ui); font-variant-numeric: tabular-nums; background: none; border: 0; cursor: pointer; }
/* unread badge */
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--hot); color: #fff; font: 800 11.5px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.badge:empty { display: none; }

/* ---------- toasts ---------- */
#toasts { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(92vw, 520px); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: #241E45; border: 1px solid var(--line-2); box-shadow: 0 20px 40px -12px rgba(0,0,0,.7); font: 700 14.5px/1.35 var(--f-ui); color: var(--ink); animation: toastIn .45s var(--spring) both; pointer-events: auto; }
.toast > .chip, .toast > .ic { flex: none; }
.toast small { display: block; font-weight: 600; color: var(--ink-3); font-size: 13px; }
.toast.leave { animation: toastOut .3s var(--out) forwards; }
@keyframes toastIn { from { transform: translateY(20px) scale(.95); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(10px); opacity: 0; } }
@media (max-width: 700px) { #toasts { bottom: calc(100px + var(--safe-b)); } }
/* while a sheet or modal is open, toasts drop in from the top so they never cover its rows or its sticky button */
body.sheet-open:not([data-screen="game"]) #toasts { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }

/* ---------- overlay moments ---------- */
#overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; place-items: center; background: rgba(9, 7, 20, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#overlay.on { display: grid; animation: fade .25s var(--out); }
.cd { text-align: center; padding: 24px; }
.cd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.cd-chips .chip { animation: bob 1.2s ease-in-out infinite; }
.cd-num { font: 900 min(180px, 38vw)/1 var(--f-display); letter-spacing: -.05em; color: #fff; }
.cd-num.go { color: var(--go); }
.cd-num.anim { animation: cdPop .7s var(--spring); }
@keyframes cdPop { 0% { transform: scale(1.8); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); } }
.cd p { margin: 14px 0 0; font: 700 18px/1.4 var(--f-ui); color: var(--ink-2); }
.cd p b { color: var(--ink); }
.timesup { text-align: center; padding: 24px; }
.timesup .cd-num { font-size: min(110px, 20vw); color: var(--hot); animation: cdPop .7s var(--spring); }
.timesup p { margin: 14px 0 0; font: 700 18px/1.4 var(--f-ui); color: var(--ink-2); }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-confetti); }
#banner { position: fixed; left: 0; right: 0; top: calc(var(--bar-h) + 14px); z-index: var(--z-banner); display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
@media (max-width: 700px) { #banner { top: calc(var(--bar-h) + 8px); } }

/* ---------- sheets (bottom sheet on phones; .is-modal = centered card on desktop) ---------- */
#sheets { position: fixed; inset: 0; z-index: var(--z-sheet); pointer-events: none; }
#sheets.on { pointer-events: auto; }
#sheets.on.modeless { pointer-events: none; }          /* a modeless sheet: only the sheet itself takes taps */
#sheets.modeless .sheet { pointer-events: auto; }
/* (QA) a closing sheet and its fading scrim never swallow the next click: the page under them takes it at once */
#sheets > .leave { pointer-events: none !important; }
#sheets.on:not(:has(> :not(.leave))) { pointer-events: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(9, 7, 20, .5); animation: fade .25s var(--out); }
.sheet-scrim.leave { animation: fadeOut .25s var(--out) forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 640px;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--safe-t) - 24px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%), var(--night-1);
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 80px -20px rgba(0,0,0,.8);
  padding-bottom: var(--safe-b);
  animation: sheetIn .38s var(--out) both;
  transition: height .3s var(--out);
  outline: none;
}
.sheet.snap-half { height: min(56dvh, 560px); }
.sheet.snap-full { height: calc(100dvh - var(--safe-t) - 24px); }
.sheet.snap-auto { height: auto; }
.sheet.dragging { transition: none; }
.sheet.leave { animation: sheetOut .26s var(--out) forwards; }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }
.sheet-grab { flex: none; display: grid; place-items: center; height: 26px; cursor: grab; touch-action: none; }
.sheet-grab i { width: 44px; height: 5px; border-radius: 99px; background: var(--line-3); }
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 10px 20px; touch-action: none; }
.sheet-title { margin: 0; font: 800 18px/1.2 var(--f-display); letter-spacing: -.02em; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.sheet.is-modal {
  top: 50%; bottom: auto; left: 50%; right: auto; width: min(520px, calc(100vw - 48px)); max-height: min(760px, calc(100vh - 64px));
  transform: translate(-50%, -50%); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding-bottom: 0;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.85); animation: modalIn .34s var(--spring) both;
}
.sheet.is-modal .sheet-head { padding: 20px 16px 8px 24px; }
.sheet.is-modal .sheet-body { padding: 4px 24px 24px; }
.sheet.is-modal.leave { animation: modalOut .2s var(--out) forwards; }
@keyframes modalIn { from { transform: translate(-50%, -46%) scale(.96); opacity: 0; } }
@keyframes modalOut { to { transform: translate(-50%, -48%) scale(.97); opacity: 0; } }

/* ---------- tap menu (seat / player / message actions) ---------- */
.menu-pop { position: fixed; z-index: var(--z-menu); min-width: 220px; max-width: 300px; padding: 8px; border-radius: 18px; background: var(--night-2); border: 1px solid var(--line-3); box-shadow: 0 24px 60px -12px rgba(0,0,0,.85); animation: feedIn .2s var(--out); }
.menu-title { margin: 6px 10px 2px; font: 800 14px/1.2 var(--f-ui); }
.menu-sub { margin: 2px 10px 8px; font: 600 12.5px/1.35 var(--f-ui); color: var(--ink-3); }
.menu-list { display: grid; gap: 2px; }
.menu-item { appearance: none; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 12px; text-align: left; color: var(--ink); font: 700 14.5px/1.2 var(--f-ui); }
.menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.06); }
.menu-item small { display: block; margin-top: 2px; font: 600 12px/1.2 var(--f-ui); color: var(--ink-3); }
.menu-item .menu-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--night-3); color: var(--ink-2); flex: none; }
.menu-item.tone-danger { color: #FF8FA3; }
.menu-item.tone-danger .menu-ic { background: var(--hot-soft); color: #FF8FA3; }
.menu-item.tone-gold { color: var(--gold); }
.menu-item.tone-gold .menu-ic { background: var(--gold-soft); color: var(--gold); }
.menu-item.tone-go .menu-ic { background: var(--go-soft); color: var(--go); }
.menu-item:disabled { opacity: .45; cursor: not-allowed; }
.menu-sheet .menu-item { min-height: 52px; font-size: 16px; }

/* ---------- bubbles over Chippers (emotes, lobby speech) ---------- */
.bubble {
  position: absolute; left: 50%; bottom: calc(100% - 6px); z-index: 5; transform: translateX(-50%);
  pointer-events: none; white-space: nowrap;
  animation: bubbleIn .42s var(--spring) both;
}
.bubble.leave { animation: bubbleOut .3s var(--out) forwards; }
.bubble-emote { font: 400 30px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; padding: 6px 9px 7px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); }
.bubble-emote.bubble-word { font: 900 17px/1 var(--f-display); color: #140F2B; padding: 9px 11px; }
.bubble-speech { max-width: 200px; white-space: normal; text-align: center; padding: 7px 11px; border-radius: 14px; background: #fff; color: #140F2B; font: 700 13px/1.25 var(--f-ui); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); width: max-content; }
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 8px; transform: translateX(-50%); background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
@keyframes bubbleIn { from { transform: translate(-50%, 10px) scale(.5); opacity: 0; } }
@keyframes bubbleOut { to { transform: translate(-50%, -10px) scale(.9); opacity: 0; } }

/* ---------- stage kit (every game's stage): the dark well, your Chipper, the history chips ---------- */
.stage-well { position: relative; border-radius: 24px; overflow: hidden; background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 70%), var(--night-0); border: 1px solid var(--line); }
.stage-chip { position: absolute; left: 22px; bottom: 16px; z-index: 2; transition: transform .3s var(--spring); }
.stage-chip.jump { animation: chipJump .6s var(--spring); }
.hist { position: absolute; top: 14px; right: 14px; left: 14px; display: flex; justify-content: flex-end; gap: 6px; overflow: hidden; pointer-events: none; }
.hist span { flex: none; font: 800 12.5px/1 var(--f-ui); padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hist span.w { background: var(--go-soft); color: var(--go); }
.hist span:first-child { animation: feedIn .35s var(--out); }
.stage-tip { position: absolute; left: 14px; top: 14px; font: 700 12.5px/1 var(--f-ui); color: var(--ink-3); }
@media (max-width: 700px) {
  .stage-chip { left: 12px; bottom: 10px; }
  .stage-chip .chip { width: 56px; height: 56px; }
}
/* placeholder stage for stub games (architect; disappears when the real games land) */
.stub-stage { position: relative; height: 290px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; background: var(--night-0); border: 1px dashed var(--line-2); }
.stub-in { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--ink-3); padding: 0 24px; }
.stub-in b { font: 800 26px/1 var(--f-display); color: var(--ink-2); }
.stub-in span { font: 600 14px/1.4 var(--f-ui); }
@media (max-width: 700px) { .stub-stage { height: 210px; border-radius: 18px; } }

/* ---------- who's watching ---------- */
.mini-stack { display: inline-flex; align-items: center; }
.mini-stack i { display: block; margin-left: -6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.mini-stack i:first-child { margin-left: 0; }
.mini-stack b { margin-left: 4px; font: 800 11px/1 var(--f-ui); color: var(--ink-2); }
.eyes-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px 0 6px; border-radius: 999px; background: rgba(13,10,28,.8); border: 1px solid var(--line-2); color: var(--ink-2); font: 800 11.5px/1 var(--f-ui); white-space: nowrap; }
.eyes-badge em { font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- phones: text is never below 13px (ADDENDUM §4) ---------- */
@media (max-width: 700px) {
  .tag, .seat-name .tag, .hud-l .tag { font-size: 13px; letter-spacing: .02em; padding: 2px 5px; }
  .label, .eyebrow, .field > label, .field > .field-l { font-size: 13px; letter-spacing: .06em; }
  .delta, .badge, .eyes-badge, .mini-stack b, .hist span, .stage-tip, .btn small, .menu-sub, .menu-item small { font-size: 13px; }
  .badge { min-width: 22px; height: 22px; }
  .eyes-badge { height: 26px; }
}