:root {
  color-scheme: dark;

  /* ── Color Tokens ── */
  --color-bg: #111310;
  --color-bg-deep: #0a0b09;
  --color-surface: #1c1f1b;
  --color-surface-strong: #292d27;
  --color-surface-elevated: #33372f;
  --color-text: #fffaf0;
  --color-muted: #b9b7ad;
  --color-faint: #6b6a63;
  --color-accent: #ffd447;
  --color-accent-dim: rgba(255, 212, 71, 0.14);
  --color-warm: #ff8a5c;
  --color-danger: #ff5f61;
  --color-blue: #6ab6ff;
  --color-mint: #66ddb2;
  --color-pink: #ef87bd;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  /* ── Spacing Scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius Scale ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ── Shadow Tokens ── */
  --shadow-press: 5px 5px 0 #050605;
  --shadow-press-sm: 3px 3px 0 #050605;
  --shadow-float: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-glow-accent: 0 0 24px rgba(255, 212, 71, 0.18);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);

  /* ── Transition Tokens ── */
  --transition-fast: 120ms ease;
  --transition-normal: 220ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 280ms cubic-bezier(0.2, 0.9, 0.25, 1.15);

  /* ── Z-Index Scale ── */
  --z-base: 1;
  --z-raised: 5;
  --z-dropdown: 30;
  --z-overlay: 50;
  --z-modal: 90;
  --z-toast: 200;

  --page-pad: max(18px, env(safe-area-inset-left));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Alpha candidate flows */
