/* MIXBAR · 酒桌游戏样式（个人版与酒吧版共用）
 * 颜色取各自的设计变量：酒吧版用 --accent / --bg-2 / --hair，个人版用 --gold / --card / --line */
.g-wrap{
  --g-acc:var(--accent, var(--gold)); --g-on:var(--on-gold, #fff); --g-hot:var(--red, var(--accent));
  --g-card:var(--bg-2, var(--card)); --g-card2:var(--bg-3, var(--surface-2, rgba(255,255,255,.08)));
  --g-line:var(--hair, var(--line)); --g-ok:var(--ok, var(--green));
  display:flex;flex-direction:column;gap:16px;padding:8px 0 24px;color:var(--text);text-wrap:pretty}
.g-wrap h2{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
.g-wrap p{margin:0;color:var(--text-2);line-height:1.55}
.g-fine{font-size:12px;color:var(--text-3)}
.g-foot{text-align:center;margin-top:8px}
.g-center{text-align:center;align-items:center}
.g-card-box{display:flex;flex-direction:column;gap:14px;padding:26px 22px;border-radius:20px;background:var(--g-card)}
.g-card-box input,.g-names input{width:100%;height:46px;border-radius:12px;border:none;padding:0 14px;font:inherit;font-size:16px;color:var(--text);background:var(--g-card2);box-shadow:inset 0 0 0 1px var(--g-line)}
.g-emoji{font-size:44px;line-height:1}
.g-head{display:flex;flex-direction:column;gap:6px}
.g-row{display:flex;flex-wrap:wrap;gap:10px}
.g-btn{flex:1 1 auto;min-height:46px;padding:0 20px;border:none;border-radius:980px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  color:var(--g-on);background:var(--g-acc);transition:transform .2s,opacity .2s}
.g-btn:active{transform:scale(.97)}
.g-btn:disabled{opacity:.35;cursor:default}
.g-btn.ghost{color:var(--text);background:var(--g-card2);box-shadow:inset 0 0 0 1px var(--g-line)}
.g-btn.hot{color:#fff;background:var(--g-hot)}
.g-btn.sm{flex:0 0 auto;min-height:36px;font-size:14px;padding:0 16px}
.g-link{align-self:center;background:none;border:none;font:inherit;font-size:14px;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
.g-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.g-bar b{font-size:20px;font-weight:700}
.g-bar span{font-size:14px;color:var(--text-3)}
.g-seats{display:flex;flex-wrap:wrap;gap:8px}
.g-seat{display:inline-flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:12px;background:var(--g-card);font-size:14px;font-weight:600;transition:box-shadow .3s}
.g-seat i{font-style:normal;font-size:11px;font-weight:500;color:var(--g-acc);margin-left:6px}
.g-seat small{font-size:12px;font-weight:400;color:var(--text-3)}
.g-seat.turn{box-shadow:inset 0 0 0 2px var(--g-acc)}
.g-seat.off{opacity:.45}
.g-games{display:grid;gap:12px}
.g-game{display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;border-radius:16px;background:var(--g-card)}
.g-game-h{display:flex;justify-content:space-between;align-items:baseline}
.g-game-h b{font-size:18px}
.g-game-h span{font-size:12px;color:var(--text-3)}
.g-game p{font-size:14px}
.g-game .g-btn{align-self:flex-start}
.g-now{font-size:15px;color:var(--text-2);text-align:center}
.g-now b{color:var(--text)}
.g-now em{font-style:normal;font-weight:700;color:var(--g-acc)}
.g-wait{text-align:center;font-size:15px;color:var(--text-2);padding:10px 0}
.g-my{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--g-card)}
.g-my > span{font-size:13px;color:var(--text-3)}
.g-dice{display:flex;flex-wrap:wrap;gap:6px}
.g-dice.big{gap:10px;justify-content:center}
.g-die{width:30px;height:30px;flex:none}
.g-dice.big .g-die{width:48px;height:48px}
.g-die rect{fill:#f5f1e8;stroke:rgba(0,0,0,.15)}
.g-die circle{fill:#1a1a1a}
.g-die.one circle{fill:#d0262f}
.g-die.on rect{fill:var(--g-acc)}
.g-die.on circle{fill:#fff}
.g-reveal{display:grid;gap:8px}
.g-reveal > div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--g-card);font-size:14px;font-weight:600}
.g-pick{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:var(--g-card)}
.g-step{display:flex;align-items:center;justify-content:center;gap:14px}
.g-step button{width:44px;height:44px;border-radius:50%;border:none;font-size:22px;color:var(--text);background:var(--g-card2);cursor:pointer}
.g-step b{font-size:34px;font-variant-numeric:tabular-nums;min-width:48px;text-align:center}
.g-step span{font-size:15px;color:var(--text-2);margin-left:-8px}
.g-faces{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.g-faces button{display:grid;place-items:center;padding:6px 0;border:none;border-radius:12px;background:var(--g-card2);cursor:pointer}
.g-faces button.on{box-shadow:inset 0 0 0 2px var(--g-acc)}
.g-faces button:disabled{opacity:.25}
.g-faces .g-die{width:34px;height:34px}
.g-target{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:16px;background:var(--g-card)}
.g-target span,.g-target small{font-size:12px;color:var(--text-3)}
.g-target b{font-size:44px;font-weight:800;color:var(--g-acc);line-height:1.1}
.g-hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.g-pc{width:52px;height:72px;display:grid;place-items:center;border:none;border-radius:10px;font:inherit;font-size:24px;font-weight:800;color:#1a1a1a;background:#f5f1e8;
  box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;transition:transform .2s}
.g-pc.joker{color:#d0262f}
.g-pc.on{transform:translateY(-10px);box-shadow:0 0 0 3px var(--g-acc),0 8px 16px rgba(0,0,0,.3)}
.g-pc:disabled{cursor:default}
.g-pc.ok{background:#d9f2df}
.g-pc.bad{background:#f6d6d6}
.g-result{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:16px;background:var(--g-card);text-align:center}
.g-result b{font-size:18px}
.g-result em{font-style:normal;font-weight:700;color:var(--g-acc)}
.g-penalty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--g-acc) 22%,transparent),var(--g-card) 70%)}
.g-penalty span{font-size:13px;color:var(--text-2)}
.g-penalty b{font-size:19px;line-height:1.4}
.g-log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--text-3)}
.g-log b{color:var(--text-2);margin-right:6px}
.g-word{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;border-radius:16px;background:var(--g-card);cursor:pointer}
.g-word span{font-size:12px;color:var(--text-3)}
.g-word b{font-size:32px;font-weight:800;letter-spacing:.04em}
.g-bigword{font-size:40px;font-weight:800;color:var(--g-acc);padding:6px 0}
.g-order{margin:0;padding-left:1.4em;display:grid;gap:4px;font-size:15px}
.g-votes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-names{display:grid;gap:8px}
.g-names > div{display:flex;gap:8px;align-items:center}
@media (prefers-reduced-motion:reduce){ .g-pc,.g-btn{transition:none} }
.g-lose{font-size:17px;font-weight:600;color:var(--text)}