/* Legacy brand hues, overwritten on :root by lobby.js. Only two are still read:
   Tara's gold body and accent bandana (engine/mascot.js); the wedges read --seg0..5.
   The old dark "puff" material recipes (.puff-disc, .puff-lit, --puff-gloss,
   --puff-drop) went with the retired look (DECISIONS.md 41) on 2026-10-03, unused. */
:root{
  --accent:#FF2E52; --gold:#FFD02B;
  --seg0:#FF2E52; --seg1:#FFD02B; --seg2:#B06AFF; --seg3:#3DEFFF; --seg4:#FF3D8A; --seg5:#C9FF3D;
}

/* ---------- brand theme tokens (DECISIONS.md 40–41) ----------
   The lobby's whole look comes from the client's `lobby.theme`, written onto
   :root by lobby.js as --t-*. These are neutral fallbacks only — no client's
   look lives in the engine. */
:root{
  --t-bg:#EEEEF4; --t-bg2:#E2E2EC; --t-floor:#D3D3E2; --t-paper:#FFFFFF;
  --t-ink:#111114; --t-ink2:#2A2A30; --t-dim:#6E6E78; --t-line:#D8D8E2;
  --t-badge:#111114; --t-field:#F4F4F8; --t-btn:#111114; --t-btn-ink:#FFFFFF;
  --t-coin:#E8A400; --t-bloom:rgba(255,246,236,.9); --t-rim:#2A2A40;
  --t-r-btn:8px; --t-r-card:24px;
  --t-font:system-ui,-apple-system,'Segoe UI',sans-serif;
  --hs:1;                          /* hero stage scale, set from its real width */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
/* Phone fit (DECISIONS.md 51). Two rules, both learned on a real phone:
   1. NOTHING may overflow sideways, not even off-screen during an entrance. On
      Chrome Android one overflowing element widens the layout viewport, and every
      fixed full-screen layer (the intro) is then sized to the WIDER box: the
      player lands zoomed in on part of the screen. overflow-x:clip on the page
      makes it impossible; the phone check (tools/phone-check.mjs) proves it.
   2. Heights use the DYNAMIC viewport (dvh), never bare 100vh: on a phone 100vh is
      the height with the address bar hidden, so a 100vh screen always scrolls by
      the bar's height. 100vh stays first as the fallback for old browsers. */
html{ overflow-x:clip; }
body{
  margin:0; background:var(--t-bg); color:var(--t-ink); font-family:var(--t-font);
  min-height:100vh; min-height:100dvh; overflow-x:clip; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
:focus-visible{ outline:3px solid var(--t-ink); outline-offset:2px; }
button{ font:inherit; color:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }

.lobby{ max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; overflow-x:clip; }

/* ---------- announcement bar: the brand's own site pattern, rotating true lines ---------- */
.announce{ position:relative; height:34px; overflow:hidden; background:var(--t-bg2); font-size:12.5px; font-weight:600; }
.announce span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 12px; white-space:nowrap; }
.announce b{ font-weight:700; color:var(--t-badge-ink, var(--t-badge)); margin:0 4px; }

/* ---------- header ---------- */
.lobby-header{ height:58px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; padding:0 16px; gap:8px; }
.icon-btn{ width:40px; height:40px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:color-mix(in srgb, var(--t-paper) 60%, transparent); color:var(--t-ink); }
.brand-mark{ justify-self:center; display:flex; align-items:center; min-width:0; }
.brand-mark img{ display:block; height:auto; max-height:40px; }
.brand-mark .wordmark{ font-weight:700; font-size:20px; letter-spacing:-.3px; white-space:nowrap; }
.coin-balance{ display:flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 6px; border-radius:var(--t-r-btn);
  background:var(--t-paper); font-weight:600; font-size:14px; font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 color-mix(in srgb, var(--t-ink) 8%, transparent); }
.coin-balance .coin{ display:block; }
/* the redeem corner's tap target (decision 102): invisible, a little larger than the pill so it
   meets the 40px rule; the pill itself looks exactly as before */
.coin-balance.is-redeem{ position:relative; cursor:pointer; }
.coin-tap{ position:absolute; left:-2px; right:-2px; top:50%; height:44px; margin-top:-22px; padding:0; border:0;
  border-radius:var(--t-r-btn); background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.coin-balance.pulse{ animation:coinPulse .7s cubic-bezier(.23,1,.32,1); }
@keyframes coinPulse{
  0%{ transform:scale(1); } 32%{ transform:scale(1.14); } 100%{ transform:scale(1); }
}

/* ---------- headline ---------- */
.lobby-intro{ padding:4px 16px 12px; }
.lobby-eyebrow{ margin:0; font-size:13px; color:var(--t-dim); }
.lobby-title{ margin:2px 0 0; font-size:28px; line-height:1.15; font-weight:600; letter-spacing:-.4px; text-wrap:balance; }

/* ---------- the hero: the intro's stage, continued ----------
   Composed at a fixed 343x446 design size and scaled to the card's real width,
   the same way the intro scales its 375x812 canvas, so the stage composition
   (wheel, floor, windows, Tara) holds on every phone. */
.hero{ position:relative; margin:0 16px; height:calc(446px * var(--hs)); border-radius:var(--t-r-card); overflow:hidden;
  cursor:pointer; -webkit-user-select:none; user-select:none; }
.hero-stage{ position:absolute; left:0; top:0; width:343px; height:446px; transform:scale(var(--hs)); transform-origin:0 0; }
.hero-bg{ position:absolute; inset:0; background:linear-gradient(180deg, var(--t-bg2) 0%, color-mix(in srgb, var(--t-bg2) 60%, var(--t-floor)) 62%, var(--t-floor) 100%); }
.hero-bloom{ position:absolute; left:50%; top:150px; width:420px; height:300px; margin-left:-210px; border-radius:50%;
  background:radial-gradient(closest-side, var(--t-bloom), transparent); pointer-events:none; }
.hero-arch{ position:absolute; left:22px; right:22px; top:24px; height:318px; border-radius:999px 999px 0 0; transform-origin:50% 100%;
  background:radial-gradient(110% 80% at 50% 12%, var(--t-paper) 0%, var(--t-paper) 52%, color-mix(in srgb, var(--t-paper) 82%, var(--t-bg2)) 100%); }
.hero-floor{ position:absolute; left:0; right:0; top:312px; bottom:0;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--t-floor) 92%, transparent) 22%, var(--t-floor) 60%, color-mix(in srgb, var(--t-floor) 88%, #000) 100%); }
.hero-badge{ position:absolute; left:14px; top:14px; z-index:6; background:var(--t-paper); color:var(--t-badge); font-weight:700; font-size:12px;
  height:26px; padding:0 10px; border-radius:999px; display:flex; align-items:center; letter-spacing:.2px; }

.hero-3d{ position:absolute; inset:0; perspective:820px; perspective-origin:50% 30%; }
/* Scoped under .hero on purpose: unscoped, these once positioned the GAME's wheel
   too and laid it over its own button (2026-10-03). The game's classes are gw-*. */
.hero .wheel-tilt{ position:absolute; left:50%; top:40px; width:236px; height:236px; margin-left:-118px; transform:rotateX(9deg); z-index:3; }
.hero .wheel-rot, .hero .wheel-rot svg{ display:block; width:236px; height:236px; }
/* its own layer: the wheel turns as a texture instead of re-drawing every frame */
.hero .wheel-rot{ will-change:transform; }
.hero .wheel-gloss{ position:absolute; inset:0; width:236px; height:236px; pointer-events:none; }  /* static sibling: the key light does not turn */
.hero .wheel-pointer{ position:absolute; left:50%; top:-16px; margin-left:-15px; width:30px; height:40px; z-index:4; transform-origin:50% 30%;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.hero .wheel-ring{ position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--t-coin) 60%, transparent); opacity:0; }
.hero .wheel-drop{ position:absolute; left:50%; top:50%; width:26px; height:34px; margin:-21px 0 0 -13px; z-index:5; }
.hero .wheel-contact{ position:absolute; left:50%; top:283px; width:190px; height:22px; margin-left:-95px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--t-ink) 30%, transparent), transparent); z-index:2; }
.hero .wheel-refl{ position:absolute; left:50%; top:290px; width:236px; height:236px; margin-left:-118px; transform:scaleY(-1); opacity:.2; z-index:1;
  -webkit-mask-image:linear-gradient(0deg, transparent 62%, #000 100%); mask-image:linear-gradient(0deg, transparent 62%, #000 100%); }

.hero-win{ position:absolute; z-index:5; width:76px; height:104px; transform-origin:50% 100%; }
.hero-win .tilt{ position:absolute; inset:0; transform-origin:50% 100%; }
.hero-win.l{ left:12px; top:230px; } .hero-win.l .tilt{ transform:rotate(-6deg); }
.hero-win.r{ right:12px; top:236px; } .hero-win.r .tilt{ transform:rotate(5deg); }
.hero-win .face{ position:absolute; inset:0; border-radius:38px 38px 10px 10px; overflow:hidden; background:var(--w);
  box-shadow:0 12px 16px -8px color-mix(in srgb, var(--t-ink) 38%, transparent), inset 0 0 0 3px var(--t-paper); }
.hero-win img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--p, 50% 50%); }
.hero-win .face::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 40%); }
.hero-win .wr{ position:absolute; left:0; right:0; top:104px; height:104px; border-radius:10px 10px 38px 38px; overflow:hidden; opacity:.22; transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(0deg, transparent 55%, #000 100%); mask-image:linear-gradient(0deg, transparent 55%, #000 100%); }
.hero-spark{ position:absolute; z-index:6; transform-origin:50% 50%; }
.hero-tara{ position:absolute; right:14px; top:178px; z-index:7; width:66px; height:66px; will-change:transform; }
.hero-tara svg{ display:block; width:66px; height:66px; }

.hero-foot{ position:absolute; left:16px; right:16px; bottom:16px; z-index:8; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.hero-foot p{ margin:0; font-size:13px; line-height:1.35; color:var(--t-ink2); }
.hero-foot p strong{ display:block; font-size:15px; font-weight:600; color:var(--t-ink); }
.cta{ position:relative; overflow:hidden; flex:none; height:48px; padding:0 22px; border:0; border-radius:var(--t-r-btn); cursor:pointer;
  background:var(--t-btn); color:var(--t-btn-ink); font-weight:500; font-size:15px; white-space:nowrap;
  box-shadow:0 8px 16px -4px color-mix(in srgb, var(--t-btn) 45%, transparent);
  transition:transform .12s cubic-bezier(.23,1,.32,1); }
.cta:active{ transform:scale(.96); }
.cta .sheen{ position:absolute; top:0; bottom:0; left:-60%; width:45%; transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,236,210,.35), rgba(255,255,255,0)); }

/* more games, once a client has more than one (compact cards under the hero) */
.more{ display:flex; gap:12px; padding:16px 16px 0; overflow-x:auto; scrollbar-width:none; }
.more-card{ flex:0 0 auto; display:flex; align-items:center; gap:10px; height:60px; padding:0 16px; border:0; cursor:pointer;
  border-radius:16px; background:var(--t-paper); color:var(--t-ink); font-weight:600; font-size:14px; }

/* ---------- rewards rail: the brand's own carousel pattern ---------- */
.rail-head{ display:flex; align-items:baseline; justify-content:space-between; padding:24px 16px 12px; }
.rail-head h2{ margin:0; font-size:20px; font-weight:600; letter-spacing:-.2px; }
.rail-head span{ font-size:13px; color:var(--t-dim); }
.rail{ display:flex; gap:12px; padding:0 16px 4px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rail::-webkit-scrollbar, .more::-webkit-scrollbar{ display:none; }
.rcard{ flex:0 0 150px; height:200px; scroll-snap-align:start; border-radius:75px 75px 20px 20px; position:relative; overflow:hidden; background:var(--w); }
.rcard .ph{ position:absolute; inset:0 0 58px 0; overflow:hidden; }
.rcard .ph img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--p, 50% 50%); }
.rcard .big{ position:absolute; inset:0 0 58px 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:700; font-size:44px; letter-spacing:-1.5px; color:var(--k, var(--t-ink)); text-align:center; line-height:1; padding:0 10px; }
.rcard .big small{ display:block; font-size:13px; letter-spacing:0; font-weight:600; margin-top:4px; }
.rcard .big.word{ font-size:20px; letter-spacing:-.3px; }
.rcard .cap{ position:absolute; left:0; right:0; bottom:0; height:58px; background:var(--t-paper); padding:9px 12px; }
.rcard .cap b{ display:block; font-size:13.5px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcard .cap span{ font-size:11.5px; color:var(--t-dim); }

/* ---------- game view: exactly one screen, never a scroll (DECISIONS.md 51) ---------- */
body.in-game .lobby{ height:100vh; height:100dvh; min-height:0; overflow:hidden; }
body.in-game .announce{ display:none; }
body.in-game #lobbyMain{ flex:1; min-height:0; display:flex; flex-direction:column; }
.game-view{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; padding:2px 16px 0; }
.game-container{ flex:1; min-height:0; display:flex; flex-direction:column; }
.back-btn{ position:absolute; left:16px; top:6px; z-index:2; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--t-paper); color:var(--t-ink); display:grid; place-items:center; font-size:0;
  box-shadow:0 1px 0 color-mix(in srgb, var(--t-ink) 8%, transparent); }
