:root {
  --bg: #0d1020;
  --bg2: #151a33;
  --panel: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.1);
  --text: #f2f3fa;
  --muted: #9aa0bf;
  --accent: #8fb0ff;
  --grad: linear-gradient(135deg, #8fd8ff, #a98bff);
  --pearl: #efe7da; --sapphire: #3b7bff; --jade: #26b86b; --ruby: #ff3a5c; --onyx: #463e66; --gold: #ffc93d;
  --pearl-d: #8d826f; --sapphire-d: #173a9c; --jade-d: #0e6b43; --ruby-d: #9b0f2c; --onyx-d: #16121f; --gold-d: #b07a06;
  --display: 'Cinzel Decorative', Georgia, serif;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(169, 139, 255, 0.18), transparent 60%),
    radial-gradient(800px 600px at 110% 110%, rgba(143, 216, 255, 0.14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid #ffd45e; outline-offset: 3px; }

/* ------------------------------------------------ buttons */
.btn {
  border: 0; border-radius: 14px; padding: 12px 20px; min-height: 48px; cursor: pointer;
  font-weight: 700; font-size: 16px; transition: transform .12s, filter .12s, opacity .2s;
  background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid var(--line);
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad); color: #11132a; border: 0; box-shadow: 0 6px 24px rgba(143, 176, 255, .3); }
.btn.big { font-size: 19px; padding: 14px 26px; min-height: 56px; }
.btn.small { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.btn.ghost { background: rgba(255, 255, 255, 0.06); }
.btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); box-shadow: none; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06); cursor: pointer; font-size: 20px; }
.back { color: var(--muted); text-decoration: none; font-size: 14px; display: inline-block; padding: 12px 4px; }
.back:hover { color: var(--accent); }

/* ------------------------------------------------ logo + landing */
.logo { font-family: var(--display); font-weight: 700; letter-spacing: .12em; margin: 0; line-height: 1; display: flex; gap: .04em; justify-content: center; }
.logo span {
  background: linear-gradient(180deg, #fff 10%, #ffd9a8 45%, #ff8fb1 70%, #a98bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 170, 200, .35));
  animation: shimmer 6s ease-in-out infinite; animation-delay: calc(var(--i) * .15s);
}
.logo.big { font-size: clamp(52px, 13vw, 120px); }
@keyframes shimmer { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255,170,200,.25)); } 50% { filter: drop-shadow(0 0 26px rgba(255,220,160,.6)); } }

.landing, .s-lobby { position: relative; max-width: 980px; margin: 0 auto; padding: 48px 16px 24px; text-align: center; }
.tag { color: var(--muted); font-size: 18px; max-width: 560px; margin: 18px auto 28px; line-height: 1.5; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.choices.join-first .join { order: -1; }
.choice { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(6px); }
.choice h2 { margin: 0; font-size: 22px; }
.choice p { margin: 0; color: var(--muted); }
.choice .btn { margin-top: auto; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
input { font: inherit; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text); min-height: 50px; width: 100%; }
#code { letter-spacing: .4em; text-transform: uppercase; font-weight: 800; }
.howto { text-align: left; margin: 24px auto 0; max-width: 720px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; }
.howto summary { cursor: pointer; padding: 12px 0; font-weight: 700; min-height: 44px; }
.rules { padding-left: 20px; line-height: 1.55; color: #d9dcf0; }
.rules li { margin-bottom: 8px; }
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.floater { position: absolute; width: 54px; opacity: .5; left: calc(5% + var(--i) * 12%); top: calc(8% + (var(--i) * 37 % 70) * 1%); animation: float 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); filter: drop-shadow(0 0 12px rgba(255,255,255,.2)); }
.floater .gi { width: 100%; height: auto; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-24px) rotate(10deg); } }

