/* =====================================================================
   Coinflip LB — styles.css
   ---------------------------------------------------------------------
   Sober, modern, dark UI with a violet/gold accent. Mobile-first.
   The coin uses CSS 3D transforms with a multi-stage toss animation.
   ===================================================================== */

/* --- Hidden attribute reset ----------------------------------------------
   The HTML `hidden` attribute is implemented by browsers as
   `[hidden] { display: none }` in the user-agent stylesheet, which any
   author-written `display:` rule (e.g. on .modal-backdrop) silently
   overrides. This makes `hidden` always win.
   ---------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* --- Tokens ---------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:           #07080f;
  --bg-elev:      #11131e;
  --bg-elev-2:    #181b29;
  --bg-elev-3:    #1f2334;
  --line:         #262a3d;
  --line-2:       #323750;

  /* Text */
  --text:         #ecedf5;
  --text-dim:     #9ba1ba;
  --text-mute:    #6b7088;

  /* Accents */
  --primary:      #8b5cf6;        /* violet */
  --primary-hi:   #a78bfa;
  --primary-deep: #6d28d9;
  --primary-ink:  #0a0d18;

  --accent:       #06b6d4;        /* cyan, used sparingly */
  --gold:         #fbbf24;
  --gold-deep:    #d97706;
  --gold-shadow:  #5a3a00;

  --good:         #22c55e;
  --good-bg:      rgba(34, 197, 94, 0.10);
  --bad:          #ef4444;
  --bad-bg:       rgba(239, 68, 68, 0.10);
  --warn:         #f59e0b;

  /* Geometry */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.30);
  --shadow:    0 18px 40px -12px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4);
  --glow-primary: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 12px 36px -10px rgba(139, 92, 246, 0.45);

  --font:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body[data-theme="light"] {
  --bg:           #f6f7fb;
  --bg-elev:      #ffffff;
  --bg-elev-2:    #f1f3f8;
  --bg-elev-3:    #e8ebf3;
  --line:         #d9deea;
  --line-2:       #c7cedf;

  --text:         #111827;
  --text-dim:     #4b5563;
  --text-mute:    #7b8496;

  --primary:      #7c3aed;
  --primary-hi:   #6d28d9;
  --primary-deep: #5b21b6;
  --primary-ink:  #ffffff;

  --good-bg:      rgba(22, 163, 74, 0.10);
  --bad-bg:       rgba(220, 38, 38, 0.10);

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow:    0 18px 42px -20px rgba(15, 23, 42, 0.25), 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 30px 70px -32px rgba(15, 23, 42, 0.34), 0 10px 28px rgba(15, 23, 42, 0.10);
}

/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
p  { margin: 0; }

/* --- Animated background -------------------------------------------- */
.bg-deco {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.orb-a {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  top: -180px; left: -120px;
  animation: orb-drift-a 22s ease-in-out infinite;
}
.orb-b {
  width: 460px; height: 460px;
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  bottom: -160px; right: -120px;
  animation: orb-drift-b 26s ease-in-out infinite;
  opacity: 0.40;
}
.orb-c {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #fbbf24 0%, transparent 70%);
  top: 35%; right: -120px;
  opacity: 0.18;
  animation: orb-drift-c 30s ease-in-out infinite;
}
@keyframes orb-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, 50px) scale(1.1); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-60px, -40px) scale(1.08); }
}
@keyframes orb-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-100px, 30px); }
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}
body[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.045) 1px, transparent 1px);
}
body[data-theme="light"] .orb-a { opacity: 0.20; }
body[data-theme="light"] .orb-b { opacity: 0.16; }
body[data-theme="light"] .orb-c { opacity: 0.18; }
@media (prefers-reduced-motion: reduce) {
  .bg-orb { animation: none; }
}

/* --- Topbar --------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.brand-mark {
  width: 26px; height: 26px;
  filter: drop-shadow(0 2px 6px rgba(251, 191, 36, 0.35));
}
.brand-text {
  font-size: 16px;
}
.topbar-right {
  display: inline-flex; align-items: center; gap: 10px;
}
.balance-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: linear-gradient(140deg, #fbbf24 0%, #d97706 100%);
  color: #261901;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 18px -8px rgba(251, 191, 36, 0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  white-space: nowrap;
}
.balance-pill .balance-label {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.user-name {
  color: var(--text-dim);
  font-size: 14px;
}

.theme-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 90;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 120ms ease, background 150ms ease, border-color 150ms ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--primary); }

.app-footer {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 20;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  opacity: 0.72;
  pointer-events: none;
}

/* --- Layout containers ---------------------------------------------- */
main {
  display: block;
  padding: 28px 20px 80px;
  max-width: 1100px;
  margin: 0 auto;
}
body[data-view="auth"] main {
  max-width: none;
  padding: 0;
}
body[data-view="dashboard"] main {
  max-width: 1100px;
}

/* --- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 10px 16px;
  font-size: 14px;
  background: var(--bg-elev-2);
  color: var(--text);
  transition: transform 100ms ease, background 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  user-select: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(139, 92, 246, 0.55);
}
.btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 14px 28px -8px rgba(139, 92, 246, 0.7);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-dim);
}
.btn-ghost:not(:disabled):hover {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--line-2);
}
.btn-block { width: 100%; }
.btn-sm    { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-lg    { padding: 13px 18px; font-size: 15px; }

/* --- Forms ---------------------------------------------------------- */
.field {
  display: block;
  margin-bottom: 14px;
}
.field-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 6px;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}
input::placeholder { color: var(--text-mute); }
input:focus {
  border-color: var(--primary);
  background: var(--bg-elev-2);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.prefix-input {
  position: relative;
}
.prefix-input .prefix {
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute);
  font-weight: 600;
  pointer-events: none;
}
.prefix-input input { padding-left: 28px; }
.prefix-input-sm input { padding: 8px 10px 8px 22px; font-size: 13px; }
.prefix-input-sm .prefix { left: 10px; font-size: 13px; }

/* --- Inline feedback (replaces toasts) ------------------------------ */
.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--text-mute);
  font-size: 12px;
}

.form-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text-dim);
  animation: fade-in 180ms ease-out;
}
.form-feedback.is-error {
  border-color: rgba(239, 68, 68, 0.3);
  background: var(--bad-bg);
  color: #fca5a5;
}
.form-feedback.is-success {
  border-color: rgba(34, 197, 94, 0.3);
  background: var(--good-bg);
  color: #86efac;
}
.form-feedback.is-info {
  border-color: rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.08);
  color: #c4b5fd;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Cards ---------------------------------------------------------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card + .card,
.card + .tabs,
.tabs + .tab-panel,
.tab-panel + .tab-panel {
  margin-top: 18px;
}
.card-header { margin-bottom: 16px; }
.card-title  { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.card-subtitle { color: var(--text-dim); font-size: 14px; }

/* --- AUTH VIEW ------------------------------------------------------ */
.view-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3vh, 32px) 20px;
}
.auth-card {
  width: 100%;
  max-width: 520px;
  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: clamp(22px, 4vh, 32px) 28px 24px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
  text-align: center;
  animation: card-rise 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-coin-deco {
  display: flex; justify-content: center;
  margin-bottom: clamp(10px, 2vh, 18px);
}
.auth-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 60%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.auth-subtitle {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 auto clamp(14px, 2.6vh, 22px);
  max-width: 340px;
  line-height: 1.55;
}
.auth-form { text-align: left; margin-top: clamp(12px, 2.2vh, 18px); }
.auth-fineprint {
  margin-top: clamp(12px, 2.2vh, 20px);
  font-size: 12px;
  color: var(--text-mute);
}

/* --- Tabs ----------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 1 auto;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.tab:hover { color: var(--text); }
.tab.is-active {
  background: var(--bg-elev-3);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.auth-tabs { margin: 4px auto 0; max-width: 320px; }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 999px;
}

.tab-panel { display: block; }
.tab-panel[hidden] { display: none !important; }

/* --- Result banner -------------------------------------------------- */
.result-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 75;
  width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(34, 197, 94, 0.10) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: result-pop 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes result-pop {
  from { opacity: 0; transform: translate(-50%, -12px) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.result-banner.is-loss {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(17, 19, 30, 0.4) 100%);
  border-color: rgba(239, 68, 68, 0.3);
}
.result-banner.is-win {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.20) 0%, rgba(251, 191, 36, 0.12) 100%);
  border-color: rgba(34, 197, 94, 0.35);
}
.result-banner-coin {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe28a, #f5b301 60%, #9c7100);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 0 4px 12px rgba(245, 179, 1, 0.3);
}
.result-banner-text { flex: 1; }
.result-banner-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.result-banner-sub { color: var(--text-dim); font-size: 13px; }

/* --- Create form (inside dashboard) --------------------------------- */
.create-card .create-form { display: block; }
.choice-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
.choice-card {
  position: relative;
  display: block;
  padding: 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, transform 100ms;
}
.choice-card:hover { border-color: var(--line-2); }
.choice-card:has(input:checked) {
  border-color: var(--primary);
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.4);
}
.choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-content {
  display: flex; align-items: center; gap: 12px;
}
.choice-label {
  font-weight: 600;
  font-size: 15px;
}

/* --- Panel toolbars ------------------------------------------------- */
.panel-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.panel-info {
  font-size: 13px;
  color: var(--text-dim);
}
.filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px;
}
.filter { display: block; }
.filter-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 4px;
}
.filter .prefix-input { width: 110px; }

/* --- Generic rows --------------------------------------------------- */
.rows {
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  transition: background 150ms;
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--bg-elev-2); }

.empty-state, .loading-row {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-mute);
  background: var(--bg-elev);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  font-size: 14px;
}

/* --- Game row (open games tab) ------------------------------------- */
.game-row {
  grid-template-columns: 1.4fr 1fr 0.8fr auto;
}
.game-row-creator {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.game-row-meta { min-width: 0; }
.game-row-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-row-time {
  color: var(--text-mute);
  font-size: 12px;
}
.game-row-pick {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--text-dim);
}
.pick-label { font-weight: 600; color: var(--text); }
.game-row-wager {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--gold);
}