.back-btn::before{ content:''; width:9px; height:9px; margin-left:4px; border-left:2.2px solid currentColor; border-bottom:2.2px solid currentColor; transform:rotate(45deg); }
body.in-game .lobby-foot{ padding:6px 0 calc(8px + env(safe-area-inset-bottom)); }

.lobby-legal{ display:flex; justify-content:center; flex-wrap:wrap; gap:0 18px; margin-top:auto; padding-top:18px; }
.lobby-legal button{ min-height:44px; min-width:44px; padding:0 2px; border:0; background:none; cursor:pointer; font:inherit; font-size:12.5px; color:var(--t-ink2); text-decoration:underline; text-underline-offset:3px; }
.lobby-legal + .lobby-foot{ margin-top:0; padding-top:4px; }
body.in-game .lobby-legal{ display:none; }
.lobby-foot{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px; padding:22px 0 18px; font-size:11.5px; color:var(--t-dim); }
.foot-monogram{ width:10px; height:auto; opacity:.75; }

/* ---------- "Save your reward" sheet ---------- */
.sheet-wrap{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sheet-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--t-ink) 38%, transparent); }
.sheet{ position:relative; width:100%; max-width:480px; background:var(--t-paper); border-radius:24px 24px 0 0; padding:10px 20px calc(22px + env(safe-area-inset-bottom)); }
.sheet-grab{ width:40px; height:4px; border-radius:2px; background:var(--t-line); margin:0 auto 14px; }
.sheet-tara{ position:absolute; right:18px; top:-54px; width:76px; height:76px; }
.sheet-tara svg{ display:block; width:76px; height:76px; }
.sheet h2{ margin:0; font-size:22px; font-weight:600; letter-spacing:-.3px; }
.sheet-lede{ margin:4px 0 14px; font-size:13.5px; color:var(--t-dim); line-height:1.45; }
.sheet-won{ display:flex; gap:12px; align-items:center; background:var(--t-field); border-radius:14px; padding:8px; margin-bottom:12px; }
.sheet-won .thumb{ flex:none; width:46px; height:46px; border-radius:23px 23px 8px 8px; overflow:hidden; background:var(--w, var(--t-bg2));
  display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--k, var(--t-ink)); }
