/* Layout: the game owns the first screen — a full-bleed felt "arena" sized to the viewport, cards scaled to fill it; rules and SEO content live on a quiet light page below the fold. */
:root{
  --page:#F6F7F8; --panel:#FFFFFF; --ink:#14171A; --ink-2:#3A4047; --muted:#6B737C; --line:#E4E7EB; --line-2:#D5DAE0;
  --felt-hi:#2E7A55; --felt:#1E5E40; --felt-lo:#123B28; --on-felt:#F2F6F3; --on-felt-2:rgba(242,246,243,.72);
  --glass:rgba(255,255,255,.09); --glass-line:rgba(255,255,255,.16); --slot:rgba(0,0,0,.16); --slot-line:rgba(255,255,255,.17);
  --card:#FFFFFF; --card-edge:#D9DCD8; --red:#C8102E; --black:#16191C; --face-tint:#F4F1EA;
  --f-ui:"Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-num:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --page:#0E1114; --panel:#14181C; --ink:#F1F3F5; --ink-2:#C9CED4; --muted:#8C949D; --line:#23292F; --line-2:#2E353C;
  --felt-hi:#24654A; --felt:#174C35; --felt-lo:#0C2A1D; --card:#F5F5F2; --card-edge:#C6CAC4; color-scheme:dark}}
:root[data-theme="dark"]{
  --page:#0E1114; --panel:#14181C; --ink:#F1F3F5; --ink-2:#C9CED4; --muted:#8C949D; --line:#23292F; --line-2:#2E353C;
  --felt-hi:#24654A; --felt:#174C35; --felt-lo:#0C2A1D; --card:#F5F5F2; --card-edge:#C6CAC4; color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--page)}
body{color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- arena ---------- */
.arena{position:relative;height:100vh;height:100dvh;min-height:560px;display:flex;flex-direction:column;color:var(--on-felt);
  background:radial-gradient(120% 85% at 50% 18%,var(--felt-hi) 0%,var(--felt) 48%,var(--felt-lo) 100%);isolation:isolate}
.arena::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.55;mix-blend-mode:overlay;pointer-events:none;z-index:-1}
.demo{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:11.5px;color:var(--on-felt-2);white-space:nowrap;pointer-events:none}
.topbar{display:flex;align-items:center;gap:14px;padding:14px clamp(12px,2vw,28px) 10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-felt)}
.logo svg{width:28px;height:28px;flex:none}
.logo-name{font-size:19px;letter-spacing:-.035em}
.logo-name b{font-weight:700}
.vsel{position:relative}
.vsel select{appearance:none;-webkit-appearance:none;background:var(--glass);border:1px solid var(--glass-line);border-radius:9px;padding:7px 34px 7px 12px;color:var(--on-felt);font-weight:600;font-size:14px;letter-spacing:-.01em;cursor:pointer}
.vsel select option{color:#14171A}
.vsel::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--on-felt-2);border-bottom:1.6px solid var(--on-felt-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.gbtn{background:var(--glass);border:1px solid var(--glass-line);border-radius:9px;padding:7px 13px;cursor:pointer;font-weight:500;font-size:14px;color:var(--on-felt);white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.gbtn:hover{background:rgba(255,255,255,.16)}
.gbtn:disabled{opacity:.38;cursor:default}
.gbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gbtn.solid{background:var(--on-felt);color:#14171A;border-color:var(--on-felt)}
.gbtn.solid:hover{background:#fff}
.arena-body{flex:1;min-height:0;display:flex;gap:20px;padding:6px clamp(12px,2vw,28px) 0}
#board{position:relative;flex:1;min-width:0;height:100%;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.rail{display:none;width:300px;flex:none;align-self:flex-start;height:600px;max-height:calc(100% - 16px);border:1px dashed var(--glass-line);border-radius:12px;place-items:center;color:var(--on-felt-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:1600px){.rail{display:grid}}
.status{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;padding:10px clamp(12px,2vw,28px) 14px;font-size:13px;color:var(--on-felt-2)}
.status b{font-family:var(--f-num);font-weight:500;color:var(--on-felt);margin-left:6px}
.deal{display:flex;align-items:center;gap:6px}
.deal input{width:92px;background:rgba(0,0,0,.18);border:1px solid var(--glass-line);border-radius:7px;padding:4px 8px;color:var(--on-felt);font-family:var(--f-num);font-size:13px}
.deal button{background:none;border:0;color:var(--on-felt);cursor:pointer;font-weight:600;padding:4px 6px}
.toggle{display:flex;align-items:center;gap:6px;cursor:pointer}
.toggle input{accent-color:var(--on-felt)}
.keys{margin-left:auto}
.more{color:var(--on-felt);text-decoration:none;font-weight:500}
#toast{font-weight:600;color:var(--on-felt)}
@media (max-width:760px){.keys{display:none}.actions{width:100%;margin-left:0}.actions .gbtn{flex:1;justify-content:center;padding-inline:6px}.gbtn .lbl-lg{display:none}.topbar{padding-top:12px}}

/* ---------- table geometry ---------- */
.tbl{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.top{display:flex;justify-content:space-between}
.slots{display:flex;gap:var(--g)}
.slot{width:var(--tw);height:calc(var(--tw) * 1.4);border-radius:calc(var(--tw) * .075);background:var(--slot);box-shadow:inset 0 0 0 1px var(--slot-line);position:relative;display:grid;place-items:center;flex:none}
.slot.found::after{content:attr(data-hint);font-weight:600;font-size:calc(var(--tw) * .3);color:var(--slot-line)}
.slot.cell::after{content:"";width:calc(var(--tw) * .22);height:calc(var(--tw) * .22);border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--slot-line)}
.slot.filled::after{display:none}
.cols{position:relative;display:flex;gap:var(--g);justify-content:space-between}
.col{width:var(--cw);position:relative;flex:none;border-radius:calc(var(--cw) * .075)}
.col .base{position:absolute;inset:0 0 auto 0;height:calc(var(--cw) * 1.4);border-radius:inherit;box-shadow:inset 0 0 0 1px var(--slot-line)}
.col.king .base::after{content:"K";position:absolute;inset:0;display:grid;place-items:center;font-weight:600;color:var(--slot-line);font-size:calc(var(--cw) * .3)}
.drop-ok{outline:2px solid var(--on-felt);outline-offset:3px}

/* ---------- cards ---------- */
.card{position:absolute;left:0;width:var(--w);height:calc(var(--w) * 1.4);background:var(--card);border-radius:calc(var(--w) * .075);
  box-shadow:inset 0 0 0 1px var(--card-edge),0 1px 1px rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.16);color:var(--black);cursor:grab;touch-action:none;line-height:1;font-family:var(--f-ui);will-change:transform}
.slot .card{top:0}
.card.red{color:var(--red)}
.card .ix{position:absolute;display:flex;align-items:center;gap:calc(var(--w) * .035);left:calc(var(--w) * .085);top:calc(var(--w) * .07)}
.card .ix.br{left:auto;top:auto;right:calc(var(--w) * .085);bottom:calc(var(--w) * .07);transform:rotate(180deg)}
.card .r{font-size:max(11px,calc(var(--w) * .2));font-weight:600;letter-spacing:-.06em}
.card .s{font-size:max(10px,calc(var(--w) * .15))}
.card .pips{position:absolute;left:30%;right:30%;top:24%;bottom:24%}
.card .pip{position:absolute;transform:translate(-50%,-50%);font-size:calc(var(--w) * .16)}
.card .pip.inv{transform:translate(-50%,-50%) rotate(180deg)}
.card .ace{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:calc(var(--w) * .46)}
.card .face{position:absolute;left:22%;right:22%;top:21%;bottom:21%;border-radius:calc(var(--w) * .04);background:var(--face-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--w) * .02)}
.card .face .L{font-size:calc(var(--w) * .34);font-weight:600;letter-spacing:-.05em}
.card .face .fs{font-size:calc(var(--w) * .16)}
.card .big{position:absolute;left:0;right:0;bottom:calc(var(--w) * .16);text-align:center;font-size:calc(var(--w) * .5)}
.card.sm .r{font-size:max(12px,calc(var(--w) * .3))}
.card.sm .s{font-size:max(10px,calc(var(--w) * .24))}
.card.sm .ix{left:3px;top:3px;gap:1px}
.card.lift{opacity:.15}
.card.hint{box-shadow:inset 0 0 0 1px var(--card-edge),0 0 0 3px #F6D36B,0 3px 8px rgba(0,0,0,.2)}
.card.shake{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:50}
.ghost .card{box-shadow:inset 0 0 0 1px var(--card-edge),0 18px 34px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.card.shake{animation:none}}

.win{position:absolute;inset:0;display:grid;place-items:center;z-index:5}
.win-box{background:var(--panel);color:var(--ink);border-radius:16px;padding:26px 30px;text-align:center;max-width:340px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.win-box h2{font-weight:600;letter-spacing:-.03em;font-size:28px;margin:0 0 4px}
.win-box p{margin:0 0 16px;color:var(--muted);font-family:var(--f-num);font-size:13px}
.win-box .row{display:flex;gap:8px;justify-content:center}
.win-box button{border-radius:9px;padding:8px 14px;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;font-weight:500}
.win-box button.primary{background:var(--ink);color:var(--panel);border-color:var(--ink)}

/* ---------- side panel: daily challenge & stats ---------- */
.dpanel{display:none;width:344px;flex:none;flex-direction:column;gap:10px;min-height:0}
@media (min-width:1100px){.dpanel{display:flex}}
.pbody{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0;padding-bottom:12px;scrollbar-width:thin}
.dpanel.collapsed{width:auto}
.dpanel.collapsed .pbody{display:none}
.ptoggle{background:var(--glass);border:1px solid var(--glass-line);border-radius:9px;padding:8px 12px;color:var(--on-felt);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap}
.ptoggle:hover{background:rgba(255,255,255,.16)}
.dpanel.open{display:flex;position:absolute;left:12px;right:12px;top:118px;bottom:64px;width:auto;z-index:30;padding:12px;border-radius:16px;background:var(--felt-lo);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.dpanel.open .ptoggle{display:none}
.psec{background:rgba(0,0,0,.17);border:1px solid var(--glass-line);border-radius:12px;padding:14px}
.psec.shut .sbody{display:none}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.psec:not(.shut) .phead{margin-bottom:10px}
.phead h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#F6D36B;color:#3B2A05;border-radius:4px;padding:2px 6px}
.tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-felt-2);border:1px solid var(--glass-line);border-radius:4px;padding:1px 5px}
.sh{background:var(--glass);border:1px solid var(--glass-line);color:var(--on-felt);border-radius:7px;padding:3px 9px;font-size:12px;font-weight:600;cursor:pointer}
.mnav{display:flex;gap:2px}
.mnav button,.pclose{background:none;border:0;color:var(--on-felt);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:16px;line-height:1}
.mnav button:hover,.pclose:hover{background:var(--glass)}
.mnav button:disabled{opacity:.3;cursor:default;background:none}
.pclose{display:none}
.dpanel.open .pclose{display:block}
.trophy-row{display:flex;align-items:center;gap:12px;margin:6px 0 14px;padding:8px 10px 10px;background:rgba(0,0,0,.14);border-radius:10px}
.trophy-row>span{font-size:12.5px;font-weight:600;white-space:nowrap;min-width:52px}
.prog{position:relative;flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.14);margin:30px 10px 0 4px}
.prog i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#D9873A,#C9D0D6 60%,#F2C14E)}
.tro{position:absolute;bottom:-3px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;opacity:.8;filter:saturate(.3)}
.tro:last-child{transform:translateX(-60%)}
.tro.hit{opacity:1;filter:none}
.tro svg{width:38px;height:38px}
.tro b{position:absolute;top:7px;font-family:var(--f-num);font-size:11px;font-weight:700;color:#1f1a10}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal .dow{font-size:11px;color:var(--on-felt-2);padding:2px 0 4px}
.day{aspect-ratio:1.35;border:0;border-radius:7px;background:rgba(255,255,255,.06);color:var(--on-felt);font-family:var(--f-num);font-size:12.5px;cursor:pointer;position:relative;padding:0;display:grid;place-items:center}
.day:hover{background:rgba(255,255,255,.16)}
.day:disabled{background:none;color:rgba(242,246,243,.32);cursor:default}
.day.won{background:var(--on-felt);color:var(--felt-lo);font-weight:600}
.day.won::after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:#F2C14E}
.day.today:not(.won){color:transparent}
.day.today:not(.won)::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-left:11px solid #F6D36B;border-top:7px solid transparent;border-bottom:7px solid transparent}
.day.cur{outline:2px solid #F6D36B;outline-offset:1px}
.today-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--glass-line);font-size:13px}
.today-row b{display:block;font-size:14px}
.today-row span{color:var(--on-felt-2)}
.lbsub{margin:-4px 0 8px;font-size:12px;color:var(--on-felt-2)}
.lb{width:100%;border-collapse:collapse;font-size:13px}
.lb th{font-size:11px;font-weight:500;color:var(--on-felt-2);text-align:right;padding:4px 6px;border-bottom:1px solid var(--glass-line)}
.lb th:nth-child(2),.lb td:nth-child(2){text-align:left}
.lb th:first-child,.lb td:first-child{text-align:left;width:22px}
.lb td{padding:7px 6px;text-align:right;font-family:var(--f-num);font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.lb td:nth-child(2){font-family:var(--f-ui);font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.lb tr.me td{background:rgba(246,211,107,.14);color:#FFF3C9}
.lb .medal{display:inline-block;width:16px;height:16px;line-height:16px;border-radius:50%;text-align:center;font-size:10px;font-weight:700;color:#1b1b1b}
.lbfoot:empty{display:none}
.lbfoot{margin:10px 0 0;font-size:12.5px;text-align:center;color:var(--on-felt-2)}
.lbfoot b{color:var(--on-felt)}
.ach{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0;text-align:center}
.ach dt{font-size:11px;color:var(--on-felt-2);line-height:1.25}
.ach dd{margin:4px 0 0;font-family:var(--f-num);font-size:15px}
.ach2{margin-top:12px;padding-top:12px;border-top:1px solid var(--glass-line)}
.pad{min-height:250px;flex:none;border:1px dashed var(--glass-line);border-radius:12px;display:grid;place-items:center;color:var(--on-felt-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.gbtn .dot{width:7px;height:7px;border-radius:50%;background:#F6D36B;margin-left:-2px}
.gbtn.on{background:rgba(246,211,107,.18);border-color:rgba(246,211,107,.55)}
.win-box .streak{font-family:var(--f-ui);font-size:14px;color:var(--ink);margin:-6px 0 14px}
@media (min-width:1100px){#dailyBtn .lbl-x{display:none}}

/* ---------- below the fold ---------- */
.strip{border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;background:var(--panel)}
.strip::-webkit-scrollbar{display:none}
.strip-in{max-width:1320px;margin:0 auto;padding:0 16px;display:flex;gap:26px;width:max-content;min-width:100%}
.grp{display:flex;align-items:center;gap:2px}
.grp-l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:8px;white-space:nowrap;font-weight:500}
.chip{position:relative;padding:13px 9px 14px;font-size:14px;white-space:nowrap;text-decoration:none;color:var(--ink-2);font-weight:500}
.chip:hover{color:var(--ink)}
.chip[aria-current="page"]{color:var(--ink);font-weight:600}
.chip[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:16px;padding-block:8px 56px}
.content{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:36px}
@media (min-width:1000px){.content{grid-template-columns:minmax(0,1fr) 300px}}
.article{max-width:700px;min-width:0}
.article h1{font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0 0 12px;text-wrap:balance;letter-spacing:-.04em}
.article h2{font-weight:600;font-size:21px;letter-spacing:-.025em;margin:40px 0 12px;text-wrap:balance}
.lead{font-size:17px;color:var(--ink-2);margin:0 0 22px;line-height:1.6}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin:0}
.spec div{padding:12px 12px 12px 0}
.spec dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
.spec dd{margin:4px 0 0;font-weight:600;font-size:17px;letter-spacing:-.02em}
.article ol,.article ul{padding-left:1.2em;margin:0;color:var(--ink-2)}
.article li{margin:7px 0;padding-left:4px}
.article li::marker{color:var(--muted);font-family:var(--f-num);font-size:13px}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp-wrap{overflow-x:auto}
.cmp th,.cmp td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500;border-bottom-color:var(--ink)}
.cmp .diff{font-weight:600;color:var(--ink)}
.cmp .diff::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:2px}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:600;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:8px 0 0;color:var(--ink-2)}
.source{font-size:13px;color:var(--muted);margin-top:28px}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.box h3{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
.mystats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.mystats dt{font-size:12px;color:var(--muted)}
.mystats dd{margin:2px 0 0;font-family:var(--f-num);font-size:20px;font-weight:500}
.vlist{display:grid}
.vlist a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.vlist a:last-child{border-bottom:0}
.vlist a:hover b{text-decoration:underline}
.vlist span{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ad{border:1px dashed var(--line-2);border-radius:10px;display:grid;place-items:center;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;min-height:250px}
.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.site-foot .in{max-width:1320px;margin:0 auto;padding:22px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.site-foot svg{width:18px;height:18px}

/* ---------- content pages (no game) ---------- */
.site-head{background:var(--panel);border-bottom:1px solid var(--line)}
.site-head .in{max-width:1120px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.site-head .logo{color:var(--ink)}
.site-head nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.site-head nav a{text-decoration:none;color:var(--ink-2);font-weight:500;font-size:14px;padding:6px 10px;border-radius:7px}
.site-head nav a:hover{background:var(--page)}
.site-head .play{background:var(--ink);color:var(--panel)!important}
.doc{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:36px 64px}
.doc h1{font-weight:600;font-size:clamp(30px,4.5vw,44px);line-height:1.1;letter-spacing:-.04em;margin:0 0 12px;text-wrap:balance}
.doc h2{font-weight:600;font-size:22px;letter-spacing:-.025em;margin:40px 0 12px}
.doc p,.doc li{color:var(--ink-2)}
.doc li{margin:6px 0}
.doc a{color:var(--ink)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:18px}
.vcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.vcard:hover{border-color:var(--ink-2)}
.vcard b{display:block;font-size:16px;letter-spacing:-.02em;margin-bottom:4px;color:var(--ink)}
.vcard span{font-size:13px;color:var(--muted)}
.deal-form{display:flex;gap:8px;margin:18px 0}
.deal-form input{flex:1;max-width:220px;border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;font-family:var(--f-num);background:var(--panel)}
.deal-form button{border:0;border-radius:9px;padding:9px 16px;background:var(--ink);color:var(--panel);font-weight:600;cursor:pointer}
.note{font-size:13px;color:var(--muted)}
.cd{font-family:var(--f-num);color:var(--on-felt)}
.namebox{display:flex;gap:6px;margin:0 0 14px}
.namebox input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:8px;padding:7px 9px;font-size:13px;background:var(--page)}
.namebox button{border-radius:8px;padding:7px 11px;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;font-weight:500}
.lb td.empty{text-align:center;font-family:var(--f-ui);color:var(--on-felt-2);padding:14px 6px}
.sk{display:inline-block;height:9px;border-radius:4px;background:rgba(255,255,255,.12);width:70%}

/* ---------- win: cascade + modal ---------- */
.cascade{position:absolute;inset:0;width:100%;height:100%;z-index:6;cursor:pointer}
.win{background:radial-gradient(60% 60% at 50% 45%,rgba(0,0,0,.28),transparent 75%);animation:winIn .3s ease-out}
@keyframes winIn{from{opacity:0}to{opacity:1}}
.win-box{min-width:300px;max-width:380px;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.85) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.wcrest{width:56px;height:56px;margin:-52px auto 8px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.wcrest svg{width:100%;height:100%}
.win-box h2{font-size:30px}
.wsub{margin:0 0 14px!important;color:var(--muted);font-family:var(--f-ui)!important;font-size:13.5px!important}
.wtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.wt{background:var(--page);border-radius:10px;padding:10px 6px 9px;position:relative}
.wt span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wt b{display:block;font-family:var(--f-num);font-weight:500;font-size:20px;margin-top:2px}
.wt i{position:absolute;left:50%;top:-8px;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;background:#F2C14E;color:#3B2A05;border-radius:5px;padding:1px 6px}
.wrank{margin:0 0 6px!important;font-family:var(--f-ui)!important;font-size:15px!important;color:var(--ink)!important}
.wrank b{font-size:17px}
.wmeta{margin:0 0 14px!important;font-family:var(--f-ui)!important;font-size:13px!important}
.wmeta b{color:var(--ink)}
.dcta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(30,94,64,.1);color:#1E5E40;text-decoration:none;font-weight:600;font-size:14px}
.dcta:hover{background:rgba(30,94,64,.16)}
.sbtn{background:none;border:1px solid var(--glass-line);border-radius:7px;padding:3px 9px;color:var(--on-felt-2);font-size:12.5px;cursor:pointer}
.sbtn[aria-pressed="true"]{color:var(--on-felt)}
@media (prefers-reduced-motion:reduce){.win,.win-box{animation:none}}