:root{
  --felt:#0f3d36;--felt-2:#0a2b26;--felt-3:#14514a;
  --paper:#f6efe1;--paper-2:#ece2cf;--ink:#1f1a14;--ink-2:#5a5046;
  --brass:#b8893b;--brass-2:#d4a75a;--brass-ink:#1f1a14;
  --gain:#2a7f50;--loss:#a83f33;
  --gain-felt:#8fe8b4;--loss-felt:#f4a99b;--wood:#7a4e2d;--wood-2:#4f301a;
  --on-felt:#f3ead8;--on-felt-2:#c3d3cb;--line:rgba(31,26,20,.14);--line-felt:rgba(243,234,216,.16);
}
.dark{
  --felt:#0a2622;--felt-2:#061a17;--felt-3:#0f3a34;
  --paper:#1d2420;--paper-2:#252e29;--ink:#efe7d6;--ink-2:#b9b2a3;
  --gain:#5cc28a;--loss:#e88576;--line:rgba(255,255,255,.13);
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--on-felt);
  background:var(--felt-2);
  background-image:
    radial-gradient(ellipse at 50% -10%, var(--felt-3) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  min-height:100vh;
}
.serif{font-family:'Fraunces',Georgia,serif}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.felt{background:var(--felt);border:1px solid var(--line-felt)}
.paper{background:var(--paper);color:var(--ink)}
.paper .muted{color:var(--ink-2)}
.muted-felt{color:var(--on-felt-2)}
.btn{min-height:44px;padding:.6rem 1.1rem;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .12s, background .2s;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-brass{background:var(--brass);color:var(--brass-ink)}
.btn-brass:hover:not(:disabled){background:var(--brass-2)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-quiet{background:rgba(127,127,127,.12);color:inherit}
.btn-loss{background:transparent;color:var(--loss);border-color:var(--loss)}
.paper .btn-loss{color:var(--loss)}
:focus-visible{outline:3px solid var(--brass-2);outline-offset:2px;border-radius:8px}
.chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;padding:.15rem .55rem;border-radius:999px;border:1px solid var(--line);background:rgba(127,127,127,.08)}
.chip.flag{border-color:var(--loss);color:var(--loss);background:transparent}
.chip-pop{animation:pop .35s ease both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.msg-in{animation:msgIn .35s ease both}
@keyframes msgIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.gauge{height:12px;border-radius:999px;background:rgba(243,234,216,.12);position:relative;overflow:visible}
.gauge-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,var(--on-felt-2),var(--on-felt));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.gauge-ask{position:absolute;top:-5px;width:4px;height:22px;background:var(--brass-2);border-radius:2px;transition:left .5s}
.delta{color:#7fe0a6;font-size:.75rem;font-weight:700;animation:pop .4s both}
.dark .delta{color:var(--gain)}
.typing span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--ink-2);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.coin{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0cf8a,var(--brass) 60%,#8a6326);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);display:inline-block}
.coin.empty{background:transparent;border:1.5px dashed var(--on-felt-2);box-shadow:none;opacity:.5}
.curtain{position:fixed;inset:0;z-index:60;pointer-events:none;display:flex}
.curtain div{flex:1;background:repeating-linear-gradient(90deg,#5e1f1a 0 18px,#4a1714 18px 36px);box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.curtain .l{animation:openL 1.6s .3s cubic-bezier(.7,0,.3,1) forwards}
.curtain .r{animation:openR 1.6s .3s cubic-bezier(.7,0,.3,1) forwards}
@keyframes openL{to{transform:translateX(-102%)}}
@keyframes openR{to{transform:translateX(102%)}}
.track{height:8px;border-radius:99px;background:rgba(243,234,216,.14);position:relative}
.mark{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;border:2px solid var(--felt-2)}
.drawer{animation:msgIn .3s both}
input,select,textarea{font:inherit;color:inherit}
.field{background:rgba(255,255,255,.06);border:1px solid var(--line-felt);border-radius:12px;padding:.6rem .8rem;min-height:44px;width:100%}
.paper .field{background:rgba(255,255,255,.6);border-color:var(--line)}
.dark .paper .field{background:rgba(0,0,0,.2)}
.field option{color:#1f1a14}
.card-sel{border:2px solid transparent;transition:border-color .2s, transform .2s}
.card-sel[aria-pressed="true"]{border-color:var(--brass)}
.skel{background:linear-gradient(90deg,rgba(127,127,127,.12),rgba(127,127,127,.25),rgba(127,127,127,.12));background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.ring-arc{transition:stroke-dasharray 1.2s ease}
a{color:var(--brass-2)}
.btn-lg{min-height:52px;padding:.8rem 1.6rem;font-size:1.05rem;box-shadow:0 10px 24px -10px rgba(184,137,59,.7)}
.linkbtn{background:none;border:0;color:var(--brass-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 2px;font:inherit}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line-felt);background:rgba(0,0,0,.18);min-height:32px;cursor:help}
.pill .dot{width:8px;height:8px;border-radius:9px;display:inline-block}
.hist-strip{display:inline-flex;align-items:center;gap:.7rem;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line-felt)}
.why-line{font-size:.74rem;margin-top:.3rem;opacity:.75;font-variant-numeric:tabular-nums}
.table-wrap{position:relative}
.table-top{position:relative;border-radius:46% / 38%;padding:2.2rem 1.4rem 2.4rem;background:radial-gradient(ellipse at 50% 40%,var(--felt-3),var(--felt) 70%);border:14px solid var(--wood);box-shadow:inset 0 0 0 2px var(--wood-2),inset 0 0 50px rgba(0,0,0,.45),0 30px 60px -20px rgba(0,0,0,.7);outline:2px solid var(--wood-2)}
.seat-hr{display:flex;gap:.6rem;align-items:flex-start;max-width:85%;margin:0 auto 1rem}
.bubble{background:var(--paper);color:var(--ink);padding:.55rem .8rem;border-radius:4px 16px 16px 16px;font-size:.88rem;line-height:1.35;min-height:3.6rem}
.tokens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.token{background:rgba(246,239,225,.08);border:1px solid var(--line-felt);border-radius:14px;padding:.45rem .55rem;box-shadow:0 3px 0 rgba(0,0,0,.25);transition:border-color .4s,background .4s}
.token.up{border-color:var(--gain-felt);background:rgba(143,232,180,.1)}
.token.up .tk-v{color:var(--gain-felt)}
.tk-l{display:block;font-size:.68rem;opacity:.8}
.tk-v{display:block;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.8rem;font-size:.8rem;gap:.5rem}
.board-total b{font-size:1.5rem}
.seat-you{position:absolute;bottom:.55rem;left:50%;transform:translateX(-50%);font-size:.7rem;opacity:.7}
.teaser{margin:-.6rem auto 0;position:relative;width:max-content;max-width:92%;display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;justify-content:center;padding:.6rem 1rem;border-radius:12px;color:#f6e7d0;background:repeating-linear-gradient(90deg,#6b1d2e 0 14px,#561627 14px 22px);border-bottom:3px solid var(--brass);box-shadow:0 12px 24px -10px rgba(0,0,0,.6)}
.shimmer{background:linear-gradient(90deg,#d4a75a 20%,#fff3d6 50%,#d4a75a 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 2.6s linear infinite;font-size:1.2rem}
@keyframes shim{to{background-position:-200% 0}}
@media (max-width:420px){.tokens{grid-template-columns:repeat(2,minmax(0,1fr))}.table-top{border-width:10px;padding:1.6rem .9rem 2.2rem}}
.curtain .valance{position:absolute;top:0;left:0;right:0;height:64px;z-index:2;flex:none;background:radial-gradient(circle at 50% 0,#7a2436 60%,transparent 62%) 0 0/60px 64px repeat-x,linear-gradient(#4d1220,#6b1d2e);border-bottom:3px solid var(--brass);animation:valUp .9s 1.5s ease-in forwards}
@keyframes valUp{to{transform:translateY(-110%)}}
.curtain .l,.curtain .r{background:repeating-linear-gradient(90deg,#6b1d2e 0 22px,#4d1220 22px 34px,#7a2436 34px 44px);border-bottom:6px solid var(--brass)}
.reveal-hero{border-radius:28px;padding:1.6rem;color:#f6e7d0;background:radial-gradient(ellipse at 20% 0,#7a2436,#3a0d18 70%);border:1px solid rgba(212,167,90,.5);box-shadow:0 30px 60px -25px rgba(0,0,0,.8);animation:heroIn .9s 1.2s both}
@keyframes heroIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.reveal-big{font-size:clamp(2.6rem,9vw,5.5rem);font-weight:800;line-height:1;color:#f0cf8a;font-variant-numeric:tabular-nums}
.rh-cell{background:rgba(0,0,0,.22);border-radius:14px;padding:.6rem .7rem}
.rh-cell.secret{border:1px solid #d4a75a}
.rub-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.rub-dot.ok{background:var(--gain)}.rub-dot.no{background:transparent;border:2px solid var(--ink-2)}
.est{font-size:.68rem;padding:0 .4rem;border-radius:99px;border:1px solid var(--line);font-style:normal}
.tl{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;position:relative;padding:.4rem 0}
.tl-mark{width:44px;height:44px;border-radius:50%;font-weight:800;cursor:pointer;border:2px solid transparent;color:#1f1a14;animation:pop .35s both}
.tl-mark.strong,.tl-key.strong{background:var(--gain-felt)}
.tl-mark.neutral,.tl-key.neutral{background:#c3d3cb}
.tl-mark.weak,.tl-key.weak{background:var(--loss-felt)}
.tl-mark.sel{border-color:var(--brass-2);box-shadow:0 0 0 3px rgba(212,167,90,.4)}
.tl-key{width:10px;height:10px;border-radius:9px;display:inline-block}
@media (prefers-reduced-motion: reduce){
  .reveal-hero{animation:fadeOnly .5s both !important;animation-duration:.5s !important}
  .shimmer{animation:none !important;color:#d4a75a}
}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important}
  .curtain{display:none}
}