.sheet-won .thumb .big{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.sheet-won .thumb .big small{ font-size:8px; margin-top:2px; }
.sheet-won .thumb img{ width:100%; height:100%; object-fit:cover; object-position:var(--p, 50% 40%); }
.sheet-won b{ display:block; font-size:14px; font-weight:600; }
.sheet-won span{ font-size:12px; color:var(--t-dim); }
.sheet input[type=text], .phone-field{ display:flex; align-items:center; width:100%; height:50px; border-radius:var(--t-r-btn);
  background:var(--t-field); border:1.5px solid transparent; margin-bottom:10px; font-size:16px; color:var(--t-ink); }
.sheet input[type=text]{ padding:0 14px; font-family:inherit; }
.phone-field .cc{ padding:0 10px 0 14px; margin-right:10px; border-right:1px solid var(--t-line); font-weight:500; }
.phone-field input{ flex:1; min-width:0; height:100%; border:0; background:none; font:inherit; color:inherit; padding:0 14px 0 0; }
.phone-field input:focus{ outline:none; }
.sheet input[type=text]:focus, .phone-field:focus-within{ outline:none; border-color:var(--t-ink); background:var(--t-paper); }
.consent-row{ display:flex; gap:10px; align-items:flex-start; min-height:40px; padding:2px 0; font-size:12.5px; color:var(--t-ink2); line-height:1.4; margin:2px 0 12px; cursor:pointer; }
.consent-row input{ flex:none; width:20px; height:20px; margin:0; accent-color:var(--t-btn); }
.gate-error{ margin:-4px 0 12px; font-size:13px; color:#C4002B; }
.sheet-submit{ width:100%; height:52px; border:0; border-radius:var(--t-r-btn); cursor:pointer; background:var(--t-btn); color:var(--t-btn-ink);
  font-weight:500; font-size:16px; transition:transform .12s cubic-bezier(.23,1,.32,1); }
.sheet-submit:active:not([disabled]){ transform:scale(.98); }
.sheet-submit[disabled]{ opacity:.6; }

/* ---------- no client at this address ---------- */
.holding{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center;
  background:#0E0D16; color:#B9B6CC; font:14px/1.5 system-ui,sans-serif; }
.holding img{ width:192px; height:auto; }
.holding p{ margin:0; }
.empty-state{ color:var(--t-dim); font-size:13px; padding:24px 16px; }

/* ---------- short bumper (a client with no intro block) ---------- */
.bumper{ position:fixed; inset:0; z-index:80; background:var(--t-bg); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bumper-inner{ text-align:center; padding:0 28px; max-width:520px; }
.bumper-mask{ overflow:hidden; padding-bottom:2px; }
.bumper-name{ font-family:var(--t-font); font-weight:700; font-size:clamp(26px,8vw,44px); line-height:1.08; letter-spacing:-.5px; color:var(--t-ink); }
.bumper-rule{ height:1px; width:min(240px,58vw); margin:15px auto 12px; transform-origin:center;
  background:linear-gradient(90deg, transparent, var(--t-dim), transparent); }
.bumper-credit{ font-size:11px; color:var(--t-dim); display:flex; flex-direction:column; align-items:center; gap:6px; }
.bumper-wordmark{ width:120px; height:auto; }

@media (prefers-reduced-motion: reduce){
  .coin-balance.pulse{ animation:none; }
  .cta, .sheet-submit{ transition:none; }
  .cta:active, .sheet-submit:active:not([disabled]){ transform:none; }
}

/* ---------- tips: how it works (DECISIONS.md 129–131; engine/tips.js) ---------- */
.tp-spot{ position:fixed; z-index:90; pointer-events:none; border-radius:14px; box-shadow:0 0 0 200vmax rgba(12,12,22,.58); }
.tp-spot::after{ content:""; position:absolute; inset:-5px; border-radius:inherit; border:2px solid var(--t-paper); opacity:.9; }
.tp-tip{ position:fixed; z-index:91; box-sizing:border-box; width:min(328px, calc(100vw - 32px)); padding:14px 14px 12px; border-radius:16px;
  background:var(--t-paper); color:var(--t-ink); font-family:var(--t-font); box-shadow:0 18px 40px -12px rgba(0,0,0,.45);
  opacity:0; transform:translateY(6px) scale(.97); transition:opacity .22s cubic-bezier(.23,1,.32,1), transform .22s cubic-bezier(.23,1,.32,1); }
.tp-tip[data-place="above"]{ transform:translateY(-6px) scale(.97); }
.tp-tip.is-in{ opacity:1; transform:none; }
.tp-tip::before{ content:""; position:absolute; left:var(--tp-x, 50%); width:14px; height:14px; margin-left:-7px; background:var(--t-paper); transform:rotate(45deg); border-radius:3px; }
.tp-tip[data-place="below"]::before{ top:-6px; }
.tp-tip[data-place="above"]::before{ bottom:-6px; }
.tp-row{ display:flex; gap:12px; align-items:flex-start; }
.tp-tara{ flex:none; width:44px; height:44px; margin-top:-2px; }
.tp-tara svg{ width:100%; height:100%; display:block; }
.tp-row b{ display:block; font-weight:600; font-size:16px; line-height:1.25; letter-spacing:-.01em; }
.tp-row p{ margin:4px 0 0; font-size:14px; line-height:1.4; color:var(--t-ink2); }
.tp-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.tp-skip{ min-height:40px; padding:0 4px; border:0; background:none; font:500 14px/1 var(--t-font); color:var(--t-ink2); cursor:pointer; }
.tp-got{ min-height:40px; min-width:96px; padding:0 18px; border:0; border-radius:var(--t-r-btn); background:var(--t-btn); color:var(--t-btn-ink); font:600 15px/1 var(--t-font); cursor:pointer; }
.tp-scrim{ position:fixed; inset:0; z-index:92; background:rgba(12,12,22,.5); }
.tp-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:93; box-sizing:border-box; max-height:100dvh; overflow:auto; padding:10px 20px calc(16px + env(safe-area-inset-bottom));
  background:var(--t-paper); color:var(--t-ink); font-family:var(--t-font); border-radius:var(--t-r-card) var(--t-r-card) 0 0; }
.tp-grab{ width:40px; height:4px; border-radius:2px; background:var(--t-line); margin:0 auto 12px; }
.tp-sheet h2{ margin:0 0 4px; font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.015em; }
.tp-lede{ margin:0 0 12px; font-size:14px; line-height:1.4; color:var(--t-ink2); }
.tp-steps{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.tp-steps li{ display:flex; gap:12px; align-items:flex-start; }
.tp-num{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--t-btn); color:var(--t-btn-ink); font-weight:600; font-size:15px; }
.tp-steps b{ display:block; font-size:15px; font-weight:600; line-height:1.3; }
.tp-steps div > span{ display:block; font-size:13.5px; line-height:1.38; color:var(--t-ink2); }
.tp-sheet .tp-got{ width:100%; height:48px; }
.tp-how{ border:0; background:none; padding:0 2px; min-height:40px; font:500 14px/1 var(--t-font); color:var(--t-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lobby-intro{ position:relative; }
.lobby-intro .tp-how{ position:absolute; right:16px; top:-8px; }
@media (prefers-reduced-motion: reduce){ .tp-tip, .tp-tip[data-place="above"]{ transform:none; transition:opacity .2s ease; } }

/* ---------- the daily coin limit, said out loud (lobby.js capNote) ---------- */
.coin-note{ position:fixed; z-index:96; box-sizing:border-box; width:min(260px, calc(100vw - 24px)); padding:12px 14px; border-radius:14px;
  background:var(--t-paper); color:var(--t-ink); font-family:var(--t-font); box-shadow:0 14px 32px -10px rgba(0,0,0,.4);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .2s cubic-bezier(.23,1,.32,1), transform .2s cubic-bezier(.23,1,.32,1); }
.coin-note.is-in{ opacity:1; transform:none; pointer-events:auto; }
.coin-note::before{ content:""; position:absolute; top:-6px; right:calc(var(--cn-x, 30px) - 7px); width:14px; height:14px; background:var(--t-paper); transform:rotate(45deg); border-radius:3px; }
.coin-note b{ display:block; font-size:15px; font-weight:600; line-height:1.25; }
.coin-note span{ display:block; margin-top:2px; font-size:13.5px; line-height:1.35; color:var(--t-ink2); }
@media (prefers-reduced-motion: reduce){ .coin-note{ transform:none; transition:opacity .2s ease; } }