/* --- My-games row --------------------------------------------------- */
.my-row {
  grid-template-columns: auto 1.4fr auto auto;
}
.my-row-status {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.my-row-status.s-open {
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
}
.my-row-status.s-win {
  background: var(--good-bg);
  color: var(--good);
}
.my-row-status.s-loss {
  background: var(--bad-bg);
  color: var(--bad);
}
.my-row-status.s-cancelled {
  background: var(--bg-elev-3);
  color: var(--text-mute);
}
.my-row-detail {
  font-size: 14px;
  color: var(--text-dim);
  min-width: 0;
}
.my-row-detail strong { color: var(--text); font-weight: 600; }
.my-row-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
}
.my-row-amount.is-win  { color: var(--good); }
.my-row-amount.is-loss { color: var(--bad); }
.my-row-amount.is-pending { color: var(--gold); }
.my-row-time {
  color: var(--text-mute);
  font-size: 12px;
  white-space: nowrap;
}

/* --- Leaderboard row ------------------------------------------------ */
.leaderboard-rows .lb-row {
  grid-template-columns: 48px 1fr auto;
}
.lb-rank {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.lb-row.is-top1 .lb-rank { background: linear-gradient(135deg, #fbbf24, #d97706); color: #261901; border-color: transparent; }
.lb-row.is-top2 .lb-rank { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; border-color: transparent; }
.lb-row.is-top3 .lb-rank { background: linear-gradient(135deg, #d97706, #92400e); color: #fff;    border-color: transparent; }
.lb-row.is-me   { background: rgba(139, 92, 246, 0.06); }
.lb-row.is-me .lb-name { color: var(--primary-hi); font-weight: 700; }
.lb-name {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-balance {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold);
}

/* --- COIN ----------------------------------------------------------- */
.coin {
  position: relative;
  display: inline-block;
  perspective: 800px;
}
.coin-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 200ms;
}
.coin-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  letter-spacing: -0.02em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
}
.coin-face span { display: block; }
.coin-heads {
  background:
    radial-gradient(circle at 32% 30%, #fff3c2 0%, #fbbf24 45%, #b8770a 100%);
  color: #5a3a00;
  box-shadow:
    inset 0 -4px 10px rgba(0,0,0,0.28),
    inset 0 4px 10px rgba(255,255,255,0.35),
    0 0 0 2px rgba(120, 80, 5, 0.5);
}
.coin-tails {
  background:
    radial-gradient(circle at 32% 30%, #f5f7fb 0%, #c8cdd9 45%, #6a7080 100%);
  color: #2d3346;
  transform: rotateY(180deg);
  box-shadow:
    inset 0 -4px 10px rgba(0,0,0,0.30),
    inset 0 4px 10px rgba(255,255,255,0.45),
    0 0 0 2px rgba(60, 65, 85, 0.5);
}

.coin-tails.static-tail {
  transform: none;
}

.coin-flipped-base .coin-inner { transform: rotateY(180deg); }

/* Sizes */
.coin-xs { width: 24px; height: 24px; }
.coin-xs .coin-face { font-size: 12px; }
.coin-sm { width: 40px; height: 40px; }
.coin-sm .coin-face { font-size: 18px; }
.coin-md { width: 84px; height: 84px; }
.coin-md .coin-face { font-size: 38px; }
.coin-xl { width: 170px; height: 170px; }
.coin-xl .coin-face { font-size: 76px; }

/* Idle slow spin (auth deco) */
.coin.idle-spin .coin-inner {
  animation: idle-spin 6s linear infinite;
}
@keyframes idle-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Flip toss — full choreography in one keyframe set.
   --final-y is set by JS based on the result.
   Heads → 1800deg (5 full rotations, lands face up).
   Tails → 1980deg (5.5 rotations, lands face down). */
.coin.is-tossing .coin-inner {
  animation: flip-toss var(--toss-duration, 2600ms) cubic-bezier(0.18, 0.72, 0.16, 1) forwards;
}
@keyframes flip-toss {
  0%   { transform: translateY(0) rotateY(0deg) rotateZ(0deg) scale(1); }
  14%  { transform: translateY(-34px) rotateY(360deg) rotateZ(3deg) scale(1.03); }
  34%  { transform: translateY(-108px) rotateY(900deg) rotateZ(-4deg) scale(1.06); }
  58%  { transform: translateY(-122px) rotateY(1350deg) rotateZ(2deg) scale(1.05); }
  78%  { transform: translateY(-42px) rotateY(1710deg) rotateZ(-1deg) scale(1.02); }
  91%  { transform: translateY(0) rotateY(var(--final-y, 1800deg)) rotateZ(0deg) scale(1.04, 0.92); }
  97%  { transform: translateY(-4px) rotateY(var(--final-y, 1800deg)) rotateZ(0deg) scale(0.99, 1.02); }
  100% { transform: translateY(0) rotateY(var(--final-y, 1800deg)) rotateZ(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .coin.is-tossing .coin-inner {
    animation: none;
    transform: rotateY(var(--final-y, 0deg));
    transition: transform 600ms ease-out;
  }
}

/* Pre-toss idle wobble while waiting for the API */
.coin.is-waiting .coin-inner {
  animation: wait-bob 1.6s ease-in-out infinite;
}
@keyframes wait-bob {
  0%, 100% { transform: translateY(0) rotateY(0); }
  50%      { transform: translateY(-8px) rotateY(20deg); }
}

/* Coin shadow under the flip stage */
.coin-xl .coin-shadow {
  position: absolute;
  bottom: -28px; left: 50%;
  width: 60%; height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  animation: shadow-pulse 1.6s ease-in-out infinite;
}
.coin-xl.is-tossing .coin-shadow {
  animation: shadow-toss var(--toss-duration, 2600ms) cubic-bezier(0.22, 0.7, 0.18, 1.02) forwards;
}
@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.55; }
  50%      { transform: translateX(-50%) scaleX(0.85); opacity: 0.4; }
}
@keyframes shadow-toss {
  0%   { transform: translateX(-50%) scaleX(1);    opacity: 0.55; }
  30%  { transform: translateX(-50%) scaleX(0.55); opacity: 0.25; }
  55%  { transform: translateX(-50%) scaleX(0.5);  opacity: 0.20; }
  85%  { transform: translateX(-50%) scaleX(0.7);  opacity: 0.30; }
  100% { transform: translateX(-50%) scaleX(1);    opacity: 0.55; }
}

/* --- Modal ---------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: backdrop-fade 240ms ease-out;
}
@keyframes backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: 28px 24px 24px;
  width: 100%; max-width: 460px;
  box-shadow: var(--shadow-lg);
  animation: modal-rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: center;
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.flip-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.flip-stage {
  position: relative;
  height: 230px;
  display: flex; align-items: center; justify-content: center;
  margin: 16px 0 18px;
}
.flip-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 6px;
  min-height: 1.3em;
}
.flip-result {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
  animation: card-rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.result-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.result-row.row-win  { border-color: rgba(34, 197, 94, 0.35); background: var(--good-bg); }
.result-row.row-loss { border-color: rgba(239, 68, 68, 0.35); background: var(--bad-bg); }
.result-key { color: var(--text-dim); }
.result-val { font-weight: 700; font-family: var(--font-mono); }
.flip-result .btn { margin-top: 6px; }

/* --- Mobile --------------------------------------------------------- */
@media (max-width: 640px) {
  main { padding: 18px 14px 60px; }
  .topbar { padding: 10px 14px; }
  .user-name { display: none !important; }

  .auth-card { padding: 22px 18px 18px; border-radius: var(--radius-lg); }
  .auth-title { font-size: 24px; }
  .auth-coin-deco .coin-md { width: 66px; height: 66px; }
  .auth-coin-deco .coin-md .coin-face { font-size: 30px; }

  .card { padding: 18px; border-radius: var(--radius-md); }
  .card-title { font-size: 17px; }

  .choice-row { gap: 8px; }
  .choice-card { padding: 12px; }

  .panel-toolbar { gap: 8px; }
  .filters { width: 100%; justify-content: flex-start; }
  .filter .prefix-input { width: 90px; }

  /* Game row collapses to 2 lines */
  .game-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "creator wager"
      "pick    join";
    row-gap: 10px;
  }
  .game-row-creator { grid-area: creator; }
  .game-row-pick    { grid-area: pick; }
  .game-row-wager   { grid-area: wager; text-align: right; }
  .game-row-join    { grid-area: join; justify-self: end; }

  .my-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "status detail amount"
      "time   time   time";
    row-gap: 6px;
  }
  .my-row-status { grid-area: status; }
  .my-row-detail { grid-area: detail; }
  .my-row-amount { grid-area: amount; text-align: right; }
  .my-row-time   { grid-area: time; color: var(--text-mute); }

  .modal { padding: 22px 18px 18px; border-radius: var(--radius-lg); }
  .flip-stage { height: 200px; }
  .coin-xl { width: 140px; height: 140px; }
  .coin-xl .coin-face { font-size: 64px; }

  .balance-pill .balance-label { display: none; }
  .balance-pill { padding: 6px 12px; }
  .result-banner { top: calc(env(safe-area-inset-top, 0px) + 10px); align-items: flex-start; }
  .result-banner-coin { width: 38px; height: 38px; }
}


@media (max-width: 380px) {
  .auth-title { font-size: 22px; }
  .auth-subtitle { font-size: 13px; }
  .choice-row { grid-template-columns: 1fr; }
  .filter .prefix-input { width: 80px; }
}
@media (max-height: 720px) {
  .view-auth { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
  .auth-card { padding-top: 18px; padding-bottom: 16px; }
  .auth-coin-deco { margin-bottom: 8px; }
  .auth-coin-deco .coin-md { width: 58px; height: 58px; }
  .auth-coin-deco .coin-md .coin-face { font-size: 26px; }
  .auth-title { font-size: 23px; margin-bottom: 4px; }
  .auth-subtitle { font-size: 13px; line-height: 1.4; }
  .field { margin-bottom: 10px; }
  .auth-fineprint { font-size: 11px; }
}

@media (max-width: 420px) {
  .theme-toggle { right: 10px; bottom: 10px; width: 38px; height: 38px; }
  .app-footer { left: 10px; bottom: 8px; }
}

/* =====================================================================
   v0.4.1 polish: smoother coin, better pagination, escrow/cancel UI
   ===================================================================== */

/* Whole-dollar inputs should feel like money boxes, not decimal fields. */
.prefix-input input { font-variant-numeric: tabular-nums; }

/* Pagers */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.pager-info {
  min-width: 110px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.pager .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* More card-like open games. */
.rows {
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.row {
  position: relative;
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--gold));
  opacity: 0.75;
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row:hover {
  background: var(--bg-elev-2);
  transform: translateY(-1px);
  transition: background 150ms, transform 150ms, border-color 150ms;
  border-color: var(--line-2);
}
.game-row-wager, .lb-balance, .my-row-amount { text-align: right; }

/* My games now has an optional cancel action. */
.my-row {
  grid-template-columns: auto 1.4fr auto auto auto;
}
.my-row-cancel {
  justify-self: end;
  white-space: nowrap;
}

/* Better fixed popup: auto-dismissed by JS after 20s. */
.result-banner {
  animation: banner-in 240ms ease-out both;
}
@keyframes banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Rebuilt coin: clearer depth, fewer expensive effects, smoother mobile FPS. */
.coin {
  perspective: 1100px;
  transform: translateZ(0);
  contain: layout paint;
}
.coin-inner {
  will-change: transform;
  transform-style: preserve-3d;
}
.coin::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.28), transparent 38%, rgba(0,0,0,0.12) 70%, transparent);
  mix-blend-mode: screen;
  opacity: 0.45;
  transform: translateZ(3px);
}
.coin-face {
  border: 5px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,0.18),
    inset 0 -14px 22px rgba(0,0,0,0.28),
    0 8px 22px rgba(0,0,0,0.22);
}
.coin-face::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 2px dashed rgba(91,58,0,0.28);
}
.coin-face::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.12);
}
.coin-face span {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,0.22), 0 -1px 0 rgba(0,0,0,0.22);
}
.coin-heads {
  background:
    radial-gradient(circle at 34% 26%, #fff7cc 0 12%, transparent 13%),
    radial-gradient(circle at 34% 30%, #ffe287 0%, #f5b301 46%, #a86d06 100%);
}
.coin-tails {
  background:
    radial-gradient(circle at 34% 26%, #ffffff 0 12%, transparent 13%),
    radial-gradient(circle at 34% 30%, #f9fafb 0%, #cdd3df 48%, #667085 100%);
}
.coin-xl { width: clamp(132px, 34vw, 178px); height: clamp(132px, 34vw, 178px); }
.coin-xl .coin-face { font-size: clamp(58px, 15vw, 78px); }
.flip-stage {
  min-height: clamp(190px, 44vh, 270px);
  display: grid;
  place-items: center;
  overflow: visible;
}
.coin-xl .coin-shadow {
  filter: blur(2px);
  will-change: transform, opacity;
}
.coin.is-waiting .coin-inner {
  animation: wait-bob 1400ms ease-in-out infinite;
}
@keyframes wait-bob {
  0%, 100% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(-10deg); }
  50%      { transform: translate3d(0,-10px,0) rotateX(8deg) rotateY(14deg); }
}
.coin.is-tossing .coin-inner {
  animation: flip-toss var(--toss-duration, 2600ms) cubic-bezier(.18,.84,.24,1) forwards;
}
@keyframes flip-toss {
  0%   { transform: translate3d(0,0,0) rotateX(0deg)    rotateY(0deg)                 rotateZ(0deg)   scale(1); }
  12%  { transform: translate3d(0,-38px,0) rotateX(160deg) rotateY(430deg)             rotateZ(6deg)   scale(1.03); }
  28%  { transform: translate3d(0,-118px,0) rotateX(430deg) rotateY(900deg)            rotateZ(-8deg)  scale(1.06); }
  46%  { transform: translate3d(0,-158px,0) rotateX(740deg) rotateY(1360deg)           rotateZ(5deg)   scale(1.05); }
  64%  { transform: translate3d(0,-108px,0) rotateX(1010deg) rotateY(1740deg)          rotateZ(-4deg)  scale(1.03); }
  82%  { transform: translate3d(0,-22px,0) rotateX(1220deg) rotateY(calc(var(--final-y, 2160deg) - 90deg)) rotateZ(2deg) scale(1.01); }
  92%  { transform: translate3d(0,0,0) rotateX(1260deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(1.06, .92); }
  97%  { transform: translate3d(0,-5px,0) rotateX(1260deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(.98, 1.03); }
  100% { transform: translate3d(0,0,0) rotateX(1260deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(1); }
}
@keyframes shadow-toss {
  0%   { transform: translateX(-50%) scaleX(1);    opacity: 0.48; }
  30%  { transform: translateX(-50%) scaleX(0.42); opacity: 0.20; }
  55%  { transform: translateX(-50%) scaleX(0.35); opacity: 0.16; }
  84%  { transform: translateX(-50%) scaleX(0.78); opacity: 0.32; }
  100% { transform: translateX(-50%) scaleX(1);    opacity: 0.48; }
}

/* Tighter auth page for phones and short screens. */
body[data-view="auth"] main {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vh, 18px) 16px;
}
.auth-card {
  width: min(430px, 100%);
  padding: clamp(16px, 2.6vh, 26px);
}
.auth-title { font-size: clamp(26px, 5vh, 34px); }
.auth-subtitle { font-size: clamp(13px, 2.1vh, 15px); }
.auth-form { gap: clamp(8px, 1.4vh, 12px); }
.auth-fineprint { margin-top: clamp(10px, 1.8vh, 16px); }
@media (max-height: 720px) {
  .auth-coin-deco { display: none; }
  .auth-card { padding: 14px; }
  .auth-subtitle { display: none; }
  .auth-tabs { margin-top: 8px; }
  .field-label { margin-bottom: 4px; }
  input { padding-block: 9px; }
  .btn-lg { padding-block: 10px; }
}

/* Mobile performance and layout polish. */
@media (max-width: 720px) {
  .bg-orb { filter: blur(48px); animation: none; }
  .bg-grid { opacity: 0.65; }
  .row:hover { transform: none; }
  .game-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "creator wager"
      "pick join";
  }
  .game-row-creator { grid-area: creator; }
  .game-row-pick { grid-area: pick; }
  .game-row-wager { grid-area: wager; }
  .game-row-join { grid-area: join; justify-self: end; }
  .my-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "status detail amount"
      "time time cancel";
  }
  .my-row-status { grid-area: status; }
  .my-row-detail { grid-area: detail; }
  .my-row-amount { grid-area: amount; }
  .my-row-time { grid-area: time; }
  .my-row-cancel { grid-area: cancel; }
  .pager { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-orb, .coin.idle-spin .coin-inner, .row, .result-banner { animation: none !important; transition: none !important; }
}

/* =====================================================================
   v0.5.1 frontend polish: smoother loading, cleaner toss, safer modal
   ===================================================================== */

body {
  background:
    radial-gradient(circle at 20% -10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 94%, #111827 6%) 100%);
}
body[data-theme="light"] {
  --bg:           #f8f7ff;
  --bg-elev:      rgba(255,255,255,0.92);
  --bg-elev-2:    #f3f0ff;
  --bg-elev-3:    #ebe7fb;
  --line:         #ded8f0;
  --line-2:       #cfc6e7;
  --text:         #171322;
  --text-dim:     #574f68;
  --text-mute:    #887f98;
  --gold:         #c98205;
  background:
    radial-gradient(circle at 18% -10%, rgba(124,58,237,0.14), transparent 34%),
    radial-gradient(circle at 92% 5%, rgba(251,191,36,0.18), transparent 30%),
    linear-gradient(180deg, #fbfaff 0%, #f4f1ff 100%);
}

/* Loading states now look intentional instead of plain text rows. */
.loading-card {
  position: relative;
  padding: 14px;
  text-align: left;
  overflow: hidden;
  border-style: solid;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-elev) 92%, transparent), color-mix(in srgb, var(--bg-elev-2) 86%, transparent));
  box-shadow: var(--shadow-sm);
}
.loading-card::before {
  content: attr(data-label);
  display: block;
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.loading-card:not([data-label])::before { content: "Loading…"; }
.loading-card.is-error::before { content: "Something went wrong"; color: var(--bad); }
.loading-skeleton {
  display: grid;
  gap: 8px;
}
.skeleton-row {
  display: grid;
  grid-template-columns: 36px 1fr 72px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-elev-2) 72%, transparent);
}
.skeleton-dot,
.skeleton-line,
.skeleton-pill {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--line) 66%, transparent) 0%,
    color-mix(in srgb, var(--line-2) 82%, transparent) 45%,
    color-mix(in srgb, var(--line) 66%, transparent) 100%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1150ms ease-in-out infinite;
}
.skeleton-dot { width: 28px; height: 28px; }
.skeleton-line { width: min(100%, 280px); height: 12px; }
.skeleton-pill { width: 68px; height: 24px; justify-self: end; }
@keyframes skeleton-shimmer {
  0% { background-position: 120% 0; opacity: 0.62; }
  50% { opacity: 1; }
  100% { background-position: -120% 0; opacity: 0.62; }
}
.rows.is-refreshing .row {
  opacity: 0.62;
  transform: scale(0.997);
}

