/* Anteclub — frosted glass over a pale lilac ground; one magenta accent for the drawn ante. */
:root{
  --ground:#ECEAF6; --ink:#1B1733; --mute:#625C80; --faint:#8F89AC;
  --glass:rgba(255,255,255,.58); --glass-hi:rgba(255,255,255,.82); --edge:rgba(255,255,255,.9); --rule:rgba(27,23,51,.11);
  --hot:#C2187A; --hot-soft:rgba(194,24,122,.14); --hot-glow:rgba(194,24,122,.38);
  --cool:#4E7FA8; --mint:#2E9C86;
  --disp:'Unbounded',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
  --r:22px;
}
*{box-sizing:border-box}
html{background-color:#ECEAF6}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;
  background-color:#ECEAF6;
  background-image:radial-gradient(42rem 30rem at 8% -4%,rgba(206,194,246,.95),transparent 62%),
    radial-gradient(34rem 26rem at 104% 22%,rgba(247,206,228,.9),transparent 60%),
    radial-gradient(40rem 30rem at 30% 108%,rgba(196,230,238,.85),transparent 62%);
  background-attachment:fixed}
a{color:inherit}
code{font-family:var(--mono)}
[hidden]{display:none!important}

.frame{max-width:1160px;margin:0 auto;padding:10px 16px 40px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"brand" "club" "pill" "desk" "print" "how" "foot"}
.glass{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 44px -24px rgba(52,38,110,.38)}

/* brand row: small, not a header bar */
.brandrow{grid-area:brand;display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px}
.brandmark{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 13px/1 var(--disp);letter-spacing:.02em}
.brandmark img{border-radius:9px;box-shadow:0 4px 12px -4px rgba(52,38,110,.5)}
.brandlinks{display:flex;gap:6px;font-size:13px}
.brandlinks a{text-decoration:none;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85)}

/* the club card — the form is the hero, the pot lives inside it */
.club{grid-area:club;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.rimclock{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px}
.rimtag{font:700 11px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--hot)}
.rimtime{justify-self:end;font:500 13px/1.2 var(--mono);color:var(--mute);text-align:right}
.rimbar{grid-column:1/-1;height:5px;border-radius:9px;background:rgba(27,23,51,.08);overflow:hidden}
.rimbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#B58CEB,var(--hot));border-radius:9px;transition:width .9s linear}

.lastlit{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.35;color:var(--mute);padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.45)}
.lastlit[data-mode="won"]{color:var(--ink);background:var(--hot-soft)}
.lastlit[data-mode="won"] b{color:var(--hot)}
.lastlit[data-mode="wait"]{color:var(--ink);background:rgba(78,127,168,.13)}
.lastdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--faint)}
.lastlit[data-mode="won"] .lastdot{background:var(--hot);box-shadow:0 0 0 4px var(--hot-soft)}
.lastlit[data-mode="wait"] .lastdot{background:var(--cool);animation:throb 1.2s ease-in-out infinite}

.potring{position:relative;width:min(270px,72vw);aspect-ratio:1;margin:2px auto 0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.7) 0 38%,rgba(255,255,255,.18) 39% 100%);
  border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 0 0 14px rgba(255,255,255,.22),0 20px 40px -28px rgba(52,38,110,.6)}
.potcore{position:absolute;inset:27%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%}
.potnum{font:800 clamp(22px,6.4vw,30px)/1 var(--disp);letter-spacing:-.02em}
.potunit{font-size:11px;color:var(--mute);margin-top:4px}
.potantes{font:500 12px/1 var(--mono);margin-top:7px;padding:4px 8px;border-radius:99px;background:rgba(27,23,51,.06)}
.chip{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;
  font:500 9px/1 var(--mono);color:#fff;text-decoration:none;border:2px solid rgba(255,255,255,.95);
  box-shadow:0 4px 10px -3px rgba(27,23,51,.35),inset 0 -3px 0 rgba(0,0,0,.12);transition:transform .25s}
