/* Whot, Ayo, stats, Ludo */
/* whot rules */
.fixed { margin:8px 0 0; padding:0; }
.fixed li { display:flex; gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); list-style:none; font-size:.95rem; }
.fixed b { flex:none; min-width:62px; font:800 1.35rem/1 var(--num); text-transform:uppercase; color:var(--accent-text); }
.rule { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.rule .t { flex:1; min-width:0; }
.rule .t b { display:block; font-weight:600; }
.rule .t span { color:var(--muted); font-size:.88rem; }
.tg { position:relative; flex:none; width:60px; height:44px; padding:0; border:0; background:none; cursor:pointer; }
.tg::before { content:""; position:absolute; left:4px; top:7px; width:52px; height:30px; border-radius:30px; background:var(--surface2); box-shadow:0 0 0 1px var(--line),var(--shadow); }
.tg::after { content:""; position:absolute; left:8px; top:11px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #00000040; transition:transform var(--t-mid) var(--ease-out); }
.tg[aria-checked=true]::before { background:var(--accent); box-shadow:none; }
.tg[aria-checked=true]::after { transform:translateX(22px); background:#fff; }
.rulebtn { margin-left:auto; flex:none; background:transparent; color:var(--muted); padding:6px 12px; min-height:44px; }

/* whot */
.whot .scores { display:flex; gap:6px 18px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.whot .scores span { padding:0 0 4px; border-bottom:2px solid transparent; font-size:.9rem; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whot .scores span.on { color:var(--text); font-weight:600; border-bottom-color:var(--accent); }
.piles { display:flex; justify-content:center; align-items:center; gap:20px; margin:20px 0 4px; }
.wc { position:relative; flex:none; width:68px; height:98px; padding:0; border:0; border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--text); display:grid; place-items:center; cursor:pointer; transition:transform var(--t-mid) var(--ease-out), opacity var(--t-mid); }
.wc.big { width:100px; height:144px; border-radius:10px; cursor:default; }
.wc svg { width:52%; height:auto; }
.wc .n { position:absolute; top:6px; left:8px; font:800 1.1rem/1 var(--num); }
.wc .n.b { top:auto; left:auto; bottom:6px; right:8px; transform:rotate(180deg); }
.wc.circle svg { color:#e5484d; } .wc.triangle svg { color:#e0a800; } .wc.cross svg { color:#3e63dd; } .wc.square svg { color:#30a46c; } .wc.star svg { color:#9b5de5; }
.wc.whot { background:#1d1d1f; color:#fff7ea; box-shadow:inset 0 0 0 2px var(--accent); }
.wc.whot b { font:800 .95rem/1 var(--num); letter-spacing:.12em; color:var(--accent); }
.wc.back { background:repeating-linear-gradient(135deg,var(--accent) 0 7px,color-mix(in srgb,var(--accent) 82%,var(--on-accent)) 7px 9px); color:var(--on-accent); box-shadow:inset 0 0 0 1.5px var(--text); font:800 1.5rem/1 var(--display); }
.wc.back small { position:absolute; bottom:8px; font:700 .62rem var(--sans); letter-spacing:.12em; }
.wc.can { box-shadow:inset 0 0 0 2px var(--accent),0 4px 0 var(--accent); transform:translateY(-8px); }
.wc.no { opacity:.4; cursor:default; }
button.wc:not(.big):not(.no):active { transform:scale(.96); }
.hand { display:flex; gap:8px; overflow-x:auto; padding:16px 4px 14px; margin:0 -4px; scroll-snap-type:x proximity; }
.hand .wc { scroll-snap-align:start; }
.need { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; margin-top:10px; }
.need svg { width:18px; height:18px; }
.need.circle svg { color:#e5484d; } .need.triangle svg { color:#e0a800; } .need.cross svg { color:#3e63dd; } .need.square svg { color:#30a46c; } .need.star svg { color:#9b5de5; }
.gate { margin-top:24px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; }
.gate b { display:block; font:800 clamp(2.4rem,11vw,3.4rem)/.92 var(--display);  overflow-wrap:anywhere; }
.gate p { color:var(--muted); margin:12px 0 22px; }
.shapes { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
.shapes button { min-height:64px; border:0; border-radius:8px; background:var(--surface2); display:grid; place-items:center; cursor:pointer; }
.shapes button svg { width:30px; height:30px; }
.shapes .circle svg { color:#e5484d; } .shapes .triangle svg { color:#e0a800; } .shapes .cross svg { color:#3e63dd; } .shapes .square svg { color:#30a46c; } .shapes .star svg { color:#9b5de5; }

/* ayo */
.ayo .store { display:flex; gap:24px; margin:12px 0 18px; }
.score { flex:1; min-width:0; padding:0 0 10px; border-bottom:2px solid var(--line); }
.score b { display:block; font:800 2.6rem/.95 var(--num); }
.score span { display:block; font-size:.88rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score.on { border-bottom-color:var(--accent); }
.apits { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.rowlbl { grid-column:1/-1; font-size:.88rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowlbl.on { color:var(--text); font-weight:600; }
.pit { position:relative; display:block; aspect-ratio:1; min-height:44px; padding:0; border-radius:50%; border:0; background:var(--surface2); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--text); cursor:default; transition:transform var(--t-mid) var(--ease-out); }
.pit.b { background:color-mix(in srgb,var(--surface2) 78%,var(--text) 10%); }
.pit .sd { position:absolute; width:15%; aspect-ratio:1; border-radius:50%; background:var(--text); opacity:.82; transform:translate(-50%,-50%); }
.pit .ct { position:absolute; right:9%; bottom:5%; font:700 .74rem var(--sans); color:var(--muted); }
.pit.can { cursor:pointer; box-shadow:inset 0 0 0 2px var(--accent); }
.pit.can:active { transform:scale(.95); }
.pit.hit { background:var(--accent); }
.pit.hit .sd { background:var(--on-accent); opacity:1; }
.pit.hit .ct { color:var(--on-accent); }
.pit:disabled { opacity:1; }
.pit.zero .ct { opacity:.45; }
.pit.cap { box-shadow:inset 0 0 0 2px var(--text); }
.gback { margin:8px 0 0 -8px; background:none; color:var(--muted); }
.pickrow { margin-top:20px; }

/* stats + leaderboard (Activity / Challenge patterns) */
.stat { display:flex; align-items:flex-end; gap:14px; margin:18px 0 6px; }
.stat b { font:800 clamp(5.5rem,30vw,8.5rem)/.78 var(--num); color:var(--accent-text); letter-spacing:-.01em; }
.stat span { padding-bottom:6px; color:var(--muted); font-size:.95rem; max-width:18ch; }
.lb { margin-top:24px; }
.lb h2 { font:800 1.6rem/1 var(--display);  margin-bottom:6px; }
.lb li { display:flex; align-items:center; gap:16px; min-height:56px; border-bottom:1px solid var(--line); list-style:none; }
.lb ol { margin:0; padding:0; }
.lb .rk { width:32px; font:800 1.8rem/1 var(--num); color:var(--muted); }
.lb li:first-child .rk { color:var(--accent-text); }
.lb .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.lb .ct { font:800 1.4rem/1 var(--num); }

/* play + ludo */
.games { display:grid; gap:0; margin-top:20px; border-bottom:1px solid var(--line); }
.game { display:flex; align-items:center; gap:16px; width:100%; min-height:84px; padding:16px 0; text-align:left; border:0; border-top:1px solid var(--line); border-radius:0; background:none; color:var(--text); cursor:pointer; }
.game:disabled { opacity:.5; cursor:default; }
.game .g { width:40px; flex:none; font:800 2rem/1 var(--num); color:var(--accent-text); }
.game b { display:block; font:800 1.6rem/1 var(--display);  }
.game .d { color:var(--muted); font-size:.9rem; }
.ask { margin-top:16px; padding:16px 0 0; border-top:1px solid var(--line); }
.ask p { font-weight:500; margin-top:6px; }
.ask .row { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-top:10px; }
.bar2 { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.turn { display:flex; align-items:center; gap:10px; min-width:0; }
.turn i { width:14px; height:14px; border-radius:50%; flex:none; }
.turn b { font:800 1.5rem/1 var(--display);  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.boardwrap { margin:12px 0; background:var(--surface); touch-action:manipulation; box-shadow:0 0 0 2px var(--text); }
.boardwrap svg { display:block; width:100%; height:auto; }
.dicebar { display:flex; align-items:center; gap:16px; }
.roll { width:88px; height:88px; flex:none; border-radius:12px; border:2px solid var(--text); background:var(--surface); color:var(--text); cursor:pointer; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:14px; gap:2px; }
.roll:disabled { background:var(--surface2); border-color:var(--line); color:var(--muted); cursor:default; }
.roll em { width:100%; aspect-ratio:1; border-radius:50%; background:currentColor; opacity:0; place-self:center; max-width:16px; }
.roll em.p { opacity:1; }
.roll .rl { grid-column:1/-1; grid-row:1/-1; place-self:center; font:800 1.2rem var(--display);  letter-spacing:.06em; }
.rollmsg { flex:1; font-weight:500; min-width:0; }
.rollmsg small { display:block; color:var(--muted); font-weight:400; font-size:.85rem; }
.tok { cursor:pointer; }
.tok .ring { fill:none; stroke:var(--text); stroke-width:.09; opacity:0; transform-box:fill-box; transform-origin:center; }
.tok.go .ring { opacity:.9; animation:ripple 1.1s var(--ease-out) infinite; }
.tok:focus-visible { outline:0; }
.tok:focus-visible .disc { stroke:var(--accent); stroke-width:.14; }
.win { text-align:center; padding:28px 20px; border-radius:var(--r-md); background:var(--accent); color:var(--on-accent); margin-top:12px; }
.win b { display:block; font:800 2.6rem/.98 var(--display); letter-spacing:-.02em;  overflow-wrap:anywhere; }
.win .btn { margin-top:16px; background:var(--ink); color:#fff7ea; }