/* Layout: night-blue lounge — lobby (profile, daily bonus, opponent carousel, big Play) and a card room with a gold-rimmed stadium table, avatars at both seats */
:root{
  --night:#0a1230; --night2:#17224f; --night3:#223066;
  --felt:#1d4bb8; --felt-deep:#0d2466; --rim:#5a3a14;
  --gold:#ffc53d; --gold2:#f08c1a; --gold3:#a85a0c;
  --paper:#fffdf7; --ink:#14161c; --soft:#c3cdf0; --good:#3fd28a;
  --hearts:#dc2638; --diamonds:#ee7410; --clubs:#138a4a; --spades:#14161c;
  --glass:rgba(255,255,255,.09); --line:rgba(255,255,255,.14); --shade:rgba(3,8,30,.5); --veil:rgba(6,12,40,.9);
  --back:repeating-linear-gradient(45deg, rgba(214,178,104,.45) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, rgba(214,178,104,.45) 0 1px, transparent 1px 8px), radial-gradient(circle at 50% 50%, #7a2630, #4a1219);
  --vint:'Old Standard TT', Georgia, 'Times New Roman', serif;
  --display:'Dela Gothic One', 'Arial Black', Impact, sans-serif;
  --body:'Onest', 'Segoe UI', Roboto, sans-serif;
  --num:'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
  --cw:clamp(64px, 18vw, 108px);
  color-scheme:dark;
}
body.felt-emerald{--felt:#15835f; --felt-deep:#073a2a}
body.felt-bordeaux{--felt:#9a2445; --felt-deep:#420d1d}
body.felt-graphite{--felt:#465063; --felt-deep:#161a23}
body.bk-roses{--back:radial-gradient(circle at 50% 50%, var(--hearts) 25%, transparent 27%) 0 0/14px 14px, radial-gradient(circle at 50% 50%, var(--paper) 12%, transparent 14%) 7px 7px/14px 14px, #6d0f1f}
body.bk-chevron{--back:repeating-linear-gradient(45deg, var(--clubs) 0 6px, #0b4d2b 6px 12px)}
body.bk-night{--back:radial-gradient(circle, var(--paper) 8%, transparent 10%) 0 0/18px 18px, radial-gradient(circle, var(--gold) 6%, transparent 8%) 9px 9px/18px 18px, var(--night)}
body.bk-gold{--back:repeating-linear-gradient(-45deg, var(--gold) 0 5px, var(--gold2) 5px 10px)}
html,body{height:100%}
[hidden]{display:none!important}
body{background:radial-gradient(100% 60% at 50% 0%, var(--night3) 0%, var(--night) 70%) fixed; background-color:var(--night); color:var(--paper); font-family:var(--body); font-size:15px; line-height:1.4; -webkit-tap-highlight-color:transparent; overflow-x:hidden}
button{font-family:inherit}
.app{min-height:100%; box-sizing:border-box; max-width:820px; margin:0 auto; padding-inline:16px; padding-block:10px 24px}
#hubApp>section{display:flex; flex-direction:column; gap:12px}
svg.i{width:1.1em; height:1.1em; vertical-align:-.18em; flex:0 0 auto}

/* avatars */
.ava{--s:48px; width:var(--s); height:var(--s); border-radius:50%; overflow:hidden; box-shadow:0 0 0 3px var(--paper), 0 6px 14px var(--shade); flex:0 0 auto; background:var(--night2); position:relative; transition:box-shadow .3s}
.ava svg{display:block; width:100%; height:100%}
.ava.turn{box-shadow:0 0 0 3px var(--gold), 0 0 0 7px rgba(255,197,61,.28), 0 0 26px 6px rgba(255,197,61,.45); animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px var(--gold), 0 0 0 10px rgba(255,197,61,.12), 0 0 30px 8px rgba(255,197,61,.3)}}

/* shared pieces */
.btn{font:600 14px var(--body); padding:9px 16px; border-radius:99px; border:1.5px solid var(--paper); background:transparent; color:var(--paper); cursor:pointer}
.btn.solid{background:linear-gradient(180deg,var(--gold),var(--gold2)); border-color:transparent; color:var(--ink); font-weight:700; box-shadow:0 3px 0 var(--gold3)}
.btn:disabled{opacity:.3; cursor:not-allowed}
.btn.pulse:not(:disabled){animation:btnglow 1.8s ease-in-out infinite}
@keyframes btnglow{50%{box-shadow:0 0 0 4px rgba(255,197,61,.3)}}
.btn:focus-visible,.icon-btn:focus-visible,.tile:focus-visible,.ocard:focus-visible,.cta:focus-visible,.opt:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.icon-btn{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--glass); color:var(--paper); cursor:pointer; font-size:18px}
.coins{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:var(--glass); border:1px solid var(--line); font:700 16px var(--num); color:var(--gold); font-variant-numeric:tabular-nums}
.h-sec{font-family:var(--display); font-weight:400; font-size:20px; margin:4px 0 0; color:var(--paper)}
.muted{color:var(--soft)}

/* ---------- LOBBY ---------- */
.topbar{display:flex; align-items:center; gap:10px}
.me-chip{display:flex; align-items:center; gap:10px; padding:5px 14px 5px 5px; border-radius:99px; background:var(--glass); border:1px solid var(--line); color:var(--paper); cursor:pointer; min-width:0; flex:1 1 auto; text-align:left}
.me-chip .who{display:flex; flex-direction:column; min-width:0; flex:1}
.me-chip b{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.me-chip .lvl{font-size:12px; color:var(--soft)}
.xpbar{height:6px; border-radius:99px; background:var(--shade); overflow:hidden; margin-top:4px}
.xpbar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold2),var(--gold)); border-radius:99px; transition:width .8s ease}
.logo{font-family:var(--display); color:var(--gold); font-size:clamp(34px,10vw,56px); line-height:1; margin:6px 0 0; transform:rotate(-3deg); text-shadow:0 4px 0 var(--gold3), 0 10px 30px rgba(255,160,40,.35); text-align:center}
.logo small{display:block; font-family:var(--body); font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); text-shadow:none; margin-top:10px}
.daily{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:linear-gradient(100deg, rgba(255,197,61,.22), rgba(240,140,26,.08)); border:1.5px solid var(--gold)}
.daily.done{background:var(--glass); border-color:var(--line)}
.daily .chest{width:44px; height:44px; flex:0 0 auto}
.daily .txt{flex:1; min-width:0}
.daily .txt b{display:block}
.days{display:flex; gap:4px; margin-top:6px}
.days i{width:14px; height:6px; border-radius:3px; background:var(--shade)}
.days i.on{background:var(--gold)}
.opps{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(148px,44%); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; margin-inline:-2px}
@media (min-width:640px){ .opps{grid-auto-columns:176px} }
.ocard{scroll-snap-align:start; position:relative; border-radius:20px; padding:16px 12px 14px; background:linear-gradient(180deg, var(--glass), transparent 60%), var(--night2); border:2px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--paper); cursor:pointer; text-align:center}
.ocard.sel{border-color:var(--gold); box-shadow:0 0 0 4px rgba(255,197,61,.2), 0 12px 30px var(--shade)}
.ocard .ava{--s:84px}
.ocard b{font-size:16px}
.ocard .tag{font-size:12px; color:var(--soft); min-height:2.6em}
.stars{color:var(--gold); letter-spacing:2px; font-size:14px}
.stars .off{color:var(--night3)}
.rec{font:500 12px var(--num); color:var(--soft); font-variant-numeric:tabular-nums}
.lockveil{position:absolute; inset:0; border-radius:18px; background:linear-gradient(180deg, rgba(6,12,40,.55) 0%, rgba(6,12,40,.95) 45%); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:16px!important; gap:8px; padding:10px; font-size:13px}
.btn.solid svg.i{color:var(--gold3)}
.lockveil .btn{padding:6px 12px; font-size:13px}
.cta{font-family:var(--display); font-weight:400; font-size:clamp(20px,5.5vw,26px); padding:16px 18px; border-radius:20px; border:none; background:linear-gradient(180deg,var(--gold),var(--gold2)); color:var(--ink); box-shadow:0 6px 0 var(--gold3), 0 14px 34px rgba(255,160,40,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; animation:ctaglow 2.6s ease-in-out infinite}
.cta:active{transform:translateY(3px); box-shadow:0 3px 0 var(--gold3)}
.cta .ava{--s:40px}
@keyframes ctaglow{50%{box-shadow:0 6px 0 var(--gold3), 0 14px 44px rgba(255,160,40,.6)}}
.linkbtn{background:none; border:none; color:var(--soft); text-decoration:underline; cursor:pointer; font-size:14px; align-self:center}
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (min-width:640px){ .tiles{grid-template-columns:repeat(4,1fr)} }
.tile{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; border-radius:16px; background:var(--glass); border:1px solid var(--line); color:var(--paper); cursor:pointer; text-align:left}
.tile .ic{font-size:22px; color:var(--gold)}
.tile b{font-size:15px}
.tile span{font-size:12px; color:var(--soft)}
.foot{font-size:12px; color:var(--soft); text-align:center; font-variant-numeric:tabular-nums}

/* ---------- GAME ---------- */
.gbar{display:flex; align-items:center; gap:10px}
.back{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:99px; border:1px solid var(--line); background:var(--glass); color:var(--paper); cursor:pointer; font-weight:600}
.match{margin-left:auto; display:flex; align-items:baseline; gap:8px}
.mlabel{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}
.mscore{font:700 24px var(--num); font-variant-numeric:tabular-nums}
.mscore em{font-style:normal; color:var(--gold); padding-inline:3px}
.oppseat{display:flex; align-items:center; justify-content:center; gap:12px; position:relative; min-height:64px}
.oppseat .ava{--s:60px}
.info{display:flex; flex-direction:column; gap:2px; min-width:0}
.info b{font-size:15px}
.pill{display:inline-flex; align-items:baseline; gap:8px; font-size:12px; color:var(--soft)}
.pill .pn{font:700 22px var(--num); color:var(--paper); font-variant-numeric:tabular-nums; line-height:1}
.pill .note{color:var(--gold)}
.bubble{position:absolute; left:calc(50% + 70px); top:-4px; max-width:min(46vw,220px); padding:8px 12px; border-radius:14px 14px 14px 4px; background:var(--paper); color:var(--ink); font-weight:600; font-size:14px; box-shadow:0 8px 20px var(--shade); z-index:30; animation:pop .25s cubic-bezier(.2,1.4,.4,1)}
@media (max-width:520px){ .bubble{left:auto; right:0; top:-14px} }
@keyframes pop{from{transform:scale(.6); opacity:0}}

/* cards */
.card{--w:var(--cw); width:var(--w); height:calc(var(--w)*1.4); border-radius:calc(var(--w)*.1); background:radial-gradient(ellipse at 50% 40%, #fbf4de 0%, #f1e3bf 72%, #e2cd9b 100%); border:1px solid #bf9f63; box-shadow:inset 0 0 0 calc(var(--w)*.035) #fbf3dc, inset 0 0 0 calc(var(--w)*.045) rgba(122,84,36,.5), 0 1px 0 rgba(0,0,0,.08), 0 6px 14px var(--shade); padding:0; box-sizing:border-box; position:relative; color:#211c18; transition:transform .18s ease, translate .18s ease, filter .18s; flex:0 0 auto}
.card.s0{color:#2e5a3c} .card.s1{color:#b0521c} .card.s2{color:#9c1f27} .card.s3{color:#211c18}
.two .card.s0,.two .card.s3{color:#211c18} .two .card.s1,.two .card.s2{color:#9c1f27}
.card .idx{position:absolute; top:calc(var(--w)*.05); left:calc(var(--w)*.07); display:flex; flex-direction:column; align-items:center; line-height:.9}
.card .idx b{font-family:var(--vint); font-weight:700; font-size:calc(var(--w)*.28); letter-spacing:-.03em}
.card .idx i{font-style:normal; font-size:calc(var(--w)*.2)}
.card .idx.br{top:auto; left:auto; bottom:calc(var(--w)*.05); right:calc(var(--w)*.07); transform:rotate(180deg)}
.card .pip{position:absolute; inset:0; display:grid; place-items:center; font-size:calc(var(--w)*.5)}
.card .pip.ace{font-size:calc(var(--w)*.78)}
.card .face{position:absolute; inset:17% 19%; border-radius:calc(var(--w)*.04); background:repeating-linear-gradient(135deg, rgba(122,84,36,.08) 0 2px, transparent 2px 5px), #f6eacb; border:max(3px,calc(var(--w)*.035)) double currentColor; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--vint); font-weight:700; font-size:calc(var(--w)*.4); line-height:1}
.card .face span{color:currentColor}
.card .face i{font-style:normal; font-size:.55em}
.card .pip{font-family:var(--vint)}
.card .pip.ace{background:radial-gradient(circle, transparent 25%, rgba(122,84,36,.45) 25.6%, transparent 27%, transparent 29.5%, rgba(122,84,36,.3) 30%, transparent 31.5%)}
.card.mark::after{content:''; position:absolute; top:calc(var(--w)*.06); right:calc(var(--w)*.07); width:calc(var(--w)*.13); height:calc(var(--w)*.13); border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px var(--ink)}
.card .mbadge{position:absolute; left:50%; bottom:calc(var(--w)*-.12); transform:translateX(-50%); padding:1px 8px; border-radius:99px; background:var(--gold); color:var(--ink); font:700 calc(var(--w)*.17) var(--num); box-shadow:0 2px 6px var(--shade)}
.card.back{background:var(--back); border:calc(var(--w)*.05) solid #f1e3bf; box-shadow:inset 0 0 0 1.5px #c9a35a, 0 6px 14px var(--shade)}
button.card{cursor:default}
button.card.playable{cursor:pointer}
button.card.playable:hover, button.card.playable:focus-visible{translate:0 -20px}
button.card.lifted{translate:0 -26px; box-shadow:0 0 0 4px var(--gold), 0 10px 18px var(--shade)}
button.card:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.card.dim{filter:brightness(.6) saturate(.5)}
.fan{position:relative; width:100%}
.fan .card{position:absolute; left:50%; transform:translateX(calc(-50% + var(--x,0px))) translateY(var(--y,0px)) rotate(var(--a,0deg))}
.hand{height:calc(var(--cw)*1.4 + 34px)}
.hand .card{bottom:10px; transform-origin:50% 100%}
.opp{height:calc(var(--cw)*.5*1.4 + 20px)}
.opp .card{--w:calc(var(--cw)*.5); top:10px; transform-origin:50% 0}

.table{position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(14px,6vw,56px); padding:18px 20px; min-height:calc(var(--cw)*1.4*1.5); border-radius:130px; background:radial-gradient(ellipse at 50% 38%, var(--felt) 0%, var(--felt-deep) 85%); box-shadow:0 0 0 7px var(--rim), 0 0 0 9px var(--gold), 0 20px 44px var(--shade), inset 0 0 60px rgba(0,0,0,.4); margin:6px 6px}
.talon{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px}
.deck{position:relative; width:calc(var(--cw)*.74*1.4 + 4px); height:calc(var(--cw)*.74*1.4)}
.deck .card{--w:calc(var(--cw)*.74); position:absolute; top:0}
.deck .trump{left:calc(var(--cw)*.3); transform:rotate(90deg)}
.deck .stack{left:0; box-shadow:3px 3px 0 var(--paper), 6px 6px 0 var(--felt-deep), 0 8px 16px var(--shade)}
.deck .count{position:absolute; left:calc(var(--cw)*.37 - 15px); top:calc(var(--cw)*.74*.7 - 15px); width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--ink); display:grid; place-items:center; font:700 15px var(--num); z-index:3}
.deck .shut{position:absolute; inset:auto 0 -4px; text-align:center; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold)}
.trumpchip{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); line-height:1.2}
.trumpchip .ts{width:32px; height:32px; border-radius:50%; background:var(--paper); display:grid; place-items:center; font-size:19px}
.ts.s0{color:var(--clubs)} .ts.s1{color:var(--diamonds)} .ts.s2{color:var(--hearts)} .ts.s3{color:var(--spades)}
.two .ts.s0,.two .ts.s3{color:var(--spades)} .two .ts.s1,.two .ts.s2{color:var(--hearts)}
.trick{position:relative; width:calc(var(--cw)*1.9); height:calc(var(--cw)*1.4*1.45); transition:transform .3s ease-in, opacity .3s ease-in}

.trick .card{position:absolute; left:50%}
.trick .t1{top:0; transform:translateX(-80%) rotate(-10deg)}
.trick .t0{bottom:0; transform:translateX(-20%) rotate(8deg)}
.float{position:absolute; left:50%; top:45%; font:700 26px var(--num); color:var(--gold); text-shadow:0 2px 0 var(--ink); pointer-events:none; z-index:15; animation:float0 1s ease-out forwards}
.float.up{animation-name:float1}
@keyframes float0{from{transform:translate(-50%,0); opacity:1} to{transform:translate(-50%,90px); opacity:0}}
@keyframes float1{from{transform:translate(-50%,0); opacity:1} to{transform:translate(-50%,-110px); opacity:0}}
.enter-0{animation:in0 .3s cubic-bezier(.2,.8,.3,1)}
.enter-1{animation:in1 .3s cubic-bezier(.2,.8,.3,1)}
.drawn{animation:draw .45s cubic-bezier(.2,.8,.3,1)}
@keyframes in0{from{translate:0 120%; opacity:.2}}
@keyframes in1{from{translate:0 -120%; opacity:.2}}
@keyframes draw{from{translate:-40vw -30vh; opacity:0}}
.msg{align-self:center; text-align:center; min-height:1.4em; max-width:46ch; padding:8px 16px; border-radius:14px; background:var(--shade); font-size:15px; text-wrap:balance}
.msg:empty{visibility:hidden}
.msg b{color:var(--gold)}
.msg .tip{display:block; font-size:13px; color:var(--soft); margin-top:2px}
.meseat{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px}
.meseat .ava{--s:46px}
.acts{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}

.overlay{position:absolute; inset:-10px -8px; display:grid; place-items:center; background:var(--veil); border-radius:40px; z-index:20; padding:16px; animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.panel{text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; max-width:38ch}
.panel h2{font-family:var(--display); font-weight:400; font-size:clamp(22px,6vw,34px); line-height:1.1; margin:0; color:var(--gold); transform:rotate(-2deg); text-wrap:balance}
.panel p{margin:0}
.panel .sub{color:var(--soft); font-size:14px}
.rw{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.rw span{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; background:var(--glass); font:700 16px var(--num); color:var(--gold)}
.rw span.xp{color:var(--good)}
.panel .xpbar{width:200px}
.panel .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

/* modal */
.modal{position:fixed; inset:0; background:var(--veil); z-index:50; display:grid; place-items:center; padding:16px; animation:fade .2s ease}
.sheet{position:relative; width:100%; max-width:560px; max-height:88vh; overflow:auto; box-sizing:border-box; border-radius:22px; background:var(--night2); border:1px solid var(--line); padding:20px; box-shadow:0 30px 80px var(--shade)}
.sheet h3{font-family:var(--display); font-weight:400; font-size:22px; margin:0 40px 12px 0; color:var(--gold)}
.sheet h4{margin:14px 0 8px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.x{position:absolute; top:12px; right:12px}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{min-width:36px; height:36px; padding:0 12px; border-radius:99px; border:2px solid var(--line); background:var(--glass); color:var(--paper); cursor:pointer; font-size:13px}
.opt.sw{padding:0; width:36px; border-radius:50%}
.opt.on{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,197,61,.25)}
.prof-top{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.prof-top .ava{--s:96px}
.field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:160px}
.field input{font:500 16px var(--body); padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--night); color:var(--paper)}
.field input:focus-visible{outline:2px solid var(--gold)}
.items{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px}
.item{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px; border-radius:14px; background:var(--glass); border:2px solid var(--line); color:var(--paper); cursor:pointer; font-size:13px}
.item.on{border-color:var(--gold)}
.item .card{--w:46px}
.item .felt{width:64px; height:40px; border-radius:20px; box-shadow:0 0 0 3px var(--rim), 0 0 0 4px var(--gold)}
.item .price{display:inline-flex; align-items:center; gap:4px; font:700 13px var(--num); color:var(--gold)}
.achs{display:grid; gap:8px}
.ach{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:var(--glass); border:1px solid var(--line)}
.ach .medal{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--night3); color:var(--soft); font-size:18px; flex:0 0 auto}
.ach.got .medal{background:linear-gradient(180deg,var(--gold),var(--gold2)); color:var(--ink)}
.ach .t{flex:1; min-width:0}
.ach .t b{display:block}
.ach .t span{font-size:13px; color:var(--soft)}
.sheet ul{padding-left:18px; display:grid; gap:6px; color:var(--soft); margin:0}
.toasts{position:fixed; top:12px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:70; width:min(92vw,380px); pointer-events:none}
.toast{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:0 12px 30px var(--shade); animation:pop .3s cubic-bezier(.2,1.4,.4,1); font-size:14px}
.toast .ic{width:32px; height:32px; border-radius:50%; background:linear-gradient(180deg,var(--gold),var(--gold2)); display:grid; place-items:center; flex:0 0 auto}
#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60}
@media (max-width:480px){ .table{gap:12px; padding:14px 12px; border-radius:90px} .pill .pn{font-size:20px} }
/* ---------- GAME SWITCH ---------- */
.gsw{display:flex; align-self:center; gap:4px; padding:4px; border-radius:99px; background:var(--glass); border:1px solid var(--line)}
.gsw button{font:700 15px var(--body); padding:8px clamp(12px,4vw,22px); border-radius:99px; border:0; background:transparent; color:var(--soft); cursor:pointer}
.gsw button.on{background:linear-gradient(180deg,var(--gold),var(--gold2)); color:var(--ink); box-shadow:0 2px 0 var(--gold3)}
.gsw button:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.lbpart{display:flex; flex-direction:column; gap:12px}
.opt:disabled{opacity:.45; cursor:not-allowed}
.opt .soon{margin-left:6px; padding:1px 7px; border-radius:99px; background:var(--night3); color:var(--gold); font:700 11px var(--num); letter-spacing:.06em; text-transform:uppercase}
.modes .opt{height:40px; font-size:14px}