/* Small QoL states. */
.btn-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.36);
  color: #fca5a5;
  box-shadow: none;
}
.btn-danger:not(:disabled):hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.52);
  color: #fecaca;
}
body[data-theme="light"] .btn-danger { color: #b91c1c; }
.row {
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.row:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(139, 92, 246, 0.14);
}

/* Keep popups inside the viewport, even on short screens or phone browsers. */
.modal-backdrop {
  align-items: flex-start;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top, 0px)) 14px max(12px, env(safe-area-inset-bottom, 0px));
}
.modal {
  width: min(100%, 460px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  margin: auto 0;
  padding: clamp(16px, 3vh, 24px);
}
.flip-stage {
  height: auto;
  min-height: clamp(148px, 30vh, 214px);
  margin: clamp(8px, 2vh, 14px) 0 clamp(8px, 2vh, 14px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 58%);
}
.flip-title { margin-bottom: 4px; }
.flip-result {
  gap: clamp(6px, 1.2vh, 8px);
  margin-top: clamp(8px, 1.6vh, 12px);
}
.result-row { padding: clamp(8px, 1.7vh, 10px) 14px; }
.coin-xl { width: clamp(112px, 28vh, 154px); height: clamp(112px, 28vh, 154px); }
.coin-xl .coin-face { font-size: clamp(48px, 12vh, 68px); }
.coin-xl .coin-shadow { bottom: -13px; }

/* New toss: less chaotic, more premium, and constrained to the stage. */
.coin.is-waiting .coin-inner {
  animation: wait-tilt 1500ms ease-in-out infinite;
}
@keyframes wait-tilt {
  0%, 100% { transform: translate3d(0,0,0) rotateX(4deg) rotateY(-12deg) rotateZ(-1deg); }
  50%      { transform: translate3d(0,-7px,0) rotateX(-5deg) rotateY(14deg) rotateZ(1deg); }
}
.coin.is-tossing .coin-inner {
  animation: flip-toss-clean var(--toss-duration, 2200ms) cubic-bezier(.2,.78,.2,1) forwards;
}
@keyframes flip-toss-clean {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  14%  { transform: translate3d(-8px, -28px, 0) scale(1.03) rotateX(120deg) rotateY(340deg) rotateZ(-5deg); }
  34%  { transform: translate3d(10px, -62px, 0) scale(1.06) rotateX(300deg) rotateY(820deg) rotateZ(4deg); }
  56%  { transform: translate3d(-6px, -42px, 0) scale(1.04) rotateX(520deg) rotateY(1280deg) rotateZ(-3deg); }
  76%  { transform: translate3d(4px, -12px, 0) scale(1.02) rotateX(650deg) rotateY(calc(var(--final-y, 1800deg) - 115deg)) rotateZ(2deg); }
  90%  { transform: translate3d(0, 0, 0) scale(1.05, .94) rotateX(720deg) rotateY(var(--final-y, 1800deg)) rotateZ(0deg); }
  96%  { transform: translate3d(0, -5px, 0) scale(.99, 1.02) rotateX(720deg) rotateY(var(--final-y, 1800deg)) rotateZ(0deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotateX(720deg) rotateY(var(--final-y, 1800deg)) rotateZ(0deg); }
}
.coin-xl.is-tossing .coin-shadow { animation: shadow-toss-clean var(--toss-duration, 2200ms) cubic-bezier(.2,.78,.2,1) forwards; }
@keyframes shadow-toss-clean {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .42; }
  34%      { transform: translateX(-50%) scaleX(.48); opacity: .18; }
  58%      { transform: translateX(-50%) scaleX(.62); opacity: .22; }
  88%      { transform: translateX(-50%) scaleX(.9); opacity: .36; }
}

@media (max-height: 680px) {
  .modal { padding: 12px; }
  .flip-stage { min-height: 128px; margin-block: 6px; }
  .flip-title { font-size: 16px; }
  .flip-sub { margin-bottom: 4px; }
  .result-row { padding-block: 7px; font-size: 13px; }
  .flip-result .btn { padding-block: 9px; }
  .coin-xl { width: 106px; height: 106px; }
  .coin-xl .coin-face { font-size: 46px; }
}
@media (max-width: 720px) {
  .game-row {
    grid-template-areas:
      "creator wager"
      "pick join";
  }
  .loading-card { padding: 12px; }
  .skeleton-row { grid-template-columns: 30px 1fr 58px; padding: 10px; }
  .skeleton-pill { width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-card *, .coin.is-waiting .coin-inner, .coin.is-tossing .coin-inner, .coin-xl.is-tossing .coin-shadow {
    animation: none !important;
  }
}

/* v0.6 requested polish: no $ prefix duplicated in wager hints, lost state, and a cleaner 3D coin toss. */
.lost-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  border-color: rgba(239, 68, 68, 0.34);
  background:
    radial-gradient(circle at 16% 50%, rgba(239, 68, 68, 0.18), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--bad-bg) 42%, var(--bg-elev)), var(--bg-elev));
  box-shadow: var(--shadow), 0 0 0 1px rgba(239, 68, 68, 0.08);
}
.lost-copy h2 {
  margin: 0 0 2px;
  font-size: clamp(22px, 3.2vw, 30px);
  color: #fca5a5;
}
.lost-copy p {
  color: var(--text-dim);
  max-width: 68ch;
}
.lost-coin {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 900;
  color: #7f1d1d;
  background: radial-gradient(circle at 35% 28%, #fee2e2 0%, #fca5a5 42%, #b91c1c 100%);
  box-shadow: inset 0 4px 10px rgba(255,255,255,.32), inset 0 -8px 16px rgba(0,0,0,.24), 0 8px 22px rgba(239,68,68,.2);
}
body.is-eliminated .create-card {
  opacity: 0.72;
}
body.is-eliminated .choice-card,
body.is-eliminated .prefix-input,
body.is-eliminated #create-btn {
  cursor: not-allowed;
}
body.is-eliminated .choice-card {
  filter: grayscale(.35);
}
body.is-eliminated .topbar .balance-pill {
  background: linear-gradient(140deg, #fecaca 0%, #ef4444 100%);
  color: #450a0a;
}

/* Coin thickness: fake a real rim so the flip reads more like a physical coin. */
.coin-inner::before {
  content: "";
  position: absolute;
  inset: 3.5%;
  border-radius: 50%;
  transform: translateZ(-7px);
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.24) 0deg 5deg, rgba(92,58,0,.28) 5deg 10deg),
    radial-gradient(circle at 50% 50%, #e6a815 0%, #9b6506 74%);
  box-shadow: 0 0 0 7px #9b6506, inset 0 0 18px rgba(0,0,0,.28);
  backface-visibility: hidden;
}
.coin-face {
  transform: translateZ(7px);
}
.coin-tails {
  transform: rotateY(180deg) translateZ(7px);
}
.coin.coin-flipped-base .coin-inner {
  transform: rotateY(180deg);
}
.coin-xl .coin-face {
  border-width: clamp(4px, .9vh, 7px);
}

