/* ===== Games ===== */
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.ggrid{grid-template-columns:1fr}}
.gcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:28px;text-decoration:none;min-height:240px;color:var(--ink);background:var(--surface);border:1px solid var(--line);transition:transform .25s var(--bounce)}
.gcard:hover{transform:translateY(-4px) rotate(-.6deg)}
.gcard .ge{font-size:3.4rem;line-height:1;margin-bottom:auto;transition:transform .3s var(--bounce)}
.gcard:hover .ge{transform:scale(1.15) rotate(-8deg)}
.gcard h3{font-size:1.6rem}
.gcard p{color:var(--muted);font-size:.95rem}
.gcard .chips{margin-top:6px}
.g-wml{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.g-td{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.g-wml p,.g-td p{color:inherit;opacity:.82}
.g-wml .chip,.g-td .chip{background:rgba(255,255,255,.18);color:inherit}
.game{max-width:720px;padding-top:24px;padding-bottom:60px}
.ghead{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.gtitle{flex:1;text-align:center;font-family:Gloock,Georgia,serif;font-size:1.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sboard{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.pchip{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:var(--surface);border:1.5px solid var(--line);transition:transform .25s var(--bounce),border-color .2s,background-color .2s;min-width:0}
.pchip b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchip .pe{font-size:1.4rem}
.pchip .pts{font-family:Gloock,Georgia,serif;font-size:1.6rem;color:var(--accent);line-height:1}
.pchip.on{border-color:var(--accent);background:var(--soft);transform:scale(1.03)}
.gbody{display:grid;gap:18px}
.gacts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.gq{font-family:Gloock,Georgia,serif;font-size:clamp(1.8rem,5vw,2.4rem);text-align:center}
.gstatus{text-align:center;font-weight:700;font-size:1.1rem;min-height:1.6em;margin:4px 0 14px}
.hint.center{text-align:center;margin:-8px 0 10px}
.lvls{display:flex;flex-wrap:wrap;gap:6px}
.bottle-wrap{display:grid;justify-items:center;gap:16px;padding:6px 0}
.bname{padding:8px 16px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font-weight:700;transition:transform .3s var(--bounce),background-color .2s}
.bname.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:scale(1.08)}
.bottle{width:min(96px,24vw);aspect-ratio:60/200}
.bottle svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}
.tdcard{position:relative;border-radius:28px;padding:34px 26px 26px;text-align:center;display:grid;gap:14px;animation:flipIn .6s var(--bounce) both;min-height:220px;align-content:center}
.tdcard.truth{background:var(--accent);color:var(--accent-ink)}
.tdcard.dare{background:var(--ink);color:var(--surface)}
.tdcard p{font-family:Gloock,Georgia,serif;font-size:clamp(1.5rem,4.5vw,2.1rem);line-height:1.2}
.tdcard.mini{min-height:0;padding:22px;width:100%}
.tdcard.mini p{font-size:1.35rem}
.tdk{font-weight:700;opacity:.85}
.tdl{font-size:.85rem;opacity:.7;font-weight:600}
@keyframes flipIn{0%{opacity:0;transform:perspective(700px) rotateY(90deg) scale(.8)}100%{transform:none}}
.gend{text-align:center;display:grid;gap:12px;justify-items:center}
.gend h2{font-size:clamp(2rem,6vw,2.8rem)}
.gend .alist{width:100%;text-align:left}
.wprog{display:flex;justify-content:space-between;color:var(--muted);font-weight:600;font-size:.9rem;margin-bottom:12px}
.wml-k{color:var(--muted);font-weight:700}
.pass{text-align:center;display:grid;gap:12px;justify-items:center;padding:30px 10px}
.pass h2{font-size:clamp(1.8rem,5vw,2.4rem)}
.reveal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rvc{display:grid;justify-items:center;gap:6px;padding:20px 10px;border-radius:24px;background:var(--surface);border:1.5px solid var(--line);animation:flipIn .55s var(--bounce) both}
.rvc:nth-child(2){animation-delay:.35s}
.rvc .e{font-size:3rem;line-height:1}
.rvc small{color:var(--muted);font-weight:600}
.reveal.match .rvc{border-color:var(--accent);background:var(--soft)}
.rv-msg{text-align:center;font-family:Gloock,Georgia,serif;font-size:1.8rem;animation:popIn .4s var(--bounce) .7s both}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,420px);margin:0 auto 20px}
.cell{aspect-ratio:1;border-radius:22px;border:1.5px solid var(--line);background:var(--surface);font-size:clamp(2.6rem,12vw,4rem);cursor:pointer;display:grid;place-items:center;transition:transform .15s var(--bounce),border-color .2s,opacity .3s;padding:0}
.cell:not([disabled]):hover{border-color:var(--accent);transform:scale(1.04)}
.cell[disabled]{cursor:default;color:inherit}
.cell.just{animation:jelly .5s var(--bounce)}
.cell.win{background:var(--accent);border-color:var(--accent);animation:jelly .6s var(--bounce)}
.ttt.won .cell:not(.win){opacity:.4}
.lboard{position:relative;width:min(100%,520px);margin:0 auto 46px;aspect-ratio:1}
.lgrid6{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:4px;width:100%;height:100%}
.lc{position:relative;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:clamp(1rem,4vw,1.5rem)}
.lc.alt{background:var(--soft)}
.lc small{position:absolute;top:3px;left:5px;font-size:clamp(.55rem,1.8vw,.72rem);font-weight:700;color:var(--muted)}
.lc em{position:absolute;bottom:2px;right:4px;font-style:normal;font-size:clamp(.5rem,1.7vw,.68rem);font-weight:700;color:var(--muted)}
.lsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lad{stroke:var(--accent-2);stroke-width:7;stroke-linecap:round;stroke-dasharray:2 11;fill:none;vector-effect:non-scaling-stroke}
.snk{stroke:var(--accent);stroke-width:6;stroke-linecap:round;fill:none;opacity:.5;vector-effect:non-scaling-stroke}
.tok{position:absolute;width:13%;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(1.3rem,5.5vw,2.2rem);transform:translate(-50%,-50%);transition:left .16s var(--ease),top .16s var(--ease);filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));z-index:2}
.tok.hop{animation:hop .2s ease}
.tok.on{z-index:3}
@keyframes hop{50%{transform:translate(-50%,-85%) scale(1.15)}}
.ldock{display:grid;justify-items:center;gap:8px}
.dice{width:86px;height:86px;border-radius:24px;border:0;background:var(--accent);color:var(--accent-ink);font-size:3.6rem;line-height:1;cursor:pointer;box-shadow:0 10px 24px -10px rgb(var(--shadow) / .6);display:grid;place-items:center;transition:transform .2s var(--bounce);padding:0}
.dice:hover{transform:rotate(-8deg) scale(1.05)}
.dice[disabled]{opacity:.65;cursor:default}
.dice.rolling{animation:spin .35s linear infinite}