.center-msg { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--muted); }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.gi { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------ tokens */
.token {
  position: relative; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 45%), radial-gradient(circle, var(--c) 0%, var(--cd) 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.4);
}
.token::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 2px dashed rgba(255,255,255,.35); }
.token .gi { width: 58%; height: 58%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); position: relative; z-index: 1; }
.t-pearl { --c: #d8cfbf; --cd: #7d7262; }
.t-sapphire { --c: #2f63d6; --cd: #12296e; }
.t-jade { --c: #1e9a5a; --cd: #0a4a2f; }
.t-ruby { --c: #e2304f; --cd: #6d0a1f; }
.t-onyx { --c: #3d3557; --cd: #0f0c17; }
.t-gold { --c: #f2b52a; --cd: #8a5a00; }

/* ------------------------------------------------ cards (scale with width) */
.card {
  container-type: inline-size; position: relative; aspect-ratio: 5 / 7; border-radius: 9% / 6.4%; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 34%, #1c2140) 0%, #141831 70%);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.12);
  color: var(--metal, #e8c9a8); user-select: none;
}
.card.b-pearl { --bc: #d8cfbf; } .card.b-sapphire { --bc: #3b7bff; } .card.b-jade { --bc: #26b86b; } .card.b-ruby { --bc: #ff3a5c; } .card.b-onyx { --bc: #6d5fa3; }
.card.t1 { --metal: #e0a98a; }
.card.t2 { --metal: #d6dcef; }
.card.t3 { --metal: #ffd36b; box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255, 211, 107, .55); }
.card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 50%, color-mix(in srgb, var(--bc) 30%, transparent), transparent 70%); }
.card-top { position: absolute; left: 0; right: 0; top: 0; height: 26cqw; display: flex; justify-content: space-between; align-items: center; padding: 0 7cqw; background: rgba(255,255,255,.1); }
.pts { font-family: var(--display); font-size: 22cqw; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.card-top .bonus { width: 20cqw; height: 20cqw; filter: drop-shadow(0 0 4cqw color-mix(in srgb, var(--bc) 80%, transparent)); }
.card .ill { position: absolute; left: 24cqw; right: 6cqw; top: 33cqw; width: 70cqw; height: 70cqw; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.cost { position: absolute; left: 5cqw; bottom: 5cqw; display: flex; flex-direction: column-reverse; gap: 2.5cqw; }
.pip { width: 19cqw; height: 19cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5cqw; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.p-pearl { background: #d8cfbf; color: #2a2418 !important; text-shadow: none !important; }
.p-sapphire { background: #2f63d6; } .p-jade { background: #1e9a5a; } .p-ruby { background: #e2304f; } .p-onyx { background: #2b2540; box-shadow: inset 0 0 0 1.5px #9a8cff !important; }
.tier { position: absolute; right: 6cqw; bottom: 4cqw; font-family: var(--display); font-size: 10cqw; opacity: .7; }
.card.back { background: linear-gradient(150deg, #2a2050, #12142b); color: rgba(255, 211, 160, .18); display: grid; place-items: center; }
.card.back.t2 { background: linear-gradient(150deg, #1d3557, #10162b); color: rgba(190, 210, 255, .2); }
.card.back.t3 { background: linear-gradient(150deg, #4a2a1a, #1a1220); color: rgba(255, 211, 107, .22); }
.card.back::before { display: none; }
.card.back .pattern { position: absolute; inset: 0; }
.card.back .roman { position: relative; font-family: var(--display); font-size: 30cqw; color: var(--metal); text-shadow: 0 0 10px rgba(0,0,0,.6); }
.card.back .count { position: absolute; bottom: 5cqw; right: 7cqw; font-weight: 800; font-size: 13cqw; color: #fff; opacity: .8; }
.card.empty { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 2px rgba(255,255,255,.07); }
.card.empty::before { display: none; }
.card.afford { box-shadow: 0 0 0 2px #7dffb0, 0 0 18px rgba(125,255,176,.5), 0 4px 14px rgba(0,0,0,.45); }
.card.deal { animation: deal .7s cubic-bezier(.2,.8,.3,1.2) .35s both; }
@keyframes deal { from { transform: translateX(-120%) rotateY(90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------ patrons */
.patron {
  container-type: inline-size; position: relative; aspect-ratio: 1; border-radius: 14%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3d2f6b, #1a1533 75%); box-shadow: inset 0 0 0 2px rgba(255, 211, 107, .5), 0 4px 14px rgba(0,0,0,.45);
  color: #ffd36b;
}
.patron .emb { position: absolute; left: 30cqw; top: 10cqw; width: 52cqw; height: 52cqw; filter: drop-shadow(0 0 6cqw rgba(255, 211, 107, .45)); }
.patron .ppts { position: absolute; left: 8cqw; top: 4cqw; font-family: var(--display); font-size: 22cqw; color: #fff; }
.patron .req { position: absolute; left: 6cqw; bottom: 22cqw; display: flex; flex-direction: column; gap: 2cqw; }
.patron .rq { width: 15cqw; height: 19cqw; border-radius: 3cqw; display: grid; place-items: center; font-size: 12cqw; font-weight: 800; color: #fff; }
.patron .pname { position: absolute; left: 0; right: 0; bottom: 4cqw; text-align: center; font-size: 10.5cqw; font-weight: 700; color: #f6e6c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4cqw; }

/* ------------------------------------------------ stash (bonuses + tokens) */
.stash { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sc { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sb { width: 100%; aspect-ratio: 5 / 6; border-radius: 6px; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 1.15em; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: linear-gradient(160deg, var(--c), var(--cd)); box-shadow: 2px 2px 0 rgba(255,255,255,.18), 4px 4px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.3); }
.sb.zero { opacity: .25; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.sb.none { visibility: hidden; }
.st { position: relative; width: 100%; aspect-ratio: 1; }
.st .gi { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.st span { position: absolute; right: -4px; bottom: -4px; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: 1em; background: #0d1020; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; font-weight: 800; font-size: .85em; }
.st.zero .gi { opacity: .22; }
.st.zero span { opacity: .4; }
.s-pearl { --c: #d8cfbf; --cd: #7d7262; } .s-pearl .sb { color: #2a2418; text-shadow: none; }
.s-sapphire { --c: #2f63d6; --cd: #12296e; } .s-jade { --c: #1e9a5a; --cd: #0a4a2f; } .s-ruby { --c: #e2304f; --cd: #6d0a1f; } .s-onyx { --c: #4a4070; --cd: #0f0c17; } .s-gold { --c: #f2b52a; --cd: #8a5a00; }
.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.25); } }

/* ------------------------------------------------ SCREEN stage */
.stage-wrap { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.s-head { position: absolute; left: 20px; right: 20px; top: 8px; height: 56px; display: flex; align-items: center; gap: 24px; }
.s-head .logo { font-size: 34px; }
.s-round { color: var(--muted); font-weight: 700; font-size: 18px; }
.final-tag { color: #ff8fa3; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.s-join { margin-left: auto; color: var(--muted); font-size: 18px; }
.s-join b { color: var(--text); }
.s-join .code { letter-spacing: .15em; color: #ffd45e; }
.controls { display: flex; gap: 10px; }
.s-lobby .controls { position: absolute; top: 16px; right: 16px; }

.patrons-row { position: absolute; left: 410px; width: 780px; top: 72px; height: 124px; display: flex; gap: 14px; justify-content: center; }
.patrons-row .patron { width: 124px; }
.patrons-row .muted { align-self: center; }
.market { position: absolute; left: 410px; top: 210px; display: flex; flex-direction: column; gap: 10px; }
.mrow { display: flex; gap: 12px; }
.market .card { width: 120px; }
.market .card.back, .market .deck-empty { margin-right: 10px; }
.supply { position: absolute; left: 1115px; top: 212px; width: 80px; display: flex; flex-direction: column; gap: 10px; }
.pile { position: relative; display: flex; flex-direction: column; align-items: center; }
.pile .token { width: 68px; }
.pile::before { content: ''; position: absolute; top: 6px; width: 68px; height: 68px; border-radius: 50%; background: rgba(0,0,0,.4); transform: translateY(5px); box-shadow: 0 4px 0 rgba(255,255,255,.08); }
.pile span { position: absolute; right: -6px; top: 44px; background: #0d1020; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; min-width: 28px; text-align: center; font-weight: 800; font-size: 16px; padding: 1px 6px; }
.pile.empty .token { opacity: .2; }

.panel { position: absolute; width: 370px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; transition: box-shadow .4s, border-color .4s, transform .4s; font-size: 17px; }
.panel.active { border-color: var(--seat); box-shadow: 0 0 0 2px var(--seat), 0 0 40px color-mix(in srgb, var(--seat) 45%, transparent); }
.panel.away { opacity: .7; }
.slot-L, .slot-L1 { left: 20px; top: 72px; }
.slot-L2 { left: 20px; top: 488px; }
.slot-R, .slot-R1 { right: 20px; top: 72px; }
.slot-R2 { right: 20px; top: 488px; }
.slot-L, .slot-R { top: 180px; }
.ph { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--seat); box-shadow: 0 0 10px var(--seat); flex: none; }
.panel.active .dot { animation: pulse 1.2s infinite; }
.pn { font-weight: 800; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score { margin-left: auto; font-family: var(--display); font-size: 34px; line-height: 1; color: #fff; }
.score small { font-size: 14px; color: var(--muted); font-family: Inter, sans-serif; margin-left: 2px; }
.score.pop { animation: scorepop .8s ease; }
@keyframes scorepop { 30% { transform: scale(1.6); color: #ffd45e; text-shadow: 0 0 20px #ffd45e; } }
.pfoot { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 12px; margin-top: 12px; align-items: center; }
.reserved { display: flex; gap: 6px; grid-row: span 2; }
.card.mini { width: 50px; border-radius: 5px; }
.card.mini.slot { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); }
.pnobles { display: flex; gap: 6px; flex-wrap: wrap; }
.pmed { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle, #3d2f6b, #1a1533); box-shadow: inset 0 0 0 2px #ffd36b; color: #ffd36b; padding: 6px; }
.pmed svg { width: 100%; height: 100%; }
.tcount { color: var(--muted); font-size: 14px; }
.s-foot { position: absolute; left: 410px; width: 780px; top: 760px; height: 120px; text-align: center; }
.status { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.log { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 16px; }

/* screen lobby */
.lobby-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; margin-top: 32px; text-align: left; }
.join-card, .seats { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.join-card { text-align: center; }
.lead { font-size: 22px; font-weight: 800; margin: 0 0 14px; }
.qr { width: 220px; height: 220px; border-radius: 16px; background: #fff; padding: 8px; }
.or { color: var(--muted); margin: 14px 0 8px; font-size: 17px; }
.bigcode { display: flex; justify-content: center; gap: 10px; }
.bigcode span { width: 64px; height: 80px; display: grid; place-items: center; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255, 212, 94, .4); font-size: 46px; font-weight: 800; color: #ffd45e; }
.plist { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.plist li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); min-height: 56px; font-size: 18px; animation: slidein .4s ease both; }
.plist li.empty { color: var(--muted); border: 1px dashed var(--line); background: none; animation: none; }
.plist li small { color: var(--muted); }
.plist li.away { opacity: .6; }
.plist .x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); cursor: pointer; }
@keyframes slidein { from { opacity: 0; transform: translateX(-20px); } }
.lobby-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.lobby-btns .primary { flex: 1; }
.lobby-foot { margin-top: 24px; display: flex; justify-content: center; align-items: center; gap: 20px; }

/* game over */
.over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 9, 20, .72); backdrop-filter: blur(4px); z-index: 30; animation: fadein .6s ease 1s both; }
.phone .over { position: fixed; padding: 16px; }
@keyframes fadein { from { opacity: 0; } }
.over-card { background: linear-gradient(180deg, #232850, #151a33); border: 1px solid rgba(255, 211, 107, .4); border-radius: 28px; padding: 28px 32px; text-align: center; width: min(560px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.crown { width: 72px; height: 72px; margin: -64px auto 8px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 0 20px #ffd45e); }
.over-card h2 { font-family: var(--display); font-size: 34px; margin: 0 0 18px; color: #ffe6a8; }
.ranks { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ranks li { display: grid; grid-template-columns: 36px 1fr auto; grid-template-rows: auto auto; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border-left: 5px solid var(--seat); animation: slidein .5s ease both; animation-delay: calc(1.2s + var(--i) * .15s); }
.ranks li.win { background: rgba(255, 211, 107, .14); }
.rk { grid-row: span 2; font-weight: 800; color: var(--muted); font-size: 20px; }
.rn { font-weight: 800; font-size: 20px; }
.rs { grid-row: span 2; font-family: var(--display); font-size: 30px; }
.rd { color: var(--muted); font-size: 14px; }
.over-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------ fx layer */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.flyer { position: fixed; will-change: transform; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.flyer .token { width: 100%; }
.banner-fx { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 22px 40px; border-radius: 22px; text-align: center; font-size: clamp(22px, 3.2vw, 44px); font-weight: 800; background: rgba(20, 24, 50, .92); border: 2px solid var(--accent); box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: bannerin 2.6s ease both; max-width: 90vw; }
.banner-fx small { display: block; font-size: .5em; color: var(--muted); font-weight: 600; margin-top: 4px; }
.banner-fx.gold { border-color: #ffd36b; color: #ffe6a8; }
.banner-fx.gold small { order: -1; margin: 0 0 4px; }
.banner-fx.red { border-color: #ff6b85; }
@keyframes bannerin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 18% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
.confetti { position: fixed; top: -40px; width: 28px; height: 28px; animation: fall linear both; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #2a2f55; border: 1px solid var(--line); padding: 12px 20px; border-radius: 14px; z-index: 100; font-weight: 600; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.toast.show { animation: toastin .25s ease; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } }
#offline { display: none; position: fixed; top: 0; left: 0; right: 0; background: #b3263f; color: #fff; text-align: center; padding: 6px; font-weight: 700; z-index: 99; }
body.offline #offline { display: block; }

/* ------------------------------------------------ PHONE */
.phone { max-width: 560px; margin: 0 auto; padding: 0 16px 120px; }
.ph-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 0; background: linear-gradient(180deg, var(--bg) 70%, transparent); }
.ph-score { font-family: var(--display); font-size: 26px; margin-left: auto; }
.ph-score small { font-size: 12px; color: var(--muted); font-family: Inter, sans-serif; }
.ph-code { color: var(--muted); font-size: 13px; font-weight: 700; margin-left: 8px; }
.ph-head .pn + .ph-code { margin-left: auto; }
.turn-banner { padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-align: center; font-weight: 700; margin-bottom: 12px; }
.turn-banner.mine { background: linear-gradient(135deg, rgba(143,216,255,.25), rgba(169,139,255,.25)); border-color: var(--accent); animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 24px rgba(143,176,255,.45); } }
.final-strip { background: #b3263f; text-align: center; padding: 6px; border-radius: 10px; font-weight: 800; margin-bottom: 10px; }
.ph-sec { margin-bottom: 18px; }
.ph-sec h3 { margin: 0 0 10px; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ph-sec h3 small { color: var(--muted); font-weight: 500; font-size: 12px; text-align: right; }
.phone .stash { font-size: 15px; gap: 8px; }
.pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pickbtn { position: relative; border: 0; background: none; padding: 4px; border-radius: 50%; cursor: pointer; min-height: 44px; transition: transform .15s; }
.pickbtn .token { width: 100%; transition: transform .15s, box-shadow .15s; }
.pickbtn.on .token { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,255,255,.6); }
.pickbtn:disabled { cursor: default; }
.pickbtn:disabled .token { filter: saturate(.6) brightness(.8); }
.pickbtn.empty .token { opacity: .25; }
.pickbtn .left { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: #0d1020; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; font-size: 12px; font-weight: 800; padding: 0 6px; }
.pickbtn .badge { position: absolute; top: -4px; right: -2px; background: #fff; color: #111; border-radius: 10px; font-weight: 800; font-size: 13px; min-width: 22px; padding: 0 5px; }
.gold-info { opacity: .7; cursor: default; }
.ph-market { display: flex; flex-direction: column; gap: 8px; }
.pmrow { display: grid; grid-template-columns: 40px repeat(4, 1fr); gap: 6px; align-items: stretch; }
.deckbtn { border: 0; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--display); color: #f6e6c2; background: linear-gradient(150deg, #2a2050, #12142b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); min-height: 44px; }
.deckbtn.t2 { background: linear-gradient(150deg, #1d3557, #10162b); }
.deckbtn.t3 { background: linear-gradient(150deg, #4a2a1a, #1a1220); }
.deckbtn small { font-family: Inter, sans-serif; font-size: 11px; color: var(--muted); }
.deckbtn:disabled { opacity: .3; }
.cardbtn { border: 0; padding: 0; background: none; cursor: pointer; display: block; width: 100%; text-align: left; }
.cardbtn .card { width: 100%; }
.ph-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ph-res .muted { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.ph-patrons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ph-patrons .patron { width: 100%; }
.rivals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rivals li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel); font-size: 14px; }
.rivals li.cur { box-shadow: inset 0 0 0 2px var(--seat); }
.rivals .rn { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rivals .rb { display: flex; gap: 3px; }
.mini-b { font-style: normal; width: 18px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.rivals .rt { color: var(--muted); font-size: 12px; white-space: nowrap; }
.rivals .rs { font-family: var(--display); font-size: 20px; min-width: 28px; text-align: right; }
.ph-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.take-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(21, 26, 51, .96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); animation: up .2s ease; }
.take-bar .sel { display: flex; gap: 6px; flex: 1; }
.take-bar .sel .token { width: 40px; }
.take-bar .primary { min-width: 120px; }
@keyframes up { from { transform: translateY(100%); } }
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(5, 6, 15, .65); display: flex; align-items: flex-end; justify-content: center; animation: fadein .2s ease; }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: #1a1f3d; border-radius: 24px 24px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border: 1px solid var(--line); animation: up .25s ease; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sheet-card { width: 140px; flex: none; margin: 0 auto; }
.sheet-card .card { width: 100%; }
.sheet-body { flex: 1; min-width: 200px; }
.sheet-body h3 { margin: 0 0 8px; font-size: 18px; }
.sheet-body p { margin: 0 0 10px; color: #d9dcf0; line-height: 1.45; }
.sheet-body .pick { margin: 14px 0; }
.pay { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pay.miss { color: #ff9fae; }
.paychip { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }
.paychip .token { width: 28px; }
.sheet-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ph-lobby { text-align: center; display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.ph-lobby h2 { margin: 0; font-family: var(--display); font-size: 30px; }
.ph-lobby .muted { margin: 0; }
.ph-lobby .plist { text-align: left; }
.gem-burst { display: flex; justify-content: center; gap: 8px; }
.gem-burst .gi { width: 44px; height: 44px; animation: float 4s ease-in-out infinite; }
.gem-burst .gi:nth-child(2) { animation-delay: -1.3s; } .gem-burst .gi:nth-child(3) { animation-delay: -2.6s; }
.rename { text-align: left; }
.rename span { display: flex; gap: 8px; }

/* ------------------------------------------------ responsive */
@media (max-width: 720px) {
  .choices, .lobby-grid { grid-template-columns: 1fr; }
  .landing { padding-top: 32px; }
  .tag { font-size: 16px; }
}
html.tv .landing, html.tv .s-lobby { max-width: 1400px; padding: 5vh 5vw; font-size: 1.3em; }
html.tv .btn { font-size: 24px; min-height: 64px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Numbers use Inter: the display face draws 1 like a roman I */
.pts, .patron .ppts, .score, .ph-score, .rs, .rivals .rs { font-family: Inter, system-ui, sans-serif !important; font-weight: 800; }