/* Keep the toss fully inside the modal and make it feel like one smooth throw + settle. */
.flip-stage {
  perspective: 1200px;
  isolation: isolate;
}
.coin.is-waiting .coin-inner {
  animation: coin-ready-3d 1550ms ease-in-out infinite;
}
@keyframes coin-ready-3d {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(64deg) rotateY(-14deg) rotateZ(-5deg); }
  50%      { transform: translate3d(0, -7px, 0) rotateX(66deg) rotateY(18deg) rotateZ(5deg); }
}
.coin.is-tossing .coin-inner {
  animation: coin-flip-3d var(--toss-duration, 2600ms) cubic-bezier(.16,.78,.18,1) forwards;
}
@keyframes coin-flip-3d {
  0%   { transform: translate3d(0, 0, 0) rotateX(66deg) rotateY(0deg) rotateZ(-4deg) scale(1); }
  10%  { transform: translate3d(-6px, -18px, 0) rotateX(154deg) rotateY(360deg) rotateZ(5deg) scale(1.03); }
  25%  { transform: translate3d(8px, -48px, 0) rotateX(314deg) rotateY(850deg) rotateZ(-6deg) scale(1.06); }
  43%  { transform: translate3d(-6px, -62px, 0) rotateX(520deg) rotateY(1320deg) rotateZ(5deg) scale(1.05); }
  62%  { transform: translate3d(5px, -38px, 0) rotateX(710deg) rotateY(1760deg) rotateZ(-3deg) scale(1.03); }
  80%  { transform: translate3d(-2px, -10px, 0) rotateX(690deg) rotateY(calc(var(--final-y, 2160deg) - 92deg)) rotateZ(2deg) scale(1.01); }
  91%  { transform: translate3d(0, 0, 0) rotateX(720deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(1.055, .945); }
  96%  { transform: translate3d(0, -4px, 0) rotateX(720deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(.985, 1.025); }
  100% { transform: translate3d(0, 0, 0) rotateX(720deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(1); }
}
.coin-xl.is-tossing .coin-shadow {
  animation: coin-shadow-3d var(--toss-duration, 2600ms) cubic-bezier(.16,.78,.18,1) forwards;
}
@keyframes coin-shadow-3d {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .42; }
  28%      { transform: translateX(-50%) scaleX(.52); opacity: .18; }
  48%      { transform: translateX(-50%) scaleX(.38); opacity: .14; }
  82%      { transform: translateX(-50%) scaleX(.86); opacity: .32; }
}

@media (max-width: 720px) {
  .lost-card {
    grid-template-columns: auto 1fr;
  }
  .lost-card .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-height: 680px) {
  .lost-card { gap: 10px; padding: 12px; }
  .lost-coin { width: 44px; height: 44px; font-size: 13px; }
  .lost-copy h2 { font-size: 20px; }
  .lost-copy p { font-size: 13px; }
}

/* =====================================================================
   v0.9 live result + money color polish + rebuilt flip showcase
   ===================================================================== */

/* Balance pill now follows the player's balance tier. JS sets the vars. */
.balance-pill {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--balance-bg, #fbbf24) 88%, #ffffff 12%) 0%,
    color-mix(in srgb, var(--balance-bg, #d97706) 72%, #000000 28%) 100%);
  color: var(--balance-fg, #261901);
  box-shadow:
    0 8px 24px -9px var(--balance-glow, rgba(251, 191, 36, 0.6)),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  border: 1px solid color-mix(in srgb, var(--balance-bg, #fbbf24) 70%, #ffffff 18%);
}
.balance-pill[data-balance-tone="b-white"] {
  text-shadow: none;
  border-color: rgba(255,255,255,0.72);
}
.balance-pill .balance-value { font-variant-numeric: tabular-nums; }

/* Leaderboard: top players feel premium, and balances share the money palette. */
.leaderboard-rows .lb-row {
  isolation: isolate;
}
.leaderboard-rows .lb-row::before {
  width: 4px;
  opacity: .9;
}
.lb-row.is-top1 {
  background:
    radial-gradient(circle at 8% 50%, rgba(251,191,36,.24), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-elev) 82%, #fbbf24 18%), var(--bg-elev));
  border-color: rgba(251,191,36,.48);
  box-shadow: var(--shadow-sm), 0 0 28px -18px #fbbf24;
}
.lb-row.is-top1::before { background: linear-gradient(180deg, #fff7ad, #f59e0b); }
.lb-row.is-top2 {
  background:
    radial-gradient(circle at 8% 50%, rgba(226,232,240,.18), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-elev) 86%, #e5e7eb 14%), var(--bg-elev));
  border-color: rgba(203,213,225,.42);
}
.lb-row.is-top2::before { background: linear-gradient(180deg, #f8fafc, #94a3b8); }
.lb-row.is-top3 {
  background:
    radial-gradient(circle at 8% 50%, rgba(217,119,6,.18), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-elev) 86%, #d97706 14%), var(--bg-elev));
  border-color: rgba(217,119,6,.44);
}
.lb-row.is-top3::before { background: linear-gradient(180deg, #fdba74, #92400e); }
.lb-row.is-me {
  outline: 1px solid rgba(139, 92, 246, .38);
  background:
    radial-gradient(circle at 14% 50%, rgba(139,92,246,.16), transparent 38%),
    color-mix(in srgb, var(--bg-elev) 90%, var(--primary) 10%);
}
.lb-balance {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 92px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--balance-fg, var(--gold));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--balance-bg, #fbbf24) 86%, #ffffff 14%),
    color-mix(in srgb, var(--balance-bg, #d97706) 70%, #000000 30%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -14px var(--balance-glow, rgba(251,191,36,.55));
}
.lb-balance[data-balance-tone="b-white"] {
  color: #0f172a;
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
}

/* Coin texture fix: force every layer into a real circle and hide any square artifacts. */
.coin,
.coin-inner,
.coin-face,
.coin::after,
.coin-inner::before {
  border-radius: 50%;
}
.coin-face {
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}
.coin::after {
  clip-path: circle(50% at 50% 50%);
}
.coin-heads {
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.82) 0 10%, transparent 11%),
    radial-gradient(circle at 48% 48%, #ffe08a 0 36%, #f2aa12 58%, #9b6506 100%);
}
.coin-tails {
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.90) 0 10%, transparent 11%),
    radial-gradient(circle at 48% 48%, #f8fafc 0 34%, #cbd5e1 58%, #64748b 100%);
}
.coin-heads::before { border-color: rgba(92,58,0,.30); }
.coin-tails::before { border-color: rgba(45,51,70,.30); }

/* Bigger, cleaner flip presentation. */
.modal {
  max-width: 560px;
}
.flip-title {
  font-size: clamp(19px, 2.6vw, 24px);
}
.flip-stage {
  min-height: clamp(270px, 45vh, 380px);
  overflow: visible;
  perspective: 1500px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 84%, rgba(0,0,0,.28), transparent 44%);
}
.coin-xl {
  width: clamp(190px, 30vw, 240px);
  height: clamp(190px, 30vw, 240px);
}
.coin-xl .coin-face {
  font-size: clamp(82px, 12vw, 106px);
}
.coin-xl .coin-shadow {
  bottom: -34px;
  width: 76%;
  height: 22px;
  filter: blur(6px);
}

/* A more readable flip: one high toss, fast edge spins, then squash/bounce settle. */
.coin.is-waiting .coin-inner {
  animation: coin-ready-showcase 1500ms ease-in-out infinite;
}
@keyframes coin-ready-showcase {
  0%, 100% { transform: translate3d(0,0,0) rotateX(12deg) rotateY(-18deg) rotateZ(-2deg); }
  50%      { transform: translate3d(0,-10px,0) rotateX(-10deg) rotateY(22deg) rotateZ(2deg); }
}
.coin.is-tossing .coin-inner {
  animation: coin-flip-showcase var(--toss-duration, 2800ms) cubic-bezier(.15,.82,.18,1) forwards;
}
@keyframes coin-flip-showcase {
  0%   { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
  8%   { transform: translate3d(-10px, -36px, 0) rotateX(260deg) rotateY(230deg) rotateZ(-8deg) scale(1.04); }
  18%  { transform: translate3d(12px, -105px, 0) rotateX(720deg) rotateY(540deg) rotateZ(7deg) scale(1.08); }
  32%  { transform: translate3d(-8px, -156px, 0) rotateX(1320deg) rotateY(870deg) rotateZ(-5deg) scale(1.10); }
  48%  { transform: translate3d(10px, -132px, 0) rotateX(1980deg) rotateY(1210deg) rotateZ(5deg) scale(1.08); }
  64%  { transform: translate3d(-6px, -76px, 0) rotateX(2640deg) rotateY(1580deg) rotateZ(-3deg) scale(1.05); }
  80%  { transform: translate3d(3px, -20px, 0) rotateX(3240deg) rotateY(calc(var(--final-y, 2160deg) - 140deg)) rotateZ(1deg) scale(1.02); }
  90%  { transform: translate3d(0, 0, 0) rotateX(3600deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(1.08, .90); }
  95%  { transform: translate3d(0, -9px, 0) rotateX(3600deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(.97, 1.05); }
  100% { transform: translate3d(0, 0, 0) rotateX(3600deg) rotateY(var(--final-y, 2160deg)) rotateZ(0deg) scale(1); }
}
.coin-xl.is-tossing .coin-shadow {
  animation: coin-shadow-showcase var(--toss-duration, 2800ms) cubic-bezier(.15,.82,.18,1) forwards;
}
@keyframes coin-shadow-showcase {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .42; }
  18%      { transform: translateX(-50%) scaleX(.52); opacity: .20; }
  34%      { transform: translateX(-50%) scaleX(.30); opacity: .12; }
  62%      { transform: translateX(-50%) scaleX(.56); opacity: .22; }
  88%      { transform: translateX(-50%) scaleX(.92); opacity: .36; }
}

@media (max-width: 720px) {
  .modal { max-width: min(100%, 520px); }
  .flip-stage { min-height: clamp(250px, 42vh, 330px); }
  .coin-xl { width: clamp(170px, 58vw, 220px); height: clamp(170px, 58vw, 220px); }
  .coin-xl .coin-face { font-size: clamp(72px, 25vw, 96px); }
  .lb-balance { min-width: 78px; padding-inline: 8px; }
}
@media (max-height: 680px) {
  .flip-stage { min-height: 230px; }
  .coin-xl { width: 166px; height: 166px; }
  .coin-xl .coin-face { font-size: 72px; }
}

/* =====================================================================
   v0.10 requested fixes: clean balance, no wager hint, required choice,
   stronger creator result popup, and rebuilt premium 3D flip.
   ===================================================================== */

/* Topbar balance: show money only, no BALANCE label. */
.balance-pill {
  gap: 0;
  padding: 7px 13px;
  min-width: 76px;
  justify-content: center;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.balance-pill .balance-label {
  display: none !important;
}
.balance-pill .balance-value {
  line-height: 1;
  font-weight: 850;
}

/* WAGER area: leave only the input field and Create game button visible. */
.wager-field {
  margin-bottom: 0;
}
.wager-field .field-hint,
#wager-hint {
  display: none !important;
}
.create-form {
  display: grid !important;
  gap: 14px;
}
.choice-row {
  margin-bottom: 0;
}
.choice-card {
  min-height: 72px;
  display: flex;
  align-items: center;
  border-color: color-mix(in srgb, var(--line) 84%, transparent);
}
.choice-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line-2));
}
.choice-card:has(input:focus-visible) {
  outline: 3px solid rgba(139, 92, 246, 0.22);
  outline-offset: 2px;
}
.choice-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 72%, #ffffff 8%);
  background:
    radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 46%),
    color-mix(in srgb, var(--bg-elev-2) 88%, var(--primary) 12%);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(139, 92, 246, 0.36);
}
.choice-card:not(:has(input:checked)) .choice-content {
  opacity: 0.86;
}
.prefix-input input::placeholder {
  color: color-mix(in srgb, var(--text-mute) 86%, transparent);
}

/* Result banner behaves like a real popup for the creator when a game completes. */
.result-banner {
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  width: min(600px, calc(100vw - 24px));
  padding: 15px 15px 15px 16px;
  border-radius: 20px;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 24px 70px -24px rgba(0,0,0,.72), 0 8px 24px -16px rgba(0,0,0,.45);
}
.result-banner-title {
  font-size: 16px;
  line-height: 1.25;
}
.result-banner-sub {
  line-height: 1.35;
}
.result-banner.is-win .result-banner-coin {
  background: radial-gradient(circle at 34% 26%, #fff7c2 0 10%, #fbbf24 42%, #16a34a 100%);
}
.result-banner.is-loss .result-banner-coin {
  background: radial-gradient(circle at 34% 26%, #fee2e2 0 10%, #fb7185 44%, #991b1b 100%);
}

/* Premium coin model: thicker rim, no visible gap between faces, smoother motion. */
.coin {
  --coin-depth: 5px;
  --coin-rim: #b77908;
  --coin-rim-dark: #754d08;
  perspective: 1600px;
  overflow: visible;
  contain: none;
}
.coin-xs { --coin-depth: 2px; }
.coin-sm { --coin-depth: 3px; }
.coin-md { --coin-depth: 5px; }
.coin-xl { --coin-depth: 11px; }
.coin-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform 260ms ease;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.22));
}
.coin-inner::before {
  content: "";
  position: absolute;
  inset: 4.5%;
  border-radius: 50%;
  transform: translateZ(calc(var(--coin-depth) * -1));
  background:
    repeating-conic-gradient(from -8deg,
      rgba(255,255,255,.28) 0deg 5deg,
      rgba(117,77,8,.34) 5deg 10deg),
    radial-gradient(circle at 50% 50%, #f2b82e 0 48%, var(--coin-rim) 72%, var(--coin-rim-dark) 100%);
  box-shadow:
    0 0 0 var(--coin-depth) var(--coin-rim),
    inset 0 0 18px rgba(0,0,0,.26),
    inset 0 0 0 2px rgba(255,255,255,.12);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.coin::after {
  display: none;
}
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(var(--coin-depth));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: max(2px, calc(var(--coin-depth) * .62)) solid rgba(255,255,255,.17);
  box-shadow:
    inset 0 12px 20px rgba(255,255,255,.20),
    inset 0 -16px 24px rgba(0,0,0,.30),
    inset 0 0 0 2px rgba(255,255,255,.10);
}
.coin-tails {
  transform: rotateY(180deg) translateZ(var(--coin-depth));
}
.coin-heads {
  color: #5a3500;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.92) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 46%, #ffe695 0 34%, #f7b91f 55%, #a96707 100%);
}
.coin-tails {
  color: #243044;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 46%, #ffffff 0 32%, #d8dee9 55%, #64748b 100%);
}
.coin-face::before {
  inset: 14%;
  border-width: max(1px, calc(var(--coin-depth) * .22));
  opacity: .8;
}
.coin-face::after {
  inset: 28%;
  opacity: .8;
}
.coin-face span {
  position: relative;
  z-index: 2;
  transform: translateZ(calc(var(--coin-depth) + 1px));
  text-shadow: 0 2px 0 rgba(255,255,255,.24), 0 -1px 0 rgba(0,0,0,.18);
}
.coin-flipped-base .coin-inner,
.coin.coin-flipped-base .coin-inner {
  transform: rotateY(180deg);
}

.modal {
  max-width: 560px;
}
.flip-stage {
  min-height: clamp(280px, 45vh, 380px);
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1700px;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--primary) 15%, transparent) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 84%, rgba(0,0,0,.34), transparent 46%);
}
.coin-xl {
  width: clamp(184px, 30vw, 232px);
  height: clamp(184px, 30vw, 232px);
}
.coin-xl .coin-face {
  font-size: clamp(78px, 11vw, 102px);
}
.coin-xl .coin-shadow {
  bottom: -30px;
  width: 72%;
  height: 22px;
  filter: blur(7px);
  opacity: .46;
  will-change: transform, opacity;
}
.coin.is-waiting .coin-inner {
  animation: coin-ready-premium 1800ms ease-in-out infinite;
}
@keyframes coin-ready-premium {
  0%, 100% { transform: translate3d(0,0,0) rotateX(10deg) rotateY(-18deg) rotateZ(-2deg); }
  50%      { transform: translate3d(0,-9px,0) rotateX(-8deg) rotateY(20deg) rotateZ(2deg); }
}
.coin.is-tossing .coin-inner {
  animation: coin-flip-premium var(--toss-duration, 4200ms) cubic-bezier(.17,.78,.16,1) forwards;
}
@keyframes coin-flip-premium {
  0%   { transform: translate3d(0, 0, 0) rotateX(10deg) rotateY(0deg) rotateZ(0deg) scale(1); }
  10%  { transform: translate3d(-8px, -30px, 0) rotateX(240deg) rotateY(420deg) rotateZ(-5deg) scale(1.035); }
  24%  { transform: translate3d(10px, -78px, 0) rotateX(620deg) rotateY(980deg) rotateZ(5deg) scale(1.065); }
  42%  { transform: translate3d(-7px, -102px, 0) rotateX(1040deg) rotateY(1540deg) rotateZ(-4deg) scale(1.075); }
  60%  { transform: translate3d(7px, -78px, 0) rotateX(1420deg) rotateY(2050deg) rotateZ(3deg) scale(1.055); }
  76%  { transform: translate3d(-3px, -30px, 0) rotateX(1700deg) rotateY(calc(var(--final-y, 2880deg) - 230deg)) rotateZ(-1deg) scale(1.025); }
  88%  { transform: translate3d(0, 0, 0) rotateX(1800deg) rotateY(calc(var(--final-y, 2880deg) - 18deg)) rotateZ(0deg) scale(1.055, .94); }
  94%  { transform: translate3d(0, -8px, 0) rotateX(1800deg) rotateY(calc(var(--final-y, 2880deg) + 7deg)) rotateZ(0deg) scale(.985, 1.035); }
  100% { transform: translate3d(0, 0, 0) rotateX(1800deg) rotateY(var(--final-y, 2880deg)) rotateZ(0deg) scale(1); }
}
.coin-xl.is-tossing .coin-shadow {
  animation: coin-shadow-premium var(--toss-duration, 4200ms) cubic-bezier(.17,.78,.16,1) forwards;
}
@keyframes coin-shadow-premium {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .44; }
  24%      { transform: translateX(-50%) scaleX(.58); opacity: .22; }
  42%      { transform: translateX(-50%) scaleX(.34); opacity: .13; }
  70%      { transform: translateX(-50%) scaleX(.70); opacity: .27; }
  88%      { transform: translateX(-50%) scaleX(.92); opacity: .38; }
}

@media (max-width: 720px) {
  .topbar-right { gap: 8px; }
  .balance-pill { min-width: 68px; padding-inline: 11px; }
  .modal { max-width: min(100%, 520px); }
  .flip-stage { min-height: clamp(250px, 42vh, 330px); }
  .coin-xl { width: clamp(160px, 54vw, 210px); height: clamp(160px, 54vw, 210px); }
  .coin-xl .coin-face { font-size: clamp(68px, 23vw, 92px); }
}
@media (max-height: 680px) {
  .flip-stage { min-height: 232px; }
  .coin-xl { width: 162px; height: 162px; }
  .coin-xl .coin-face { font-size: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .coin.is-waiting .coin-inner,
  .coin.is-tossing .coin-inner,
  .coin-xl.is-tossing .coin-shadow {
    animation: none !important;
  }
  .coin.is-tossing .coin-inner {
    transform: rotateY(var(--final-y, 2880deg));
    transition: transform 700ms ease-out;
  }
}


/* =====================================================================
   v0.11 tails + physical flip polish
   - Tails is always a silver T, even while the coin is edge-on.
   - The coin uses isolated front/back faces plus a neutral metallic rim so
     the edge never looks like a stretched heads texture during a flip.
   ===================================================================== */
.coin {
  --coin-depth: clamp(4px, 1.45vw, 12px);
  --coin-edge-light: #f8fafc;
  --coin-edge-mid: #cbd5e1;
  --coin-edge-dark: #475569;
  perspective: 1500px;
  transform-style: preserve-3d;
  overflow: visible;
}
.coin-inner {
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}
.coin-face {
  transform-style: preserve-3d;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden;
  clip-path: circle(49.8% at 50% 50%);
}
.coin-inner::before {
  content: "";
  position: absolute;
  inset: 3.25%;
  border-radius: 50%;
  transform: translateZ(calc(var(--coin-depth) * -1));
  background:
    repeating-conic-gradient(from -10deg,
      rgba(255,255,255,.42) 0deg 4deg,
      rgba(148,163,184,.42) 4deg 8deg,
      rgba(71,85,105,.34) 8deg 12deg),
    radial-gradient(circle at 38% 30%, var(--coin-edge-light) 0 18%, var(--coin-edge-mid) 48%, var(--coin-edge-dark) 100%);
  box-shadow:
    0 0 0 var(--coin-depth) var(--coin-edge-mid),
    inset 0 0 20px rgba(15,23,42,.28),
    inset 0 0 0 2px rgba(255,255,255,.18);
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  pointer-events: none;
}
.coin-inner::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  transform: rotateY(90deg) scaleX(.12);
  background: linear-gradient(90deg, var(--coin-edge-dark), var(--coin-edge-light) 48%, var(--coin-edge-dark));
  box-shadow: 0 0 calc(var(--coin-depth) * 1.4) rgba(15,23,42,.32);
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  pointer-events: none;
}
.coin-heads {
  color: #5a3500;
  transform: translateZ(var(--coin-depth));
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.93) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 46%, #ffe8a3 0 33%, #f6b81e 56%, #9a6206 100%);
}
.coin-tails {
  color: #1f2937;
  transform: rotateY(180deg) translateZ(var(--coin-depth));
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.98) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 46%, #ffffff 0 30%, #e2e8f0 51%, #94a3b8 73%, #475569 100%);
  border-color: rgba(248,250,252,.52);
  box-shadow:
    inset 0 14px 22px rgba(255,255,255,.42),
    inset 0 -18px 26px rgba(15,23,42,.28),
    inset 0 0 0 2px rgba(255,255,255,.22);
}
.coin-heads::before { border-color: rgba(116,72,0,.34); }
.coin-tails::before { border-color: rgba(51,65,85,.38); }
.coin-face span {
  position: relative;
  z-index: 3;
  width: 1em;
  height: 1em;
  display: grid;
  place-items: center;
  color: transparent !important;
  text-shadow: none !important;
}
.coin-face span::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
  transform: translateZ(calc(var(--coin-depth) + 2px));
}
.coin-heads span::before {
  content: "H";
  color: #5a3500;
  text-shadow: 0 2px 0 rgba(255,255,255,.28), 0 -1px 0 rgba(58,32,0,.26);
}
.coin-tails span::before {
  content: "T";
  color: #1f2937;
  text-shadow: 0 2px 0 rgba(255,255,255,.62), 0 -1px 0 rgba(15,23,42,.22);
}
.coin-flipped-base .coin-inner,
.coin.coin-flipped-base .coin-inner {
  transform: rotateY(180deg);
}

.flip-stage {
  perspective: 1600px;
  overflow: hidden;
}
.coin.is-waiting .coin-inner {
  animation: coin-ready-silver 1350ms ease-in-out infinite;
}
@keyframes coin-ready-silver {
  0%, 100% { transform: translate3d(0,0,0) rotateX(5deg) rotateY(-16deg) rotateZ(-1deg); }
  50%      { transform: translate3d(0,-7px,0) rotateX(-5deg) rotateY(16deg) rotateZ(1deg); }
}
.coin.is-tossing .coin-inner {
  animation: coin-flip-silver var(--toss-duration, 2800ms) cubic-bezier(.18,.76,.18,1) forwards;
}
@keyframes coin-flip-silver {
  0%   { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
  12%  { transform: translate3d(-5px, -28px, 0) rotateX(10deg) rotateY(430deg) rotateZ(-4deg) scale(1.03); }
  28%  { transform: translate3d(7px, -80px, 0) rotateX(-8deg) rotateY(980deg) rotateZ(4deg) scale(1.06); }
  46%  { transform: translate3d(-5px, -108px, 0) rotateX(7deg) rotateY(1560deg) rotateZ(-3deg) scale(1.07); }
  64%  { transform: translate3d(5px, -72px, 0) rotateX(-5deg) rotateY(2140deg) rotateZ(2deg) scale(1.04); }
  80%  { transform: translate3d(-2px, -22px, 0) rotateX(3deg) rotateY(calc(var(--final-y, 2880deg) - 118deg)) rotateZ(-1deg) scale(1.02); }
  90%  { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(calc(var(--final-y, 2880deg) + 12deg)) rotateZ(0deg) scale(1.055, .93); }
  96%  { transform: translate3d(0, -6px, 0) rotateX(0deg) rotateY(calc(var(--final-y, 2880deg) - 5deg)) rotateZ(0deg) scale(.985, 1.025); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(var(--final-y, 2880deg)) rotateZ(0deg) scale(1); }
}
.coin-xl.is-tossing .coin-shadow {
  animation: coin-shadow-silver var(--toss-duration, 2800ms) cubic-bezier(.18,.76,.18,1) forwards;
}
@keyframes coin-shadow-silver {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .42; }
  28%      { transform: translateX(-50%) scaleX(.48); opacity: .20; }
  46%      { transform: translateX(-50%) scaleX(.30); opacity: .12; }
  76%      { transform: translateX(-50%) scaleX(.72); opacity: .30; }
  90%      { transform: translateX(-50%) scaleX(.95); opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  .coin.is-waiting .coin-inner,
  .coin.is-tossing .coin-inner,
  .coin-xl.is-tossing .coin-shadow {
    animation: none !important;
  }
  .coin.is-tossing .coin-inner {
    transform: rotateY(var(--final-y, 2880deg));
    transition: transform 520ms ease-out;
  }
}

/* =====================================================================
   FIX: static heads/tails selector coins
   ---------------------------------------------------------------------
   The create-game side buttons were using the 3D flip coin markup for tiny
   static icons. Old .static-tail / .coin-flipped-base rules fought with
   later 3D depth rules, so both buttons could show the heads texture.
   For the side picker, render exactly one flat face per option.
   ===================================================================== */
.choice-row .choice-card .coin-sm {
  perspective: none;
  transform: none;
  contain: paint;
}
.choice-row .choice-card .coin-sm::after,
.choice-row .choice-card .coin-sm .coin-inner::before {
  display: none;
}
.choice-row .choice-card .coin-sm .coin-inner {
  transform: none !important;
  transform-style: flat;
  transition: none;
}
.choice-row .choice-card .coin-sm .coin-face {
  inset: 0;
  transform: none !important;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.choice-row .choice-card input[value="heads"] ~ .choice-content .coin-tails,
.choice-row .choice-card input[value="tails"] ~ .choice-content .coin-heads {
  display: none !important;
}
.choice-row .choice-card input[value="heads"] ~ .choice-content .coin-heads,
.choice-row .choice-card input[value="tails"] ~ .choice-content .coin-tails {
  display: flex !important;
}
.choice-row .choice-card input[value="heads"] ~ .choice-content .coin-heads {
  color: #5a3500;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.93) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 46%, #ffe8a3 0 33%, #f6b81e 56%, #9a6206 100%);
}
.choice-row .choice-card input[value="tails"] ~ .choice-content .coin-tails {
  color: #1f2937;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.98) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 46%, #ffffff 0 30%, #e2e8f0 51%, #94a3b8 73%, #475569 100%);
  border-color: rgba(248,250,252,.52);
}


/* ------------------------------------------------------------------
   FIX: Static choice coins
   The heads/tails picker must not use the animated 3D coin stack. The
   old markup put both faces in the same small preview, while later CSS
   re-applied 3D transforms and rim/shine pseudo-elements. That caused
   the silver rim/face layers to overlap and made Heads/Tails look the
   same. These previews are now one real face only.
   ------------------------------------------------------------------ */
.choice-row .choice-coin {
  perspective: none !important;
  transform: none !important;
  contain: paint;
  overflow: hidden;
  border-radius: 50%;
}
.choice-row .choice-coin::after,
.choice-row .choice-coin .coin-inner::before {
  display: none !important;
  content: none !important;
}
.choice-row .choice-coin .coin-inner {
  transform: none !important;
  transform-style: flat !important;
  width: 100%;
  height: 100%;
}
.choice-row .choice-coin .coin-face {
  display: flex !important;
  transform: none !important;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.choice-row .choice-coin-heads .coin-heads {
  background:
    radial-gradient(circle at 34% 26%, #fff7cc 0 12%, transparent 13%),
    radial-gradient(circle at 34% 30%, #ffe287 0%, #f5b301 46%, #a86d06 100%) !important;
  color: #5a3a00 !important;
  box-shadow:
    inset 0 -4px 10px rgba(0,0,0,0.28),
    inset 0 4px 10px rgba(255,255,255,0.35),
    0 0 0 2px rgba(120, 80, 5, 0.5) !important;
}
.choice-row .choice-coin-tails .coin-tails {
  background:
    radial-gradient(circle at 34% 26%, #ffffff 0 12%, transparent 13%),
    radial-gradient(circle at 34% 30%, #f9fafb 0%, #cdd3df 48%, #667085 100%) !important;
  color: #2d3346 !important;
  box-shadow:
    inset 0 -4px 10px rgba(0,0,0,0.30),
    inset 0 4px 10px rgba(255,255,255,0.45),
    0 0 0 2px rgba(60, 65, 85, 0.5) !important;
}


/* =====================================================================
   FINAL FIX: side picker coins are NOT the animated 3D coin component
   ---------------------------------------------------------------------
   The previous picker reused .coin/.coin-inner/.coin-face, while the app
   defines that component several times later in the stylesheet for the
   flip modal. Those global rules added hidden front/back faces, depth
   pseudo-elements, and a metallic edge layer. On tiny selector coins those
   layers stacked on top of each other, creating the white/silver halo and
   the weird radial pattern.

   These picker icons now use their own class names only. Nothing from the
   3D flip coin can cascade into them.
   ===================================================================== */
.choice-row .picker-coin {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: none !important;
  transition: transform 180ms ease, filter 180ms ease;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
.choice-row .picker-coin::before,
.choice-row .picker-coin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.choice-row .picker-coin::before {
  inset: 7px;
  border: 2px solid currentColor;
  opacity: .28;
}
.choice-row .picker-coin::after {
  inset: 13px;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: inset 0 3px 8px rgba(255,255,255,.18), inset 0 -4px 9px rgba(0,0,0,.16);
  opacity: .75;
}
.choice-row .picker-coin span {
  position: relative;
  z-index: 2;
  width: 1.28em;
  height: 1.28em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-shadow: 0 2px 0 rgba(255,255,255,.22), 0 -1px 0 rgba(0,0,0,.20);
}
.choice-row .picker-coin-heads {
  color: #6b4200;
  border: 3px solid #d49313;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.90) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #ffe9a8 0 31%, #f7bd26 54%, #b87309 76%, #704500 100%);
  box-shadow:
    inset 0 10px 14px rgba(255,255,255,.32),
    inset 0 -12px 18px rgba(76,42,0,.34),
    0 0 0 1px rgba(255,211,87,.20);
}
.choice-row .picker-coin-heads span {
  background: rgba(255,227,137,.35);
  border: 1px solid rgba(107,66,0,.24);
}
.choice-row .picker-coin-tails {
  color: #273244;
  border: 3px solid #9aa8ba;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.98) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #ffffff 0 30%, #e5eaf1 53%, #a8b3c1 76%, #596777 100%);
  box-shadow:
    inset 0 10px 14px rgba(255,255,255,.46),
    inset 0 -12px 18px rgba(15,23,42,.24),
    0 0 0 1px rgba(226,232,240,.22);
}
.choice-row .picker-coin-tails span {
  background: rgba(255,255,255,.36);
  border: 1px solid rgba(39,50,68,.20);
}
.choice-card:hover .picker-coin,
.choice-card:has(input:checked) .picker-coin {
  transform: translateY(-1px) scale(1.03) !important;
}
@media (max-width: 720px) {
  .choice-row .picker-coin { width: 42px; height: 42px; font-size: 19px; }
}

/* =====================================================================
   v0.12 GLOBAL COIN BUG FIX
   ---------------------------------------------------------------------
   Static UI coins and the animated flip coin are now completely separated.
   Nothing in the old .coin/.coin-inner/.coin-face stack can affect these.
   This fixes the white/silver halo and the radial/overlapped texture in:
   - create-game heads/tails picker
   - open-games rows
   - result banner
   - auth/logo decoration
   - flip animation modal
   ===================================================================== */
.static-coin {
  --static-coin-size: 48px;
  width: var(--static-coin-size) !important;
  height: var(--static-coin-size) !important;
  min-width: var(--static-coin-size) !important;
  border-radius: 999px !important;
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  font-weight: 900 !important;
  font-size: calc(var(--static-coin-size) * .46) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  transform: none;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.28));
}
.static-coin::before,
.static-coin::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.static-coin::before {
  inset: 14% !important;
  border: max(1px, calc(var(--static-coin-size) * .04)) solid currentColor !important;
  opacity: .28 !important;
}
.static-coin::after {
  inset: 28% !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: inset 0 3px 8px rgba(255,255,255,.18), inset 0 -4px 9px rgba(0,0,0,.16) !important;
  opacity: .72 !important;
}
.static-coin > span {
  position: relative !important;
  z-index: 2 !important;
  width: 1.28em !important;
  height: 1.28em !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.22) !important;
}
.static-coin-heads {
  color: #6b4200 !important;
  border: max(2px, calc(var(--static-coin-size) * .065)) solid #d49313 !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.92) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #fff0b6 0 30%, #f7bd26 54%, #b87309 76%, #704500 100%) !important;
  box-shadow:
    inset 0 10px 14px rgba(255,255,255,.32),
    inset 0 -12px 18px rgba(76,42,0,.34),
    0 0 0 1px rgba(255,211,87,.22) !important;
}
.static-coin-heads > span {
  background: rgba(255,227,137,.34) !important;
  border: 1px solid rgba(107,66,0,.25) !important;
}
.static-coin-tails {
  color: #273244 !important;
  border: max(2px, calc(var(--static-coin-size) * .065)) solid #9aa8ba !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,1) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #ffffff 0 29%, #e5eaf1 53%, #a8b3c1 76%, #596777 100%) !important;
  box-shadow:
    inset 0 10px 14px rgba(255,255,255,.46),
    inset 0 -12px 18px rgba(15,23,42,.24),
    0 0 0 1px rgba(226,232,240,.25) !important;
}
.static-coin-tails > span {
  background: rgba(255,255,255,.36) !important;
  border: 1px solid rgba(39,50,68,.20) !important;
}
.static-coin-xs { --static-coin-size: 26px; font-size: 13px !important; }
.static-coin-sm { --static-coin-size: 42px; }
.static-coin-md { --static-coin-size: 84px; }
.static-coin-choice { --static-coin-size: 48px; }
.choice-card:hover .static-coin-choice,
.choice-card:has(input:checked) .static-coin-choice {
  transform: translateY(-1px) scale(1.03) !important;
}
.result-banner-coin.static-coin {
  background-image: inherit;
}
.result-banner.is-win .result-banner-coin.static-coin,
.result-banner.is-loss .result-banner-coin.static-coin {
  background-image: inherit !important;
}
@media (max-width: 720px) {
  .static-coin-choice { --static-coin-size: 42px; }
  .static-coin-md { --static-coin-size: 58px; }
}

/* New isolated flip modal coin. It intentionally does not use .coin. */
.flip-coin {
  --flip-size: clamp(160px, 54vw, 210px);
  --flip-depth: clamp(7px, 2.4vw, 14px);
  --final-y: 2880deg;
  --toss-duration: 2800ms;
  width: var(--flip-size) !important;
  height: var(--flip-size) !important;
  position: relative !important;
  margin: 0 auto !important;
  perspective: 1600px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
}
.flip-coin-inner {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  transform-style: preserve-3d !important;
  transform-origin: center center !important;
  will-change: transform !important;
}
.flip-coin-inner::before {
  content: "" !important;
  position: absolute !important;
  inset: 2.5% !important;
  border-radius: 50% !important;
  transform: translateZ(calc(var(--flip-depth) * -1)) !important;
  background:
    repeating-conic-gradient(from -10deg, rgba(255,255,255,.35) 0deg 4deg, rgba(148,163,184,.34) 4deg 8deg, rgba(71,85,105,.32) 8deg 12deg),
    radial-gradient(circle at 38% 30%, #f8fafc 0 18%, #cbd5e1 48%, #475569 100%) !important;
  box-shadow:
    0 0 0 var(--flip-depth) #cbd5e1,
    inset 0 0 22px rgba(15,23,42,.28),
    inset 0 0 0 2px rgba(255,255,255,.18) !important;
  backface-visibility: visible !important;
  pointer-events: none !important;
}
.flip-face {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  clip-path: circle(49.8% at 50% 50%) !important;
  font-weight: 900 !important;
  font-size: clamp(68px, 23vw, 92px) !important;
  line-height: 1 !important;
  letter-spacing: -.06em !important;
  border: max(3px, calc(var(--flip-depth) * .62)) solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 16px 28px rgba(255,255,255,.28), inset 0 -22px 30px rgba(15,23,42,.24) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.flip-face::before,
.flip-face::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.flip-face::before {
  inset: 15% !important;
  border: max(2px, calc(var(--flip-depth) * .30)) solid currentColor !important;
  opacity: .28 !important;
}
.flip-face::after {
  inset: 29% !important;
  border: 2px solid rgba(255,255,255,.30) !important;
  box-shadow: inset 0 8px 18px rgba(255,255,255,.18), inset 0 -10px 20px rgba(0,0,0,.16) !important;
  opacity: .78 !important;
}
.flip-face > span {
  position: relative !important;
  z-index: 2 !important;
  width: 1.25em !important;
  height: 1.25em !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}
.flip-face-heads {
  transform: translateZ(var(--flip-depth)) !important;
  color: #6b4200 !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.92) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #fff0b6 0 30%, #f7bd26 54%, #b87309 76%, #704500 100%) !important;
}
.flip-face-heads > span {
  background: rgba(255,227,137,.34) !important;
  border: 1px solid rgba(107,66,0,.25) !important;
  text-shadow: 0 3px 0 rgba(255,255,255,.28), 0 -2px 0 rgba(58,32,0,.25) !important;
}
.flip-face-tails {
  transform: rotateY(180deg) translateZ(var(--flip-depth)) !important;
  color: #273244 !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,1) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #ffffff 0 29%, #e5eaf1 53%, #a8b3c1 76%, #596777 100%) !important;
}
.flip-face-tails > span {
  background: rgba(255,255,255,.36) !important;
  border: 1px solid rgba(39,50,68,.20) !important;
  text-shadow: 0 3px 0 rgba(255,255,255,.62), 0 -2px 0 rgba(15,23,42,.18) !important;
}
.flip-coin-shadow {
  position: absolute !important;
  left: 50% !important;
  bottom: -18px !important;
  width: 68% !important;
  height: 18px !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 62%, transparent 72%) !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}
.flip-coin.is-waiting .flip-coin-inner {
  animation: flip-ready-isolated 1350ms ease-in-out infinite !important;
}
@keyframes flip-ready-isolated {
  0%, 100% { transform: translate3d(0,0,0) rotateX(5deg) rotateY(-16deg) rotateZ(-1deg); }
  50%      { transform: translate3d(0,-7px,0) rotateX(-5deg) rotateY(16deg) rotateZ(1deg); }
}
.flip-coin.is-tossing .flip-coin-inner {
  animation: flip-toss-isolated var(--toss-duration, 2800ms) cubic-bezier(.18,.76,.18,1) forwards !important;
}
@keyframes flip-toss-isolated {
  0%   { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
  12%  { transform: translate3d(-5px, -28px, 0) rotateX(10deg) rotateY(430deg) rotateZ(-4deg) scale(1.03); }
  28%  { transform: translate3d(7px, -80px, 0) rotateX(-8deg) rotateY(980deg) rotateZ(4deg) scale(1.06); }
  46%  { transform: translate3d(-5px, -108px, 0) rotateX(7deg) rotateY(1560deg) rotateZ(-3deg) scale(1.07); }
  64%  { transform: translate3d(5px, -72px, 0) rotateX(-5deg) rotateY(2140deg) rotateZ(2deg) scale(1.04); }
  80%  { transform: translate3d(-2px, -22px, 0) rotateX(3deg) rotateY(calc(var(--final-y, 2880deg) - 118deg)) rotateZ(-1deg) scale(1.02); }
  90%  { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(calc(var(--final-y, 2880deg) + 12deg)) rotateZ(0deg) scale(1.055, .93); }
  96%  { transform: translate3d(0, -6px, 0) rotateX(0deg) rotateY(calc(var(--final-y, 2880deg) - 5deg)) rotateZ(0deg) scale(.985, 1.025); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(var(--final-y, 2880deg)) rotateZ(0deg) scale(1); }
}
.flip-coin.is-tossing .flip-coin-shadow {
  animation: flip-shadow-isolated var(--toss-duration, 2800ms) cubic-bezier(.18,.76,.18,1) forwards !important;
}
@keyframes flip-shadow-isolated {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .42; }
  28%      { transform: translateX(-50%) scaleX(.48); opacity: .20; }
  46%      { transform: translateX(-50%) scaleX(.30); opacity: .12; }
  76%      { transform: translateX(-50%) scaleX(.72); opacity: .30; }
  90%      { transform: translateX(-50%) scaleX(.95); opacity: .38; }
}
@media (max-height: 740px) {
  .flip-coin { --flip-size: 162px; }
  .flip-face { font-size: 70px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-coin.is-waiting .flip-coin-inner,
  .flip-coin.is-tossing .flip-coin-inner,
  .flip-coin.is-tossing .flip-coin-shadow {
    animation: none !important;
  }
  .flip-coin.is-tossing .flip-coin-inner {
    transform: rotateY(var(--final-y, 2880deg)) !important;
    transition: transform 520ms ease-out !important;
  }
}

/* Ensure result-banner win/loss color rules never repaint the side coin. */
.result-banner .result-banner-coin.static-coin-heads {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.92) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #fff0b6 0 30%, #f7bd26 54%, #b87309 76%, #704500 100%) !important;
}
.result-banner .result-banner-coin.static-coin-tails {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,1) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 48%, #ffffff 0 29%, #e5eaf1 53%, #a8b3c1 76%, #596777 100%) !important;
}