.chip.mine{outline:2px solid var(--ink);outline-offset:1px}
.chip.fresh{animation:drop .5s cubic-bezier(.2,1.6,.4,1)}
.chip.more{background:rgba(27,23,51,.75)!important;font-size:10px}
.chip.ghost{background:rgba(255,255,255,.55)!important;border:2px dashed rgba(98,92,128,.45);box-shadow:none;color:var(--faint)}
.chip.ghost.first{border:2px solid var(--hot);color:var(--hot);background:#fff!important;animation:throb 1.4s ease-in-out infinite;font-weight:500}
.chip.won{background:var(--hot)!important;box-shadow:0 0 0 5px var(--hot-soft),0 0 22px var(--hot-glow);z-index:2}
@keyframes drop{from{transform:scale(.2) translateY(-20px);opacity:0}to{transform:none;opacity:1}}
@keyframes throb{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

.saidline{margin:2px 0 0;font-size:15px;line-height:1.45;text-align:center}
.saidline b{color:var(--hot)}
.stake{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch}
.stepper{display:flex;align-items:center;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid var(--edge)}
.stepper button{width:40px;height:52px;border:0;background:none;font:500 22px/1 var(--body);color:var(--ink);cursor:pointer}
.stepper span{min-width:24px;text-align:center;font:700 16px/1 var(--disp)}
.tossbtn{border:0;border-radius:16px;min-height:52px;padding:0 14px;cursor:pointer;color:#fff;font:700 14px/1.15 var(--disp);letter-spacing:.01em;
  background:linear-gradient(135deg,#D4248B,#9A1466);box-shadow:0 12px 24px -12px var(--hot-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.tossbtn:active{transform:translateY(1px)}
.tossbtn[disabled]{opacity:.6;cursor:wait}
.minebar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.55)}
.pocketbtn{border:0;border-radius:10px;padding:8px 12px;font:600 13px/1 var(--body);background:var(--mint);color:#fff;cursor:pointer}

/* the CA pill: sits under the card, docks to the top on scroll */
.capill{grid-area:pill;position:sticky;top:10px;z-index:20;display:flex;align-items:center;gap:8px;min-height:50px;padding:6px 6px 6px 14px;border-radius:99px;
  background:var(--glass-hi);border:1px solid var(--edge);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 14px 30px -18px rgba(52,38,110,.55)}
.capilltag{font:800 11px/1 var(--disp);color:var(--hot)}
.capilladdr{flex:1;min-width:0;font-size:11.5px;line-height:1.25;word-break:break-all;user-select:all;color:var(--ink)}
.capillcopy{flex:none;border:0;border-radius:99px;height:38px;padding:0 16px;background:var(--ink);color:#fff;font:600 13px/1 var(--body);cursor:pointer}
.capillcopy.done{background:var(--mint)}
.capillgmgn{flex:none;font-size:11px;color:var(--mute);padding-right:8px}

/* the draw desk */
.drawdesk{grid-area:desk;padding:14px 16px}
.deskhead,.printhead{display:flex;justify-content:space-between;align-items:baseline;font:700 12px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.deskhead i,.printhead i{font:400 12px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--mute)}
.deskbig{margin:10px 0 4px;font:700 17px/1.3 var(--disp);letter-spacing:-.01em}
.deskbig b{color:var(--hot)}
.desksmall{margin:0;font-size:13.5px;color:var(--mute)}
.deskchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.deskchips span{width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 2px 5px -2px rgba(27,23,51,.4)}
.deskchips span.won{background:var(--hot)!important;box-shadow:0 0 0 3px var(--hot-soft)}
.drawbtn{margin-top:12px;border:0;border-radius:12px;padding:11px 14px;background:var(--cool);color:#fff;font:600 14px/1 var(--body);cursor:pointer}

/* the tape — the spine */
.printout{grid-area:print;padding:14px 0 6px;display:flex;flex-direction:column;min-height:0}
.printhead{padding:0 16px 10px;border-bottom:1px solid var(--rule)}
.printlist{list-style:none;margin:0;padding:0;overflow:auto;max-height:440px}
.printlist li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:9px 16px;border-bottom:1px solid var(--rule);font-size:13.5px}
.printlist li:last-child{border-bottom:0}
.printlist li.printnone{display:block;color:var(--mute)}
.printlist li.fresh{animation:printin .6s ease-out}
.printlist .pk{font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:4px 6px;border-radius:6px;background:rgba(27,23,51,.07)}
.printlist li.k-drawn{background:var(--hot-soft)}
.printlist li.k-drawn .pk{background:var(--hot);color:#fff}
.printlist li.k-shut .pk{background:rgba(78,127,168,.18)}
.printlist .pt{font:400 11px/1 var(--mono);color:var(--faint);white-space:nowrap}
.printlist a{text-decoration:none;font-family:var(--mono);font-size:12px;border-bottom:1px dotted var(--faint)}
@keyframes printin{from{background:rgba(194,24,122,.22);transform:translateY(-6px);opacity:0}to{opacity:1}}

/* the rules */
.howto{grid-area:how;padding:16px}
.howtitle{font:700 15px/1.2 var(--disp)}
.howsteps{margin:12px 0;padding-left:20px;font-size:14px;color:var(--mute)}
.howsteps li{margin-bottom:8px}
.howsteps b{color:var(--ink)}
.howsum{border-radius:16px;background:rgba(255,255,255,.6);padding:12px 14px}
.sumrow{display:flex;justify-content:space-between;font:400 13.5px/1.9 var(--mono)}
.sumrow.lit{border-top:1px solid var(--rule);margin-top:4px;padding-top:4px;color:var(--hot);font-weight:500}
.sumnote{margin:8px 0 0;font-size:13px;color:var(--mute)}

.baseline{grid-area:foot;padding:8px 2px 0;font-size:12.5px;color:var(--mute)}
.baserow{display:flex;gap:10px;align-items:baseline;padding:4px 0}
.baserow span{flex:none;width:96px}
.baserow code{min-width:0;word-break:break-all;color:var(--ink)}
.baselinks{display:flex;gap:14px;margin:8px 0}
.basenote{margin:6px 0 0;color:var(--faint)}

.sheet{position:fixed;inset:0;z-index:50;background:rgba(27,23,51,.32);display:grid;place-items:center;padding:16px}
.sheet.off{display:none}
.sheetbox{width:min(460px,100%);max-height:80vh;overflow:auto;background:#F8F7FD;border-radius:20px;padding:16px;box-shadow:0 30px 60px -20px rgba(27,23,51,.5)}
.sheethead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:var(--disp)}
.sheethead button{border:0;background:none;font-size:24px;cursor:pointer}
.walletpicks{display:grid;gap:8px}
.walletpicks button{padding:12px;border-radius:12px;border:1px solid var(--rule);background:#fff;font:500 14px var(--body);cursor:pointer}
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:13.5px;max-width:90vw}

/* 720+: one column still, a wider measure and a bigger pot */
@media (min-width:720px){
  .frame{padding:16px 28px 48px;max-width:760px;gap:16px}
  .potring{width:330px}
  .chip{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:10px}
  .potnum{font-size:36px}
  .saidline{font-size:16.5px}
  .tossbtn{font-size:16px}
  .capilladdr{font-size:13px}
}
/* 1000+: the page recomposes — the card and its pill left, the tape as a sticky column right */
@media (min-width:1000px){
  .frame{max-width:1160px;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:24px;
    grid-template-areas:"brand brand" "club print" "pill print" "desk print" "how print" "foot foot";align-items:start}
  .club{padding:18px 22px 20px}
  .potring{width:360px}
  .chip{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:11px}
  .potnum{font-size:40px}
  .printout{position:sticky;top:16px;grid-row:2 / span 4}
  .printlist{max-height:calc(100vh - 110px)}
  .brandrow{height:46px}
}