.help-icon { color: var(--color-accent); font-size: 1rem; font-weight: 950; }
.sheet-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; align-items: end; background: rgba(0,0,0,.72); }
.help-sheet { width: min(100%, 620px); max-height: min(78dvh, 680px); margin: 0 auto; padding: 20px var(--page-pad) max(24px, env(safe-area-inset-bottom)); overflow: auto; border-top: 2px solid #11130f; background: #1a1d1a; box-shadow: 0 -8px 0 rgba(0,0,0,.25); }
.sheet-handle { width: 48px; height: 4px; margin: 0 auto 18px; background: var(--color-muted); }
.sheet-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.sheet-heading h2 { margin-top: 4px; font-size: 1.9rem; }
.help-steps { display: grid; gap: 0; margin: 20px 0; padding: 0; counter-reset: help; list-style: none; }
.help-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--color-border); font-size: .86rem; line-height: 1.4; }
.help-steps li::before { counter-increment: help; content: counter(help); display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #11130f; border-radius: 50%; background: var(--color-accent); color: #11130f; font-weight: 950; }
.party-launch-panel, .penalty-center { padding-top: 18px; }
.party-launch-panel > h1, .penalty-center > h1 { margin: 10px 0; font-size: clamp(2.5rem, 11vw, 4.8rem); line-height: .94; overflow-wrap: anywhere; }
.party-default-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 28px; border: 2px solid #11130f; background: var(--color-surface); box-shadow: 5px 5px 0 #050605; }
.party-default-summary span { display: grid; gap: 4px; min-width: 0; padding: 14px 8px; border-right: 1px solid var(--color-border); text-align: center; }
.party-default-summary span:last-child { border: 0; }
.party-default-summary strong { overflow-wrap: anywhere; color: var(--color-accent); font-size: 1.05rem; }
.party-default-summary span:first-child strong { font-size: 2rem; }
.opening-memory { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 18px; padding: 13px; border-left: 4px solid var(--color-mint); background: rgba(255,255,255,.04); }
.opening-memory p { margin-top: 3px; font-size: .68rem; }
.opening-memory img { width: 76px; height: 76px; object-fit: cover; }
.party-launch-actions { display: grid; gap: 8px; margin-top: 22px; }
.penalty-primary { width: 100%; margin-top: 16px; }
.result-surrender-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; width: 100%; min-height: 66px; margin-top: 9px; padding: 8px 12px; border: 2px solid #11130f; border-radius: 8px; background: #ffd447; color: #11130f; box-shadow: 4px 4px 0 #050605; }
.result-surrender-card::after { content: ""; width: 14px; height: 14px; justify-self: center; border-top: 3px solid #11130f; border-right: 3px solid #11130f; transform: rotate(45deg); }
.result-surrender-card span { display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid #11130f; border-radius: 50%; font-size: 1.05rem; font-weight: 950; }
.result-surrender-card strong { font-size: 1.15rem; text-align: center; }
.player-confirm { margin-top: 16px; padding: 13px; border-left: 4px solid var(--color-accent); background: rgba(255,255,255,.05); }
.player-confirm > div { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 6px; }
.player-confirm button { min-height: 42px; padding: 7px 11px; }
.player-confirm small { color: var(--color-muted); font-size: .66rem; }
.penalty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.penalty-card { min-height: 140px; padding: 0; border: none; border-radius: 16px; background: transparent; color: var(--color-text); overflow: hidden; }
.penalty-card-face { display: grid; place-items: center; gap: 6px; width: 100%; height: 100%; min-height: 140px; border: 2px solid var(--card-color, var(--color-border)); border-radius: 16px; background: var(--color-surface); }
.penalty-card-q { font-size: 2rem; font-weight: 900; color: var(--card-color, var(--color-accent)); }
.penalty-card-label { font-size: .72rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.penalty-card.is-flipped { background: var(--card-color, #333); min-height: 140px; border-radius: 16px; }
.penalty-card-inner { display: grid; place-items: center; gap: 4px; padding: 14px 10px; text-align: center; min-height: 140px; }
.penalty-card-icon { font-size: 1.4rem; }
.penalty-card-category { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.penalty-card-text { font-size: .9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.penalty-card-sub { font-size: .75rem; opacity: .6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.penalty-center .action-stack { margin-top: 12px; }
.settings-links { display: grid; gap: 8px; margin: 22px 0; }
.settings-links button { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.settings-links span { display: grid; gap: 3px; }
.settings-links small, .version-label { color: var(--color-muted); font-size: .66rem; }
.version-label { margin-top: 18px; text-align: center; }
.guest-profile { display: flex; align-items: center; gap: 12px; margin: 22px 0; padding: 14px; border: 2px solid #11130f; background: var(--color-surface); box-shadow: 4px 4px 0 #050605; }
.guest-profile > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--color-accent); color: #11130f; font-size: 1.5rem; font-weight: 950; }
.guest-profile > img { width: 54px; height: 54px; border: 2px solid var(--color-mint); border-radius: 50%; object-fit: cover; }
.guest-profile > div { display: grid; gap: 3px; }
.guest-profile small { color: var(--color-muted); }
.guest-profile.is-line-profile { border-color: var(--color-mint); }
.identity-actions { display: grid; gap: 8px; margin: 22px 0; }
.identity-actions button { width: 100%; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 2px 16px; }
.legal-links a { color: var(--color-mint); font-size: .76rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.user-setting-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 20px; }
.user-setting-summary span { padding: 6px 8px; border: 1px solid var(--color-border); color: var(--color-muted); font-size: .66rem; }
.clear-confirm { margin-top: 18px; padding: 13px; border-left: 4px solid var(--color-danger); background: rgba(255,95,97,.08); }
.clear-confirm p { margin-bottom: 10px; }
.clear-confirm button { margin-right: 6px; }
.danger-text { display: block; margin: 18px auto 0; color: var(--color-danger); }
.local-history { margin-top: 26px; }
.local-history h2 { font-size: 1.25rem; }
.local-history > div { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.local-history small { color: var(--color-muted); }
.login-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 24px 0; }
.login-methods button:disabled { opacity: .55; }
.vip-pill { display: inline-flex; align-items: center; margin: 0 0 22px 10px; padding: 5px 12px; border: 1px solid var(--color-accent); border-radius: var(--radius-full); background: transparent; color: var(--color-accent); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; transition: background var(--transition-fast), box-shadow var(--transition-fast); }
.vip-pill:hover { background: var(--color-accent-dim); box-shadow: var(--shadow-glow-accent); }
.vip-pill:active { transform: scale(.96); }
.vip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.vip-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; border: 2px solid #10120e; border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-normal); }
.vip-card:hover { border-color: var(--color-border-strong); }
.vip-card.is-current { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(255,212,71,.14), var(--shadow-glow-accent); }
.vip-tier { margin: 0; font-size: 1.12rem; font-weight: 800; }
.vip-pro .vip-tier { color: var(--color-accent); }
.vip-price { margin: 0; color: var(--color-muted); font-size: .82rem; font-weight: 700; }
.vip-features { display: grid; gap: 7px; margin: 4px 0; padding: 0; list-style: none; }
.vip-features li { position: relative; padding-left: 18px; color: var(--color-text); font-size: .8rem; line-height: 1.3; }
.vip-features li::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.vip-upgrade { margin-top: auto; min-height: 44px; }
.vip-current-pill { margin-top: auto; min-height: 44px; color: var(--color-accent); border-color: var(--color-accent); background: transparent; }
.vip-demo-banner { margin-top: 8px; padding: 14px 16px; border-left: 4px solid var(--color-accent); background: var(--color-surface-strong); }
.vip-demo-banner strong { display: block; margin-bottom: 4px; font-size: .86rem; }
.vip-demo-banner p { margin: 0; color: var(--color-muted); font-size: .8rem; line-height: 1.4; }
@media (max-width: 560px) { .vip-grid { grid-template-columns: 1fr; } }
.feedback-types { grid-template-columns: repeat(5,minmax(0,1fr)); }
.feedback-shot { width: 100%; max-height: 240px; margin-top: 10px; object-fit: contain; background: #080908; }
.night-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.night-compare > div { position: relative; display: grid; place-items: center; min-height: 148px; overflow: hidden; border: 2px solid #11130f; background: var(--color-surface); }
.night-compare img { width: 100%; height: 148px; object-fit: cover; }
.night-compare small { position: absolute; left: 7px; bottom: 7px; padding: 4px 7px; background: #11130f; color: #fff; font-weight: 850; }
@media (min-width: 760px) {
  .picker-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .party-launch-panel, .penalty-center { max-width: 680px; margin: 0 auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .game-panel:not(.finger-game) { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .finger-intro { top: 12px; }
  .finger-signal { padding-top: 58px; }
}
@media (max-width: 390px) {
  .feedback-types { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .party-default-summary strong { font-size: .86rem; }
  .penalty-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .penalty-card { min-height: 110px; }
  .penalty-card-face { min-height: 110px; }
  .penalty-card.is-flipped { min-height: 110px; }
  .penalty-card-inner { min-height: 110px; }
}

* { box-sizing: border-box; }

html { background: var(--color-bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  min-height: 100vh;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) var(--page-pad) calc(28px + env(safe-area-inset-bottom));
}

/*
 * LINE LIFF header handling (priority C, needs CEO real-device confirmation).
 * Inside the LINE client, LIFF renders its own header bar. Whether the webview
 * content needs extra top spacing depends on the device / LIFF config and
 * cannot be verified without a phone. The inset is therefore 0 by default
 * (inert: no visual change, no gap). If the CEO observes content hidden under
 * the LINE header on a real device, raise --line-header-inset (try ~50px) and
 * it applies to the whole app via #app. Revert by setting it back to 0px.
 */
:root[data-platform-mode="line"] {
  --line-header-inset: 0px;
}
:root[data-platform-mode="line"] #app {
  padding-top: var(--line-header-inset);
}

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.brand-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-accent);
  color: #07170f;
  font-size: 0.72rem;
  font-weight: 950;
}

.home-intro { padding: 52px 0 30px; }
.home-intro h1 { max-width: 560px; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--color-accent);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 14px;
  font-size: clamp(2.1rem, 12vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: 0;
}
h2 { margin-bottom: 10px; font-size: 1.25rem; letter-spacing: 0; }
p { margin-bottom: 0; color: var(--color-muted); line-height: 1.55; }

button, input, select, textarea {
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

button {
  min-height: 48px;
  padding: 12px 14px;
  background: var(--color-surface-strong);
  color: var(--color-text);
  cursor: pointer;
}

button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: 0.42; }

/* ── Global Focus & Hover Enhancement ── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

button:hover:not(:disabled) {
  filter: brightness(1.08);
}

.primary-button:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: var(--shadow-press-sm);
}

.primary-button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: none;
}

/* Card hover lift effect */
.entry-panel:hover:not(:disabled),
.game-card:hover:not(:disabled):not(.is-disabled),
.tool-card:hover {
  transform: translateY(-2px);
}

/* Smooth tap feedback for touch */
button { -webkit-tap-highlight-color: transparent; transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  background: var(--color-surface-strong);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-dim);
  outline: none;
}

.icon-button { width: 44px; min-height: 44px; padding: 0; font-weight: 900; }
.brand-actions { display: flex; align-items: center; gap: 7px; }
.sound-button { min-height: 38px; padding: 7px 9px; border-color: transparent; background: transparent; color: var(--color-muted); font-size: .72rem; }
.text-button { border-color: transparent; background: transparent; color: var(--color-muted); }
.back-button { padding-left: 0; }

.primary-button {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-accent) 0%, #ffb84d 100%);
  color: #06170f;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.entry-grid { display: grid; gap: 12px; }
.entry-panel {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
  text-align: left;
}
.entry-panel strong { font-size: 1.7rem; }
.entry-panel > span:last-child { max-width: 330px; color: var(--color-muted); line-height: 1.45; }
.entry-kicker { color: var(--color-warm); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; }
.entry-quick { background: #202624; }
.entry-party { background: #25221d; }
.home-share-hub { display: grid; gap: 8px; margin-top: 14px; }
.home-surrender-entry { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 11px; min-height: 76px; padding: 10px 13px; border: 2px solid #11130f; border-radius: 8px; background: #ffd447; color: #11130f; box-shadow: 4px 4px 0 #050605; text-align: left; }
.home-surrender-entry > span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid #11130f; border-radius: 50%; font-size: 1.2rem; font-weight: 950; }
.home-surrender-entry strong { font-size: 1.15rem; }
.home-surrender-entry small { color: rgba(17,19,15,.7); font-size: .64rem; }
.home-share-hub > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.home-share-hub > div button { display: grid; gap: 3px; min-width: 0; min-height: 58px; padding: 9px 10px; border-radius: 8px; background: var(--color-surface); text-align: left; }
.home-share-hub > div strong { font-size: .78rem; }
.home-share-hub > div small { color: var(--color-muted); font-size: .58rem; line-height: 1.25; }

.game-library { margin-top: 46px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 1.55rem; }
.section-heading > span { color: var(--color-muted); font-size: 0.84rem; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.game-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
  text-align: left;
}
.game-card strong { font-size: 1.2rem; }
.game-card > span:last-child { color: var(--color-muted); font-size: 0.86rem; line-height: 1.4; }
.game-meta { color: var(--color-accent); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.game-card.is-disabled { background: transparent; }
.safety-note { margin-top: 30px; color: var(--color-muted); font-size: 0.76rem; text-align: center; }

.setup-shell, .result-shell, .game-shell { max-width: 620px; }
.setup-panel, .result-screen { padding-top: 28px; }
.setup-panel h1, .result-screen h1, .game-panel h1 { font-size: clamp(2rem, 10vw, 3.8rem); }
.field { display: grid; gap: 8px; margin-top: 20px; }
.field > span, .setup-group h2 { color: var(--color-muted); font-size: 0.86rem; }
.range-field { grid-template-columns: 1fr auto; }
.range-field input { grid-column: 1 / -1; padding: 0; accent-color: var(--color-accent); }
.range-field output { font-size: 1.5rem; font-weight: 900; }

.player-list { display: grid; gap: 8px; margin-top: 16px; }
.player-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.player-row > span { display: grid; place-items: center; color: var(--color-muted); font-size: 0.8rem; }
.setup-group { margin-top: 28px; }
.segmented-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip { min-width: 0; padding: 9px 8px; font-size: 0.86rem; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.chip.is-active { border-color: var(--color-accent); background: var(--color-accent-dim); color: var(--color-accent); }
.start-session-button { width: 100%; margin-top: 32px; }
.fine-print { margin-top: 10px; color: var(--color-muted); font-size: 0.75rem; text-align: center; }

.game-shell { position: relative; }
.game-menu {
  position: absolute;
  z-index: 30;
  top: 70px;
  right: var(--page-pad);
  display: grid;
  width: min(230px, calc(100% - 36px));
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #111315;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.game-menu button { text-align: left; }
.pause-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,9,10,.9); }
.pause-overlay > div { width: min(100%, 360px); text-align: center; }
.pause-overlay h2 { font-size: 2rem; }
.pause-overlay button { width: 100%; margin-top: 22px; }
.game-panel { padding-top: 26px; }
.action-stack { display: grid; gap: 9px; margin-top: 22px; }
.result-box {
  display: grid;
  gap: 7px;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
.result-box p { font-size: 0.88rem; }
.score-list { display: grid; gap: 8px; margin-top: 18px; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--color-border); }

.game-theme-finger-catch { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100svh; max-width: 720px; overflow: hidden; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.finger-game { display: flex; flex-direction: column; padding-top: 0; gap: 8px; }
.finger-game .finger-pad { flex: 1 1 0; }

.finger-pad {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  margin: 0 calc(var(--page-pad) * -1);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #164838;
  text-align: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background 220ms ease;
}
.finger-pad::before { content: ""; position: absolute; inset: 12px; border: 2px solid rgba(255,255,255,.15); pointer-events: none; }
.finger-intro { position: absolute; z-index: 4; top: 24px; left: var(--page-pad); right: var(--page-pad); display: flex; align-items: baseline; justify-content: space-between; gap: 14px; pointer-events: none; text-align: left; }
.finger-intro .eyebrow { margin: 0; color: #ffd447; }
.finger-intro > strong { max-width: 56%; color: rgba(255,255,255,.76); font-size: .72rem; font-weight: 750; text-align: right; }
.finger-pad.status-shuffling, .finger-pad.status-selected { background: #050605; }
.finger-pad.status-shuffling::before { border-color: rgba(255,255,255,.08); }
.finger-pad.status-shuffling .finger-intro { opacity: .28; }
.finger-pad.status-shuffling .finger-tension i { opacity: .12; animation: none; }
.finger-pad.status-shuffling .finger-signal strong { color: #fffaf0; font-size: 3.8rem; animation: finger-signal-pop 260ms ease both; }
.finger-pad.status-shuffling .finger-signal span { color: rgba(255,255,255,.68); }
.finger-pad.status-selected::before { border-color: color-mix(in srgb, var(--selected-color) 70%, transparent); }
.finger-pad.status-selected .finger-intro { opacity: .22; }
.finger-pad.status-selected .finger-tension { opacity: 0; }
.finger-pad.status-selected .finger-signal { position: absolute; top: 76px; left: 20px; right: 20px; padding: 0; }
.finger-pad.status-selected .finger-signal strong { color: var(--selected-color); font-size: 2.8rem; overflow-wrap: anywhere; animation: finger-result-pop 420ms cubic-bezier(.2,.9,.2,1) both; }
.finger-pad.status-selected .finger-signal span { color: #fffaf0; }
.finger-signal { position: relative; z-index: 2; display: grid; gap: 6px; padding: 90px 28px 20px; pointer-events: none; }
.finger-signal strong { color: #fffaf0; font-size: 4rem; line-height: .92; }
.finger-signal > span { color: rgba(255,255,255,.78); font-size: 1rem; font-weight: 800; }
.finger-signal small { margin-top: 7px; color: rgba(255,255,255,.64); font-size: .72rem; }
.finger-tension { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.finger-tension i { position: absolute; width: 38px; height: 38px; border: 5px solid #ff795f; opacity: .58; transform: rotate(45deg); }
.finger-tension i:nth-child(1) { top: 28%; left: -19px; }.finger-tension i:nth-child(2) { top: 48%; right: -19px; }.finger-tension i:nth-child(3) { bottom: 12%; left: 15%; width: 20px; height: 20px; }.finger-tension i:nth-child(4) { top: 19%; right: 18%; width: 14px; height: 14px; }
.finger-visuals { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.finger-touch {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--touch-color);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--touch-color) 33%, transparent), 0 0 0 15px color-mix(in srgb, var(--touch-color) 14%, transparent);
  animation: finger-arrive 240ms cubic-bezier(.2,.9,.2,1), finger-pulse 1.4s ease-in-out 240ms infinite alternate;
}
.finger-touch::after {
  content: attr(data-number);
  position: absolute;
  top: -17px;
  right: -17px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #11130f;
  border-radius: 50%;
  background: #fffaf0;
  color: #11130f;
  font-size: .92rem;
  font-weight: 950;
  box-shadow: 0 0 0 3px var(--touch-color);
}
.finger-pad.status-shuffling .finger-touch { border-color: #242824; background: #090a09; box-shadow: none; opacity: .3; animation: none; }
.finger-pad.status-shuffling .finger-touch::after { opacity: .28; box-shadow: none; }
.finger-touch.is-cycling { z-index: 6; border-color: #fffaf0 !important; background: var(--touch-color) !important; opacity: 1 !important; animation: finger-cycle 180ms ease both !important; box-shadow: 0 0 0 12px color-mix(in srgb, var(--touch-color) 35%, transparent), 0 0 34px var(--touch-color) !important; }
.finger-touch.is-cycling::after { opacity: 1 !important; box-shadow: 0 0 0 4px var(--touch-color) !important; }
.finger-pad.status-selected .finger-touch { border-color: #11130f; background: #050605; box-shadow: none; opacity: .08; animation: none; }
.finger-pad.status-selected .finger-touch::after { opacity: 0; }
.finger-touch.is-selected { z-index: 7; border-color: #fffaf0 !important; background: var(--touch-color) !important; opacity: 1 !important; animation: finger-picked 520ms ease-in-out infinite alternate !important; }
.finger-touch.is-selected::after { top: -27px; right: -27px; width: 48px; height: 48px; border-width: 4px; opacity: 1 !important; font-size: 1.25rem; box-shadow: 0 0 0 5px var(--touch-color), 0 0 28px var(--touch-color) !important; }
.finger-footer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 62px; }
.finger-footer .game-status-line { min-width: 0; margin: 0; }
.finger-footer .game-status-line strong { font-size: .76rem; line-height: 1.35; }
.finger-reset { width: 42px; min-height: 42px; padding: 0; border-color: transparent; background: transparent; color: var(--color-muted); font-size: 1.45rem; }
.finger-simulator { display: grid; gap: 6px; padding: 12px 0 4px; border-top: 1px solid var(--color-border); }
.finger-simulator > span { color: var(--color-accent); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.finger-simulator > p { font-size: .72rem; }
.finger-simulator > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 4px; }
.finger-sim-button { min-width: 0; min-height: 42px; padding: 7px 5px; overflow: hidden; border-bottom: 4px solid var(--touch-color); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.finger-sim-button.is-active { border-color: #11130f; background: var(--touch-color); color: #11130f; }
.game-status-line { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; color: var(--color-muted); font-size: 0.86rem; }
.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--color-accent); }

@keyframes finger-arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.25); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes finger-pulse { from { box-shadow: 0 0 0 7px color-mix(in srgb, var(--touch-color) 28%, transparent), 0 0 0 13px color-mix(in srgb, var(--touch-color) 12%, transparent); } to { box-shadow: 0 0 0 12px color-mix(in srgb, var(--touch-color) 30%, transparent), 0 0 0 22px transparent; } }
@keyframes finger-tension { from { opacity: .2; transform: rotate(45deg) scale(.75); } to { opacity: .8; transform: rotate(45deg) scale(1.08); } }
@keyframes finger-cycle { from { transform: translate(-50%, -50%) scale(.78); } to { transform: translate(-50%, -50%) scale(1.14); } }
@keyframes finger-picked { to { transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 0 0 18px color-mix(in srgb, var(--touch-color) 40%, transparent), 0 0 52px var(--touch-color); } }
@keyframes finger-signal-pop { from { opacity: .35; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes finger-result-pop { from { opacity: 0; transform: translateY(-12px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 719px) {
  .finger-simulator { display: none; }
}

@media (max-width: 520px) {
  .finger-signal strong { font-size: 3rem; }
  .finger-pad.status-shuffling .finger-signal strong { font-size: 2.8rem; }
  .finger-pad.status-selected .finger-signal strong { font-size: 2.1rem; }
  .finger-touch { width: 66px; height: 66px; }
  .finger-touch::after { top: -15px; right: -15px; width: 30px; height: 30px; }
}

.game-theme-crocodile { --croc-green: #65d482; --croc-dark: #1c6d47; --croc-ink: #13251a; }
.crocodile-game { padding-top: 16px; }
.croc-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.croc-heading > div:first-child { min-width: 0; }
.croc-heading .eyebrow { margin-bottom: 6px; }
.croc-heading h1 { margin: 0; font-size: clamp(1.8rem, 8vw, 3.2rem); line-height: .96; overflow-wrap: anywhere; }
.croc-skin-picker { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.croc-skin-picker button { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: transparent; font-size: 1.35rem; }
.croc-skin-picker button.is-active { border-color: var(--color-accent); background: var(--color-accent-dim); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.croc-turn-badge { display: grid; flex: 0 0 auto; grid-template-columns: 38px auto; align-items: center; gap: 7px; min-height: 46px; padding: 5px 8px 5px 5px; border: 2px solid #10140e; border-radius: 8px; background: var(--player-color); color: #11130f; box-shadow: 3px 3px 0 #050605; }
.croc-turn-badge span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #11130f; border-radius: 50%; font-weight: 950; }
.croc-turn-badge small { max-width: 64px; font-size: .58rem; font-weight: 850; line-height: 1.1; }
.croc-stage { position: relative; width: min(100%, 470px); aspect-ratio: 1.05; margin: 14px auto 0; overflow: hidden; border: 2px solid #11130f; border-radius: 8px; background: #f0cd56; box-shadow: 5px 5px 0 #050605; }
.croc-stage::before, .croc-stage::after { content: ""; position: absolute; width: 26px; height: 26px; border: 4px solid #ff725f; transform: rotate(45deg); }
.croc-stage::before { top: 8%; left: -15px; }.croc-stage::after { right: -14px; bottom: 13%; }
.croc-character { position: absolute; inset: 3% 5% 2%; }
.croc-head { position: absolute; z-index: 1; top: 0; left: 8%; right: 8%; height: 38%; border: 5px solid var(--croc-ink); border-radius: 45% 45% 20% 20%; background: var(--animal-body, var(--croc-green)); box-shadow: inset 0 -10px 0 rgba(19,37,26,.1); }
.croc-ear, .croc-markings, .croc-cheeks { display: none; }
.croc-ear { position: absolute; z-index: 0; top: -25px; width: 58px; height: 58px; border: 5px solid var(--croc-ink); background: var(--animal-body); }
.croc-ear.ear-left { left: 8%; }.croc-ear.ear-right { right: 8%; }
.croc-markings { position: absolute; top: -4px; left: 50%; gap: 7px; transform: translateX(-50%); }
.croc-markings i { width: 10px; height: 38px; border-radius: 0 0 8px 8px; background: var(--croc-ink); }
[data-animal="tiger"] .croc-ear, [data-animal="pig"] .croc-ear, [data-animal="bear"] .croc-ear, [data-animal="cat"] .croc-ear { display: block; }
[data-animal="cat"] .croc-ear { border-radius: 8px 8px 70% 70%; transform: rotate(45deg); }
[data-animal="cat"] .ear-right { transform: rotate(-45deg); }
[data-animal="bear"] .croc-ear { border-radius: 50%; }
[data-animal="tiger"] .croc-head { top: 1%; left: 13%; right: 13%; height: 41%; border-radius: 46% 46% 34% 34%; box-shadow: inset 0 -14px 0 rgba(115,54,16,.1); }
[data-animal="tiger"] .croc-head::before, [data-animal="tiger"] .croc-head::after { content: ""; position: absolute; z-index: 1; top: 24%; width: 34px; height: 10px; border-radius: 10px; background: var(--croc-ink); box-shadow: 0 17px 0 var(--croc-ink); }
[data-animal="tiger"] .croc-head::before { left: 1%; transform: rotate(18deg); }
[data-animal="tiger"] .croc-head::after { right: 1%; transform: rotate(-18deg); }
[data-animal="tiger"] .croc-ear { top: -19px; width: 64px; height: 59px; border-radius: 12px 68% 12px 68%; background: #f6b24f; transform: rotate(35deg); }
[data-animal="tiger"] .croc-ear::after { content: ""; position: absolute; inset: 14px; border-radius: 8px 65% 8px 65%; background: #f47f72; }
[data-animal="tiger"] .croc-ear.ear-left { left: 3%; }
[data-animal="tiger"] .croc-ear.ear-right { right: 3%; transform: rotate(-35deg) scaleX(-1); }
[data-animal="tiger"] .croc-markings { z-index: 2; top: -4px; display: flex; }
[data-animal="tiger"] .croc-markings i { width: 11px; height: 36px; clip-path: polygon(0 0,100% 0,72% 100%,28% 100%); }
[data-animal="tiger"] .croc-markings i:nth-child(2) { height: 45px; }
[data-animal="tiger"] .croc-brow { top: 31%; width: 18%; height: 6px; background: var(--croc-ink); }
[data-animal="tiger"] .croc-brow.brow-left { left: 16%; transform: rotate(-10deg); }
[data-animal="tiger"] .croc-brow.brow-right { right: 16%; transform: rotate(10deg); }
[data-animal="tiger"] .croc-eye { top: 35%; width: clamp(42px, 11vw, 52px); aspect-ratio: 1.18; border-color: var(--croc-ink); border-radius: 54% 46% 50% 50%; background: #ffe28a; }
[data-animal="tiger"] .croc-eye.eye-left { left: 19%; }
[data-animal="tiger"] .croc-eye.eye-right { right: 19%; }
[data-animal="tiger"] .croc-eye span { width: 7px; height: 21px; border-radius: 45%; }
[data-animal="tiger"] .croc-cheeks { position: absolute; z-index: 2; right: 23%; bottom: -2px; left: 23%; display: flex; justify-content: space-between; }
[data-animal="tiger"] .croc-cheeks i { width: 49%; height: 55px; border: 4px solid var(--croc-ink); border-radius: 50%; background: #fff0c7; }
[data-animal="tiger"] .croc-nose { z-index: 4; bottom: 15%; width: 24px; height: 18px; gap: 0; border-radius: 50% 50% 65% 65%; background: var(--croc-ink); }
[data-animal="tiger"] .croc-nose::after { content: ""; position: absolute; top: 14px; left: 50%; width: 4px; height: 19px; border-radius: 3px; background: var(--croc-ink); transform: translateX(-50%); }
[data-animal="tiger"] .croc-nose i { display: none; }
[data-animal="tiger"] .croc-upper-jaw { top: 34%; left: 6%; right: 6%; height: 19%; border-radius: 44px 44px 16px 16px; }
[data-animal="tiger"] .croc-mouth-cavity { top: 43%; left: 10%; right: 10%; height: 35%; border-radius: 28px 28px 46px 46px; }
[data-animal="tiger"] .croc-lower-jaw { top: 72%; left: 8%; right: 8%; height: 20%; border-radius: 14px 14px 48px 48px; }
[data-animal="tiger"] .croc-tooth:nth-child(1) span, [data-animal="tiger"] .croc-tooth:nth-child(8) span { transform: scaleY(1.12); }
[data-animal="pig"] .croc-head { top: 0; left: 11%; right: 11%; height: 43%; border-radius: 50% 50% 38% 38%; box-shadow: inset 0 -14px 0 rgba(143,77,97,.09); }
[data-animal="pig"] .croc-ear { z-index: -1; top: 3%; width: 65px; height: 78px; border-radius: 58% 42% 55% 45%; background: #f2a2b4; }
[data-animal="pig"] .croc-ear::after { content: ""; position: absolute; inset: 13px 15px; border-radius: inherit; background: #d97d92; }
[data-animal="pig"] .croc-ear.ear-left { left: -7%; transform: rotate(-24deg); }
[data-animal="pig"] .croc-ear.ear-right { right: -7%; transform: rotate(24deg); }
[data-animal="pig"] .croc-brow { top: 24%; width: 15%; height: 5px; opacity: .42; }
[data-animal="pig"] .croc-brow.brow-left { left: 20%; transform: rotate(-8deg); }
[data-animal="pig"] .croc-brow.brow-right { right: 20%; transform: rotate(8deg); }
[data-animal="pig"] .croc-eye { top: 27%; width: clamp(38px, 10vw, 48px); border-color: #7f4055; background: #fff0c4; }
[data-animal="pig"] .croc-eye.eye-left { left: 23%; }
[data-animal="pig"] .croc-eye.eye-right { right: 23%; }
[data-animal="pig"] .croc-eye span { width: 9px; height: 15px; }
[data-animal="pig"] .croc-cheeks { position: absolute; right: 11%; bottom: 13%; left: 11%; display: flex; justify-content: space-between; }
[data-animal="pig"] .croc-cheeks i { width: 38px; height: 20px; border-radius: 50%; background: rgba(218,98,126,.32); }
[data-animal="pig"] .croc-nose { z-index: 3; bottom: 1%; align-items: center; justify-content: center; width: 112px; height: 60px; border: 5px solid var(--croc-ink); border-radius: 48% 48% 44% 44%; background: #f583a1; box-shadow: inset 0 -7px 0 rgba(143,77,97,.12); }
[data-animal="pig"] .croc-nose i { width: 11px; height: 18px; background: #7f4055; }
[data-animal="pig"] .croc-upper-jaw { top: 35%; left: 8%; right: 8%; height: 18%; border-radius: 48px 48px 18px 18px; }
[data-animal="pig"] .croc-mouth-cavity { top: 43%; left: 13%; right: 13%; height: 34%; border-radius: 34px 34px 48px 48px; }
[data-animal="pig"] .croc-lower-jaw { top: 72%; left: 11%; right: 11%; height: 21%; border-radius: 18px 18px 52px 52px; }
[data-animal="pig"] .croc-tooth span { inset: 8px 10%; clip-path: none; }
[data-animal="pig"] .tooth-upper span { border-radius: 9px 9px 46% 46%; }
[data-animal="pig"] .tooth-lower span { border-radius: 46% 46% 9px 9px; }
[data-animal="bear"] .croc-nose { bottom: 0; align-items: center; justify-content: center; width: 74px; height: 48px; border-radius: 50%; background: #c8a47b; }
[data-animal="cat"] .croc-brow { width: 17%; }
.croc-eye { position: absolute; top: 20%; display: grid; place-items: center; width: clamp(39px, 12vw, 56px); aspect-ratio: 1; border: 5px solid var(--croc-dark); border-radius: 50%; background: #fff2b7; }
.croc-eye.eye-left { left: 16%; }.croc-eye.eye-right { right: 16%; }
.croc-eye span { width: 11px; height: 17px; border-radius: 50%; background: #11130f; animation: croc-look 3.5s ease-in-out infinite; }
.croc-brow { position: absolute; z-index: 2; top: 12%; width: 22%; height: 7px; border-radius: 4px; background: var(--croc-dark); }
.croc-brow.brow-left { left: 12%; transform: rotate(8deg); }.croc-brow.brow-right { right: 12%; transform: rotate(-8deg); }
.croc-nose { position: absolute; left: 50%; bottom: 8%; display: flex; gap: 18px; transform: translateX(-50%); }
.croc-nose i { width: 7px; height: 7px; border-radius: 50%; background: var(--croc-dark); }
.croc-upper-jaw, .croc-lower-jaw { position: absolute; z-index: 5; left: 1%; right: 1%; height: 24%; border: 5px solid var(--croc-ink); background: var(--animal-jaw, var(--croc-green)); }
.croc-upper-jaw { top: 27%; border-radius: 22px 22px 10px 10px; transform-origin: center top; }
.croc-lower-jaw { top: 71%; border-radius: 10px 10px 40px 40px; transform-origin: center bottom; }
.croc-mouth-cavity { position: absolute; z-index: 2; top: 39%; left: 5%; right: 5%; height: 42%; overflow: hidden; border: 5px solid var(--croc-ink); border-radius: 22px 22px 38px 38px; background: #722a3c; }
.croc-tongue { position: absolute; left: 18%; right: 18%; bottom: -10%; height: 43%; border: 4px solid #6e2535; border-radius: 50% 50% 18px 18px; background: #db6c80; }
.croc-snap-word { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: #fff6d8; font-size: clamp(2.5rem, 13vw, 5.4rem); font-weight: 950; opacity: 0; transform: rotate(-6deg) scale(.3); }
.croc-teeth-row { position: absolute; z-index: 8; left: 4%; right: 4%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.croc-upper-teeth { bottom: -44%; align-items: start; }.croc-lower-teeth { top: -44%; align-items: end; }
.croc-tooth { position: relative; min-width: 0; min-height: clamp(48px, 14vw, 68px); padding: 0; overflow: visible; border: 0; background: transparent; }
.croc-tooth:disabled { opacity: 1; }
.croc-tooth span { position: absolute; inset: 4px 5%; border: 3px solid #29261e; background: #fff8df; box-shadow: inset -4px -5px 0 rgba(123,104,72,.12); transition: transform 170ms ease, opacity 170ms ease; }
.tooth-upper span { border-radius: 7px 7px 48% 48%; clip-path: polygon(4% 0,96% 0,86% 70%,50% 100%,14% 70%); transform-origin: center top; }
.tooth-lower span { border-radius: 48% 48% 7px 7px; clip-path: polygon(50% 0,88% 30%,96% 100%,4% 100%,12% 30%); transform-origin: center bottom; }
.tooth-shape-2 span { left: 10%; right: 10%; }.tooth-shape-3 span { transform: scaleX(.88); }
.croc-tooth.is-pressed span { border-color: #355f46; background: #dff0cf; box-shadow: inset 0 -4px 0 rgba(53,95,70,.16); }
.tooth-upper.is-pressed span { opacity: .96; transform: translateY(-12%) scale(.88); }.tooth-lower.is-pressed span { opacity: .96; transform: translateY(12%) scale(.88); }
.croc-tooth.is-last-safe span { animation: safe-tooth 430ms ease; }
.croc-tooth.is-triggered span { background: #ffcf4a; }
.croc-foot { position: absolute; z-index: 0; bottom: 0; width: 28%; height: 16%; border: 5px solid var(--croc-ink); border-radius: 50%; background: var(--animal-body, var(--croc-green)); }
.croc-foot.foot-left { left: -3%; transform: rotate(-12deg); }.croc-foot.foot-right { right: -3%; transform: rotate(12deg); }
.croc-foot b { position: absolute; bottom: -3px; width: 16px; height: 12px; border: 3px solid var(--croc-ink); border-radius: 50%; background: #fff8df; }.croc-foot b:nth-child(1){left:16%}.croc-foot b:nth-child(2){left:42%}.croc-foot b:nth-child(3){right:8%}
.croc-stage.has-safe .croc-head { animation: croc-nod 360ms ease; }
.croc-stage.has-safe .croc-eye span { animation: croc-blink 360ms ease; }
.croc-stage.is-biting { animation: croc-stage-shake 1.8s ease both; }
.croc-stage.is-biting .croc-upper-jaw { animation: croc-upper-bite 1.8s cubic-bezier(.25,.85,.3,1) both; }
.croc-stage.is-biting .croc-lower-jaw { animation: croc-lower-bite 1.8s cubic-bezier(.25,.85,.3,1) both; }
.croc-stage.is-biting .croc-head { animation: croc-head-bite 1.8s cubic-bezier(.25,.85,.3,1) both; }
.croc-stage.is-biting .croc-mouth-cavity { animation: croc-mouth-close 1.8s cubic-bezier(.25,.85,.3,1) both; }
.croc-stage.is-biting .croc-eye span { width: 23px; height: 6px; border-radius: 2px; }
.croc-stage.is-biting .croc-snap-word { animation: croc-word 1.8s ease both; }
.croc-footer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 59px; }
.croc-footer .game-status-line { min-width: 0; margin: 0; }
.croc-footer .game-status-line strong { font-size: .78rem; line-height: 1.3; }
.croc-footer .game-status-line p { margin-top: 2px; font-size: .65rem; }
.croc-reset { width: 42px; min-height: 42px; padding: 0; border-color: transparent; background: transparent; color: var(--color-muted); font-size: 1.45rem; }
.croc-instruction { padding: 8px 12px; border-left: 4px solid var(--color-accent); background: rgba(255,255,255,.04); font-size: .72rem; line-height: 1.4; }

@keyframes croc-look { 0%, 45%, 100% { transform: translateX(-5px); } 55%, 90% { transform: translateX(5px); } }
@keyframes croc-blink { 50% { height: 4px; border-radius: 2px; } }
@keyframes croc-nod { 50% { transform: translateY(5px); } }
@keyframes safe-tooth { 0% { filter: brightness(1); } 45% { filter: brightness(1.35); transform: scaleY(.78); } 100% { filter: brightness(1); } }
@keyframes croc-upper-bite { 0%,18% { transform: translateY(0); } 34% { transform: translateY(70%); } 50% { transform: translateY(4%); } 68%,100% { transform: translateY(58%); } }
@keyframes croc-lower-bite { 0%,18% { transform: translateY(0); } 34% { transform: translateY(-70%); } 50% { transform: translateY(-4%); } 68%,100% { transform: translateY(-58%); } }
@keyframes croc-head-bite { 0%,18% { transform: translateY(0); } 34% { transform: translateY(18%); } 50% { transform: translateY(0); } 68%,100% { transform: translateY(14%); } }
@keyframes croc-mouth-close { 0%,18% { transform: scaleY(1); } 34% { transform: scaleY(.2); } 50% { transform: scaleY(.9); } 68%,100% { transform: scaleY(.28); } }
@keyframes croc-stage-shake { 0%,28%,48%,100% { transform: translateX(0); } 31%,51% { transform: translateX(-5px) rotate(-1deg); } 35%,55% { transform: translateX(5px) rotate(1deg); } }
@keyframes croc-word { 0%,30% { opacity: 0; transform: rotate(-6deg) scale(.3); } 36%,60% { opacity: 1; transform: rotate(-6deg) scale(1); } 100% { opacity: .72; transform: rotate(-4deg) scale(.86); } }

.result-screen { text-align: center; }
.result-burst { display: grid; place-items: center; width: 100px; height: 100px; margin: 26px auto; border-radius: 50%; background: linear-gradient(135deg, var(--color-danger) 0%, #ff8a5c 100%); color: #fff; font-size: 4rem; font-weight: 950; animation: result-arrive 520ms cubic-bezier(.2,.8,.25,1) both; box-shadow: 0 0 40px rgba(255,95,97,.3); }
.next-game-box { text-align: left; }
.next-game-box > span { color: var(--color-accent); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.picker-grid { margin-top: 24px; }
.end-from-picker { width: 100%; margin-top: 20px; }

.dice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.die { display: grid; place-items: center; min-height: 92px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-strong); font-size: 2.3rem; font-weight: 950; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.card-button { display: grid; gap: 8px; min-height: 96px; padding: 12px; }
.card-button strong { font-size: 1.35rem; }
.card-button.is-revealed { border-color: var(--color-accent); }
.number-row, .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.command-list { display: grid; gap: 8px; }

.game-theme-number-bomb { --bomb-orange: #ff825e; --bomb-yellow: #ffd447; }
.bomb-game { padding-top: 16px; }
.bomb-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.bomb-heading > div:first-child { min-width: 0; }
.bomb-heading .eyebrow { margin-bottom: 6px; }
.bomb-heading h1 { margin: 0; font-size: clamp(1.75rem, 8vw, 3.1rem); line-height: .96; overflow-wrap: anywhere; }
.game-player-badge { display: grid; flex: 0 0 auto; grid-template-columns: 36px minmax(0, auto); align-items: center; gap: 7px; min-height: 44px; max-width: 122px; padding: 4px 8px 4px 4px; border: 2px solid #10140e; border-radius: 8px; background: var(--player-color); color: #11130f; box-shadow: 3px 3px 0 #050605; }
.game-player-badge span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #11130f; border-radius: 50%; font-weight: 950; }
.game-player-badge small { overflow: hidden; font-size: .62rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.bomb-stage { position: relative; display: grid; place-items: center; height: clamp(120px, 16vh, 160px); margin: 8px 0 0; overflow: hidden; }
.bomb-body { position: relative; z-index: 4; display: grid; place-items: center; align-content: center; width: clamp(126px, 37vw, 166px); aspect-ratio: 1; border: 7px solid #0b0d0a; border-radius: 50%; background: #303633; color: #fffaf0; box-shadow: inset -17px -18px 0 rgba(0,0,0,.2), 5px 7px 0 rgba(0,0,0,.28); }
.bomb-body::before { content: ""; position: absolute; top: 17%; left: 18%; width: 23%; height: 12%; border-radius: 50%; background: rgba(255,255,255,.16); transform: rotate(-24deg); }
.bomb-body strong { font-size: clamp(3.2rem, 16vw, 5.6rem); line-height: .86; }
.bomb-body small { margin-top: 6px; color: rgba(255,255,255,.58); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.bomb-fuse { position: absolute; z-index: 3; top: 4%; left: 55%; width: 78px; height: 58px; transform: rotate(-22deg); }
.bomb-fuse i { position: absolute; inset: 13px 5px auto; height: 32px; border-top: 8px solid #151712; border-radius: 50%; }
.bomb-fuse span { position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: var(--bomb-yellow); transform: rotate(45deg); animation: fuse-pop 720ms steps(2) infinite; }
.pressure-medium .bomb-fuse span { animation-duration: 480ms; }.pressure-high .bomb-fuse span { animation-duration: 250ms; background: #ff695c; }
.bomb-pressure-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.bomb-pressure-rings i { position: absolute; border: 3px solid rgba(255,130,94,.2); border-radius: 50%; animation: bomb-breathe 1.6s ease-in-out infinite alternate; }
.bomb-pressure-rings i:nth-child(1) { width: 174px; height: 174px; }.bomb-pressure-rings i:nth-child(2) { width: 218px; height: 218px; animation-delay: 180ms; }.bomb-pressure-rings i:nth-child(3) { width: 270px; height: 270px; animation-delay: 360ms; }
.pressure-medium .bomb-pressure-rings i { animation-duration: 1s; border-color: rgba(255,212,71,.26); }.pressure-high .bomb-pressure-rings i { animation-duration: 520ms; border-color: rgba(255,96,82,.38); }
.bomb-blast { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.bomb-blast i { position: absolute; top: 50%; left: 50%; width: 16px; height: 80px; border: 4px solid #11130f; background: var(--bomb-yellow); opacity: 0; transform-origin: center -15px; }
.bomb-blast i:nth-child(1){transform:rotate(0deg) translateY(-125px)}.bomb-blast i:nth-child(2){transform:rotate(60deg) translateY(-125px)}.bomb-blast i:nth-child(3){transform:rotate(120deg) translateY(-125px)}.bomb-blast i:nth-child(4){transform:rotate(180deg) translateY(-125px)}.bomb-blast i:nth-child(5){transform:rotate(240deg) translateY(-125px)}.bomb-blast i:nth-child(6){transform:rotate(300deg) translateY(-125px)}
.range-display { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; gap: 9px; margin-top: 0; }
.range-display > span { display: grid; place-items: center; min-height: 52px; border: 2px solid var(--color-border); border-radius: 50%; background: transparent; font-size: 1.45rem; font-weight: 950; }
.range-display > div { display: grid; justify-items: center; gap: 3px; min-width: 0; text-align: center; }
.range-display small { color: var(--color-accent); font-size: .6rem; font-weight: 850; }
.range-display div > i { position: relative; width: 100%; height: 7px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.1); }
.range-display div > i b { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(100% * var(--range-ratio)); border-radius: 4px; background: var(--bomb-orange); transform: translateX(-50%); transition: width 360ms ease; }
.range-display strong { font-size: .68rem; white-space: nowrap; }
.bomb-game.has-guesses .range-display { animation: range-squeeze 360ms ease; }
.input-error { margin-top: 7px; color: #ff9f9f; font-size: .76rem; text-align: center; }

/* Two-level layout: decade bands -> expanded big numbers. Tuned for dark, one-handed, big-finger play. */
.bomb-grid { display: grid; grid-template-columns: repeat(var(--bomb-cols, 10), minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.bomb-num { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: .9rem; font-weight: 800; transition: transform 80ms ease, background 120ms ease, opacity 200ms ease; }
.bomb-num:active:not(:disabled) { transform: scale(.92); background: var(--bomb-yellow); color: #1a1208; }
.bomb-num.is-out { opacity: .15; background: transparent; border-color: transparent; pointer-events: none; }
.bomb-num.is-guessed { opacity: .3; background: var(--color-border); text-decoration: line-through; pointer-events: none; }
.bomb-num:disabled { cursor: default; }
.bomb-info-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.bomb-info-bar span { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--color-border); border-radius: 999px; font-size: .75rem; color: var(--color-muted); }
.bomb-info-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--bomb-yellow); }
.bomb-band-range { font-size: 1.2rem; font-weight: 850; line-height: 1; letter-spacing: .01em; }
.bomb-band small { font-size: .6rem; font-weight: 750; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.bomb-band:active:not(:disabled) { transform: scale(.95); }
.bomb-band.is-out { opacity: .22; background: transparent; border-color: transparent; pointer-events: none; }
.bomb-band.is-full { border-color: rgba(255, 212, 71, .55); background: rgba(255, 212, 71, .1); color: var(--bomb-yellow); }
.bomb-band.is-full small { color: var(--bomb-yellow); }
.bomb-band.is-active { border-color: var(--bomb-orange); background: rgba(255, 130, 94, .14); color: var(--bomb-orange); animation: band-pulse 1.2s ease-in-out infinite; }
.bomb-band.is-active small { color: var(--bomb-orange); }

.bomb-decade { margin-top: 12px; }
.bomb-decade-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bomb-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 2px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text); font-size: .92rem; font-weight: 750; }
.bomb-decade-title { font-size: 1.05rem; font-weight: 850; color: var(--bomb-orange); }
.bomb-pick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.bomb-pick { display: flex; align-items: center; justify-content: center; min-height: 66px; border: 2px solid var(--color-border); border-radius: 16px; background: var(--color-surface); color: var(--color-text); font-size: 1.7rem; font-weight: 850; transition: transform 100ms ease, background 160ms ease; }
.bomb-pick:active:not(:disabled) { transform: scale(.93); background: var(--bomb-yellow); color: #1a1208; }
.bomb-pick.is-out { opacity: .2; background: transparent; border-color: transparent; pointer-events: none; }
.bomb-pick.is-guessed { opacity: .35; background: var(--color-border); text-decoration: line-through; pointer-events: none; }
.bomb-pick:disabled { cursor: default; }
@keyframes band-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 130, 94, .0); } 50% { box-shadow: 0 0 0 4px rgba(255, 130, 94, .22); } }
.bomb-reset-small { margin-top: 6px; padding: 4px 10px; border: 0; background: transparent; color: var(--color-muted); font-size: .64rem; }
.bomb-message { display: flex; align-items: flex-start; gap: 9px; min-height: 48px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--color-border); }
.bomb-message strong { font-size: .75rem; line-height: 1.25; }.bomb-message p { margin-top: 2px; font-size: .64rem; line-height: 1.3; }
.bomb-game.is-exploding .bomb-body { z-index: 6; background: var(--color-danger); animation: bomb-boom 1.4s ease-out both; }
.bomb-game.is-exploding .bomb-fuse span { animation: none; opacity: 0; }
.bomb-game.is-exploding .bomb-pressure-rings { opacity: 0; }
.bomb-game.is-exploding .bomb-blast i { animation: blast-ray 1.4s ease-out both; }
.bomb-game.is-exploding .bomb-blast i:nth-child(even) { background: #ff725f; animation-delay: 30ms; }

@keyframes bomb-breathe { from { opacity: .3; transform: scale(.9); } to { opacity: .8; transform: scale(1.04); } }
@keyframes fuse-pop { 50% { transform: rotate(45deg) scale(1.65); background: #fff; } }
@keyframes range-squeeze { 0% { transform: scaleX(1.05); } 65% { transform: scaleX(.96); } 100% { transform: scaleX(1); } }
@keyframes bomb-boom { 0% { transform: scale(1); } 28% { transform: scale(.8); } 48% { transform: scale(1.3) rotate(-7deg); box-shadow: 0 0 0 0 rgba(255,93,93,.6); } 68% { transform: scale(.96) rotate(4deg); } 100% { transform: scale(1.08); box-shadow: 0 0 0 90px rgba(255,93,93,0); } }
@keyframes blast-ray { 0%,28% { opacity: 0; } 46% { opacity: 1; height: 86px; } 100% { opacity: 0; height: 120px; } }

.game-theme-lucky-wheel { --wheel-ink: #171a16; }
.wheel-game { padding-top: 14px; }
.wheel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; }
.wheel-heading .eyebrow { grid-column: 1; justify-self: start; margin: 0; }
.wheel-heading h1 { grid-column: 2; justify-self: center; margin: 0; font-size: 3rem; line-height: 1; text-align: center; white-space: nowrap; }
.wheel-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.wheel-mode { display: grid; justify-items: center; gap: 4px; min-width: 0; min-height: 58px; padding: 6px 3px; border-color: transparent; background: transparent; color: var(--color-muted); }
.wheel-mode i { position: relative; display: block; width: 23px; height: 23px; }
.wheel-mode span { max-width: 100%; overflow: hidden; font-size: .61rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.wheel-mode.is-active { border-color: var(--color-accent); background: rgba(112,225,232,.09); color: var(--color-accent); }
.mode-players i::before, .mode-players i::after { content: ""; position: absolute; border-radius: 50%; background: currentColor; }.mode-players i::before{top:1px;left:3px;width:9px;height:9px}.mode-players i::after{right:1px;bottom:1px;width:13px;height:13px}
.mode-tasks i { border: 2px solid currentColor; transform: rotate(-5deg); }.mode-tasks i::before,.mode-tasks i::after{content:"";position:absolute;left:4px;right:4px;height:2px;background:currentColor}.mode-tasks i::before{top:7px}.mode-tasks i::after{top:13px}
.mode-drinks i { border: 2px solid currentColor; border-radius: 3px 3px 7px 7px; }.mode-drinks i::before{content:"";position:absolute;top:-5px;right:-5px;width:10px;height:7px;border:2px solid currentColor;border-left:0;border-radius:0 7px 7px 0}
.mode-custom i::before,.mode-custom i::after{content:"";position:absolute;background:currentColor}.mode-custom i::before{top:10px;left:0;width:23px;height:3px}.mode-custom i::after{top:0;left:10px;width:3px;height:23px}
.custom-options { display: grid; gap: 5px; margin-top: 9px; }
.custom-options > span { color: var(--color-muted); font-size: .68rem; }
.custom-options > div { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 7px; }
.custom-options textarea { min-height: 72px; padding: 8px 10px; resize: vertical; font-size: .76rem; line-height: 1.3; }
.custom-options button { min-height: 72px; padding: 7px; color: var(--color-accent); font-size: .72rem; font-weight: 850; }
.wheel-stage { position: relative; display: grid; place-items: center; width: min(100%, 390px); aspect-ratio: 1; margin: 2px auto 0; }
.wheel-stage::before { content: ""; position: absolute; width: 91%; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.1); border-radius: 50%; }
.wheel-disc { position: relative; display: block; width: 88%; min-height: 0; aspect-ratio: 1; padding: 0; overflow: hidden; border: 9px solid #f7f0df; border-radius: 50%; background: var(--wheel-bg); transform: rotate(var(--wheel-rotation)); box-shadow: 0 0 0 4px var(--wheel-ink), 0 12px 0 rgba(0,0,0,.35); }
.wheel-disc:disabled { opacity: 1; }
.wheel-disc::before { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(23,26,22,.35), inset 0 0 0 28px rgba(255,255,255,.08); }
.wheel-disc.is-spinning { transition: transform 3.6s cubic-bezier(.08,.72,.09,1); }
.wheel-label { position: absolute; z-index: 3; top: 50%; left: 50%; width: 46%; height: 28px; color: #141711; transform: translateY(-50%) rotate(var(--label-angle)); transform-origin: left center; pointer-events: none; }
.wheel-label b { position: absolute; left: 34%; display: block; width: 64%; overflow: hidden; font-size: .78rem; font-weight: 950; line-height: 28px; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(255,255,255,.45); white-space: nowrap; transform: rotate(var(--label-flip)); transform-origin: center; }
.wheel-disc.density-medium .wheel-label b { font-size: .68rem; }
.wheel-disc.density-dense .wheel-label b { font-size: .56rem; }
.wheel-hub { position: absolute; z-index: 5; top: 50%; left: 50%; display: grid; place-items: center; width: clamp(72px, 23vw, 94px); aspect-ratio: 1; border: 7px solid #f7f0df; border-radius: 50%; background: var(--wheel-ink); color: #fffaf0; transform: translate(-50%,-50%); box-shadow: 0 0 0 3px var(--wheel-ink); }
.wheel-hub b { font-size: .72rem; font-weight: 950; }
.wheel-pointer { position: absolute; z-index: 8; top: 0; left: 50%; width: 44px; height: 58px; transform: translateX(-50%); transform-origin: 50% 8px; filter: drop-shadow(0 4px 2px rgba(0,0,0,.45)); }
.wheel-pointer::before { content: ""; position: absolute; top: 0; left: 50%; width: 18px; height: 18px; border: 4px solid var(--wheel-ink); border-radius: 50%; background: #ff6f61; transform: translateX(-50%); }
.wheel-pointer i { position: absolute; top: 14px; left: 50%; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 36px solid #ff6f61; transform: translateX(-50%); }
.phase-spinning .wheel-pointer { animation: wheel-pointer-tick 170ms ease-in-out 20; }
.wheel-player-count { display: grid; gap: 7px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.wheel-player-count-label { font-size: .72rem; font-weight: 800; color: var(--color-muted); white-space: nowrap; }
.wheel-player-count-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wheel-count-btn { justify-self: center; width: min(100%, 42px); min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border: 2px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: .85rem; font-weight: 800; }
.wheel-count-btn.is-active { border-color: var(--color-accent); background: var(--color-accent-dim); color: var(--color-accent); }
.wheel-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 4px; }
.wheel-actions:has(button + button) { grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); }

@keyframes wheel-pointer-tick { 0%,100% { transform: translateX(-50%) rotate(0); } 45% { transform: translateX(-50%) rotate(-12deg); } }

@media (max-width: 390px) and (max-height: 720px) {
  .wheel-game { padding-top: 8px; }
  .wheel-modes { margin-top: 8px; }
  .wheel-mode { min-height: 50px; }
  .wheel-stage { width: min(100%, 305px); }
}

@media (max-width: 520px) {
  .wheel-heading { grid-template-columns: 1fr; justify-items: center; gap: 5px; text-align: center; }
  .wheel-heading .eyebrow, .wheel-heading h1 { grid-column: 1; justify-self: center; }
  .wheel-heading h1 { font-size: 2.2rem; }
}

.game-theme-truth-or-dare { --truth-blue: #6fb5ff; --dare-pink: #f18ab8; --surprise-yellow: #ffd447; }
.truth-game { padding-top: 14px; }
.truth-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.truth-heading > div:first-child { min-width: 0; }
.truth-heading .eyebrow { margin-bottom: 6px; }
.truth-heading h1 { margin: 0; font-size: clamp(1.75rem, 8vw, 3rem); line-height: .96; overflow-wrap: anywhere; }
.truth-round { display: grid; grid-template-columns: auto minmax(70px, 1fr); align-items: center; gap: 10px; margin-top: 10px; }
.truth-round > span { color: var(--color-muted); font-size: .62rem; }
.truth-round > i { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.1); }
.truth-round b { display: block; height: 100%; border-radius: 3px; background: var(--color-accent); transition: width 260ms ease; }
.truth-preferences { display: grid; gap: 7px; margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.truth-tier { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.truth-tier > span { color: var(--color-muted); font-size: .65rem; font-weight: 800; }
.truth-tier > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.truth-tier button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 36px; padding: 5px; border-color: transparent; background: transparent; color: var(--color-muted); font-size: .65rem; }
.truth-tier button i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.truth-tier button.is-active { border-color: var(--color-accent); color: var(--color-accent); }
.boundary-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.boundary-chip { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 4px 7px; border-color: transparent; background: transparent; color: var(--color-muted); text-align: left; }
.boundary-chip > i { position: relative; width: 28px; height: 16px; border-radius: 9px; background: var(--color-accent); }
.boundary-chip > i b { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #11130f; transition: transform 160ms ease; }
.boundary-chip span { min-width: 0; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.boundary-chip.is-blocked { color: #ff9b9b; }
.boundary-chip.is-blocked > i { background: #4a4b47; }.boundary-chip.is-blocked > i b { transform: translateX(-12px); background: #d7d5cc; }
.truth-deck { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; min-height: 290px; margin-top: 18px; perspective: 900px; }
.truth-choice-card { position: relative; display: grid; align-content: space-between; min-width: 0; min-height: 250px; padding: 14px 10px; overflow: hidden; border: 4px solid #151811; background: var(--card-color); color: #151811; box-shadow: 4px 5px 0 #050605; text-align: left; transform-origin: center bottom; transition: transform var(--transition-bounce), box-shadow var(--transition-fast); }
.truth-choice-card:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 6px 8px 0 #050605; }
.truth-choice-card::before { content: ""; position: absolute; top: 45%; left: -18%; width: 136%; height: 3px; background: rgba(21,24,17,.3); transform: rotate(-18deg); }
.truth-choice-card > i { display: grid; place-items: center; width: 52px; height: 68px; border: 4px solid #151811; border-radius: 8px; background: rgba(255,255,255,.34); font-size: 2.2rem; font-style: normal; font-weight: 950; transform: rotate(-5deg); }
.truth-choice-card strong { position: relative; z-index: 2; font-size: clamp(.98rem, 4.5vw, 1.35rem); line-height: .95; overflow-wrap: anywhere; }
.truth-choice-card span { position: relative; z-index: 2; font-size: .6rem; font-weight: 700; line-height: 1.25; }
.card-truth { --card-color: var(--truth-blue); transform: rotate(-3deg) translateY(8px); }.card-random { --card-color: var(--surprise-yellow); transform: translateY(-3px); }.card-dare { --card-color: var(--dare-pink); transform: rotate(3deg) translateY(8px); }
.truth-choice-card:active:not(:disabled) { transform: translateY(3px) scale(.97); }
.prompt-stage { min-height: 320px; margin-top: 16px; perspective: 1000px; }
.prompt-card { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 16px; min-height: 320px; padding: 24px 22px; overflow: hidden; border: 5px solid #151811; border-radius: 8px; background: var(--prompt-color); color: #151811; box-shadow: 6px 7px 0 #050605; transform-origin: left center; animation: truth-card-reveal 520ms cubic-bezier(.2,.82,.2,1) both; }
.prompt-card::before { content: ""; position: absolute; right: -44px; bottom: -55px; width: 160px; height: 160px; border: 22px solid rgba(21,24,17,.14); border-radius: 50%; }
.prompt-truth { --prompt-color: var(--truth-blue); }.prompt-dare { --prompt-color: var(--dare-pink); animation-name: dare-card-reveal; }
.prompt-card > span { display: flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.prompt-card > span i { display: grid; place-items: center; width: 34px; height: 42px; border: 3px solid #151811; border-radius: 6px; background: rgba(255,255,255,.3); font-size: 1.3rem; font-style: normal; }
.prompt-card > strong { position: relative; z-index: 2; align-self: center; font-size: clamp(1.55rem, 7vw, 2.6rem); line-height: 1.12; overflow-wrap: anywhere; }
.prompt-card > small { position: relative; z-index: 2; max-width: 90%; font-size: .64rem; font-weight: 720; line-height: 1.35; }
.truth-prompt-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); gap: 8px; margin-top: 14px; }
.consent-note { margin-top: 10px; font-size: .68rem; line-height: 1.35; text-align: center; }

@keyframes truth-card-reveal { from { opacity: 0; transform: rotateY(-88deg) translateX(-18px); } to { opacity: 1; transform: rotateY(0) translateX(0); } }
@keyframes dare-card-reveal { from { opacity: 0; transform: rotateY(88deg) translateX(18px); } to { opacity: 1; transform: rotateY(0) translateX(0); } }

@media (max-width: 390px) and (max-height: 720px) {
  .truth-game { padding-top: 8px; }
  .truth-preferences { margin-top: 9px; padding: 7px 0; }
  .truth-deck { min-height: 245px; margin-top: 11px; }
  .truth-choice-card { min-height: 218px; padding: 11px 8px; }
  .truth-choice-card > i { width: 42px; height: 55px; font-size: 1.8rem; }
  .prompt-stage, .prompt-card { min-height: 276px; }
}

.game-theme-king-game { --king-gold: #f4c65d; --king-blue: #485c9d; --king-ink: #181914; }
.king-game { padding-top: 14px; }
.king-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.king-heading > div:first-child { min-width: 0; }
.king-heading .eyebrow { margin-bottom: 6px; }
.king-heading h1 { margin: 0; font-size: clamp(1.9rem, 9vw, 3.3rem); line-height: .95; overflow-wrap: anywhere; }
.king-reveal-progress { display: grid; grid-template-columns: auto minmax(60px, 1fr); align-items: center; gap: 10px; margin-top: 10px; }
.king-reveal-progress span { color: var(--color-muted); font-size: .62rem; }
.king-reveal-progress > i { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.1); }
.king-reveal-progress b { display: block; height: 100%; border-radius: 3px; background: var(--king-gold); transition: width 220ms ease; }
.king-reveal-copy { margin-top: 8px; font-size: .72rem; text-align: center; }
.private-card { width: min(70vw, 270px); aspect-ratio: 5 / 7; min-height: 0; margin: 13px auto 0; border: 0; background: transparent; perspective: 1100px; }
.king-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 560ms cubic-bezier(.2,.75,.2,1); }
.private-card.is-revealed .king-card-inner { transform: rotateY(180deg); }
.king-card-face { position: absolute; inset: 0; display: grid; justify-items: center; align-content: space-between; padding: 20px 16px; overflow: hidden; border: 6px solid #f8f0d8; border-radius: 8px; color: #f8f0d8; box-shadow: 0 0 0 3px var(--king-ink), 7px 8px 0 rgba(0,0,0,.38); backface-visibility: hidden; }
.king-card-face::before { content: ""; position: absolute; inset: 13px; border: 2px solid rgba(248,240,216,.45); border-radius: 5px; }
.king-card-face > * { position: relative; z-index: 2; }
.king-card-face > span { font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.king-card-face > strong { align-self: center; font-size: clamp(4.2rem, 24vw, 7.5rem); line-height: .85; }
.king-card-face > small { max-width: 92%; font-size: .62rem; font-weight: 720; line-height: 1.3; text-align: center; }
.king-card-back { background: var(--king-blue); }
.king-card-back::after { content: ""; position: absolute; top: 50%; left: 50%; width: 145px; height: 145px; border: 18px solid rgba(244,198,93,.24); transform: translate(-50%,-50%) rotate(45deg); }
.king-card-front { background: #f8f0d8; color: var(--king-ink); transform: rotateY(180deg); }
.king-card-front::before { border-color: rgba(24,25,20,.32); }
.king-card-front.is-king { background: var(--king-gold); }
.king-card-front.is-king > strong { font-size: clamp(2.8rem, 16vw, 5.2rem); }
.king-crown { position: relative; display: block; width: 72px; height: 48px; border-bottom: 12px solid currentColor; color: var(--king-gold); }
.king-crown b { position: absolute; bottom: 5px; width: 31px; height: 31px; background: currentColor; transform: rotate(45deg); }.king-crown b:nth-child(1){left:1px}.king-crown b:nth-child(2){left:21px}.king-crown b:nth-child(3){right:1px}
.king-card-front .king-crown { color: var(--king-ink); }
.king-reveal-action { width: min(100%, 330px); margin: 14px auto 0; }
.king-reveal-action button { width: 100%; }
.king-command-heading { display: grid; justify-items: center; text-align: center; }
.king-command-heading .eyebrow { justify-self: start; }
.king-command-heading .king-crown { margin: 10px 0 7px; }
.king-command-heading h1 { margin: 0; font-size: clamp(2rem, 10vw, 3.8rem); line-height: .94; overflow-wrap: anywhere; }
.king-command-heading p { max-width: 440px; margin-top: 8px; font-size: .72rem; }
.king-target-picker { display: grid; gap: 7px; margin-top: 16px; }
.king-target-picker > span { color: var(--color-muted); font-size: .66rem; font-weight: 800; }
.king-number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(47px, 1fr)); gap: 7px; }
.king-number-card { display: grid; justify-items: center; align-content: center; gap: 0; min-width: 0; min-height: 70px; padding: 5px; border: 3px solid #f8f0d8; background: var(--king-blue); color: #f8f0d8; box-shadow: 3px 3px 0 #050605; }
.king-number-card small { font-size: .48rem; }.king-number-card strong { font-size: 1.55rem; }
.king-number-card.is-active { border-color: var(--king-ink); background: var(--king-gold); color: var(--king-ink); transform: translateY(-4px); }
.king-command-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 54px; align-items: start; gap: 12px; min-height: 190px; margin-top: 14px; padding: 18px; overflow: hidden; border: 5px solid var(--king-ink); border-radius: 8px; background: #f8f0d8; color: var(--king-ink); box-shadow: 5px 6px 0 #050605; }
.king-command-card::after { content: "K"; position: absolute; right: -15px; bottom: -38px; color: rgba(24,25,20,.08); font-size: 10rem; font-weight: 950; transform: rotate(-8deg); }
.king-command-card > span { font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.king-command-card .king-crown { width: 51px; height: 34px; border-bottom-width: 8px; color: var(--king-ink); }
.king-command-card .king-crown b { bottom: 3px; width: 22px; height: 22px; }.king-command-card .king-crown b:nth-child(1){left:0}.king-command-card .king-crown b:nth-child(2){left:15px}.king-command-card .king-crown b:nth-child(3){right:0}
.king-command-card > strong { position: relative; z-index: 2; grid-column: 1 / -1; align-self: center; font-size: clamp(1.35rem, 6vw, 2.25rem); line-height: 1.12; overflow-wrap: anywhere; }
.king-command-card > small { position: relative; z-index: 2; grid-column: 1 / -1; font-size: .64rem; font-weight: 750; }
.king-command-card.is-issued { background: var(--king-gold); animation: king-task-arrive 420ms cubic-bezier(.2,.85,.2,1) both; }
.king-command-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,.55fr); gap: 8px; margin-top: 14px; }
.king-task-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; }
.king-task-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.king-task-heading > span { display: grid; place-items: center; width: 58px; height: 76px; border: 4px solid #f8f0d8; border-radius: 8px; background: var(--king-blue); color: #f8f0d8; font-size: 2rem; font-weight: 950; box-shadow: 3px 4px 0 #050605; }
.king-task-heading h1 { margin: 0; font-size: clamp(1.75rem, 8vw, 3rem); line-height: .96; overflow-wrap: anywhere; }
.king-task-heading p { margin-top: 5px; font-size: .68rem; line-height: 1.35; }
.king-task-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,.55fr); gap: 8px; margin-top: 14px; }
.king-task-actions .text-button { grid-column: 1 / -1; min-height: 42px; color: var(--color-muted); }
.king-command-help { max-width: 460px; margin: 10px auto 0; font-size: .82rem; line-height: 1.45; color: #f3e7c4; }
.king-command-card.is-readaloud > small { color: var(--king-blue); font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.king-called-heading { display: grid; justify-items: center; text-align: center; }
.king-called-heading .eyebrow { justify-self: start; }
.king-called-heading .king-crown { margin: 8px 0 6px; }
.king-called-heading h1 { margin: 0; font-size: clamp(1.9rem, 9vw, 3.2rem); line-height: .96; overflow-wrap: anywhere; }
.king-called-help { max-width: 460px; margin-top: 8px; font-size: .78rem; line-height: 1.4; color: #f3e7c4; }
.king-called-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,.55fr); gap: 8px; margin-top: 16px; }
.king-number-card { min-height: 74px; }
.king-number-card.is-active { border-color: var(--king-ink); background: var(--king-gold); color: var(--king-ink); transform: translateY(-4px); box-shadow: 3px 7px 0 #050605; }
.king-number-card.is-active strong { font-size: 1.8rem; }

/* ── King Game: setup count picker ── */
.king-phase-setup { display: grid; gap: 14px; }
.king-setup-copy { max-width: 420px; margin: 0 auto; font-size: .8rem; line-height: 1.5; text-align: center; color: var(--color-muted); }
.king-count-picker { display: grid; justify-items: center; gap: 10px; }
.king-count-label { font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.king-count-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.king-count-btn { min-width: 44px; min-height: 44px; padding: 0 8px; border: 3px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font-size: 1.1rem; font-weight: 850; transition: all 160ms ease; }
.king-count-btn:hover { border-color: var(--king-gold); }
.king-count-btn.is-active { border-color: var(--king-gold); background: var(--king-gold); color: var(--king-ink); transform: translateY(-3px); box-shadow: 3px 5px 0 rgba(0,0,0,.3); }
.king-setup-action { width: min(100%, 300px); margin: 0 auto; }
.king-setup-action button { width: 100%; }

/* ── King Game: penalty picker (called phase) ── */
.king-penalty-picker { display: grid; gap: 8px; margin-top: 14px; }
.king-penalty-label { font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.king-penalty-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.king-penalty-card { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 80px; padding: 8px 4px; border: 3px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: .65rem; font-weight: 800; transition: all 160ms ease; position: relative; overflow: hidden; }
.king-penalty-card::before { content: "?"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: 950; color: var(--color-border); opacity: .5; transition: opacity 160ms ease; }
.king-penalty-card span { position: relative; z-index: 2; }
.king-penalty-card:hover { border-color: var(--penalty-color, var(--color-accent)); }
.king-penalty-card.is-active { border-color: var(--penalty-color, var(--king-gold)); background: var(--penalty-color, var(--king-gold)); color: #fff; transform: translateY(-3px); box-shadow: 3px 5px 0 rgba(0,0,0,.3); }
.king-penalty-card.is-active::before { opacity: 0; }
.king-penalty-preview { display: grid; justify-items: center; gap: 4px; margin-top: 6px; padding: 10px 12px; border: 2px dashed var(--color-border); border-radius: 8px; }
.king-penalty-preview strong { font-size: .85rem; line-height: 1.3; text-align: center; }
.king-penalty-preview .text-button { font-size: .65rem; color: var(--color-accent); }
.king-self-warning { margin-top: 6px; padding: 6px 12px; border-radius: 6px; background: rgba(255,107,107,.15); color: #ff6b6b; font-size: .75rem; font-weight: 800; text-align: center; }

@media (max-width: 390px) {
  .king-penalty-grid { grid-template-columns: repeat(2, 1fr); }
}

@keyframes king-task-arrive { from { opacity: 0; transform: translateY(18px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (max-width: 390px) and (max-height: 720px) {
  .king-game { padding-top: 8px; }
  .private-card { width: min(62vw, 225px); }
  .king-reveal-copy { margin-top: 5px; }
  .king-reveal-action { margin-top: 10px; }
  .king-command-heading .king-crown { margin-top: 3px; transform: scale(.75); }
  .king-command-card { min-height: 160px; }
}

.game-theme-finger-catch { --color-accent: #43d38e; }
.game-theme-crocodile { --color-accent: #69cf71; }
.game-theme-number-bomb { --color-accent: #ffb84d; }

/* Time Guess — 时间刚刚好 (1:1 neon style) */
.timeguess-game { display: grid; min-height: 100%; background: #050505; color: #fff; }

/* Setup screen: neon sign, crown, config rows */
.timeguess-setup { display: grid; gap: 18px; place-items: center; text-align: center; padding: 18px 16px 28px; }
.timeguess-neon-sign { position: relative; width: min(100%, 320px); padding: 18px 22px; border: 3px solid #ff5a78; border-radius: 18px; box-shadow: 0 0 12px rgba(255,90,120,.45), inset 0 0 12px rgba(255,90,120,.15); background: linear-gradient(180deg, #1a0a0e 0%, #0f0507 100%); }
.timeguess-neon-sign::before { content: ""; position: absolute; inset: -4px; border-radius: 20px; border: 2px dotted rgba(255,212,170,.6); box-shadow: 0 0 10px rgba(255,212,170,.35); pointer-events: none; }
.timeguess-crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 44px; height: 24px; color: #ff5a78; font-size: 1.9rem; line-height: 1; text-shadow: 0 0 10px rgba(255,90,120,.8); }
.timeguess-sign-inner { display: grid; gap: 4px; }
.timeguess-sign-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 1.1rem; color: #ffe6eb; }
.timeguess-sign-num { font-size: clamp(3.4rem, 18vw, 5.4rem); font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 0 16px rgba(255,90,120,.75), 0 0 34px rgba(255,90,120,.45); }

.timeguess-rule-copy { display: grid; gap: 8px; }
.timeguess-title-glow { margin: 0; font-size: clamp(1.3rem, 6vw, 1.8rem); font-weight: 900; color: #ffb8c7; text-shadow: 0 0 14px rgba(255,90,120,.45); }
.timeguess-desc-neon { margin: 0; font-size: .9rem; color: rgba(255,255,255,.65); }

.timeguess-config { display: grid; gap: 14px; width: 100%; max-width: 360px; }
.timeguess-config-block { display: grid; gap: 8px; text-align: left; }
.timeguess-config-label { font-size: .8rem; color: rgba(255,255,255,.55); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.timeguess-count-options { display: flex; flex-wrap: wrap; gap: 8px; }
.timeguess-count-btn { min-width: 52px; min-height: 44px; padding: 0 14px; border: 2px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; font-weight: 800; transition: all .18s ease; }
.timeguess-count-btn:hover, .timeguess-count-btn:focus-visible { border-color: rgba(255,90,120,.8); background: rgba(255,90,120,.12); }
.timeguess-count-btn.is-active { border-color: #ff5a78; background: rgba(255,90,120,.22); color: #fff; box-shadow: 0 0 12px rgba(255,90,120,.35); }

.timeguess-start-btn { width: 100%; max-width: 320px; min-height: 58px; border: 3px solid #70e1ff; border-radius: 999px; background: transparent; color: #fff; font-size: 1.25rem; font-weight: 900; letter-spacing: .05em; box-shadow: 0 0 18px rgba(112,225,255,.35), inset 0 0 18px rgba(112,225,255,.1); text-shadow: 0 0 8px rgba(112,225,255,.7); transition: all .18s ease; }
.timeguess-start-btn:hover, .timeguess-start-btn:focus-visible { background: rgba(112,225,255,.12); box-shadow: 0 0 28px rgba(112,225,255,.55), inset 0 0 22px rgba(112,225,255,.18); }
.timeguess-start-btn:active { transform: scale(.98); }

/* Game stage */
.timeguess-stage { position: relative; display: grid; place-items: center; min-height: 100%; padding: 16px; }
.timeguess-stage.is-single { place-items: center; }
.timeguess-stage.is-multi { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; align-items: center; justify-items: center; }
.timeguess-stage.players-3 { grid-template-columns: repeat(2, 1fr); }
.timeguess-stage.players-3 .timeguess-diamond:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
.timeguess-stage.players-5 { grid-template-columns: repeat(2, 1fr); }
.timeguess-stage.players-5 .timeguess-diamond:nth-child(5) { grid-column: 1 / -1; justify-self: center; }

.timeguess-center-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: grid; place-items: center; min-width: 118px; min-height: 118px; padding: 0 22px; border: 2px solid #70e1ff; border-radius: 50%; background: rgba(5,5,5,.85); color: #fff; font-size: 1rem; font-weight: 900; text-align: center; box-shadow: 0 0 20px rgba(112,225,255,.45), inset 0 0 14px rgba(112,225,255,.18); text-shadow: 0 0 8px rgba(112,225,255,.8); cursor: pointer; transition: all .18s ease; }
.timeguess-center-orb:hover, .timeguess-center-orb:focus-visible { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 30px rgba(112,225,255,.65); }

/* Neon diamond */
.timeguess-diamond { position: relative; width: min(44vw, 180px); height: min(44vw, 180px); padding: 0; border: none; background: transparent; color: #fff; transform: rotate(45deg); }
.timeguess-diamond.is-single { width: min(62vw, 260px); height: min(62vw, 260px); }
.timeguess-diamond-glow { position: absolute; inset: 0; border: 3px solid var(--diamond-color, #ff5a78); border-radius: 24px; box-shadow: 0 0 22px var(--diamond-color, #ff5a78), inset 0 0 24px rgba(0,0,0,.55); background: rgba(0,0,0,.45); }
.timeguess-diamond.is-counting .timeguess-diamond-glow { animation: timeguess-diamond-pulse 1.2s ease-in-out infinite; }
@keyframes timeguess-diamond-pulse { 0%, 100% { box-shadow: 0 0 18px var(--diamond-color, #ff5a78), inset 0 0 24px rgba(0,0,0,.55); } 50% { box-shadow: 0 0 36px var(--diamond-color, #ff5a78), inset 0 0 24px rgba(0,0,0,.55); } }
.timeguess-diamond.is-frozen .timeguess-diamond-glow { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.35); background: rgba(0,0,0,.65); }
.timeguess-diamond-inner { position: absolute; inset: 12px; display: grid; place-items: center; align-content: center; gap: 6px; transform: rotate(-45deg); border-radius: 16px; border: 2px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); }
.timeguess-player-name { font-size: .82rem; font-weight: 800; color: #ffcc3d; text-shadow: 0 0 6px rgba(255,204,61,.5); letter-spacing: .02em; }
.timeguess-diamond-time { font-size: clamp(2.2rem, 11vw, 4.2rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.3); }
.timeguess-diamond-label { font-size: .72rem; color: rgba(255,255,255,.55); font-weight: 700; }

/* Result screen */
.timeguess-done { display: grid; gap: 16px; place-items: center; text-align: center; padding: 18px 16px 28px; }
.timeguess-neon-sign.is-result { width: min(100%, 300px); }
.timeguess-verdict { display: grid; gap: 6px; max-width: 320px; }
.timeguess-verdict-main { margin: 0; font-size: 1.1rem; font-weight: 800; color: #ff8a9f; text-shadow: 0 0 10px rgba(255,90,120,.4); }
.timeguess-verdict-sub { margin: 0; font-size: .85rem; color: rgba(255,255,255,.6); }
.timeguess-result-list { display: grid; gap: 8px; width: 100%; max-width: 340px; }
.timeguess-result-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05); }
.timeguess-result-row.is-worst { border-color: #ff5a78; background: rgba(255,90,120,.1); }
.timeguess-result-row.is-best { border-color: #7bed9f; background: rgba(123,237,159,.08); }
.timeguess-result-name { font-weight: 800; font-size: .95rem; }
.timeguess-result-time { font-variant-numeric: tabular-nums; font-weight: 900; }
.timeguess-result-dev { font-size: .75rem; color: rgba(255,255,255,.5); }
.timeguess-penalty-actions { display: grid; gap: 10px; width: 100%; max-width: 320px; }

.game-theme-lucky-wheel { --color-accent: #70e1e8; }
.game-theme-truth-or-dare { --color-accent: #ff8ca8; }
.game-theme-king-game { --color-accent: #f4c65d; }

.settings-list { display: grid; gap: 8px; margin-top: 28px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 13px; text-align: left; border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.setting-row:hover { background: var(--color-surface-strong); }
.setting-row > span { display: grid; gap: 5px; }
.setting-row small { color: var(--color-muted); line-height: 1.35; }
.toggle { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: var(--radius-full); background: #3a3d40; transition: background var(--transition-normal); }
.toggle b { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--transition-normal); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.toggle.is-on { background: var(--color-accent); box-shadow: 0 0 12px rgba(255,212,71,.25); }
.toggle.is-on b { transform: translateX(20px); }

@keyframes result-arrive { 0% { opacity: 0; transform: scale(.6); } 75% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }

html[data-reduced-stimulus="true"] *,
html[data-reduced-stimulus="true"] *::before,
html[data-reduced-stimulus="true"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

.share-entry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.share-entry-row > span { grid-column: 1 / -1; color: var(--color-muted); font-size: .76rem; text-transform: uppercase; }
.share-studio { padding-top: 28px; }
.share-types { margin-top: 24px; }
.share-studio textarea { width: 100%; padding: 12px; resize: vertical; background: var(--color-surface-strong); color: var(--color-text); }
.photo-permission { display: grid; gap: 9px; margin-top: 22px; }
.photo-permission > label:first-child { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 9px; color: var(--color-muted); font-size: .82rem; line-height: 1.4; }
.photo-permission input[type="checkbox"] { width: 20px; min-height: 20px; margin: 0; accent-color: var(--color-accent); }
.file-button { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-strong); cursor: pointer; }
.file-button.is-disabled { opacity: .42; cursor: not-allowed; }
.file-button input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.share-preview { width: min(100%, 330px); margin: 28px auto 0; text-align: center; }
.share-preview img { display: block; width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--color-border); border-radius: 8px; object-fit: cover; }
.share-preview p { margin-top: 9px; font-size: .76rem; }
.share-preview-first { width: min(100%, 340px); margin: 20px auto 0; text-align: center; }
.share-preview-first > img,
.share-card-live { width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.share-preview-first > img { display: block; object-fit: cover; }
.share-preview-first > p { margin-top: 10px; color: var(--color-muted); font-size: .76rem; }
.share-card-live { position: relative; overflow: hidden; padding: 18px; text-align: left; }
.share-card-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.share-card-brand b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 5px; background: #ffdd62; color: #11140f; font-size: .8rem; }
.share-card-label { position: relative; z-index: 2; margin-top: 28px; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.share-card-name { position: relative; z-index: 2; display: block; margin-top: 8px; font-size: 2.2rem; line-height: .96; }
.share-card-headline { position: relative; z-index: 2; margin-top: 16px; font-size: 1.08rem; font-weight: 900; line-height: 1.18; }
.share-card-note { position: relative; z-index: 2; margin-top: 12px; font-size: .75rem; line-height: 1.45; }
.share-card-footer { position: absolute; z-index: 2; right: 18px; bottom: 16px; left: 18px; font-size: .51rem; font-weight: 800; letter-spacing: 0; }
.share-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.share-card-loser { border: 9px double #ec6759; background: #f4ead5; color: #171916; }
.share-card-loser::before { content: ""; position: absolute; inset: 12px; border: 1px solid #171916; }
.share-card-loser .share-card-label { margin-top: 46px; text-align: center; }
.share-card-loser .share-card-name { margin-top: 14px; text-align: center; }
.share-card-loser .share-card-headline,
.share-card-loser .share-card-note { color: #514c43; text-align: center; }
.share-card-loser .share-card-photo { inset: 82px 18px auto; width: calc(100% - 36px); height: 43%; border-radius: 6px; }
.share-card-loser:has(.share-card-photo) .share-card-label { margin-top: 10px; }
.share-card-loser:has(.share-card-photo) .share-card-name { margin-top: 300px; font-size: 1.45rem; }
.share-card-loser:has(.share-card-photo) .share-card-stamp { width: 82px; height: 82px; margin-top: 16px; border-width: 5px; font-size: .72rem; }
.share-card-loser:has(.share-card-photo) .share-card-headline { margin-top: 12px; font-size: .86rem; }
.share-card-loser:has(.share-card-photo) .share-card-note { margin-top: 7px; font-size: .63rem; }
.share-card-facts { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; padding: 7px; border: 1px solid #171916; font-size: .55rem; font-weight: 800; }
.share-card-stamp { position: relative; z-index: 2; display: grid; place-items: center; width: 134px; height: 134px; margin: 38px auto 0; border: 7px double #de4e43; border-radius: 50%; color: #de4e43; font-size: 1rem; font-weight: 950; text-align: center; text-transform: uppercase; transform: rotate(-8deg); }
.share-card-signature { position: absolute; right: 30px; bottom: 58px; z-index: 2; width: 130px; padding-top: 5px; border-top: 1px solid #171916; font-size: .5rem; text-align: center; }
.share-card-personal { background: #78d786; color: #101310; }
.share-card-personal::before { content: ""; position: absolute; width: 210px; height: 210px; top: -58px; right: -58px; border-radius: 50%; background: #ffdd62; }
.share-card-personal::after { content: ""; position: absolute; width: 190px; height: 190px; bottom: 100px; left: -90px; border-radius: 50%; background: #78a9ff; }
.share-card-personal .share-card-photo { height: 68%; }
.share-card-personal .share-card-photo + .share-card-brand { color: #fff; text-shadow: 0 1px 8px #000; }
.share-card-avatar { position: relative; z-index: 2; display: grid; place-items: center; width: 116px; height: 116px; margin: 42px auto 0; border: 5px solid #101310; border-radius: 50%; background: #ffdd62; font-size: 3.3rem; font-weight: 950; }
.share-card-personal:has(.share-card-photo) .share-card-avatar { width: 54px; height: 54px; margin: 330px 0 0; border-width: 3px; font-size: 1.4rem; }
.share-card-personal:has(.share-card-photo) .share-card-name { margin-top: 6px; font-size: 1.35rem; text-align: left; }
.share-card-personal:has(.share-card-photo) .share-card-headline { margin-top: 7px; font-size: .76rem; text-align: left; }
.share-card-personal .share-card-name,
.share-card-personal .share-card-headline { text-align: center; }
.share-card-personal .share-card-label,
.share-card-personal .share-card-headline,
.share-card-personal .share-card-note { color: #101310; }
.share-card-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border-top: 2px solid #101310; border-bottom: 2px solid #101310; }
.share-card-stats span { display: grid; padding: 12px; font-size: 1.7rem; font-weight: 950; text-align: center; }
.share-card-stats span + span { border-left: 2px solid #101310; }
.share-card-stats small { font-size: .52rem; }
.share-card-personal:has(.share-card-photo) .share-card-stats { width: 58%; margin-top: 8px; }
.share-card-personal:has(.share-card-photo) .share-card-stats span { padding: 6px; font-size: 1rem; }
.share-card-team { border: 6px solid #ff735f; background: #121512; color: #fff; }
.share-card-team::before { content: ""; position: absolute; inset: 0 0 55% 0; background: #78a9ff; clip-path: polygon(0 0,100% 0,100% 78%,0 100%); }
.share-card-team::after { content: ""; position: absolute; top: 80px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: #ffdd62; }
.share-card-team .share-card-label { margin-top: 130px; color: #ffdd62; }
.share-card-team .share-card-photo { inset: 62px 14px auto; width: calc(100% - 28px); height: 55%; border-radius: 5px; }
.share-card-team:has(.share-card-photo) .share-card-label { margin-top: 330px; }
.share-card-team-count { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 6px; margin-top: 22px; padding: 12px; background: #ff735f; color: #101310; }
.share-card-team-count strong { font-size: 1.8rem; }
.share-card-team-count span { font-size: .57rem; font-weight: 900; }
.share-card-people { position: relative; z-index: 2; display: flex; margin-top: 20px; }
.share-card-people span { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; border: 3px solid #121512; border-radius: 50%; background: #78d786; color: #101310; font-weight: 950; }
.share-card-people span:nth-child(2n) { background: #ffdd62; }
.share-card-people span:nth-child(3n) { background: #ff8ca8; }
.share-editor { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.share-editor-heading { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.share-editor-heading span { color: var(--color-muted); font-size: .72rem; }
.invite-banner { margin: 0 0 22px; padding: 14px; border-left: 4px solid var(--color-accent); background: var(--color-surface); color: var(--color-muted); line-height: 1.45; }
.restore-banner { margin: 0 0 18px; padding: 12px 14px; border-left: 4px solid var(--color-blue); background: var(--color-surface); color: var(--color-text); line-height: 1.45; }
.offline-banner { position: sticky; top: 0; z-index: 50; width: 100%; padding: calc(9px + env(safe-area-inset-top)) 16px 9px; background: #ffe08a; color: #181510; font-size: .78rem; font-weight: 800; text-align: center; }
.qr-entry { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; margin-top: 18px; padding: 14px; border: 1px solid var(--color-border); border-radius: 8px; background: #f4f0e6; color: #141516; text-align: left; }
.qr-entry img { width: 112px; height: 112px; image-rendering: pixelated; }
.qr-entry p { margin-top: 6px; color: #4d5052; font-size: .76rem; }
.line-status-panel { display: grid; gap: 10px; margin-top: 28px; padding: 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.line-status-panel .eyebrow { margin-bottom: 0; }
.line-status-panel button { margin-top: 4px; }
.line-status-panel code { overflow-wrap: anywhere; color: var(--color-danger); font-size: .7rem; }
.privacy-panel { margin-top: 24px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.privacy-panel summary { min-height: 52px; padding: 16px 2px; font-weight: 850; cursor: pointer; }
.privacy-panel p { padding: 0 2px 14px; font-size: .78rem; }
.bootstrap-screen { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 100vh; padding: 24px; text-align: center; }
.bootstrap-screen > strong { font-size: 1.5rem; }

@media (min-width: 620px) {
  .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-intro { padding-top: 72px; }
}

@media (max-width: 390px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .game-grid { grid-template-columns: 1fr; }
  .entry-panel { min-height: 132px; }
  .segmented-control { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; }
}

/* Productized brand and home */
.brand-bar { position: relative; z-index: var(--z-raised); min-height: 56px; }
.brand-button { gap: 11px; }
.brand-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 2px solid #12140f;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-accent) 0%, #ffb84d 100%);
  box-shadow: 4px 4px 0 #12140f, inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-symbol-b { color: #12140f; font-size: 1.45rem; font-style: normal; font-weight: 950; line-height: 1; }
.brand-symbol-play { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #ff5f61; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.brand-wordmark { display: grid; gap: 1px; text-align: left; }
.brand-wordmark strong { font-size: 1.25rem; line-height: 1; letter-spacing: 0; }
.brand-wordmark small { color: var(--color-muted); font-size: .48rem; font-weight: 850; letter-spacing: .08em; }
.brand-bar.is-compact .brand-symbol { width: 36px; height: 36px; box-shadow: 3px 3px 0 #12140f; }
.brand-bar.is-compact .brand-wordmark small { display: none; }
.brand-actions { gap: 8px; }
.icon-button { position: relative; border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.05); transition: background var(--transition-fast), border-color var(--transition-fast); }
.icon-button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); }
.icon-button i { position: absolute; display: block; }
.settings-icon i { left: 10px; width: 22px; height: 2px; background: currentColor; }
.settings-icon i:nth-child(1) { top: 13px; }
.settings-icon i:nth-child(2) { top: 20px; }
.settings-icon i:nth-child(3) { top: 27px; }
.settings-icon i::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border: 2px solid var(--color-surface); border-radius: 50%; background: currentColor; }
.settings-icon i:nth-child(1)::after, .settings-icon i:nth-child(3)::after { left: 4px; }
.settings-icon i:nth-child(2)::after { right: 3px; }
.menu-icon i { left: 10px; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.menu-icon i:nth-child(1) { top: 12px; }
.menu-icon i:nth-child(2) { top: 20px; }
.menu-icon i:nth-child(3) { top: 28px; }
.sound-icon i:first-child { left: 11px; top: 17px; width: 8px; height: 10px; background: currentColor; }
.sound-icon i:first-child::after { content: ""; position: absolute; left: 6px; top: -4px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 10px solid currentColor; }
.sound-icon i:last-child { right: 7px; top: 13px; width: 10px; height: 18px; border-right: 2px solid currentColor; border-radius: 0 50% 50% 0; }
.sound-icon.is-off i:last-child { width: 16px; height: 2px; top: 21px; right: 5px; border: 0; border-radius: 0; background: var(--color-danger); transform: rotate(-45deg); }

.home-shell { width: 100%; max-width: none; padding: 0 0 calc(30px + env(safe-area-inset-bottom)); overflow: hidden; }
.home-stage { position: relative; width: min(100%, 720px); min-height: 72svh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) var(--page-pad) 32px; }
.home-stage::before { content: ""; position: absolute; top: 0; left: 0; width: 34%; height: 5px; background: linear-gradient(90deg, var(--color-danger), #ff8a5c); }
.home-stage::after { content: ""; position: absolute; top: 0; left: 34%; width: 22%; height: 5px; background: linear-gradient(90deg, var(--color-accent), #ffe08a); }
.home-intro { padding: clamp(36px, 7vh, 64px) 0 22px; }
.home-intro h1 { max-width: 560px; margin-bottom: 13px; font-size: clamp(2.8rem, 12vw, 5.5rem); line-height: .92; letter-spacing: 0; }
.home-intro > p:last-child { max-width: 520px; font-size: .98rem; line-height: 1.5; }
.guest-pill { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px; color: var(--color-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.guest-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 0 4px rgba(102,221,178,.12); animation: guest-pulse 2s ease-in-out infinite; }
@keyframes guest-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(102,221,178,.12); } 50% { box-shadow: 0 0 0 8px rgba(102,221,178,.06); } }
.entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.entry-panel { position: relative; align-content: end; min-width: 0; min-height: 166px; overflow: hidden; border: 2px solid #10120e; box-shadow: var(--shadow-press); transition: transform var(--transition-bounce), box-shadow var(--transition-fast); }
.entry-panel:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: var(--shadow-press-sm); }
.entry-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.18) 100%); pointer-events: none; }
.entry-panel strong { position: relative; z-index: 1; max-width: 100%; color: #11130f; font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1; overflow-wrap: anywhere; }
.entry-panel > span:last-child { max-width: 190px; color: rgba(17,19,15,.7); font-size: .75rem; }
.entry-kicker { color: rgba(17,19,15,.68); }
.entry-quick { background: linear-gradient(135deg, var(--color-accent) 0%, #ffb84d 100%); }
.entry-party { background: linear-gradient(135deg, var(--color-warm) 0%, #ff6b62 100%); }
.entry-arrow { position: absolute; top: 16px; right: 17px; width: 42px; height: 42px; border: 2px solid #11130f; border-radius: 50%; }
.entry-arrow::before { content: ""; position: absolute; top: 12px; left: 15px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #11130f; }
.party-spark { position: absolute; top: 18px; right: 19px; width: 46px; height: 42px; }
.party-spark i { position: absolute; width: 9px; height: 9px; border: 2px solid #11130f; transform: rotate(45deg); }
.party-spark i:nth-child(1) { top: 1px; right: 12px; }
.party-spark i:nth-child(2) { top: 20px; right: 30px; width: 7px; height: 7px; }
.party-spark i:nth-child(3) { top: 27px; right: 4px; width: 5px; height: 5px; background: #11130f; }
.save-tonight-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 14px; border-color: transparent; background: transparent; color: var(--color-muted); font-size: .78rem; }
.save-tonight-button span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--color-muted); border-radius: 50%; }
.next-section-hint { position: absolute; bottom: 13px; left: 50%; width: 22px; height: 22px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: translateX(-50%) rotate(45deg); opacity: .55; animation: hint-bob 2s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); opacity: .55; } 50% { transform: translateX(-50%) rotate(45deg) translateY(4px); opacity: .3; } }

.game-library { width: min(100%, 920px); margin: 0 auto; padding: 36px 0 22px; border-top: 1px solid var(--color-border); }
.game-library .section-heading { padding: 0 var(--page-pad); }
.section-heading > span { white-space: nowrap; }
.game-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 280px); gap: 12px; padding: 0 var(--page-pad) 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.game-rail::-webkit-scrollbar { display: none; }
.game-library { position: relative; }
.game-library::after { content: ""; position: absolute; right: 0; top: 0; bottom: 14px; width: 40px; background: linear-gradient(to right, transparent, var(--color-bg)); pointer-events: none; z-index: var(--z-raised); }
.game-card {
  position: relative;
  display: grid;
  grid-template-rows: 165px 1fr;
  min-height: 320px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--color-surface);
  text-align: left;
  scroll-snap-align: start;
  transition: transform var(--transition-bounce), box-shadow var(--transition-normal);
  box-shadow: var(--shadow-card);
}
.game-card:hover:not(.is-disabled) { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.game-card:active:not(.is-disabled) { transform: translateY(0) scale(0.98); }
.game-card.is-disabled { opacity: 0.5; }
.game-card-copy { display: grid; align-content: start; gap: 8px; padding: 16px; }
.game-card-copy strong { font-size: 1.35rem; letter-spacing: 0; }
.game-card-copy > span:last-child { color: var(--color-muted); font-size: .8rem; line-height: 1.38; }
.game-meta { color: var(--game-ink, var(--color-accent)); }

.game-art { position: relative; display: block; min-width: 0; overflow: hidden; background: var(--game-art-bg, #30352e); }
.game-art i, .game-art b, .game-art em { position: absolute; display: block; font-style: normal; }
.game-art.is-compact { height: 100%; }
.art-finger-catch { --game-art-bg: #174b3c; }
.art-finger-catch i { bottom: -18px; width: 52px; height: 110px; border: 4px solid #0e231c; border-radius: 28px 28px 8px 8px; }
.art-finger-catch i:nth-child(1) { left: 15px; background: #ffd447; transform: rotate(-8deg); }
.art-finger-catch i:nth-child(2) { left: 70px; bottom: -4px; background: #ff6b62; }
.art-finger-catch i:nth-child(3) { right: 65px; background: #70b7ff; transform: rotate(6deg); }
.art-finger-catch i:nth-child(4) { right: 12px; bottom: -10px; background: #ef87bd; transform: rotate(11deg); }
.art-finger-catch b { top: 16px; left: 50%; padding: 7px 11px; border: 2px solid #0e231c; background: #fffaf0; color: #10221b; font-size: 1.1rem; transform: translateX(-50%) rotate(-3deg); }
.art-crocodile { --game-art-bg: #6fd889; }
.art-crocodile .art-eye { top: 25px; width: 42px; height: 42px; border: 6px solid #236d45; border-radius: 50%; background: #fff1b8; }
.art-crocodile .art-eye::after { content: ""; position: absolute; top: 9px; left: 12px; width: 8px; height: 13px; border-radius: 50%; background: #111; }
.art-crocodile .art-eye:first-child { left: 48px; }
.art-crocodile .art-eye:nth-child(2) { right: 48px; }
.art-crocodile .art-mouth { left: 25px; right: 25px; bottom: -8px; height: 83px; border: 7px solid #236d45; border-radius: 17px 17px 40px 40px; background: #a33f50; }
.art-crocodile .art-mouth em { top: 0; width: 30px; height: 41px; border-radius: 5px 5px 45% 45%; background: #fffaf0; }
.art-crocodile .art-mouth em:nth-child(1) { left: 12px; }.art-crocodile .art-mouth em:nth-child(2) { left: 54px; }.art-crocodile .art-mouth em:nth-child(3) { right: 54px; }.art-crocodile .art-mouth em:nth-child(4) { right: 12px; }
.art-number-bomb { --game-art-bg: #ff815c; }
.art-number-bomb b { left: 50%; bottom: -27px; display: grid; place-items: center; width: 142px; height: 142px; border: 7px solid #201b17; border-radius: 50%; background: #303633; color: #fffaf0; font-size: 3rem; transform: translateX(-50%); }
.art-number-bomb .art-fuse { top: 17px; left: 57%; width: 65px; height: 45px; border-top: 7px solid #242019; border-radius: 50%; transform: rotate(-25deg); }
.art-number-bomb em { top: 8px; right: 50px; width: 18px; height: 18px; background: var(--color-accent); transform: rotate(45deg); }
.art-lucky-wheel { --game-art-bg: #53c8d2; }
.art-lucky-wheel i { left: 50%; bottom: -37px; width: 166px; height: 166px; border: 8px solid #f9f3e7; border-radius: 50%; background: conic-gradient(#ff6b62 0 25%,#ffd447 0 50%,#6b9dff 0 75%,#59d3a6 0); transform: translateX(-50%) rotate(-15deg); }
.art-lucky-wheel b { left: 50%; bottom: 44px; width: 35px; height: 35px; border: 7px solid #f9f3e7; border-radius: 50%; background: #242822; transform: translateX(-50%); }
.art-lucky-wheel em { top: 4px; left: 50%; width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 38px solid #fffaf0; transform: translateX(-50%); }
.art-truth-or-dare { --game-art-bg: #d57da8; }
.art-truth-or-dare i { top: 26px; display: grid; place-items: center; width: 92px; height: 122px; border: 5px solid #24181e; border-radius: 8px; color: #24181e; font-size: 3.4rem; font-weight: 950; }
.art-truth-or-dare i:first-child { left: 35px; background: #ffd447; transform: rotate(-8deg); }
.art-truth-or-dare i:nth-child(2) { right: 35px; background: #6ab6ff; transform: rotate(8deg); }
.art-truth-or-dare b { top: 18px; left: 50%; color: #fffaf0; font-size: 2rem; transform: translateX(-50%) rotate(8deg); }
.art-king-game { --game-art-bg: #465b9a; }
.art-king-game i { left: 50%; bottom: -25px; display: grid; place-items: center; width: 122px; height: 155px; border: 6px solid #201d18; border-radius: 8px; background: #fff5d8; color: #201d18; font-size: 4.6rem; font-weight: 950; transform: translateX(-50%) rotate(3deg); }
.art-king-game b { top: 14px; left: 50%; width: 94px; height: 45px; border-bottom: 9px solid #ffd447; transform: translateX(-50%); }
.art-king-game b em { bottom: 0; width: 34px; height: 34px; background: #ffd447; transform: rotate(45deg); }.art-king-game b em:nth-child(1){left:0}.art-king-game b em:nth-child(2){left:30px}.art-king-game b em:nth-child(3){right:0}
.art-seven-eight-nine { --game-art-bg: #545750; }
.art-seven-eight-nine i { top: 48px; display: grid; place-items: center; width: 58px; height: 58px; border: 3px solid #22251f; border-radius: 8px; background: #d2d0c8; color: #22251f; font-size: 1.5rem; font-weight: 950; }.art-seven-eight-nine i:nth-child(1){left:30px;transform:rotate(-10deg)}.art-seven-eight-nine i:nth-child(2){left:50%;transform:translateX(-50%)}.art-seven-eight-nine i:nth-child(3){right:30px;transform:rotate(10deg)}

/* Time Guess — clock with moving hand */
.art-time-guess { --game-art-bg: #1a3a5c; }
.art-time-guess .art-clock-face { left: 50%; bottom: -30px; width: 150px; height: 150px; border: 8px solid #f9f3e7; border-radius: 50%; background: #fffaf0; transform: translateX(-50%); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.art-time-guess .art-clock-face::before { content: ""; position: absolute; top: 12px; left: 50%; width: 4px; height: 10px; background: #2a3a4a; transform: translateX(-50%); border-radius: 2px; }
.art-time-guess .art-clock-face::after { content: ""; position: absolute; bottom: 12px; left: 50%; width: 4px; height: 10px; background: #2a3a4a; transform: translateX(-50%); border-radius: 2px; }
.art-time-guess .art-clock-hand { left: 50%; bottom: 45px; width: 5px; height: 65px; background: #ff6b62; border-radius: 3px 3px 0 0; transform-origin: bottom center; transform: translateX(-50%) rotate(35deg); box-shadow: 0 0 8px rgba(255,107,98,.5); }
.art-time-guess em { left: 50%; bottom: 38px; width: 16px; height: 16px; border-radius: 50%; background: #ff6b62; transform: translateX(-50%); z-index: 2; }

/* Avatar Tap — three mini cartoon faces */
.art-avatar-tap { --game-art-bg: #2d1f3d; display: flex; align-items: center; justify-content: center; gap: 6px; }
.art-avatar-tap .art-face-mini { position: relative !important; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #111; overflow: hidden; }
.art-avatar-tap .art-face-1 { background: #ffd447; transform: translateY(6px); }
.art-avatar-tap .art-face-2 { background: #ff6b62; transform: translateY(-8px); z-index: 2; }
.art-avatar-tap .art-face-3 { background: #5fe0ff; transform: translateY(6px); }
.art-avatar-tap .art-face-1::before { content: ""; position: absolute; top: 14px; left: 10px; width: 6px; height: 6px; border-radius: 50%; background: #222; box-shadow: 16px 0 0 #222; }
.art-avatar-tap .art-face-1::after { content: ""; position: absolute; bottom: 12px; left: 50%; width: 14px; height: 7px; border-bottom: 3px solid #222; border-radius: 0 0 14px 14px; transform: translateX(-50%); }
.art-avatar-tap .art-face-2::before { content: ""; position: absolute; top: 14px; left: 10px; width: 6px; height: 6px; border-radius: 50%; background: #222; box-shadow: 16px 0 0 #222; }
.art-avatar-tap .art-face-2::after { content: ""; position: absolute; bottom: 10px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #222; transform: translateX(-50%); }
.art-avatar-tap .art-face-3::before { content: ""; position: absolute; top: 14px; left: 10px; width: 6px; height: 6px; border-radius: 50%; background: #222; box-shadow: 16px 0 0 #222; }
.art-avatar-tap .art-face-3::after { content: ""; position: absolute; bottom: 12px; left: 50%; width: 16px; height: 3px; background: #222; border-radius: 2px; transform: translateX(-50%); }

/* Tap Battle — two fists + VS */
.art-tap-battle { --game-art-bg: #1a2a3a; display: flex; align-items: center; justify-content: center; gap: 4px; }
.art-tap-battle .art-tap-l, .art-tap-battle .art-tap-r { position: relative !important; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.art-tap-battle .art-tap-l { background: #ffd447; color: #111; transform: rotate(-8deg); }
.art-tap-battle .art-tap-r { background: #ff6b62; color: #111; transform: rotate(8deg); }
.art-tap-battle .art-tap-l::before { content: "👈"; }
.art-tap-battle .art-tap-r::before { content: "👉"; }
.art-tap-battle .art-tap-vs { font-size: .7rem; font-weight: 900; color: var(--color-accent); letter-spacing: .05em; }

@media (max-width: 390px) {
  .entry-panel { min-height: 152px; padding: 15px; }
  .entry-panel > span:last-child { display: none; }
  .home-intro { padding-top: 32px; }
  .game-rail { grid-auto-columns: 78vw; }
}

@media (max-width: 520px) {
  .home-stage { padding-left: 18px; padding-right: 18px; }
  .home-intro { padding-top: 34px; }
  .home-intro h1 { max-width: 100%; font-size: 2.8rem; line-height: .96; }
  .entry-grid { grid-template-columns: 1fr; }
  .entry-panel { min-height: 132px; }
  .entry-panel > span:last-child { display: block; max-width: 250px; }
  .home-share-hub > div { grid-template-columns: 1fr; }
  .home-share-hub > div button { min-height: 54px; }
}

/* Guided Party setup */
.wizard-shell { min-height: 100svh; padding-top: max(14px, env(safe-area-inset-top)); }
.setup-wizard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: calc(100svh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding-top: 20px;
}
.setup-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; color: var(--color-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.setup-progress > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.setup-progress i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); transition: background var(--transition-normal); }
.setup-progress i.is-active { background: var(--color-accent); box-shadow: 0 0 8px rgba(255,212,71,.4); }
.wizard-stage { display: grid; align-content: center; padding: 22px 0; }
.wizard-copy { max-width: 520px; }
.wizard-copy h1 { max-width: 560px; margin-bottom: 12px; font-size: clamp(2.35rem, 11vw, 4.6rem); line-height: .94; }
.wizard-copy > p:last-child { max-width: 480px; font-size: .9rem; }
.party-count-stepper { display: grid; grid-template-columns: 66px minmax(104px, 1fr) 66px; align-items: center; width: min(100%, 330px); margin: clamp(28px, 7vh, 58px) auto 0; }
.party-count-stepper button { min-height: 66px; border: 2px solid var(--color-border); border-radius: 50%; background: transparent; font-size: 2rem; }
.party-count-stepper output { color: var(--color-accent); font-size: clamp(5rem, 24vw, 8.5rem); font-weight: 950; line-height: 1; text-align: center; }
.player-preview-row { display: flex; justify-content: center; gap: 7px; min-height: 48px; margin-top: 24px; }
.player-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 2px solid #11130f; border-radius: 50%; background: var(--player-color); color: #11130f; font-size: .78rem; font-weight: 950; box-shadow: 2px 2px 0 #050605; transition: transform var(--transition-bounce); }
.player-avatar.is-large { width: clamp(37px, 10vw, 48px); height: clamp(37px, 10vw, 48px); }
.player-row { grid-template-columns: 42px 1fr; }
.player-row .player-avatar { color: #11130f; }
.random-names-button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin-top: 18px; padding: 7px 10px; border-color: transparent; background: transparent; color: var(--color-accent); font-size: .78rem; font-weight: 800; }
.random-names-button span { font-size: 1.15rem; }
.compact-field { margin-top: 14px; }
.mood-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 30px; }
.mood-card { display: grid; align-content: space-between; min-width: 0; min-height: 152px; padding: 15px 11px; border: 2px solid #11130f; background: var(--mood-color); color: #11130f; box-shadow: var(--shadow-press-sm); text-align: left; transition: transform var(--transition-bounce), outline-color var(--transition-fast); }
.mood-card:hover { transform: translateY(-2px); }
.mood-card.is-active { outline: 3px solid var(--color-text); outline-offset: 3px; }
.mood-card i { display: flex; align-items: end; gap: 5px; height: 58px; }
.mood-card b { width: 12px; border: 2px solid #11130f; background: rgba(255,255,255,.55); }
.mood-card b:nth-child(1) { height: 28%; }.mood-card b:nth-child(2) { height: 58%; }.mood-card b:nth-child(3) { height: 92%; }
.mood-card strong { font-size: clamp(.92rem, 4vw, 1.15rem); overflow-wrap: anywhere; }
.mood-relaxed { --mood-color: #70b7ff; }.mood-lively { --mood-color: #ffd447; }.mood-wild { --mood-color: #ff715f; }
.wizard-subchoice { display: grid; gap: 9px; margin-top: 30px; }
.wizard-subchoice > span, .alcohol-choice > span { color: var(--color-muted); font-size: .76rem; font-weight: 800; }
.wizard-subchoice > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wizard-subchoice button, .alcohol-choice button { min-width: 0; min-height: 44px; padding: 8px 6px; font-size: .76rem; }
.wizard-subchoice button.is-active, .alcohol-choice button.is-active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); color: var(--color-accent); }
.comfort-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 30px; }
.comfort-scale button { display: grid; justify-items: center; gap: 10px; min-width: 0; min-height: 104px; padding: 13px 7px; background: transparent; }
.comfort-scale button.is-active { border-color: var(--color-accent); background: rgba(255,212,71,.08); color: var(--color-accent); }
.comfort-scale i { display: flex; align-items: end; gap: 3px; width: 42px; height: 34px; }
.comfort-scale i::before, .comfort-scale i::after { content: ""; width: 10px; border-radius: 2px 2px 0 0; background: currentColor; }
.comfort-scale i::before { height: calc(var(--level) * 8px); }
.comfort-scale i::after { height: calc(var(--level) * 12px); opacity: .55; }
.comfort-scale strong { font-size: .84rem; overflow-wrap: anywhere; }
.alcohol-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 24px; }
.alcohol-choice > span { grid-column: 1 / -1; }
.safety-promise { margin-top: 20px; padding-left: 13px; border-left: 4px solid var(--color-mint); font-size: .78rem; }
.wizard-actions { display: grid; grid-template-columns: minmax(88px, auto) minmax(170px, 1fr); gap: 10px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.wizard-actions .primary-button { min-width: 0; }

.quick-setup-shell { min-height: 100svh; padding-top: max(14px, env(safe-area-inset-top)); }
.quick-setup-panel { display: grid; align-content: start; min-height: calc(100svh - 86px); padding-top: 18px; }
.quick-game-preview { display: grid; grid-template-columns: 42% minmax(0, 1fr); min-height: 176px; margin-top: 10px; overflow: hidden; border: 2px solid #10120e; background: var(--color-surface); box-shadow: 5px 5px 0 #050605; }
.quick-game-preview .game-art { min-height: 176px; }
.quick-game-preview > div { display: grid; align-content: center; min-width: 0; padding: 16px; }
.quick-game-preview h1 { margin-bottom: 8px; font-size: clamp(1.65rem, 7vw, 2.6rem); line-height: .96; overflow-wrap: anywhere; }
.quick-game-preview p { font-size: .76rem; line-height: 1.38; }
.quick-player-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 34px; }
.quick-player-control > span { color: var(--color-muted); font-size: .8rem; font-weight: 800; }
.quick-player-control > div { display: grid; grid-template-columns: 48px 54px 48px; align-items: center; }
.quick-player-control button { min-height: 48px; padding: 0; font-size: 1.4rem; }
.quick-player-control output { font-size: 1.7rem; font-weight: 950; text-align: center; }
.quick-setup-panel .start-session-button { margin-top: auto; }

@media (max-width: 390px) {
  .wizard-stage { padding: 16px 0; }
  .wizard-copy h1 { font-size: clamp(2.15rem, 11vw, 3rem); }
  .party-count-stepper { margin-top: 26px; }
  .party-count-stepper output { font-size: 5.2rem; }
  .player-preview-row { margin-top: 15px; }
  .mood-card { min-height: 132px; padding: 12px 8px; }
  .mood-card i { height: 45px; }
  .quick-game-preview { min-height: 154px; }
  .quick-game-preview .game-art { min-height: 154px; }
}

/* Results, recommendations, and Party summary */
.result-shell { max-width: 620px; padding-top: max(14px, env(safe-area-inset-top)); }
.result-screen { padding-top: 14px; text-align: left; }
.result-screen > .eyebrow { margin-bottom: 9px; }
.result-game-scene { position: relative; height: 190px; overflow: hidden; border: 2px solid #11130f; border-radius: 8px; background: var(--color-surface); box-shadow: 5px 5px 0 #050605; }
.result-game-scene > .game-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.result-game-scene .art-finger-catch i { width: 72px; height: 145px; }
.result-game-scene .art-crocodile .art-mouth { bottom: -20px; height: 108px; }
.result-spotlight { position: absolute; z-index: 5; left: 14px; right: 14px; bottom: 13px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 2px solid #11130f; border-radius: 8px; background: #fff8e5; color: #11130f; box-shadow: 3px 3px 0 #050605; }
.result-spotlight .player-avatar { width: 48px; height: 48px; }
.result-spotlight > div { display: grid; gap: 2px; min-width: 0; }
.result-spotlight small { font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.result-spotlight strong { overflow: hidden; font-size: 1.2rem; text-overflow: ellipsis; white-space: nowrap; }
.result-story-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid #11130f; border-radius: 50%; background: var(--color-accent); font-size: 1.8rem; font-weight: 950; }
.result-copy { padding: 18px 2px 0; }
.result-copy h1 { margin-bottom: 9px; font-size: clamp(2.15rem, 10vw, 4rem); line-height: .94; overflow-wrap: anywhere; }
.result-copy p { font-size: .8rem; line-height: 1.45; }
.next-game-card { display: grid; grid-template-columns: 102px minmax(0, 1fr) 24px; align-items: stretch; width: 100%; min-height: 112px; margin-top: 18px; padding: 0; overflow: hidden; border: 2px solid #11130f; background: linear-gradient(135deg, var(--color-accent) 0%, #ffb84d 100%); color: #11130f; box-shadow: var(--shadow-press); text-align: left; transition: transform var(--transition-fast); }
.next-game-card:hover { transform: translateY(-2px); }
.next-game-card > .game-art { min-height: 112px; border-right: 2px solid #11130f; }
.next-game-card > span { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 11px; }
.next-game-card small { font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.next-game-card strong { font-size: 1.2rem; line-height: 1; overflow-wrap: anywhere; }
.next-game-card em { color: rgba(17,19,15,.7); font-size: .62rem; font-style: normal; line-height: 1.25; }
.next-game-card > i { position: relative; align-self: center; width: 18px; height: 18px; border-top: 3px solid #11130f; border-right: 3px solid #11130f; transform: rotate(45deg); }
.result-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.result-secondary-actions button { min-width: 0; min-height: 44px; padding: 8px; font-size: .72rem; }
.result-memory-actions { display: flex; justify-content: center; gap: 7px; margin-top: 13px; }
.result-memory-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 10px; border-color: transparent; background: transparent; color: var(--color-muted); font-size: .68rem; }
.result-memory-actions button span { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; }
.result-end-action { display: block; width: 100%; min-height: 52px; margin: 16px auto 0; border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-size: .82rem; font-weight: 850; }

.picker-grid .game-card { min-height: 305px; }
.picker-grid .game-card-copy { min-width: 0; }

.party-summary-screen { text-align: left; }
.party-summary-screen > h1 { margin-bottom: 9px; font-size: clamp(2.3rem, 11vw, 4.5rem); line-height: .94; overflow-wrap: anywhere; }
.party-mvp { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 22px; padding: 13px; border: 3px solid #11130f; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-accent) 0%, #ffb84d 100%); color: #11130f; box-shadow: var(--shadow-press); }
.party-mvp .player-avatar { width: 54px; height: 54px; }
.party-mvp > div { display: grid; gap: 2px; min-width: 0; }
.party-mvp small { font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.party-mvp strong { overflow: hidden; font-size: 1.35rem; text-overflow: ellipsis; white-space: nowrap; }
.party-mvp > span { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #11130f; border-radius: 50%; font-size: 1.55rem; font-weight: 950; }
.party-score-list { margin-top: 18px; }
.party-score-list .score-row { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; justify-content: initial; padding: 9px 4px; }
.party-score-list .score-row > b { color: var(--color-muted); font-size: .7rem; }
.party-score-list .score-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-score-list .score-row > strong { font-size: .7rem; }
.summary-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .6fr); gap: 8px; margin-top: 20px; }
.party-summary-screen > .text-button { display: block; margin: 6px auto 0; }
.recap-section { margin-top: 20px; padding: 16px; border: 2px solid #11130f; background: var(--color-surface); border-radius: 4px; }
.recap-header > .eyebrow { color: #ffd447; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; }
.recap-header > p { margin: 4px 0 12px; font-size: .85rem; color: var(--color-muted); }
.recap-audio-settings { display: grid; gap: 7px; margin: 12px 0; }
.recap-audio-settings > span { color: var(--color-muted); font-size: .68rem; font-weight: 800; }
.recap-audio-settings > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.recap-audio-settings button { min-width: 0; min-height: 36px; padding: 5px 3px; border-radius: 8px; font-size: .62rem; }
.recap-audio-settings button.is-active { border-color: var(--color-accent); background: rgba(255,212,71,.1); color: var(--color-accent); }
.recap-generate-button { width: 100%; min-height: 50px; border: 2px solid #11130f; background: #ffd447; color: #11130f; font-weight: 850; font-size: 1rem; box-shadow: 4px 4px 0 #050605; cursor: pointer; }
.recap-generate-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #050605; }
.recap-progress { position: relative; height: 50px; border: 2px solid #11130f; background: var(--color-bg); overflow: hidden; display: grid; place-items: center; }
.recap-progress-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #43d38e; transition: width .3s ease; }
.recap-progress > span { position: relative; z-index: 1; font-weight: 700; font-size: .85rem; color: #f5f0e6; }
.recap-preview { width: 100%; max-height: 420px; border: 2px solid #11130f; border-radius: 4px; background: #000; }
.recap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.recap-actions > .primary-button { text-decoration: none; display: grid; place-items: center; }
.recap-actions > button { min-height: 44px; }

@media (max-width: 390px) {
  .result-game-scene { height: 172px; }
  .next-game-card { grid-template-columns: 88px minmax(0, 1fr) 20px; }
  .next-game-card > .game-art { min-height: 108px; }
}

/* ===== Bar Tools (danmaku / strobe) ===== */
.tool-library { margin-top: 40px; }
.tool-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tool-card { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 14px 16px; border: 2px solid #10120e; border-radius: var(--radius-lg); background: var(--color-surface); text-align: left; transition: transform var(--transition-bounce), border-color var(--transition-fast), background var(--transition-fast); }
.tool-card:hover { transform: translateY(-2px); border-color: var(--color-border-strong); }
.tool-card:active { transform: scale(.98); }
.tool-art { display: grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; background: var(--color-surface-strong); }
.tool-card-copy { display: grid; gap: 3px; min-width: 0; }
.tool-card-copy strong { font-size: 1.02rem; }
.tool-card-copy span { color: var(--color-muted); font-size: .8rem; line-height: 1.3; }
.art-danmaku { display: grid; grid-template-columns: repeat(3, 6px); gap: 4px; }
.art-danmaku i { height: 4px; border-radius: 2px; background: var(--color-accent); }
.art-danmaku i:nth-child(1) { width: 18px; }
.art-danmaku i:nth-child(2) { width: 12px; background: #5fe0ff; }
.art-danmaku i:nth-child(3) { width: 16px; background: #ff8fc4; }
.art-danmaku i:nth-child(4) { width: 10px; background: #7bed9f; }
.art-danmaku i:nth-child(5) { width: 20px; }
.art-danmaku i:nth-child(6) { width: 14px; background: #ff7a59; }
.art-strobe { position: relative; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0%, #ffd447 45%, #ff7a59 100%); box-shadow: 0 0 18px rgba(255,212,71,.5); }
.art-strobe i { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #ffd447; opacity: .5; }

.tool-shell { display: flex; flex-direction: column; min-height: 100svh; padding: 16px 16px 22px; }
.tool-head { margin: 8px 0 14px; }
.tool-kicker { display: block; color: var(--color-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tool-head h1 { margin: 4px 0 0; font-size: clamp(1.8rem, 9vw, 2.6rem); }

/* Danmaku — fullscreen black */
.danmaku-shell { position: fixed; inset: 0; z-index: 200; max-width: none; padding: 0; background: #000; display: flex; flex-direction: column; overflow: hidden; }
.danmaku-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; }
.danmaku-item { position: absolute; left: 100%; top: 50%; white-space: nowrap; line-height: 1; font-weight: 900; animation-name: danmaku-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.danmaku-item.is-small { font-size: clamp(1rem, 3vmin, 1.6rem); }
.danmaku-item.is-medium { font-size: clamp(1.5rem, 5vmin, 2.5rem); }
.danmaku-item.is-large { font-size: clamp(2rem, 8vmin, 4rem); }
.danmaku-item.is-huge { font-size: clamp(2.5rem, 12vmin, 6rem); }
@keyframes danmaku-scroll { from { transform: translateX(0) translateY(-50%); } to { transform: translateX(calc(-100vw - 100%)) translateY(-50%); } }
@media (orientation: landscape) {
  .danmaku-item.is-large { font-size: clamp(2.5rem, 30vh, 50vw); }
  .danmaku-item.is-huge { font-size: clamp(3rem, 45vh, 70vw); }
}

/* Bottom control bar — minimal */
.danmaku-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.5) 70%, transparent); transition: transform 320ms ease; }
.danmaku-bar.is-hidden { transform: translateY(calc(100% + 4px)); pointer-events: none; }
.danmaku-bar-compact { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.danmaku-input { min-height: 40px; padding: 0 12px; border: 1.5px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: .9rem; transition: border-color .2s; }
.danmaku-input::placeholder { color: rgba(255,255,255,.35); }
.danmaku-input:focus { border-color: rgba(255,212,71,.5); outline: none; background: rgba(255,255,255,.12); }
.danmaku-send { min-height: 40px; padding: 0 16px; border: none; border-radius: 10px; background: #ffd447; color: #1a1a1a; font-size: .85rem; font-weight: 700; }
.danmaku-expand { width: 40px; min-height: 40px; padding: 0; border: 1.5px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); font-size: 1rem; }

/* Expanded settings — hidden by default */
.danmaku-bar-expanded { max-height: 0; overflow: hidden; transition: max-height 300ms ease, margin-top 200ms ease; }
.danmaku-bar.is-expanded .danmaku-bar-expanded { max-height: 240px; margin-top: 8px; }

.danmaku-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.danmaku-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--swatch); box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.danmaku-swatch.is-active { border-color: #fff; }
.danmaku-custom { display: inline-flex; align-items: center; gap: 4px; color: rgba(255,255,255,.5); font-size: .72rem; }
.danmaku-custom input { width: 32px; height: 32px; padding: 0; border: none; background: none; }
.danmaku-lock { min-height: 28px; padding: 0 10px; border: 1px dashed rgba(255,212,71,.5); border-radius: 999px; background: transparent; color: #ffd447; font-size: .68rem; font-weight: 700; }

.danmaku-toolbar { display: grid; gap: 6px; }
.toolbar-group { display: flex; flex-wrap: wrap; gap: 4px; }
.toolbar-chip { min-height: 30px; padding: 0 12px; border: 1.5px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 700; }
.toolbar-chip.is-active { border-color: #ffd447; color: #ffd447; background: rgba(255,212,71,.08); }

.danmaku-back { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 12px; z-index: 11; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); font-size: .9rem; }

/* Strobe — fullscreen */
.strobe-shell { position: fixed; inset: 0; z-index: 200; max-width: none; padding: 0; background: #000; display: flex; flex-direction: column; overflow: hidden; }
.strobe-screen { position: relative; flex: 1 1 auto; min-height: 0; background: #fff3d6; transition: background .12s linear, opacity .5s ease; cursor: pointer; }

/* Warning bar — auto-hides */
.strobe-warning-bar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 12; max-width: 90vw; padding: 6px 14px; border: 1px solid rgba(255,212,71,.3); border-radius: 999px; background: rgba(0,0,0,.7); color: #ffd447; font-size: .68rem; line-height: 1.4; text-align: center; transition: opacity 400ms ease, transform 400ms ease; }
.strobe-warning-bar.is-hidden { opacity: 0; transform: translateX(-50%) translateY(-20px); pointer-events: none; }

/* Bottom control bar — minimal */
.strobe-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.5) 70%, transparent); transition: transform 320ms ease; }
.strobe-bar.is-hidden { transform: translateY(calc(100% + 4px)); pointer-events: none; }
.strobe-bar-compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.strobe-colors-mini { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.strobe-colors-mini::-webkit-scrollbar { display: none; }
.strobe-expand { width: 40px; min-height: 40px; padding: 0; border: 1.5px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); font-size: 1rem; }

/* Expanded settings */
.strobe-bar-expanded { max-height: 0; overflow: hidden; transition: max-height 300ms ease, margin-top 200ms ease; }
.strobe-bar.is-expanded .strobe-bar-expanded { max-height: 300px; margin-top: 8px; }
.strobe-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.strobe-swatch { width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent; background: var(--swatch); box-shadow: 0 0 0 1px rgba(255,255,255,.15); flex: 0 0 auto; }
.strobe-swatch.is-active { border-color: #fff; }
.strobe-lock { min-height: 28px; padding: 0 10px; border: 1px dashed rgba(255,212,71,.5); border-radius: 999px; background: transparent; color: #ffd447; font-size: .68rem; font-weight: 700; }

.strobe-back { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 12px; z-index: 11; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(0,0,0,.3); color: rgba(255,255,255,.5); font-size: .9rem; }

/* Toolbar controls for danmaku & strobe */
.danmaku-toolbar { display: grid; gap: 8px; margin-top: 8px; }
.toolbar-group { display: flex; flex-wrap: wrap; gap: 4px; }
.toolbar-chip { min-height: 34px; padding: 0 14px; border: 2px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-muted); font-size: .76rem; font-weight: 700; }
.toolbar-chip.is-active { border-color: var(--color-accent); color: var(--color-accent); background: rgba(255,212,71,.06); }
.toolbar-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin-top: 4px; }
.toolbar-row { display: flex; flex-wrap: wrap; gap: 4px; }
.faceoff-game { display: grid; gap: 12px; }
.faceoff-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.faceoff-heading h1 { margin: 4px 0 0; font-size: clamp(1.4rem, 7vw, 2rem); line-height: 1.05; }
.faceoff-heading h1 span { font-weight: 950; }
.faceoff-subtitle { margin: 6px 0 0; color: var(--color-muted); font-size: .82rem; line-height: 1.3; }
.faceoff-stats { display: grid; justify-items: center; min-width: 70px; padding: 8px 10px; border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.faceoff-remaining { font-size: 1.8rem; font-weight: 950; color: var(--color-accent); line-height: 1; }
.faceoff-stats small { font-size: .58rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.faceoff-grid { display: grid; grid-template-columns: repeat(var(--faceoff-cols, 4), minmax(0, 1fr)); gap: 8px; }
.faceoff-cell { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-surface); overflow: hidden; transition: transform 160ms ease, opacity 200ms ease, filter 200ms ease; }
.faceoff-cell:not(:disabled):active { transform: scale(0.92); }
.faceoff-cell.is-removed { opacity: 0; transform: scale(0.5); pointer-events: none; }
.faceoff-cell svg, .faceoff-custom-avatar { display: block; width: 100%; height: 100%; }
.faceoff-custom-avatar { object-fit: cover; }
.faceoff-grid.is-revealing .faceoff-cell:not(.is-bomb-reveal) { opacity: .2; filter: grayscale(1); }
.faceoff-cell.is-bomb-reveal { opacity: 1; border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(255,95,97,.2), 0 0 24px rgba(255,95,97,.5); animation: faceoff-bomb-shake .4s ease 2; }
.faceoff-cell.is-bomb-reveal:disabled { opacity: 1; }
.faceoff-bomb-mark { position: absolute; inset: 7px; display: grid; place-items: center; border: 3px solid #fff5e5; border-radius: 6px; background: rgba(15,16,14,.68); color: #ff5f61; font-size: 2rem; font-weight: 950; }
.faceoff-gone { display: block; width: 100%; height: 100%; }
.faceoff-footer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 50px; }
.faceoff-footer .game-status-line { margin: 0; }
.faceoff-reset { width: 42px; min-height: 42px; padding: 0; border-color: transparent; background: transparent; color: var(--color-muted); font-size: 1.45rem; }
.faceoff-result { display: grid; gap: 16px; padding: 20px 0; text-align: center; }
.faceoff-result h1 { font-size: clamp(2rem, 10vw, 3.2rem); line-height: 1; }
.faceoff-result-desc { color: var(--color-muted); font-size: .9rem; }
.faceoff-bomb-reveal { width: 100px; height: 100px; margin: 0 auto; border: 3px solid var(--color-danger); border-radius: 18px; overflow: hidden; box-shadow: 0 0 20px rgba(255,95,97,.3); animation: faceoff-bomb-shake .4s ease; }
@keyframes faceoff-bomb-shake { 0%,100% { transform: scale(1); } 25% { transform: scale(1.1) rotate(-3deg); } 75% { transform: scale(1.1) rotate(3deg); } }
.faceoff-stats-row { display: flex; justify-content: center; gap: 20px; margin: 4px 0; }
.faceoff-stats-row span { color: var(--color-muted); font-size: .85rem; }
.faceoff-stats-row strong { color: var(--color-accent); font-size: 1.4rem; font-weight: 950; }
.faceoff-style-picker { display: grid; gap: 7px; min-width: 0; }
.faceoff-style-label { color: var(--color-muted); font-size: .72rem; font-weight: 800; }
.faceoff-packs { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 5px; scrollbar-width: none; }
.faceoff-packs::-webkit-scrollbar { display: none; }
.faceoff-pack-button, .faceoff-upload-button { position: relative; display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; align-items: center; column-gap: 7px; flex: 0 0 auto; min-width: 112px; min-height: 48px; padding: 5px 8px; border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); text-align: left; font-size: .68rem; font-weight: 800; cursor: pointer; }
.faceoff-pack-button > span:nth-child(2), .faceoff-upload-button > span:nth-child(2) { white-space: nowrap; }
.faceoff-pack-button small, .faceoff-upload-button small { grid-column: 2; color: var(--color-accent); font-size: .55rem; line-height: 1; }
.faceoff-pack-preview { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: #242724; }
.faceoff-pack-preview svg, .faceoff-pack-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.faceoff-pack-button.is-active, .faceoff-upload-button.is-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.faceoff-pack-button.is-locked, .faceoff-upload-button.is-locked { color: var(--color-muted); }
.faceoff-pack-button.is-locked .faceoff-pack-preview, .faceoff-upload-button.is-locked .faceoff-pack-preview { filter: grayscale(.75); opacity: .68; }
.faceoff-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.faceoff-scoreboard { display: grid; gap: 6px; max-width: 400px; margin: 0 auto; }
.faceoff-score-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.faceoff-score-row.is-loser { border-color: var(--color-danger); background: rgba(255,95,97,.08); }
.faceoff-score-row.is-winner { border-color: var(--color-accent); }
.faceoff-rank { font-size: 1.2rem; text-align: center; }
.faceoff-name { font-weight: 850; font-size: .9rem; }
.faceoff-count { font-size: 1.3rem; font-weight: 950; color: var(--color-accent); }
.faceoff-actions { display: grid; gap: 8px; max-width: 320px; margin: 8px auto 0; }

/* Game advanced customization */
.game-card-wrap { display: grid; gap: 8px; }
.game-customize { min-height: 38px; padding: 0 14px; border: 1px solid var(--color-accent); border-radius: 10px; background: transparent; color: var(--color-accent); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.game-customize:active { transform: scale(.97); }
.custom-fields { display: grid; gap: 16px; margin: 20px 0; }
.custom-field { display: grid; gap: 7px; }
.custom-field > span { color: var(--color-muted); font-size: .82rem; font-weight: 700; }
.custom-field select { min-height: 50px; padding: 0 14px; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font-size: 1rem; }
.custom-start { margin-top: auto; min-height: 50px; }

/* ═════════════════════════════════════════════════════════════════════
   Tap Battle — 手速 / 教室偷袭 / 拳套乱飞 / 泼水节巡逻
   ═════════════════════════════════════════════════════════════════════ */

/* ── Setup Screen ── */
.tb-game { display: flex; flex-direction: column; min-height: 100%; }
.tb-setup { display: flex; flex-direction: column; gap: 20px; padding: 20px 16px; max-width: 480px; margin: 0 auto; width: 100%; }
.tb-setup-header { text-align: center; }
.tb-setup-header .eyebrow { color: var(--color-accent); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.tb-setup-header h1 { font-size: 1.6rem; font-weight: 950; margin: 0 0 8px; }
.tb-setup-desc { color: var(--color-muted); font-size: .88rem; line-height: 1.5; }
.tb-setup-block { display: flex; flex-direction: column; gap: 10px; }
.tb-setup-label { font-size: .78rem; font-weight: 800; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; }

.tb-scene-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tb-scene-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 96px; padding: 10px 5px;
  border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-surface);
  color: var(--color-text); cursor: pointer; transition: all .2s;
}
.tb-scene-card.is-active { border-color: var(--color-accent); background: var(--color-accent-dim); transform: scale(1.03); }
.tb-scene-card-emoji { font-size: 1.8rem; }
.tb-scene-card-name { font-size: .72rem; line-height: 1.15; font-weight: 800; text-align: center; }
.tb-scene-card-action { color: var(--color-muted); font-size: .6rem; line-height: 1.1; text-align: center; }

.tb-duration-options { display: flex; gap: 8px; }
.tb-duration-btn {
  flex: 1; min-height: 44px; border: 2px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); color: var(--color-text); font-size: 1rem; font-weight: 800;
  cursor: pointer; transition: all .2s;
}
.tb-duration-btn.is-active { border-color: var(--color-accent); background: var(--color-accent-dim); color: var(--color-accent); }

.tb-vs-display { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; }
.tb-vs-name { font-size: 1.1rem; font-weight: 850; }
.tb-vs { font-size: .9rem; font-weight: 800; color: var(--color-muted); }

.tb-setup-rules { background: var(--color-surface); border-radius: 12px; padding: 14px 16px; }
.tb-setup-rules h3 { font-size: .88rem; font-weight: 800; margin: 0 0 8px; color: var(--color-text); }
.tb-setup-rules ul { margin: 0; padding-left: 18px; }
.tb-setup-rules li { font-size: .8rem; line-height: 1.6; color: var(--color-muted); }

.tb-start-btn {
  min-height: 52px; border: none; border-radius: 14px; background: var(--color-accent);
  color: #111; font-size: 1.1rem; font-weight: 900; cursor: pointer; transition: all .2s;
}
.tb-start-btn:active { transform: scale(.97); }

/* ── Playing Screen ── */
.tb-playing { display: flex; flex-direction: column; height: 100%; }

.tb-top-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--color-bg-deep); border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.tb-timer { display: flex; align-items: center; gap: 4px; font-size: 1rem; font-weight: 850; }
.tb-timer-icon { font-size: 1rem; }
.tb-timer-bar { flex: 1; height: 6px; background: var(--color-surface); border-radius: 3px; overflow: hidden; }
.tb-timer-fill { height: 100%; background: var(--color-accent); border-radius: 3px; transition: width .1s linear; }
.tb-scene-tag { font-size: 1.2rem; }

/* ── Canvas Container (PixiJS) ── */
.tb-canvas-container {
  position: relative; width: 100%; aspect-ratio: 720/400; max-height: 50vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 12px; margin: 4px 0;
  background: #1a1a2e;
}
.tb-canvas-container canvas { border-radius: 12px; }
.tb-canvas-loading {
  position: absolute; color: rgba(255,255,255,.4); font-size: .8rem;
  animation: tb-pulse-loading 1s ease-in-out infinite alternate;
}
@keyframes tb-pulse-loading { from { opacity: .3; } to { opacity: .8; } }

/* ── Danger Bar ── */
.tb-danger-bar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; transition: all .3s;
  margin: 2px auto; width: fit-content;
}
.tb-danger-bar.is-safe { background: rgba(34,197,94,.15); color: #4ade80; }
.tb-danger-bar.is-warning { background: rgba(251,191,36,.15); color: #fbbf24; }
.tb-danger-bar.is-caught { background: rgba(239,68,68,.25); color: #f87171; animation: tb-pulse-alert .3s ease-in-out infinite alternate; }
.tb-danger-bar .tb-danger-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@keyframes tb-pulse-alert { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ── Arena (tap zones) ── */
.tb-arena {
  display: flex; flex: 1; min-height: 0;
}
.tb-tap-zone {
  flex: 1; border: none; cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: background .1s;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tb-tap-left { background: linear-gradient(135deg, rgba(255,207,74,.06), rgba(255,107,98,.04)); border-right: 2px solid var(--color-border); }
.tb-tap-right { background: linear-gradient(225deg, rgba(88,214,169,.06), rgba(112,183,255,.04)); border-left: 2px solid var(--color-border); }
.tb-tap-zone:active { background: var(--color-accent-dim); }
.tb-tap-zone[data-just-tapped="true"] .tb-tap-score { animation: tb-score-bump .15s ease-out; }
.tb-tap-zone[data-just-tapped="true"] .tb-tap-glow { opacity: .6; }

.tb-tap-score { font-size: 3rem; font-weight: 950; line-height: 1; transition: transform .1s; }
@keyframes tb-score-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.tb-tap-name { font-size: .88rem; font-weight: 800; color: var(--color-text); }
.tb-tap-hint { font-size: .68rem; color: var(--color-faint); text-transform: uppercase; letter-spacing: .05em; }
.tb-tap-glow {
  position: absolute; inset: 0; border-radius: 0; pointer-events: none;
  background: radial-gradient(circle at center, var(--player-color) 0%, transparent 70%);
  opacity: 0; transition: opacity .15s;
}
.tb-arena-center {
  display: flex; align-items: center; justify-content: center; padding: 0 8px;
  flex-shrink: 0;
}
.tb-vs-big { font-size: 1.2rem; font-weight: 950; color: var(--color-faint); letter-spacing: .05em; }

/* ── Caught Overlay ── */
.tb-caught { display: flex; align-items: center; justify-content: center; }
.tb-caught-overlay { position: relative; width: 100%; max-width: 400px; padding: 20px; text-align: center; }
.tb-caught-flash {
  position: absolute; inset: -100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,0,0,.15) 0%, transparent 70%);
  animation: tb-flash-pulse .5s ease-out;
}
@keyframes tb-flash-pulse {
  from { opacity: 1; transform: scale(.5); }
  to { opacity: 0; transform: scale(1.5); }
}
.tb-caught-card {
  position: relative; background: var(--color-surface-strong); border: 2px solid var(--color-danger);
  border-radius: 16px; padding: 24px 20px; box-shadow: 0 0 30px rgba(255,0,0,.2);
}
.tb-caught-icon { font-size: 3rem; animation: tb-shake-icon .3s ease-in-out 3; }
@keyframes tb-shake-icon {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.tb-caught-card h2 { font-size: 1.3rem; font-weight: 850; margin: 10px 0 6px; }
.tb-caught-desc { font-size: .85rem; color: var(--color-muted); margin: 0 0 16px; }
.tb-caught-scores {
  display: flex; justify-content: center; gap: 24px; margin: 14px 0;
  padding: 12px; background: var(--color-bg-deep); border-radius: 10px;
}
.tb-caught-score { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tb-caught-score span { font-size: .76rem; font-weight: 700; }
.tb-caught-score strong { font-size: 1.8rem; font-weight: 950; }
.tb-taunt-section { margin-top: 16px; }
.tb-taunt-prompt { font-size: .82rem; color: var(--color-text); margin: 0 0 10px; }
.tb-taunt-buttons { display: flex; flex-direction: column; gap: 8px; }
.tb-taunt-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  border: 2px solid var(--color-accent); border-radius: 12px; background: var(--color-accent-dim);
  color: var(--color-accent); font-size: .95rem; font-weight: 850; cursor: pointer; transition: all .2s;
}
.tb-taunt-btn:active { transform: scale(.96); }
.tb-taunt-emoji { font-size: 1.2rem; }
.tb-taunt-skip {
  min-height: 40px; border: none; background: transparent; color: var(--color-muted);
  font-size: .82rem; font-weight: 700; cursor: pointer;
}
.tb-taunt-skip:active { color: var(--color-text); }

/* ── Result Screen ── */
.tb-result { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 20px; max-width: 400px; margin: 0 auto; text-align: center; }
.tb-result-trophy { font-size: 4rem; animation: tb-trophy-bounce .5s ease-out; }
@keyframes tb-trophy-bounce {
  0% { transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}
.tb-result h1 { font-size: 1.4rem; font-weight: 850; margin: 0; }
.tb-result-scores { display: flex; gap: 16px; width: 100%; }
.tb-result-score {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px;
  border: 2px solid var(--color-border); border-radius: 14px; background: var(--color-surface);
}
.tb-result-score.is-winner { border-color: var(--color-accent); background: var(--color-accent-dim); }
.tb-result-score.is-loser { border-color: var(--color-danger); opacity: .7; }
.tb-result-score span { font-size: .82rem; font-weight: 800; }
.tb-result-score strong { font-size: 2.5rem; font-weight: 950; }
.tb-result-score small { font-size: .68rem; color: var(--color-muted); text-transform: uppercase; }
.tb-result-taunts { font-size: .78rem; color: var(--color-muted); }
.tb-result-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }