:root {
  --bg: #0f1220;
  --card: #1a1f33;
  --card2: #232a44;
  --line: #2f3758;
  --text: #eef1ff;
  --muted: #9aa3c7;
  --accent: #ffb703;
  --accent2: #fb8500;
  --ok: #2ecc71;
  --bad: #e74c3c;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif; }
body { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { margin: 0 0 12px; line-height: 1.25; }
h2 { font-size: 20px; }
h3 { font-size: 16px; margin-top: 16px; }
button { font: inherit; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; justify-content: center; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* ---------- 版面 ---------- */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(15, 18, 32, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top[hidden] { display: none; }
.brand { font-weight: 800; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
body.offline .conn { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.players { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- 元件 ---------- */
.btn { border: 1px solid var(--line); background: var(--card2); color: var(--text); padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: transform 0.08s, background 0.15s; touch-action: manipulation; }
.btn:hover:not(:disabled) { background: #2c3557; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #1a1200; border: none; font-weight: 700; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.big { padding: 14px 22px; font-size: 18px; width: 100%; margin-top: 12px; }
.row .btn.big { width: auto; }
.input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #11152a; color: var(--text); font-size: 16px; }
.input.big { font-size: 20px; padding: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.chip.me { border-color: var(--accent); }
.chip.off { opacity: 0.45; }
.chip.done { border-color: var(--ok); }
.chip-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.chip-btn.on { background: rgba(255, 183, 3, 0.15); border-color: var(--accent); color: var(--text); }
.chip-btn:disabled { cursor: default; }
.seg-group { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { flex: 1 1 auto; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #11152a; color: var(--muted); cursor: pointer; }
.seg.on { border-color: var(--accent); background: rgba(255, 183, 3, 0.15); color: var(--text); font-weight: 700; }
.seg:disabled { cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.field > span { font-size: 13px; color: var(--muted); }
.rule { background: #11152a; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.plist { display: flex; flex-direction: column; gap: 6px; }
.prow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #11152a; }
.prow.off { opacity: 0.5; }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err { color: var(--bad); min-height: 1.2em; margin-top: 8px; }
.tag { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--card2); color: var(--muted); }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--card2); color: var(--muted); font-size: 13px; }
.reveal { background: rgba(142, 202, 230, 0.12); border: 1px solid rgba(142, 202, 230, 0.4); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }

.join { max-width: 420px; width: 100%; margin: 10vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.join h1 { font-size: 30px; }

.hist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.hist li { padding: 8px 10px; border-radius: 10px; background: #11152a; }

.tbl { width: 100%; border-collapse: collapse; margin: 10px 0; }
.tbl th, .tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { color: var(--muted); font-weight: 500; font-size: 13px; }
.tbl tr.me td { background: rgba(255, 183, 3, 0.08); }
.tbl tr.picked td { background: rgba(231, 76, 60, 0.18); }

/* 遊戲庫 */
.lib { display: flex; flex-direction: column; gap: 10px; }
.lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lib-head h2 { margin: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.game-card { background: #11152a; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.gc-head { display: flex; align-items: center; gap: 6px; }
.gc-icon { font-size: 18px; }
.gc-desc { font-size: 13px; color: var(--muted); flex: 1; }
.gc-meta { font-size: 11px; color: #6f789e; }
.gc-actions { display: flex; gap: 6px; }

/* 各階段 */
.intro { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 32px 18px; }
.intro-cat { font-size: 18px; color: var(--accent); }
.intro-name { font-size: 40px; margin: 0; }
.intro-desc { font-size: 18px; max-width: 560px; margin: 0; }
.countdown { font-size: 72px; font-weight: 900; color: var(--accent); min-height: 90px; }
.play-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.play-head h2 { margin: 0; }
.play-head details { max-width: 50%; font-size: 13px; color: var(--muted); }
.play-head summary { cursor: pointer; }
.status-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.wait { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.wait-title { font-size: 26px; font-weight: 800; }
.wait-text { font-size: 22px; color: var(--accent); }
.final { text-align: center; }
.final h1 { font-size: 30px; margin-top: 8px; }
.final .tbl td { text-align: center; }
.final-stage { min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; margin: 10px 0 20px; }
.roll { font-size: 46px; font-weight: 900; color: var(--muted); }
.picked { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.picked-name { font-size: 40px; font-weight: 900; padding: 12px 22px; border-radius: 16px; background: linear-gradient(135deg, #e74c3c, #fb8500); animation: pop 0.5s ease-out; }
.picked-name.me { outline: 4px solid #fff; }
.picked-me { font-size: 20px; }

/* 視窗 */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 7, 15, 0.75); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.modal-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; width: 100%; max-width: 560px; }
.modal-box.wide { max-width: 1000px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--card2); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.toast.err { border-color: var(--bad); }

/* ---------- 遊戲共用 ---------- */
.game-root { min-height: 320px; }
.g-stage, .g-sub { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.g-stage { max-width: 560px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.g-msg { text-align: center; color: var(--muted); font-size: 15px; min-height: 1.3em; }
.g-big { font-size: 48px; font-weight: 900; text-align: center; min-height: 60px; font-variant-numeric: tabular-nums; }
.g-qtext { font-size: 26px; font-weight: 700; text-align: center; min-height: 40px; }
.g-btn { border: 1px solid var(--line); background: var(--card2); color: var(--text); padding: 12px 18px; border-radius: 12px; cursor: pointer; font-size: 18px; touch-action: manipulation; }
.g-btn:active:not(:disabled) { transform: scale(0.96); }
.g-btn:disabled { opacity: 0.5; }
.g-btn.sel, .g-cell.sel { border-color: var(--accent); background: rgba(255, 183, 3, 0.25); }
.g-btn-huge { width: 100%; max-width: 360px; padding: 26px; font-size: 26px; font-weight: 800; background: linear-gradient(135deg, #3a86ff, #8338ec); border: none; }
.g-btn-huge.g-active { background: linear-gradient(135deg, #ff006e, #fb5607); }
.g-row { display: flex; gap: 10px; width: 100%; justify-content: center; align-items: center; }
.g-row .g-btn-huge { flex: 1; }
.g-input { flex: 1; max-width: 260px; min-width: 0; padding: 12px; font-size: 20px; border-radius: 12px; border: 1px solid var(--line); background: #11152a; color: var(--text); text-align: center; }
.g-input-wide { max-width: 360px; width: 100%; flex: none; }
.g-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; width: 100%; }
.g-choices-big .g-choice { padding: 22px 10px; font-size: 22px; }
.g-choices-3 { grid-template-columns: repeat(3, 1fr); }
.g-choices-4 { grid-template-columns: repeat(4, 1fr); }
.g-choices-3 .g-choice, .g-choices-4 .g-choice { font-size: 28px; padding: 18px 4px; }
.g-numgrid { grid-template-columns: repeat(5, 1fr); }
.g-numgrid .g-choice { min-width: 0; padding: 12px 0; }
.g-timer { position: relative; width: 100%; height: 22px; border-radius: 999px; background: #11152a; overflow: hidden; border: 1px solid var(--line); flex: none; }
.g-timer-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.g-timer-label { position: relative; display: block; text-align: center; font-size: 13px; line-height: 20px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.g-pad { width: 100%; height: 300px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 900; color: #fff; cursor: pointer; touch-action: none; transition: background 0.05s; }
.g-shake { animation: shake 0.35s; }
.g-pop { animation: pop 0.25s; }
.g-miss { animation: miss 0.3s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes miss { 0% { box-shadow: inset 0 0 0 4px var(--bad); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

/* 游標 */
.g-bar-track { position: relative; width: 100%; height: 64px; border-radius: 12px; background: #11152a; border: 1px solid var(--line); touch-action: none; }
.g-bar-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--ok); }
.g-bar-cursor { position: absolute; top: 6px; bottom: 6px; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
/* 節拍 */
.g-beat { width: 90px; height: 90px; border-radius: 50%; background: var(--card2); border: 3px solid var(--line); }
.g-beat-on { animation: beat 0.3s; }
@keyframes beat { 0% { background: var(--accent); transform: scale(1.2); } 100% { background: var(--card2); transform: scale(1); } }
/* 線段 */
.g-line-zone { position: relative; width: 100%; height: 90px; touch-action: none; cursor: crosshair; }
.g-line { position: absolute; top: 40px; height: 8px; border-radius: 4px; background: var(--text); }
.g-mark { position: absolute; top: -18px; width: 4px; height: 44px; margin-left: -2px; background: var(--accent); border-radius: 2px; }
.g-mark.ok { background: var(--ok); }
/* SVG / canvas */
.g-svg { width: 100%; max-width: 280px; display: block; }
.g-svgwrap { width: 100%; max-width: 280px; touch-action: none; cursor: grab; border-radius: 50%; background: #11152a; }
.g-canvas { width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: 14px; background: #141826; border: 1px solid var(--line); touch-action: none; }
.g-canvas-wide { aspect-ratio: 16 / 10; max-width: 520px; }
.g-canvas-tall { aspect-ratio: 300 / 420; max-width: 320px; }
.g-swatch { width: 160px; height: 120px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; border: 1px solid var(--line); }
.g-swatch.sm { width: 110px; height: 80px; font-size: 15px; text-shadow: 0 1px 3px #000; }
.g-range { width: 100%; max-width: 360px; height: 34px; }
.g-hue { -webkit-appearance: none; appearance: none; border-radius: 999px; background: linear-gradient(90deg, hsl(0, 80%, 55%), hsl(60, 80%, 55%), hsl(120, 80%, 55%), hsl(180, 80%, 55%), hsl(240, 80%, 55%), hsl(300, 80%, 55%), hsl(359, 80%, 55%)); }
.g-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid #000; }
.g-hue::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #000; }
/* 格子 */
.g-grid { display: grid; gap: 6px; width: 100%; max-width: 420px; }
.g-cell { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--text); cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; padding: 0; touch-action: manipulation; min-width: 0; }
.g-cell.on { background: var(--accent); }
.g-cell.ok { background: var(--ok); }
.g-cell.bad { background: var(--bad); }
.g-num.ok { background: #11152a; color: #3d4566; }
.g-card { font-size: 30px; }
.g-card.open { background: #2c3557; }
.g-card.ok { background: rgba(46, 204, 113, 0.3); }
.g-char { font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", serif; }
.g-count .g-cell { cursor: default; font-size: 20px; }
.g-simon-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 320px; }
.g-simon { aspect-ratio: 1; border-radius: 20px; border: none; opacity: 0.35; cursor: pointer; transition: opacity 0.08s; touch-action: manipulation; }
.g-simon.on { opacity: 1; box-shadow: 0 0 24px #fff; }
.g-emoji-show { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 48px; padding: 20px 0; }
.g-mole { max-width: 340px; }
.g-hole { background: #3b2a1a; border-color: #5a3d22; font-size: 42px; }
.g-hole.up { background: #6b4a2b; }
.g-hole.bomb { background: #5a1f1f; }
.g-aim { position: relative; width: 100%; height: 340px; border-radius: 14px; background: #11152a; border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.g-target { position: absolute; border-radius: 50%; border: none; cursor: pointer; background: radial-gradient(circle, #fff 0 20%, #e63946 21% 45%, #fff 46% 62%, #e63946 63%); padding: 0; }
.g-arrow { font-size: 96px; }
.g-dpad { display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px); gap: 6px; }
.g-dbtn { font-size: 30px; padding: 0; }
.g-d0 { grid-area: 1 / 2; }
.g-d1 { grid-area: 2 / 3; }
.g-d2 { grid-area: 3 / 2; }
.g-d3 { grid-area: 2 / 1; }
.g-stroop { font-size: 64px; font-weight: 900; }
.g-luck { font-size: 56px; min-height: 80px; }
.g-playcard { display: inline-block; min-width: 70px; padding: 12px 10px; margin: 0 4px; border-radius: 10px; background: #fff; color: #111; font-size: 34px; font-weight: 800; }
.g-playcard.red { color: #d62828; }
.g-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.g-balloon { height: 220px; display: flex; align-items: flex-end; justify-content: center; line-height: 1; transition: font-size 0.05s; }

@media (max-width: 560px) {
  .top { flex-wrap: wrap; }
  .players { order: 3; flex-basis: 100%; }
  .intro-name { font-size: 30px; }
  .g-pad { height: 240px; }
  .play-head { flex-direction: column; }
  .play-head details { max-width: 100%; }
  .picked-name { font-size: 30px; }
}

/* 多元玩法 */
.g-choices-5 { grid-template-columns: repeat(5, 1fr); }
.g-choices-5 .g-choice { font-size: 30px; padding: 14px 0; }
.g-track { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.g-lane { position: relative; height: 50px; border-radius: 10px; background: repeating-linear-gradient(90deg, #1b3a24 0 40px, #1f4229 40px 80px); border: 1px solid var(--line); overflow: hidden; }
.g-lane.mine { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.g-lane-no { position: absolute; left: 4px; top: 2px; font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.g-finish-line { position: absolute; right: 22px; top: 0; bottom: 0; width: 8px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 8px 8px; opacity: 0.85; }
.g-runner { position: absolute; left: 0; top: 6px; line-height: 1; }
.g-runner-body { display: inline-block; font-size: 34px; transform: scaleX(-1); }
.g-runner.running .g-runner-body { animation: gallop 0.26s ease-in-out infinite; }
@keyframes gallop { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(0); } 50% { transform: scaleX(-1) translateY(-8px) rotate(10deg); } }
.g-runner.running::before { content: "💨"; position: absolute; left: -20px; top: 14px; font-size: 16px; animation: dust 0.26s linear infinite; }
@keyframes dust { 0% { opacity: 0.9; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-12px); } }
.g-lane-tag { position: absolute; right: 2px; top: 12px; font-size: 22px; font-weight: 900; }
.g-race-comment { min-height: 34px; font-size: 24px; font-weight: 900; color: var(--accent); text-align: center; }
.g-plinko { position: relative; width: 100%; max-width: 420px; height: 260px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle, #3d4566 2px, transparent 3px) 0 0 / 11.11% 30px, #11152a; overflow: hidden; }
.g-ball { position: absolute; transform: translate(-50%, 0); font-size: 22px; transition: left 0.16s, top 0.16s; }
.g-slots { position: absolute; left: 0; right: 0; bottom: 0; display: grid; }
.g-slots span { text-align: center; padding: 8px 0; font-size: 13px; font-weight: 700; border-left: 1px solid var(--line); background: #1b2140; }
.g-board .g-tile { aspect-ratio: auto; padding: 10px 0; font-size: 15px; font-weight: 700; cursor: default; }
.g-tile.pos { color: var(--ok); }
.g-tile.neg { color: var(--bad); }
.g-tile.here { outline: 3px solid var(--accent); background: rgba(255, 183, 3, 0.25); }
.g-egg { width: 200px; height: 160px; border-radius: 50% 45% 55% 48%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px #2b2b2b, 0 0 0 14px #444; margin: 16px 0; }
.g-yolk { width: 64px; height: 64px; border-radius: 50%; background: #ffb703; box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.12); }

/* 開獎動畫 */
.g-luckstage { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.g-luck-result { min-height: 60px; color: var(--accent); }
.g-land { animation: land 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes land { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.g-dice { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.g-die { width: 64px; height: 64px; border-radius: 14px; background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); padding: 9px; gap: 2px; box-shadow: 0 6px 0 #c9c9c9, 0 8px 16px rgba(0, 0, 0, 0.4); }
.g-die span { border-radius: 50%; }
.g-die span.pip { background: #222; }
.g-die.rolling { animation: tumble 0.35s linear infinite; }
@keyframes tumble { 0% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-18px) rotate(90deg); } 50% { transform: translateY(0) rotate(180deg); } 75% { transform: translateY(-10px) rotate(270deg); } 100% { transform: translateY(0) rotate(360deg); } }
.g-flip { width: 120px; height: 168px; perspective: 800px; }
.g-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.9s cubic-bezier(0.3, 1.4, 0.5, 1); transform-style: preserve-3d; }
.g-flip.flipped .g-flip-inner { transform: rotateY(180deg); }
.g-flip-back, .g-flip-front { position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.g-flip-back { background: repeating-linear-gradient(45deg, #8338ec 0 10px, #3a86ff 10px 20px); font-size: 0; border: 4px solid #fff; }
.g-flip-front { background: #fff; color: #111; font-size: 40px; font-weight: 900; transform: rotateY(180deg); }
.g-flip-front.red { color: #d62828; }
.g-flip.shuffling { animation: shuffle 0.3s ease-in-out infinite; }
@keyframes shuffle { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-14px) rotate(-6deg); } 75% { transform: translateX(14px) rotate(6deg); } }
.g-reels { display: flex; gap: 8px; padding: 12px; border-radius: 16px; background: linear-gradient(#5a1f1f, #2b0d0d); border: 4px solid #ffd166; }
.g-reel { width: 78px; height: 90px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; }
.g-reel.spin { filter: blur(2px); animation: reel 0.12s linear infinite; }
@keyframes reel { 0% { transform: translateY(-14px); } 100% { transform: translateY(14px); } }
.g-reel.tease { box-shadow: 0 0 0 4px #ff006e, 0 0 24px #ff006e; }
.g-tease { color: #ff006e; font-weight: 900; font-size: 20px; }
.g-wheel { max-width: 260px; aspect-ratio: 1; background: transparent; border: none; }
.g-lots { position: relative; width: 110px; height: 180px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.g-cup { width: 90px; height: 110px; border-radius: 10px 10px 24px 24px; background: linear-gradient(90deg, #8b4513, #c0712b, #8b4513); color: #ffe8a3; font-size: 34px; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 1; }
.g-stick { position: absolute; bottom: 70px; width: 28px; height: 110px; border-radius: 4px; background: #f3d9a4; color: #8b1a1a; font-size: 13px; font-weight: 900; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; transition: transform 0.6s cubic-bezier(0.2, 1.5, 0.4, 1); }
.g-stick.up { transform: translateY(-60px); }
.g-lots.shaking { animation: cupshake 0.18s linear infinite; }
@keyframes cupshake { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.g-paper { padding: 14px 30px; background: #fff7e0; color: #8b1a1a; font-size: 34px; font-weight: 900; border-radius: 6px; border: 3px double #c0392b; animation: unfold 0.6s ease-out; transform-origin: top; }
.g-paper.f5, .g-paper.f6 { color: #c0392b; box-shadow: 0 0 24px #ffd166; }
.g-paper.f0, .g-paper.f1 { color: #333; background: #ccc; }
@keyframes unfold { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.g-coin { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f4c542 45%, #b8860b); border: 4px solid #8a6d00; color: #6b4f00; font-size: 44px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.g-coin.tails { background: radial-gradient(circle at 35% 30%, #eee, #aaa 45%, #666); border-color: #444; color: #222; }
.g-coin.flip { animation: coinflip 0.6s ease-out; }
@keyframes coinflip { 0% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-70px) rotateX(900deg); } 100% { transform: translateY(0) rotateX(1800deg); } }
.g-streak { font-size: 18px; color: var(--text); }
.g-gacha { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-globe { width: 150px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 4px solid #8ecae6; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 22px; padding: 14px; }
.g-knob { font-size: 34px; transition: transform 0.8s; }
.g-knob.turn { transform: rotate(540deg); }
.g-capsule { min-height: 60px; font-size: 44px; font-weight: 900; }
.g-capsule.drop { animation: drop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes drop { 0% { transform: translateY(-60px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.g-capsule.wobble { animation: wob 0.35s ease-in-out infinite; }
@keyframes wob { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
.g-capsule.tier1 { filter: drop-shadow(0 0 8px #3a86ff); }
.g-capsule.tier2 { filter: drop-shadow(0 0 12px #b06ad9); }
.g-capsule.tier3 { filter: drop-shadow(0 0 18px #ffd166); }
.g-capsule.tier4 { filter: drop-shadow(0 0 24px #ff006e); }
.g-capsule.rainbow { animation: wob 0.2s ease-in-out infinite, hue 0.6s linear infinite; }
@keyframes hue { 0% { filter: drop-shadow(0 0 24px #ff006e) hue-rotate(0deg); } 100% { filter: drop-shadow(0 0 24px #ff006e) hue-rotate(360deg); } }
.g-odo { display: flex; gap: 6px; }
.g-odo span { width: 58px; height: 80px; border-radius: 10px; background: #11152a; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 900; font-variant-numeric: tabular-nums; }
.g-odo span.spin { color: var(--muted); filter: blur(1px); }
.g-opening { animation: opening 0.25s linear infinite; box-shadow: 0 0 20px var(--accent); }
@keyframes opening { 0%, 100% { transform: rotate(-6deg) scale(1.05); } 50% { transform: rotate(6deg) scale(1.1); } }
.g-btn.dim { opacity: 0.45; }
.g-scratch-cell { position: relative; overflow: hidden; }
.g-scratch { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.g-doors { gap: 8px; }
.g-door { flex: 1; max-width: 100px; padding: 18px 0; border-radius: 10px; background: #6b4a2b; border: 2px solid #8a6038; text-align: center; font-size: 28px; font-weight: 900; transition: transform 0.4s, background 0.4s; }
.g-door.sel { outline: 3px solid var(--accent); }
.g-door.open { background: #11152a; transform: perspective(400px) rotateY(-20deg); }
.g-guesses { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.g-guess { padding: 10px 14px; border-radius: 12px; background: #11152a; border: 2px solid var(--line); text-align: center; min-width: 86px; }
.g-guess-out { font-size: 34px; }
.g-guess-out.spin { filter: blur(1px); }
.g-guess.hit { border-color: var(--ok); }
.g-guess.miss { border-color: var(--bad); opacity: 0.8; }
/* 結果逐名揭曉 */
.tbl tr.hidden-row { visibility: hidden; }
.tbl tr.reveal-row td { animation: rowin 0.45s ease-out; }
@keyframes rowin { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: none; } }

/* 拆炸彈 */
.g-bomb-wrap { position: relative; width: 100%; max-width: 420px; border-radius: 14px; background: #1b1f30; border: 1px solid var(--line); overflow: hidden; }
.g-bomb { display: block; width: 100%; touch-action: none; user-select: none; cursor: crosshair; }
.g-bomb-clock { font: 900 24px ui-monospace, Consolas, monospace; fill: #ff3b30; }
.g-bomb-clock.hurry { animation: blink 0.5s steps(2) infinite; }
.g-bomb-clock.safe { fill: #2ecc71; }
@keyframes blink { 50% { opacity: 0.2; } }
.g-scissors { font-size: 30px; pointer-events: none; }
.g-spark { font-size: 26px; pointer-events: none; animation: pop 0.4s; }
.g-wire-val { font: 900 18px sans-serif; fill: #fff; }
.g-wire-val.mine { fill: var(--accent); font-size: 22px; }
.g-bomb-wait { animation: shake 0.3s infinite; }
.g-boom { animation: boomflash 0.9s ease-out; }
@keyframes boomflash { 0% { background: #fff; transform: scale(1.06) rotate(-2deg); } 30% { background: #ff7b00; transform: scale(1.02) rotate(2deg); } 100% { background: #1b1f30; transform: none; } }
.g-boom-fx { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 150px; pointer-events: none; animation: boomfx 1.2s ease-out forwards; }
@keyframes boomfx { 0% { transform: scale(0.2); opacity: 1; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.g-bac-row { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px; min-height: 76px; padding: 6px 10px; border-radius: 12px; background: #0f5132; }
.g-bac-name { font-size: 22px; font-weight: 900; width: 30px; }
.g-bac-row .g-hand { flex: 1; justify-content: flex-start; }
.g-bac-row .g-playcard { font-size: 26px; min-width: 52px; padding: 8px 6px; }
.g-bac-pts { font-size: 22px; color: var(--accent); }
.g-vp { gap: 4px; }
.g-vp-card { position: relative; padding: 0 0 22px; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; }
.g-vp-card .g-playcard { margin: 0; font-size: 24px; min-width: 46px; padding: 12px 4px; }
.g-vp-hold { position: absolute; left: 0; right: 0; bottom: 0; font-size: 14px; font-weight: 800; color: var(--accent); visibility: hidden; }
.g-vp-card.held { border-color: var(--accent); }
.g-vp-card.held .g-vp-hold { visibility: visible; }
.g-bingo-ball { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd166 60%, #e09f3e); color: #222; font-size: 26px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.g-bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; max-width: 280px; }
.g-bingo-cell { aspect-ratio: 1; border-radius: 8px; background: var(--card2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.g-bingo-cell.hit { background: #e63946; border-color: #e63946; color: #fff; }
.g-reel.hit { box-shadow: inset 0 0 0 4px var(--accent); }
.g-crash-rocket { font-size: 64px; transition: transform 0.1s linear; }
.g-crash { color: var(--accent); }
.g-crash.boom { color: var(--bad); }
.g-bank { font-size: 22px; font-weight: 900; color: var(--accent); text-align: center; }
.g-dice-sm { gap: 6px; }
.g-dice-sm .g-die { width: 40px; height: 40px; padding: 5px; border-radius: 9px; box-shadow: 0 4px 0 #c9c9c9; }
.g-bac-row .g-dice { flex: 1; justify-content: flex-start; }
.g-choices-6 { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.g-choices-6 .g-choice { min-width: 0; padding: 12px 0; font-size: 20px; }
.g-jiao-pair { display: flex; gap: 28px; }
.g-jiao { width: 70px; height: 36px; background: #c0392b; border-radius: 70px 70px 8px 8px; box-shadow: 0 4px 0 #7b1f16; }
.g-jiao.flat { border-radius: 8px 8px 70px 70px; background: #e74c3c; }
.g-jiao.toss { animation: jiaotoss 0.8s ease-out; }
@keyframes jiaotoss { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-80px) rotate(360deg); } 100% { transform: translateY(0) rotate(720deg); } }
.g-jiao-log { display: flex; gap: 8px; min-height: 30px; }
.g-jiao-tag { padding: 4px 10px; border-radius: 8px; background: var(--card2); font-weight: 800; }
.g-jiao-tag.t0 { background: #2a9d8f; color: #fff; }
.g-receipt-win { font-size: 20px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.g-receipts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; font-variant-numeric: tabular-nums; font-size: 18px; }
.g-receipt b { color: var(--accent); }
.g-receipt.win { color: #fff; background: #2a9d8f; border-radius: 6px; padding: 0 4px; }
.g-pond { width: 100%; max-width: 300px; height: 140px; border-radius: 16px; background: linear-gradient(#1d4e89, #0b2545); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.g-bobber { font-size: 56px; }
.g-bobber.wait { animation: bobwait 1s ease-in-out infinite; }
.g-bobber.bite { animation: shake 0.15s infinite; }
@keyframes bobwait { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.g-claw-box { position: relative; width: 100%; max-width: 300px; height: 170px; border-radius: 16px; border: 4px solid #ff6fb5; background: #2b1b3d; overflow: hidden; }
.g-claw { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-size: 36px; transition: top 0.7s ease-in-out; white-space: nowrap; }
.g-claw.down { top: 100px; }
.g-claw-toys { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: space-around; font-size: 30px; }
.g-crash-cv { width: 100%; max-width: 440px; border-radius: 12px; background: #0b0b12; }
.g-crash-hist { display: flex; gap: 6px; width: 100%; max-width: 440px; min-height: 26px; overflow: hidden; }
.g-crash-chip { flex: none; padding: 2px 8px; border-radius: 999px; background: #1b1d2b; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-crash-chip.lo { color: #4cc9f0; }
.g-crash-chip.mid { color: #b388ff; }
.g-crash-chip.hi { color: #ff4fa3; }
.g-crash-chip.won { box-shadow: inset 0 0 0 1px #4ade80; }
/* ===== 博弈桌外觀 ===== */
.g-casino { position: relative; width: 100%; max-width: 480px; padding: 16px 12px; border-radius: 22px; background: radial-gradient(ellipse at 50% 35%, #23845a 0%, #135c3c 55%, #0b3d27 100%); border: 6px solid #6b4423; box-shadow: inset 0 0 0 2px #d4a84b, inset 0 0 40px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.45); overflow: hidden; }
.g-casino.plain { padding: 0; border: 0; background: none; box-shadow: none; }
.g-casino::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(255, 215, 120, 0.25); border-radius: 14px; pointer-events: none; }
.g-casino.plain::before { display: none; }
.g-casino .g-choice { background: rgba(0, 0, 0, 0.28); border: 2px solid rgba(255, 215, 120, 0.55); color: #fff6dc; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.g-casino .g-choice:not(:disabled):hover { background: rgba(255, 215, 120, 0.18); }
.g-casino .g-choice:disabled { opacity: 0.55; }
.g-casino .g-bac-row { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 215, 120, 0.25); }
.g-casino .g-bac-name { color: #ffd166; text-shadow: 0 1px 2px #000; }
.g-casino .g-playcard { display: inline-flex; align-items: center; justify-content: center; width: 46px; min-width: 46px; height: 66px; padding: 0; margin: 0 2px; border-radius: 7px; font-size: 19px; background: linear-gradient(160deg, #ffffff, #e9e9ef); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); border: 1px solid #c9c9d2; }
.g-casino .g-playcard:not(.red) { color: #1a1a1a; }
.g-casino .g-hand .g-playcard:only-child, .g-casino .g-big .g-playcard { width: 64px; height: 90px; font-size: 26px; }
.g-casino .g-big { color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.g-casino .g-msg { color: #f5f0dc; }
.g-casino .g-reels { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.g-casino .g-vp-card .g-playcard { width: 50px; min-width: 50px; height: 72px; }
.g-casino-top { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.g-pill { padding: 6px 16px; border-radius: 999px; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.g-pill-bank { background: linear-gradient(135deg, #3a2a05, #6b4a0a); color: #ffd166; border: 2px solid #d4a84b; }
.g-pill-bet { background: #1b2033; color: #e2e8f0; border: 2px solid #3a4157; }
.g-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.g-chip { width: 56px; height: 56px; border-radius: 50%; border: 5px dashed rgba(255, 255, 255, 0.85); color: #fff; font-weight: 900; font-size: 15px; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(0, 0, 0, 0.18); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); transition: transform 0.12s; padding: 0; }
.g-chip.c10 { background: #2563eb; }
.g-chip.c50 { background: #dc2626; }
.g-chip.c100 { background: #15803d; }
.g-chip.c500 { background: #7c3aed; }
.g-chip.call { background: linear-gradient(135deg, #f59e0b, #b45309); }
.g-chip.on { transform: translateY(-6px); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35), 0 0 0 3px #ffd166; }
.g-chip:disabled { cursor: default; filter: saturate(0.6) brightness(0.8); }
.g-win-pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 46px; font-weight: 900; pointer-events: none; animation: winpop 1.3s ease-out forwards; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7); color: #e2e8f0; }
.g-win-pop.up { color: #4ade80; }
.g-win-pop.down { color: #ff6b6b; }
@keyframes winpop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -80%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -110%) scale(0.95); } }
.g-playcard.back { background: repeating-linear-gradient(45deg, #b91c1c 0 6px, #991b1b 6px 12px); border: 3px solid #fff; }
.g-casino .g-playcard.back { background: repeating-linear-gradient(45deg, #b91c1c 0 6px, #991b1b 6px 12px); border: 3px solid #fff; }
/* ===== 運氣類主題：星空籤筒舞台 ===== */
.g-stage.cat-luck { position: relative; padding: 18px 14px 20px; border-radius: 24px; background: radial-gradient(circle at 50% -10%, #5b3cc4 0%, #2a1f66 42%, #15123a 100%); box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); overflow: hidden; isolation: isolate; }
.g-stage.cat-luck::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(2px 2px at 12% 18%, #fff8, transparent 60%), radial-gradient(1.5px 1.5px at 78% 12%, #fff9, transparent 60%), radial-gradient(2px 2px at 40% 70%, #ffd16688, transparent 60%), radial-gradient(1.5px 1.5px at 88% 62%, #fff7, transparent 60%), radial-gradient(1px 1px at 25% 88%, #fff9, transparent 60%), radial-gradient(1.5px 1.5px at 60% 35%, #c9b6ff99, transparent 60%), radial-gradient(1px 1px at 6% 55%, #fff8, transparent 60%), radial-gradient(2px 2px at 95% 90%, #ffd16677, transparent 60%); animation: twinkle 3.5s ease-in-out infinite alternate; }
@keyframes twinkle { 0% { opacity: 0.45; } 100% { opacity: 1; } }
.g-stage.cat-luck::after { content: ''; position: absolute; left: 50%; top: 32%; width: 260px; height: 260px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 209, 102, 0.22), transparent 65%); }
.cat-luck .g-msg { color: #ece6ff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.cat-luck .g-big { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.cat-luck .g-luck-result { font-size: 34px; background: linear-gradient(180deg, #fff6c9, #ffd166 45%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.cat-luck .g-btn-huge { position: relative; overflow: hidden; border-radius: 999px; background: linear-gradient(135deg, #ffb703, #fb5607 55%, #ff006e); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); box-shadow: 0 6px 0 #9a1750, 0 10px 24px rgba(255, 0, 110, 0.35); }
.cat-luck .g-btn-huge::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.cat-luck .g-btn-huge:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #9a1750; }
.cat-luck .g-btn-huge:disabled { filter: saturate(0.5) brightness(0.8); box-shadow: 0 3px 0 #5a1236; }
.cat-luck .g-btn-huge:disabled::after { display: none; }
.cat-luck .g-choice { background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); border: 2px solid rgba(255, 209, 102, 0.55); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.12s, box-shadow 0.12s; }
.cat-luck .g-choice:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(255, 209, 102, 0.25); }
.cat-luck .g-choice.sel { border-color: #ffd166; background: linear-gradient(160deg, rgba(255, 209, 102, 0.45), rgba(255, 140, 0, 0.2)); }
.cat-luck .g-choice.dim { opacity: 0.55; }
.cat-luck .g-timer { background: rgba(0, 0, 0, 0.35); }
/* ===== 其他類別主題：同一套舞台，各類別換配色與底紋 ===== */
.g-stage.cat-reaction { --th-top: #1d4ed8; --th-mid: #0b1d4a; --th-bot: #050d22; --th-a: #22d3ee; --th-b: #3b82f6; --th-line: rgba(34, 211, 238, 0.5); --th-shadow: #0e4f7a; --th-pattern: repeating-linear-gradient(115deg, transparent 0 38px, rgba(34, 211, 238, 0.06) 38px 40px); }
.g-stage.cat-precision { --th-top: #b91c3c; --th-mid: #4a0d19; --th-bot: #1c060b; --th-a: #ff4d6d; --th-b: #ffb703; --th-line: rgba(255, 120, 140, 0.5); --th-shadow: #7a1029; --th-pattern: repeating-radial-gradient(circle at 50% 38%, transparent 0 26px, rgba(255, 77, 109, 0.07) 26px 28px); }
.g-stage.cat-brain { --th-top: #0f766e; --th-mid: #0b2e2a; --th-bot: #051512; --th-a: #34d399; --th-b: #22c55e; --th-line: rgba(52, 211, 153, 0.5); --th-shadow: #0b5a40; --th-pattern: linear-gradient(rgba(52, 211, 153, 0.07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(52, 211, 153, 0.07) 1px, transparent 1px) 0 0 / 24px 24px; }
.g-stage.cat-memory { --th-top: #a21caf; --th-mid: #3b0f4f; --th-bot: #170622; --th-a: #f472b6; --th-b: #a78bfa; --th-line: rgba(244, 114, 182, 0.5); --th-shadow: #7a1d57; --th-pattern: radial-gradient(circle at 18% 28%, rgba(244, 114, 182, 0.18), transparent 28%), radial-gradient(circle at 84% 72%, rgba(167, 139, 250, 0.18), transparent 32%), radial-gradient(circle at 60% 12%, rgba(255, 255, 255, 0.08), transparent 18%); }
.g-stage.cat-speed { --th-top: #c2410c; --th-mid: #431a06; --th-bot: #1a0a02; --th-a: #fb923c; --th-b: #ef4444; --th-line: rgba(251, 146, 60, 0.5); --th-shadow: #7c2d12; --th-pattern: repeating-linear-gradient(170deg, transparent 0 22px, rgba(251, 146, 60, 0.06) 22px 24px, transparent 24px 60px); }
.g-stage.cat-eye { --th-top: #0e7490; --th-mid: #08323a; --th-bot: #03161a; --th-a: #2dd4bf; --th-b: #38bdf8; --th-line: rgba(45, 212, 191, 0.5); --th-shadow: #0b5563; --th-pattern: radial-gradient(rgba(45, 212, 191, 0.14) 1px, transparent 1.6px) 0 0 / 16px 16px; }
.g-stage.cat-mind { --th-top: #4c1d95; --th-mid: #1e1636; --th-bot: #0c0a16; --th-a: #a78bfa; --th-b: #ec4899; --th-line: rgba(167, 139, 250, 0.5); --th-shadow: #4c1d95; --th-pattern: repeating-linear-gradient(45deg, rgba(167, 139, 250, 0.05) 0 2px, transparent 2px 14px); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) { position: relative; padding: 18px 14px 20px; border-radius: 24px; background: var(--th-pattern), radial-gradient(circle at 50% -10%, var(--th-top) 0%, var(--th-mid) 45%, var(--th-bot) 100%); box-shadow: inset 0 0 0 2px var(--th-line), inset 0 0 60px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); overflow: hidden; isolation: isolate; }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-msg { color: #eef2ff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-big { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-btn-huge { position: relative; overflow: hidden; border-radius: 999px; background: linear-gradient(135deg, var(--th-a), var(--th-b)); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); box-shadow: 0 6px 0 var(--th-shadow), 0 10px 24px rgba(0, 0, 0, 0.35); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-btn-huge::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); animation: shine 2.8s ease-in-out infinite; pointer-events: none; }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-btn-huge:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--th-shadow); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-btn-huge:disabled { filter: saturate(0.5) brightness(0.8); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-btn-huge:disabled::after { display: none; }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-choice { background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)); border: 2px solid var(--th-line); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.12s, box-shadow 0.12s; }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-choice:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-input { background: rgba(0, 0, 0, 0.35); border-color: var(--th-line); color: #fff; }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-timer { background: rgba(0, 0, 0, 0.35); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-canvas { border-color: var(--th-line); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.g-stage:is(.cat-reaction, .cat-precision, .cat-brain, .cat-memory, .cat-speed, .cat-eye, .cat-mind) .g-choice.sel { border-color: var(--th-a); background: linear-gradient(160deg, var(--th-line), rgba(255, 255, 255, 0.05)); }
/* ===== 咪牌 ===== */
.g-sq { position: relative; display: inline-block; touch-action: none; cursor: grab; margin: 0 2px; vertical-align: middle; }
.g-sq:active { cursor: grabbing; }
.g-sq > .g-playcard { margin: 0; }
.g-sq-back { position: absolute; inset: 0; transform-origin: top center; display: flex; align-items: flex-end; justify-content: center; }
.g-sq-back.gone { transition: clip-path 0.2s, transform 0.2s; }
.g-sq-hint { margin-bottom: 4px; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; animation: hintbob 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes hintbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.g-casino .g-sq > .g-playcard, .g-casino .g-sq > .g-sq-back { width: 56px; min-width: 56px; height: 80px; }
.g-sq-big > .g-playcard { display: inline-flex; align-items: center; justify-content: center; width: 110px; min-width: 110px; height: 154px; padding: 0; border-radius: 12px; font-size: 40px; background: linear-gradient(160deg, #fff, #ececf2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
.g-sq-big > .g-sq-back { border-radius: 12px; border-width: 5px; }
.g-sq-big .g-sq-hint { font-size: 14px; margin-bottom: 10px; }
.g-sq > .g-playcard:not(.back) { position: relative; }
.g-sq > .g-playcard:not(.back)::before, .g-sq > .g-playcard:not(.back)::after { content: attr(data-c); position: absolute; font-size: 11px; font-weight: 800; line-height: 1; }
.g-sq > .g-playcard:not(.back)::before { left: 4px; top: 4px; }
.g-sq > .g-playcard:not(.back)::after { right: 4px; bottom: 4px; transform: rotate(180deg); }
.g-sq-big > .g-playcard:not(.back)::before, .g-sq-big > .g-playcard:not(.back)::after { font-size: 16px; }
/* 咪牌：拉角掀牌 */
.g-sq-back.gone { opacity: 0; transition: opacity 0.2s; clip-path: none !important; }
.g-sq-flapwrap { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.5)); }
.g-sq-flap { position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(135deg, #fbfbfd 0%, #dcdce4 60%, #b9b9c4 100%); clip-path: polygon(0 0, 0 0, 0 0); }
.g-sq-big .g-sq-flap { border-radius: 12px; }
.g-sq-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0; animation: none; }
.g-sq-big > .g-playcard.back { background: repeating-linear-gradient(45deg, #b91c1c 0 8px, #991b1b 8px 16px); border: 5px solid #fff; }
.g-sq > .g-playcard:not(.back)::after { transform: none; }
/* ===== 撲克牌：SVG 牌面 + 花紋牌背（蓋過前面的文字版樣式） ===== */
.g-playcard, .g-casino .g-playcard, .g-sq-big > .g-playcard { display: inline-block; width: 60px; min-width: 60px; height: 84px; padding: 0; margin: 0 3px; border: 0; border-radius: 7px; background: none; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); line-height: 0; vertical-align: middle; overflow: hidden; }
.g-playcard > svg { display: block; width: 100%; height: 100%; }
.g-casino .g-playcard { width: 52px; min-width: 52px; height: 73px; margin: 0 2px; }
.g-casino .g-hand .g-playcard:only-child, .g-casino .g-big .g-playcard, .g-big .g-playcard { width: 68px; min-width: 68px; height: 95px; }
.g-casino .g-sq > .g-playcard, .g-casino .g-sq > .g-sq-back { width: 58px; min-width: 58px; height: 81px; }
.g-casino .g-vp-card .g-playcard, .g-casino .g-vp-card .g-sq > * { width: 52px; min-width: 52px; height: 73px; }
.g-sq-big > .g-playcard, .g-sq-big > .g-sq-back { width: 120px; min-width: 120px; height: 168px; border-radius: 12px; }
.g-sq > .g-playcard:not(.back)::before, .g-sq > .g-playcard:not(.back)::after { content: none; }
.g-hand.sm .g-playcard, .g-casino .g-hand.sm .g-playcard, .g-casino .g-hand.sm .g-sq > * { width: 42px; min-width: 42px; height: 59px; margin: 0 1px; }
.g-playcard.back, .g-casino .g-playcard.back, .g-sq-big > .g-playcard.back, .g-sq-big > .g-sq-back { border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 350'%3E%3Cdefs%3E%3Cpattern id='p' width='22' height='22' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='22' height='22' fill='%23b3121f'/%3E%3Cpath d='M0 11H22M11 0V22' stroke='%23e2505c' stroke-width='2.5'/%3E%3Ccircle cx='11' cy='11' r='3' fill='%23f7c6ca'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='247' height='347' rx='16' fill='%23fff' stroke='%23c8c8d0' stroke-width='3'/%3E%3Crect x='16' y='16' width='218' height='318' rx='10' fill='url(%23p)'/%3E%3Crect x='16' y='16' width='218' height='318' rx='10' fill='none' stroke='%23fff' stroke-width='4'/%3E%3Cellipse cx='125' cy='175' rx='52' ry='62' fill='%23fff'/%3E%3Cg transform='translate(125 175) scale(1)' fill='%23b3121f'%3E%3Cpath d='M0 -40 C14 -22 42 -8 40 12 C38 28 18 32 4 20 L10 40 L-10 40 L-4 20 C-18 32 -38 28 -40 12 C-42 -8 -14 -22 0 -40 Z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.g-bac-name { width: auto; min-width: 30px; white-space: nowrap; }
.g-casino .g-hand.sm { flex-wrap: nowrap; gap: 2px; min-width: 0; }
.g-casino .g-hand.sm > .g-playcard, .g-casino .g-hand.sm > .g-sq { flex: 0 1 46px; min-width: 0; width: auto; height: auto; aspect-ratio: 5 / 7; margin: 0; }
.g-casino .g-hand.sm > .g-sq > * { width: 100%; min-width: 0; height: 100%; }
/* 射龍門 */
.g-gate-stage { position: relative; }
.g-gate { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 110px; }
.g-gate > .g-playcard { width: 68px; min-width: 68px; height: 95px; }
.g-gate-slot { width: 68px; height: 95px; border-radius: 8px; border: 3px dashed rgba(255, 215, 120, 0.6); background: rgba(0, 0, 0, 0.2); }
.g-gate-slot.hit { border-style: solid; border-color: #ffd166; box-shadow: 0 0 22px 6px rgba(255, 209, 102, 0.65); }
.g-gate-label { min-height: 30px; font-size: 22px; font-weight: 900; color: #ffd166; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.g-casino .g-shot { position: absolute; z-index: 5; width: 68px; min-width: 68px; height: 95px; margin: 0; pointer-events: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6); }

/* ---------- 上方分頁 ---------- */
.tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: #11152a; border: 1px solid var(--line); }
.tab { border: none; background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 9px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.tab.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #1a1200; }
@media (max-width: 640px) {
  .top { flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; }
  .tab { flex: 1; }
}

/* ---------- 連線遊戲：大廳 / 等待室 ---------- */
.ol-hero { background: radial-gradient(circle at 85% 0%, rgba(251, 133, 0, 0.18), transparent 55%), var(--card); }
.ol-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.ol-game { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); }
.ol-game-monopoly { background: linear-gradient(135deg, rgba(46, 204, 113, 0.18), rgba(52, 152, 219, 0.12)), var(--card2); }
.ol-game-kart { background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(241, 196, 15, 0.12)), var(--card2); }
.ol-game-draw { background: linear-gradient(135deg, rgba(155, 89, 182, 0.22), rgba(52, 152, 219, 0.12)), var(--card2); }
.ol-game-spy { background: linear-gradient(135deg, rgba(44, 62, 80, 0.5), rgba(231, 76, 60, 0.14)), var(--card2); }
.ol-game-icon { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.ol-game-body { flex: 1; min-width: 0; }
.ol-game-body h3 { margin: 0 0 4px; font-size: 18px; }
.ol-game-body p { margin: 0 0 4px; }
.ol-rooms { display: flex; flex-direction: column; gap: 8px; }
.ol-room { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); }
.ol-room-icon { font-size: 30px; }
.ol-room-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ol-wait-head { display: flex; gap: 14px; align-items: center; }
.ol-wait-head h2 { margin: 0 0 4px; }
.ol-tracks { display: flex; gap: 10px; flex-wrap: wrap; }
.ol-track { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: #2f6e2b; color: #fff; cursor: pointer; font-weight: 700; }
.ol-track.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.3); }
.ol-track:disabled { cursor: default; opacity: 1; }
.ol-track .muted { color: rgba(255, 255, 255, 0.75); }

/* ---------- 大富翁（MONOPOLY GO! 風格：藍天、立體斜放棋盤、大 GO 鈕） ---------- */
.mgo { position: relative; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 10px; border: none; background: linear-gradient(180deg, #4fc3f7 0%, #81d4fa 45%, #b3e5fc 100%); color: #10314a; }
.mgo .muted { color: #2b5674; }
.mgo-hud { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.mgo-p { position: relative; flex: 1 0 150px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 0 rgba(16, 49, 74, 0.25); border: 3px solid transparent; }
.mgo-p.cur { border-color: #ffca28; box-shadow: 0 4px 0 #f57f17, 0 0 18px rgba(255, 202, 40, 0.8); }
.mgo-p.me .mgo-pn { color: #d84315; }
.mgo-p.out { opacity: 0.45; filter: grayscale(1); }
.mgo-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.mgo-pi { min-width: 0; line-height: 1.15; }
.mgo-pn { font-weight: 900; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgo-cash { font-size: 15px; color: #1b5e20; white-space: nowrap; }
.mgo-cash b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mgo-pp { font-size: 11px; color: #4a6b82; white-space: nowrap; }
.mgo-delta { position: absolute; right: 10px; top: -4px; padding: 2px 8px; border-radius: 999px; font-weight: 900; font-size: 14px; color: #fff; animation: mgodelta 1.8s ease-out forwards; pointer-events: none; }
.mgo-delta.up { background: #43a047; }
.mgo-delta.down { background: #e53935; }
@keyframes mgodelta { 0% { transform: translateY(8px) scale(0.6); opacity: 0; } 15% { transform: translateY(0) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }

.mgo-stage { position: relative; perspective: 1100px; perspective-origin: 50% 0%; padding: 4px 0 18px; }
.mgo-cloud { position: absolute; font-size: 70px; opacity: 0.85; pointer-events: none; animation: mgocloud 26s linear infinite; }
.mgo-cloud.c1 { top: 4%; left: -80px; }
.mgo-cloud.c2 { top: 55%; left: -80px; font-size: 54px; animation-duration: 36s; animation-delay: -14s; }
@keyframes mgocloud { to { transform: translateX(calc(100vw + 160px)); } }
.mgo-tilt { transform: rotateX(28deg) scale(0.96); transform-origin: 50% 40%; transform-style: preserve-3d; }
.mono-board { display: grid; grid-template-columns: 1.35fr repeat(6, 1fr) 1.35fr; grid-template-rows: 1.35fr repeat(6, 1fr) 1.35fr; gap: 4px; aspect-ratio: 1; width: 100%; max-width: min(640px, calc(100vh - 300px)); min-width: 300px; margin: 0 auto; padding: 8px; border-radius: 22px; background: linear-gradient(135deg, #7cb342, #558b2f); box-shadow: 0 16px 0 #33691e, 0 28px 40px rgba(16, 49, 74, 0.45); color: #1d2a1d; transform-style: preserve-3d; }
.mono-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; border-radius: 9px; background: #fffdf5; text-align: center; box-shadow: 0 5px 0 #c5b88f, inset 0 0 0 3px var(--own, transparent); min-width: 0; min-height: 0; overflow: visible; transform-style: preserve-3d; transition: transform 0.2s; }
.mono-tile.owned { background: color-mix(in srgb, var(--own) 22%, #fffdf5); }
.mono-tile.corner { background: linear-gradient(135deg, #fff59d, #ffca28); box-shadow: 0 5px 0 #c79100; }
.mono-tile.t-chance { background: linear-gradient(135deg, #fff8e1, #ffe082); }
.mono-tile.t-fate { background: linear-gradient(135deg, #f3e5f5, #ce93d8); }
.mono-tile.t-tax { background: linear-gradient(135deg, #ffebee, #ef9a9a); }
.mono-tile.landed { animation: mgoland 0.5s ease-out; }
@keyframes mgoland { 30% { transform: translateY(5px); box-shadow: 0 0 0 #c5b88f; } }
.mono-band { position: absolute; left: 0; right: 0; top: 0; height: 20%; border-radius: 9px 9px 0 0; }
.mono-tile.side-l .mono-band { left: auto; right: 0; top: 0; bottom: 0; width: 20%; height: auto; border-radius: 0 9px 9px 0; }
.mono-tile.side-t .mono-band { top: auto; bottom: 0; border-radius: 0 0 9px 9px; }
.mono-tile.side-r .mono-band { right: auto; left: 0; top: 0; bottom: 0; width: 20%; height: auto; border-radius: 9px 0 0 9px; }
.mono-ic { font-size: clamp(15px, 2.8vw, 26px); line-height: 1; margin-top: 3px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15)); }
.mono-tile.corner .mono-ic { font-size: clamp(22px, 4vw, 38px); }
.mono-nm { font-size: clamp(8px, 1.15vw, 12px); font-weight: 900; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mono-pr { font-size: clamp(7px, 1vw, 11px); color: #6d5d2e; font-weight: 800; }
.mono-flag { position: absolute; top: -7px; left: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--own); color: #fff; font-size: 10px; font-weight: 900; line-height: 16px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.mono-flag:empty { display: none; }
.mono-houses { position: absolute; top: -10px; right: -4px; font-size: clamp(12px, 2vw, 20px); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
.mono-tokens { position: absolute; bottom: 30%; left: 0; right: 0; display: flex; justify-content: center; transform-style: preserve-3d; pointer-events: none; z-index: 2; }
.mono-token { position: relative; margin: 0 -5px; transform: rotateX(-28deg) translateY(-30%); transform-origin: 50% 100%; }
.mono-pawn { display: flex; align-items: center; justify-content: center; width: clamp(20px, 3.2vw, 30px); height: clamp(20px, 3.2vw, 30px); border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--c); color: #fff; font-size: clamp(9px, 1.5vw, 14px); font-weight: 900; border: 2px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 8px 10px rgba(0, 0, 0, 0.25); }
.mono-token.cur .mono-pawn { animation: monobob 0.9s ease-in-out infinite; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 0 3px #ffca28; }
.mono-token.hop .mono-pawn { animation: mgohop 0.22s ease-out; }
@keyframes monobob { 50% { transform: translateY(-5px); } }
@keyframes mgohop { 50% { transform: translateY(-16px) scale(1.1); } }
.mono-center { grid-column: 2 / 8; grid-row: 2 / 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #aed581, #7cb342); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35); }
.mgo-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; transform: rotate(-6deg); }
.mgo-logo span { font-size: clamp(12px, 2vw, 18px); font-weight: 900; color: #fff; text-shadow: 0 2px 0 #1565c0; }
.mgo-logo b { padding: 4px 14px; border-radius: 10px; background: #e53935; color: #fff; font-size: clamp(22px, 4.5vw, 44px); font-weight: 900; letter-spacing: 2px; box-shadow: 0 5px 0 #b71c1c; text-shadow: 0 3px 0 #b71c1c; }
.mgo-logo i { margin-top: 4px; font-style: italic; font-size: clamp(18px, 3.5vw, 34px); font-weight: 900; color: #ffeb3b; -webkit-text-stroke: 2px #1565c0; text-shadow: 0 4px 0 #1565c0; }
.mgo-round { padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 900; color: #33691e; }

.mgo-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: -6px; }
.mgo-dice { display: flex; gap: 14px; }
.mgo-dice .g-die { width: 58px; height: 58px; padding: 8px; }
.mgo-status { text-align: center; }
.mgo-turn { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; font-size: 18px; color: #0d3b66; }
.mgo-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; }
.mgo-timer { font-size: 12px; color: #2b5674; font-weight: 700; }
.mgo-actions { min-height: 10px; display: flex; justify-content: center; }
.mgo-go { width: 118px; height: 118px; border-radius: 50%; border: 6px solid #fff; background: radial-gradient(circle at 40% 30%, #9ccc65, #43a047 60%, #2e7d32); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 9px 0 #1b5e20, 0 14px 24px rgba(0, 0, 0, 0.3); animation: mgopulse 1.2s ease-in-out infinite; touch-action: manipulation; }
.mgo-go b { font-size: 40px; font-weight: 900; line-height: 1; text-shadow: 0 3px 0 #1b5e20; letter-spacing: 1px; }
.mgo-go small { font-size: 13px; font-weight: 800; }
.mgo-go:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 3px 0 #1b5e20; animation: none; }
.mgo-go:disabled { filter: grayscale(0.6); animation: none; }
@keyframes mgopulse { 50% { transform: scale(1.06); } }
.mgo-btn { border: none; border-radius: 14px; padding: 12px 20px; font-weight: 900; font-size: 16px; color: #fff; cursor: pointer; touch-action: manipulation; }
.mgo-btn.big { font-size: 18px; padding: 14px 28px; }
.mgo-btn.green { background: linear-gradient(#66bb6a, #43a047); box-shadow: 0 5px 0 #1b5e20; }
.mgo-btn.grey { background: linear-gradient(#b0bec5, #90a4ae); box-shadow: 0 5px 0 #546e7a; }
.mgo-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.mgo-btn:disabled { opacity: 0.6; }

.mgo-pop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(13, 59, 102, 0.35); z-index: 5; }
.mgo-pop[hidden] { display: none; }
.mgo-deed { width: min(300px, 92%); border-radius: 18px; background: #fffdf5; overflow: hidden; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2), 0 20px 40px rgba(0, 0, 0, 0.35); animation: mgopop 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); color: #1d2a1d; }
.mgo-deed-h { padding: 12px; text-align: center; color: #fff; font-weight: 900; font-size: 22px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.mgo-deed-h small { display: block; font-size: 11px; letter-spacing: 4px; opacity: 0.9; }
.mgo-deed-ic { text-align: center; font-size: 56px; margin: 6px 0 2px; }
.mgo-rents { padding: 0 16px; display: flex; flex-direction: column; gap: 2px; }
.mgo-rent { display: flex; justify-content: space-between; padding: 3px 8px; border-radius: 8px; font-size: 14px; }
.mgo-rent.hl { background: #fff59d; font-weight: 900; }
.mgo-deed-btns { display: flex; gap: 10px; padding: 14px 16px 16px; }
.mgo-deed-btns .mgo-btn { flex: 1; }
.mgo-rank { list-style: none; margin: 10px 0 0; padding: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.mgo-rank li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: #f1f8e9; font-weight: 800; }
.mgo-rank li.me { outline: 3px solid #ffca28; }
.mgo-chance { width: min(280px, 90%); min-height: 170px; padding: 18px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: linear-gradient(135deg, #fff8e1, #ffe082); border: 5px solid #fff; box-shadow: 0 10px 0 #f9a825, 0 20px 40px rgba(0, 0, 0, 0.35); animation: mgoflip 0.5s ease-out; color: #3e2723; }
.mgo-chance.fate { background: linear-gradient(135deg, #f3e5f5, #ce93d8); box-shadow: 0 10px 0 #8e24aa, 0 20px 40px rgba(0, 0, 0, 0.35); }
.mgo-chance-k { font-size: 24px; font-weight: 900; }
.mgo-chance-t { font-size: 18px; font-weight: 900; }
.mgo-chance-who { font-size: 13px; opacity: 0.75; }
@keyframes mgopop { from { transform: scale(0.4); opacity: 0; } }
@keyframes mgoflip { from { transform: perspective(600px) rotateY(100deg) scale(0.7); } }
.mgo-logwrap { background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 8px 12px; }
.mgo-logwrap summary { cursor: pointer; font-weight: 800; }
.mono-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 13px; color: #2b5674; }
.mono-log div:first-child { color: #0d3b66; font-weight: 700; }
.mgo .btn.ghost { color: #0d3b66; border-color: rgba(13, 59, 102, 0.3); }
@media (max-width: 640px) {
  .mgo-tilt { transform: rotateX(22deg) scale(1); }
  .mgo-p { flex-basis: 132px; }
  .mgo-go { width: 100px; height: 100px; }
  .mgo-dice .g-die { width: 48px; height: 48px; padding: 6px; }
}

/* ---------- 卡丁車 ---------- */
.kart-wrap { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.kart-head { display: flex; align-items: center; gap: 10px; }
.kart-head b { flex: 1; }
@media (max-width: 640px) {
  .kart-tip { display: none; }
  .kart-stage { height: calc(100dvh - 300px); min-height: 280px; }
  .kart-pad { min-width: 58px; height: 58px; }
}
.kart-stage { position: relative; height: min(64vh, 620px); border-radius: 14px; overflow: hidden; background: #2f6e2b; touch-action: none; user-select: none; }
.kart-cv { width: 100%; height: 100%; display: block; }
.kart-mini { position: absolute; top: 10px; right: 10px; width: 150px; height: 120px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.kart-hud-l { position: absolute; top: 10px; left: 12px; color: #fff; font-weight: 800; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.kart-place { font-size: 46px; font-weight: 900; line-height: 1; color: #ffd166; }
.kart-place small { font-size: 20px; color: #fff; }
.kart-speed { font-size: 13px; opacity: 0.85; }
.kart-item { position: absolute; top: 140px; right: 10px; width: 64px; height: 64px; border-radius: 14px; border: 3px solid rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; font-size: 38px; }
.kart-item.has { border-color: #ffd166; animation: kartitem 0.6s ease-out; }
@keyframes kartitem { from { transform: scale(1.5) rotate(-20deg); } }
.kart-big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 900; color: #fff; text-shadow: 0 6px 0 #e63946, 0 10px 30px rgba(0, 0, 0, 0.6); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.kart-big.show { opacity: 1; }
.kart-results { position: absolute; inset: 10% 8%; overflow-y: auto; padding: 18px; border-radius: 16px; background: rgba(15, 18, 32, 0.92); border: 2px solid var(--accent); }
.kart-results[hidden] { display: none; }
.kart-results ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kart-results li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--card2); font-weight: 800; }
.kart-results li.me { border: 2px solid var(--accent); }
.kart-controls { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; user-select: none; }
.kart-cg { display: flex; gap: 8px; }
.kart-pad { min-width: 70px; height: 64px; border-radius: 16px; border: 2px solid var(--line); background: var(--card2); color: var(--text); font-size: 26px; touch-action: none; cursor: pointer; }
.kart-pad.small { font-size: 13px; min-width: 64px; }
.kart-pad.on { background: rgba(255, 183, 3, 0.25); border-color: var(--accent); }
.kart-pad.gas { background: rgba(46, 204, 113, 0.18); }
.kart-pad.item { background: rgba(255, 111, 181, 0.18); }
@media (min-width: 900px) and (hover: hover) { .kart-controls { display: none; } }

/* ---------- 你畫我猜 ---------- */
.dg, .spy { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.dg-head { display: flex; align-items: center; gap: 10px; }
.dg-top { flex: 1; min-width: 0; }
.dg-q { font-size: 18px; margin-top: 2px; }
.dg-word { color: var(--accent); font-size: 22px; }
.dg-mask { display: inline-flex; gap: 6px; font-size: 24px; font-weight: 900; letter-spacing: 2px; }
.dg-mask .hit { color: var(--accent); }
.dg-timer { font-size: 22px; font-weight: 900; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.dg-timer.hurry { color: var(--bad); animation: g-shake 0.4s; }
.dg-main { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; }
.dg-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dg-paper { position: relative; border-radius: 12px; overflow: hidden; background: #fff; }
.dg-cv { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; touch-action: none; user-select: none; }
.dg-cv.can { cursor: crosshair; }
.dg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(15, 18, 32, 0.55); }
.dg-overlay[hidden] { display: none; }
.dg-pop { width: min(92%, 420px); max-height: 100%; overflow-y: auto; padding: 16px; border-radius: 14px; background: var(--card); border: 2px solid var(--accent); text-align: center; }
.dg-pop h3 { margin: 4px 0 10px; }
.dg-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.dg-choices .btn { font-size: 18px; }
.dg-gains, .dg-rank { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.dg-gains li, .dg-rank li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: var(--card2); }
.dg-rank li { font-weight: 800; }
.dg-rank li.me { border: 2px solid var(--accent); }
.dg-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dg-colors, .dg-widths { display: flex; gap: 5px; }
.dg-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; font-size: 14px; padding: 0; }
.dg-color.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.35); }
.dg-width { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--card2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dg-width span { display: block; border-radius: 50%; background: var(--text); }
.dg-width.on { border-color: var(--accent); }
.dg-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.dg-board { display: flex; flex-direction: column; gap: 4px; }
.dg-p { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--card2); font-size: 14px; }
.dg-p.me { outline: 1px solid var(--accent); }
.dg-p.got { background: rgba(46, 204, 113, 0.18); }
.dg-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-plus { color: var(--ok); font-weight: 800; }
.dg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dg-chat { flex: 1; min-height: 120px; max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 10px; background: #11152a; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.dg-msg { word-break: break-all; }
.dg-msg.sys { color: var(--muted); font-size: 13px; }
.dg-msg.ok { color: var(--ok); font-weight: 700; }
.dg-form { display: flex; gap: 6px; }
.dg-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #11152a; color: var(--text); font-size: 16px; }
.dg-input:disabled { opacity: 0.6; }
@media (max-width: 760px) {
  .dg-main { grid-template-columns: 1fr; }
  .dg-chat { max-height: 160px; min-height: 90px; }
}

/* ---------- 誰是臥底 ---------- */
.spy-word { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(155, 89, 182, 0.25), rgba(52, 152, 219, 0.15)); border: 1px solid var(--line); text-align: center; }
.spy-word:empty { display: none; }
.spy-w { font-size: 40px; font-weight: 900; letter-spacing: 4px; color: var(--accent); }
.spy-w.hide { color: var(--muted); }
.spy-status { flex: 1; min-width: 0; }
.spy-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.spy-p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); font-size: 14px; }
.spy-p.me { border-color: var(--accent); }
.spy-p.cur { background: rgba(255, 183, 3, 0.18); border-color: var(--accent); }
.spy-p.out { opacity: 0.6; }
.spy-tag { font-size: 12px; padding: 1px 6px; border-radius: 6px; }
.spy-tag.spy { background: rgba(231, 76, 60, 0.3); }
.spy-tag.civ { background: rgba(46, 204, 113, 0.25); }
.spy-action { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #11152a; }
.spy-turn { font-weight: 800; font-size: 17px; }
.spy-ballot { display: flex; flex-wrap: wrap; gap: 8px; }
.spy-result h3, .spy-win h2 { margin: 0 0 6px; }
.spy-votes { margin: 4px 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.spy-win { text-align: center; }
.spy-win.civ h2 { color: var(--ok); }
.spy-win.spy h2 { color: var(--bad); }
.spy-words { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; font-size: 18px; }
.spy-words b { color: var(--accent); }
.spy-rules { font-size: 14px; color: var(--muted); }
.spy-rules summary { cursor: pointer; }
.spy-log { display: flex; flex-direction: column; gap: 8px; }
.spy-round { padding: 8px 10px; border-radius: 10px; background: var(--card2); display: flex; flex-direction: column; gap: 3px; }
.spy-say { font-size: 15px; word-break: break-all; }

/* ---- brain ---- */
/* ===== 腦力（bn）新遊戲 ===== */
.g-bn-go { background: linear-gradient(135deg, #34d399, #22c55e); color: #062b1c; font-weight: 800; border: none; }
.g-bn-right { background: var(--ok) !important; color: #fff; }
.g-bn-wrong { background: var(--bad) !important; color: #fff; }
.g-bn-empty { color: var(--muted); font-size: 13px; }

/* 24 點 */
.g-bn-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 96px; }
.g-bn-card { min-width: 72px; height: 96px; padding: 0 10px; border-radius: 14px; background: linear-gradient(160deg, #fff, #dff7ec); color: #0b2e2a; font-size: 32px; font-weight: 900; border: 3px solid transparent; box-shadow: 0 4px 0 #0b5a40; font-variant-numeric: tabular-nums; }
.g-bn-card.sel { border-color: #facc15; background: linear-gradient(160deg, #fffbe6, #fde68a); transform: translateY(-4px); }
.g-bn-ops .g-bn-op { width: 64px; font-size: 28px; font-weight: 900; }

/* 數獨 */
.g-bn-sdk { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 360px; border: 3px solid #34d399; border-radius: 10px; overflow: hidden; background: #0b2e2a; }
.g-bn-sdk-cell { aspect-ratio: 1; border: 1px solid rgba(52, 211, 153, 0.25); background: #10241f; color: #a7f3d0; font-size: 24px; font-weight: 800; padding: 0; cursor: pointer; touch-action: manipulation; min-width: 0; }
.g-bn-sdk-cell.given { color: #fff; background: #17372f; cursor: default; }
.g-bn-sdk-cell.bx { border-right: 3px solid #34d399; }
.g-bn-sdk-cell.by { border-bottom: 3px solid #34d399; }
.g-bn-sdk-cell.sel { background: rgba(250, 204, 21, 0.35); }
.g-bn-sdk-cell.bad { color: #f87171; }
.g-bn-pad { grid-template-columns: repeat(7, 1fr); max-width: 420px; gap: 6px; }
.g-bn-pad .g-choice { padding: 12px 0; font-size: 22px; min-width: 0; }

/* 數列 */
.g-bn-seq { font-size: 30px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }

/* 天平 */
.g-bn-scale { position: relative; width: 100%; max-width: 380px; height: 150px; }
.g-bn-beam { position: absolute; left: 16%; right: 16%; top: 40px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #fde68a, #f59e0b); transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.g-bn-pan { position: absolute; top: 8px; width: 96px; min-height: 46px; padding: 6px 4px; border: 2px solid #fde68a; border-top: none; border-radius: 0 0 50px 50px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 2px; background: rgba(253, 230, 138, 0.08); }
.g-bn-pan.l { left: -48px; }
.g-bn-pan.r { right: -48px; }
.g-bn-pivot { position: absolute; left: 50%; top: 44px; width: 0; height: 0; margin-left: -18px; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 90px solid #8b5a2b; }
.g-bn-chip { width: 20px; height: 20px; border-radius: 50%; background: #facc15; color: #3b2a00; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.g-bn-coins { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
.g-bn-coin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #b45309; background: radial-gradient(circle at 35% 30%, #fff3b0, #facc15 60%, #d97706); color: #3b2a00; font-weight: 900; font-size: 16px; cursor: pointer; padding: 0; touch-action: manipulation; }
.g-bn-coin.l { box-shadow: 0 0 0 3px #60a5fa; }
.g-bn-coin.r { box-shadow: 0 0 0 3px #f472b6; }
.g-bn-coin.pick { animation: pop 0.8s infinite alternate; }
.g-bn-coin.fake { box-shadow: 0 0 0 4px #ef4444, 0 0 18px #ef4444; }
.g-bn-log { width: 100%; max-width: 420px; max-height: 110px; overflow-y: auto; font-size: 14px; color: #d1fae5; display: flex; flex-direction: column; gap: 3px; text-align: center; font-variant-numeric: tabular-nums; }

/* 華容道 */
.g-bn-slide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 300px; padding: 8px; border-radius: 16px; background: #0b2e2a; box-shadow: inset 0 0 0 2px var(--th-line, #34d399); }
.g-bn-tile { aspect-ratio: 1; border-radius: 12px; font-size: 40px; font-weight: 900; padding: 0; min-width: 0; background: linear-gradient(160deg, #fef3c7, #fbbf24); color: #422006; border: none; box-shadow: 0 5px 0 #92400e; }
.g-bn-tile.ok { background: linear-gradient(160deg, #d1fae5, #34d399); box-shadow: 0 5px 0 #065f46; color: #064e3b; }
.g-bn-tile.empty { background: transparent; box-shadow: none; }

/* 點燈 */
.g-bn-lights { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 330px; }
.g-bn-light { aspect-ratio: 1; border-radius: 50%; border: 2px solid #1f3d36; background: radial-gradient(circle at 40% 35%, #2a3b37, #0d1513); padding: 0; min-width: 0; cursor: pointer; touch-action: manipulation; transition: background 0.15s, box-shadow 0.15s; }
.g-bn-light.on { background: radial-gradient(circle at 40% 35%, #fffbe6, #fde047 45%, #f59e0b); box-shadow: 0 0 18px rgba(253, 224, 71, 0.75); border-color: #fde047; }

/* 河內塔 */
.g-bn-hanoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 480px; }
.g-bn-peg { position: relative; height: 190px; border-radius: 12px; border: 2px solid var(--line); background: rgba(0, 0, 0, 0.25); display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; padding: 6px 4px; gap: 3px; cursor: pointer; touch-action: manipulation; }
.g-bn-peg::before { content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 4px; border-radius: 2px; background: #8b5a2b; }
.g-bn-peg.sel { border-color: #facc15; background: rgba(250, 204, 21, 0.12); }
.g-bn-rod { position: absolute; left: 50%; bottom: 6px; width: 6px; height: 150px; margin-left: -3px; border-radius: 3px; background: #8b5a2b; }
.g-bn-disk { position: relative; z-index: 1; height: 22px; border-radius: 11px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.g-bn-disk.up { transform: translateY(-16px); box-shadow: 0 0 12px #fff; }

/* 幾A幾B / 成語 共用格子 */
.g-bn-slots { display: flex; gap: 10px; justify-content: center; }
.g-bn-slot { width: 58px; height: 64px; border-radius: 12px; border: 2px dashed rgba(52, 211, 153, 0.6); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 900; color: #fff; cursor: pointer; }
.g-bn-slot.on { border-style: solid; background: rgba(52, 211, 153, 0.18); }
.g-bn-slots.ok .g-bn-slot { border-color: var(--ok); background: rgba(46, 204, 113, 0.35); }
.g-bn-slots.bad .g-bn-slot { border-color: var(--bad); background: rgba(231, 76, 60, 0.35); }
.g-bn-keys { grid-template-columns: repeat(5, 1fr); max-width: 360px; gap: 6px; }
.g-bn-keys .g-choice { padding: 12px 0; font-size: 22px; min-width: 0; }
.g-bn-hist { width: 100%; max-width: 300px; max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.g-bn-hrow { display: grid; grid-template-columns: 40px 1fr 60px; align-items: center; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-variant-numeric: tabular-nums; font-size: 18px; }
.g-bn-hrow.ok { background: rgba(46, 204, 113, 0.35); }
.g-bn-hg { letter-spacing: 4px; font-weight: 800; text-align: center; }
.g-bn-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 280px; }
.g-bn-ctile { font-size: 30px; font-weight: 900; padding: 14px 0; background: linear-gradient(160deg, #fef3c7, #fcd34d); color: #422006; border: none; box-shadow: 0 4px 0 #92400e; }
.g-bn-ctile:disabled { opacity: 0.25; }

/* 時鐘 */
.g-bn-time { font-variant-numeric: tabular-nums; }
.g-bn-fb { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; font-size: 14px; color: #d1fae5; }
.g-bn-clock { width: 70px; height: 70px; flex: none; }

/* 星期 */
.g-bn-wq { font-size: 20px; line-height: 1.5; }
.g-bn-week { grid-template-columns: repeat(7, 1fr); gap: 5px; }
.g-bn-week .g-choice { padding: 14px 0; font-size: 16px; min-width: 0; }

/* 找零錢 */
.g-bn-bill { font-size: 22px; }
.g-bn-tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: 100%; max-width: 420px; min-height: 70px; padding: 8px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(52, 211, 153, 0.5); }
.g-bn-cash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.g-bn-money { font-weight: 900; font-size: 20px; padding: 10px 0; border: none; touch-action: manipulation; }
.g-bn-money.note { border-radius: 8px; background: linear-gradient(135deg, #bbf7d0, #4ade80); color: #064e3b; box-shadow: 0 3px 0 #166534; }
.g-bn-money.coin { border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fff3b0, #facc15 60%, #d97706); color: #3b2a00; box-shadow: 0 3px 0 #92400e; }
.g-bn-money.sm { font-size: 13px; padding: 6px 8px; min-width: 40px; }

/* 火柴 */
.g-bn-matchwrap { width: 100%; max-width: 520px; padding: 8px; border-radius: 14px; background: #1c1208; box-shadow: inset 0 0 0 2px rgba(253, 230, 138, 0.25); }
.g-bn-match { width: 100%; display: block; }
.g-bn-stick { stroke: transparent; stroke-width: 7; stroke-linecap: round; pointer-events: none; }
.g-bn-stick.slot { stroke: rgba(253, 230, 138, 0.28); stroke-dasharray: 4 5; stroke-width: 4; }
.g-bn-stick.on { stroke: #f5c77e; }
.g-bn-stick.fixed { stroke: #e0b574; }
.g-bn-stick.lift { stroke: #fde047; stroke-dasharray: 3 4; filter: drop-shadow(0 0 4px #fde047); }
.g-bn-hit { stroke: transparent; stroke-width: 20; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }

/* 圖形規律 */
.g-bn-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 260px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.g-bn-mbox { aspect-ratio: 1; border-radius: 8px; background: #10241f; border: 1px solid rgba(52, 211, 153, 0.3); display: flex; align-items: center; justify-content: center; }
.g-bn-mcell { width: 100%; height: 100%; display: block; }
.g-bn-mopts .g-choice { padding: 4px; aspect-ratio: 1; }

/* 數織 */
.g-bn-nono { display: grid; grid-template-columns: 70px repeat(5, 1fr); gap: 3px; width: 100%; max-width: 360px; }
.g-bn-nclue { display: flex; align-items: center; justify-content: center; color: #a7f3d0; font-size: 15px; font-weight: 800; border-radius: 6px; font-variant-numeric: tabular-nums; }
.g-bn-nclue.top { flex-direction: column; justify-content: flex-end; min-height: 64px; padding-bottom: 4px; line-height: 1.1; }
.g-bn-nclue.left { justify-content: flex-end; padding-right: 6px; letter-spacing: 2px; }
.g-bn-nclue.ok { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.g-bn-ncell { aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(52, 211, 153, 0.35); background: #e7f5ef; color: #94a3b8; font-size: 18px; padding: 0; min-width: 0; cursor: pointer; touch-action: manipulation; }
.g-bn-ncell.on { background: #0b2e2a; border-color: #34d399; }

/* 一筆畫 */
.g-bn-pathwrap { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; }
.g-bn-pgrid { position: absolute; inset: 0; display: grid; gap: 4px; touch-action: none; user-select: none; }
.g-bn-pcell { border-radius: 8px; background: #17372f; border: 1px solid rgba(52, 211, 153, 0.3); cursor: pointer; }
.g-bn-pcell.block { background: repeating-linear-gradient(45deg, #1f2937 0 6px, #111827 6px 12px); border-color: #111827; cursor: default; }
.g-bn-pcell.on { background: #10b981; border-color: #6ee7b7; }
.g-bn-pcell.start::after { content: '⭐'; display: flex; height: 100%; align-items: center; justify-content: center; font-size: 22px; pointer-events: none; }
.g-bn-pcell.head { box-shadow: 0 0 0 3px #fde68a inset; }
.g-bn-pline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 倒水 */
.g-bn-jugs { display: flex; align-items: flex-end; justify-content: center; gap: 18px; width: 100%; min-height: 220px; }
.g-bn-jcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.g-bn-jug { position: relative; width: 74px; border: 3px solid #a7f3d0; border-top: none; border-radius: 0 0 16px 16px; background: rgba(255, 255, 255, 0.06); overflow: hidden; padding: 0; cursor: pointer; touch-action: manipulation; }
.g-bn-jug.sel { border-color: #facc15; box-shadow: 0 0 16px rgba(250, 204, 21, 0.6); transform: translateY(-6px); }
.g-bn-water { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #67e8f9, #0284c7); transition: height 0.4s; }
.g-bn-jlab { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 2px 4px #000; }
.g-bn-jcap { font-size: 13px; color: #d1fae5; }

/* 拈 */
.g-bn-nim { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
.g-bn-pile { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.g-bn-pno { width: 22px; color: #a7f3d0; font-weight: 800; }
.g-bn-stone { width: 38px; height: 38px; border-radius: 50%; border: none; padding: 0; background: radial-gradient(circle at 35% 30%, #e5e7eb, #9ca3af 55%, #4b5563); box-shadow: 0 3px 0 #1f2937; cursor: pointer; touch-action: manipulation; }
.g-bn-stone:hover { filter: brightness(1.2); }
.g-bn-stone.gone { display: inline-block; opacity: 0.25; box-shadow: none; animation: pop 0.4s; cursor: default; }

/* 冰上滑行 */
.g-bn-ice { position: relative; display: grid; width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #e0f2fe, #bae6fd); border: 3px solid #7dd3fc; touch-action: none; }
.g-bn-icecell { display: flex; align-items: center; justify-content: center; font-size: 24px; border: 1px solid rgba(255, 255, 255, 0.5); }
.g-bn-icecell.rock { background: rgba(71, 85, 105, 0.35); }
.g-bn-peng { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 28px; transition: left 0.25s ease-out, top 0.25s ease-out; pointer-events: none; }

/* ---- reaction ---- */
/* ---- 反應類新增（rx-*） ---- */
.g-rx-small { font-size: 26px; min-height: 36px; }
.g-rx-saloon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; padding: 14px 10px 18px; border-radius: 16px; background: linear-gradient(180deg, #8b5a2b, #5c3a1a); box-shadow: inset 0 -8px 0 #3d250f, 0 8px 20px rgba(0, 0, 0, 0.4); }
.g-rx-win { aspect-ratio: 3 / 4; border-radius: 12px 12px 4px 4px; border: 4px solid #3d250f; background: linear-gradient(180deg, #1b1a2e, #2c2a44); font-size: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; touch-action: manipulation; color: #fff; }
.g-rx-win.up { animation: pop 0.2s; background: linear-gradient(180deg, #f6d38b, #d9a85b); }
.g-rx-win.bad { background: linear-gradient(180deg, #ffb3a7, #e0604f); }
.g-rx-win.hit { background: #2ecc71; }
.g-rx-win.miss { background: #7f1d1d; }
.g-rx-doll { font-size: 64px; line-height: 1; transition: transform 0.15s; }
.g-rx-doll.look { transform: scale(1.15); filter: drop-shadow(0 0 14px #ff4d6d); }
.g-rx-chant { font-size: 28px; font-weight: 900; letter-spacing: 6px; min-height: 40px; color: #ffd166; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.g-rx-track { position: relative; width: 100%; max-width: 420px; height: 54px; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 20px, rgba(255, 255, 255, 0.03) 20px 40px), rgba(0, 0, 0, 0.35); border: 2px solid var(--th-line, #335); overflow: hidden; }
.g-rx-runner { position: absolute; top: 8px; left: 0; font-size: 30px; line-height: 1; transform: scaleX(-1); }
.g-rx-flag { position: absolute; right: 8px; top: 10px; font-size: 26px; line-height: 1; }
.g-rx-ear { font-size: 36px; }
.g-rx-belt { position: relative; width: 100%; max-width: 440px; height: 86px; border-radius: 14px; background: repeating-linear-gradient(90deg, #2a2f3d 0 18px, #222633 18px 36px); border: 2px solid var(--th-line, #335); overflow: hidden; }
.g-rx-belt::after { content: '🕳️'; position: absolute; right: 2px; top: 24px; font-size: 30px; opacity: 0.8; }
.g-rx-item { position: absolute; top: 18px; font-size: 40px; line-height: 1; transition: transform 0.2s, opacity 0.2s; }
.g-rx-item.front { filter: drop-shadow(0 0 10px #ffd166); transform: scale(1.12); }
.g-rx-item.ok { transform: translateY(40px) scale(0.6); opacity: 0; }
.g-rx-item.bad { transform: translateY(-30px) rotate(40deg); opacity: 0; }
.g-rx-bins { flex-wrap: wrap; }
.g-rx-bins .g-choice { flex: 1; font-size: 18px; padding: 18px 4px; min-width: 0; }
.g-rx-cmd { font-size: 30px; min-height: 48px; }
.g-rx-bar { width: 100%; max-width: 420px; height: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.g-rx-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--th-a, #22d3ee), var(--th-b, #3b82f6)); }
.g-rx-simon .g-choice { flex: 1; font-size: 34px; padding: 18px 0; min-width: 0; }
.g-rx-slapcard { min-height: 160px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.g-rx-slapcard .g-playcard { width: 110px; min-width: 110px; height: 154px; padding: 0; margin: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }

/* ---- memA ---- */
/* ---------- 記憶（視覺／空間）memA ---------- */
.g-ma-board { max-width: 360px; }
.g-ma-board .g-cell { font-size: 32px; transition: background 0.2s; }
.g-ma-blank .g-cell { background: rgba(0, 0, 0, 0.35); }
.g-cell.g-ma-ghost { opacity: 0.45; outline: 2px dashed rgba(255, 255, 255, 0.7); outline-offset: -4px; }
.g-ma-right { border-color: var(--ok) !important; background: rgba(46, 204, 113, 0.35) !important; }
.g-ma-wrong { border-color: var(--bad) !important; background: rgba(231, 76, 60, 0.35) !important; }

.g-ma-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; font-size: 42px; padding: 16px; width: 100%; max-width: 420px; min-height: 140px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.25)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); align-content: center; }
.g-ma-cover { font-size: 72px; animation: shuffle 0.5s ease-in-out infinite; }

.g-ma-mug { padding: 10px 26px 0; border-radius: 16px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 22px), rgba(0, 0, 0, 0.3); }
.g-ma-face { display: inline-block; width: 90px; height: 108px; }
.g-ma-face.big { width: 170px; height: 204px; }
.g-ma-face svg { width: 100%; height: 100%; display: block; }
.g-ma-lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 480px; }
.g-ma-suspect { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; min-width: 0; font-size: 14px; }
.g-ma-suspect .g-ma-face { width: 100%; max-width: 90px; height: auto; aspect-ratio: 100 / 120; }

.g-ma-routewrap { position: relative; width: 100%; max-width: 360px; }
.g-ma-route { gap: 4px; max-width: none; position: relative; z-index: 1; }
.g-ma-route .g-cell:not(.on):not(.ok):not(.bad) { background: rgba(35, 42, 68, 0.28); }
.g-ma-route .g-cell { font-size: 24px; }
.g-ma-routeline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.g-ma-routeline polyline { fill: none; stroke-width: 0.16; stroke-linecap: round; stroke-linejoin: round; }
.g-ma-routeline .show { stroke: #f472b6; filter: drop-shadow(0 0 0.08px #fff); }
.g-ma-routeline .mine { stroke: rgba(46, 204, 113, 0.9); }
.g-ma-routeline .miss { stroke: rgba(255, 255, 255, 0.75); stroke-dasharray: 0.15 0.12; }

.g-ma-town { max-width: 340px; gap: 5px; padding: 5px; border-radius: 14px; background: #4b5563; }
.g-ma-block { cursor: default; font-size: 28px; background: #a3d9a5; border: none; border-radius: 6px; color: #111; }
.g-ma-block.on { background: #fde68a; box-shadow: 0 0 0 3px #f472b6; }
.g-ma-block.ok { background: #86efac; box-shadow: 0 0 0 3px var(--ok); }
.g-ma-q { font-size: 20px; }

.g-ma-shapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.g-ma-shape { display: inline-block; width: 64px; height: 64px; }
.g-ma-shape svg { width: 100%; height: 100%; display: block; }
.g-ma-slot { position: relative; padding: 6px; border-width: 2px; }
.g-ma-slot.sel { box-shadow: 0 0 0 3px var(--accent); }
.g-ma-dot { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.g-ma-palette { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.g-ma-swatch { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); touch-action: manipulation; }
.g-ma-swatch:active { transform: scale(0.9); }

.g-ma-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 330px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, #7c2d12, #431407); box-shadow: inset 0 0 0 3px #b45309, 0 8px 20px rgba(0, 0, 0, 0.4); }
.g-ma-slotbox { aspect-ratio: 1; font-size: 38px; border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.25); background: #fef3c7; cursor: pointer; padding: 0; touch-action: manipulation; }
.g-ma-slotbox.sel { box-shadow: 0 0 0 4px var(--accent); transform: scale(0.94); }
.g-ma-pop { animation: pop 0.25s; }

.g-ma-room { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: linear-gradient(#fbe7c6 0 68%, #b7794a 68%); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25); }
.g-ma-window { position: absolute; left: 6%; top: 8%; width: 24%; aspect-ratio: 1; border: 5px solid #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 34px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.g-ma-frame { position: absolute; left: 40%; top: 10%; width: 22%; aspect-ratio: 4 / 3; border: 6px solid; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.g-ma-clockbox { position: absolute; right: 7%; top: 9%; width: 18%; aspect-ratio: 1; }
.g-ma-clock { width: 100%; height: 100%; display: block; }
.g-ma-table { position: absolute; left: 28%; width: 44%; top: 56%; height: 26%; border-top: 10px solid #78350f; }
.g-ma-table::before, .g-ma-table::after { content: ''; position: absolute; top: 0; width: 8px; height: 100%; background: #78350f; }
.g-ma-table::before { left: 8%; }
.g-ma-table::after { right: 8%; }
.g-ma-fruits { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; justify-content: center; gap: 2px; font-size: 22px; }
.g-ma-pet { position: absolute; top: 66%; font-size: 40px; }
.g-ma-pet.left { left: 8%; }
.g-ma-pet.right { right: 8%; transform: scaleX(-1); }

.g-ma-dotbox { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: 16px; background: #0b0614; box-shadow: inset 0 0 0 2px rgba(244, 114, 182, 0.5); cursor: crosshair; overflow: hidden; touch-action: none; }
.g-ma-dotbox > div { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.g-ma-flashdot { width: 18px; height: 18px; background: #fff; box-shadow: 0 0 14px 4px #f472b6; }
.g-ma-flashdot.real { background: var(--ok); box-shadow: 0 0 10px 2px var(--ok); }
.g-ma-noise { width: 10px; height: 10px; border-radius: 2px !important; }
.g-ma-mydot { width: 16px; height: 16px; border: 3px solid var(--accent); }
.g-ma-dotline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.g-ma-dotline line { stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.6; stroke-dasharray: 2 1.5; }

.g-ma-tf { font-size: 20px; color: #fde68a; }
.g-ma-rot { max-width: 300px; }
.g-ma-turn { animation: ma-turn 0.5s ease; }
@keyframes ma-turn { 0% { transform: rotate(0); } 50% { transform: rotate(8deg) scale(0.96); } 100% { transform: rotate(0); } }

.g-ma-pframe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 200px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.15); transition: box-shadow 0.15s; }
.g-ma-pframe.right { box-shadow: inset 0 0 0 4px var(--ok); }
.g-ma-pframe.wrong { box-shadow: inset 0 0 0 4px var(--bad); }
.g-ma-pframe.late { box-shadow: inset 0 0 0 4px #9ca3af; }
.g-ma-pcell { aspect-ratio: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.g-ma-seenbtns { grid-template-columns: 1fr 1fr; max-width: 360px; }
.g-ma-seenbtns .g-choice { font-size: 22px; padding: 18px 6px; }

/* ---- memB ---- */
/* ===== 記憶 memB（語言 / 數字 / 序列） ===== */
.g-mb-nb-card { width: 150px; height: 150px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 84px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)); border: 2px solid var(--th-line, var(--line)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transition: opacity 0.12s; }
.g-mb-nb-card.off { opacity: 0.08; }
.g-mb-good { animation: mbGood 0.4s; }
.g-mb-bad { animation: mbBad 0.4s; }
@keyframes mbGood { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.9); } 100% { box-shadow: 0 0 0 22px rgba(46, 204, 113, 0); } }
@keyframes mbBad { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); background: rgba(231, 76, 60, 0.45); } 75% { transform: translateX(8px); } }
.g-mb-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 340px; }
.g-mb-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.g-mb-dots i.now { background: #fff; }
.g-mb-dots i.ok { background: var(--ok, #2ecc71); }
.g-mb-dots i.bad { background: var(--bad, #e74c3c); }
.g-mb-slips { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; width: 100%; max-width: 440px; }
.g-mb-slip { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #fff8e7; color: #3b2a14; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); transform: rotate(-1deg); }
.g-mb-slip:nth-child(2n) { transform: rotate(1.2deg); }
.g-mb-slip b { font-size: 15px; }
.g-mb-slip span { font-size: 20px; font-weight: 800; color: #b4235a; }
.g-mb-q { font-size: 20px; font-weight: 800; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.g-btn.g-mb-okc, .g-mb-tc.g-mb-okc { background: rgba(46, 204, 113, 0.55) !important; border-color: #2ecc71 !important; }
.g-btn.g-mb-badc, .g-mb-tc.g-mb-badc { background: rgba(231, 76, 60, 0.55) !important; border-color: #e74c3c !important; }
.g-mb-okt { color: #7ee2a8; }
.g-mb-badt { color: #ff9a8f; }
.g-mb-paper { width: 100%; max-width: 440px; padding: 16px 18px; border-radius: 14px; background: #fffaf0; color: #2d2416; font-size: 18px; line-height: 1.75; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); background-image: repeating-linear-gradient(transparent 0 30px, rgba(120, 90, 40, 0.12) 30px 31px); }
.g-mb-word { min-height: 72px; font-size: 44px; font-weight: 900; text-align: center; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); transition: transform 0.15s; }
.g-mb-pop { animation: mbPop 0.25s; }
@keyframes mbPop { 0% { transform: scale(0.6); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }
.g-mb-seq { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.g-mb-seq span { min-width: 44px; padding: 6px 10px; border-radius: 10px; border: 2px dashed var(--th-line, var(--line)); color: rgba(255, 255, 255, 0.55); font-weight: 800; text-align: center; }
.g-mb-seq span.on { border-style: solid; background: rgba(255, 255, 255, 0.15); color: #fff; }
.g-mb-bank { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.g-mb-bank .g-choice { font-size: 17px; padding: 12px 4px; }
.g-mb-bank .g-choice:disabled { opacity: 0.3; }
.g-mb-menu { width: 100%; max-width: 360px; padding: 14px 18px; border-radius: 14px; background: #1f2a24; border: 6px solid #6b4a2b; color: #f3f1e4; font-family: 'Comic Sans MS', 'Segoe Print', cursive; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.g-mb-menu-h { text-align: center; font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.g-mb-menu-r { display: flex; justify-content: space-between; font-size: 19px; padding: 4px 0; border-bottom: 1px dashed rgba(243, 241, 228, 0.25); }
.g-mb-menu-r b { color: #ffd166; }
.g-mb-receipt { width: 100%; max-width: 300px; padding: 14px 18px; background: #fff; color: #222; font-family: ui-monospace, Consolas, monospace; font-size: 19px; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.g-mb-receipt div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #bbb; }
.g-mb-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 380px; }
.g-mb-rules div { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 2px solid var(--th-line, var(--line)); font-size: 34px; }
.g-mb-rules b { font-size: 28px; color: #fff; }
.g-mb-cross { display: grid; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 64px); gap: 6px; }
.g-mb-cross .g-choice { font-size: 30px; padding: 0; touch-action: manipulation; }
.g-mb-d0 { grid-area: 1 / 2; }
.g-mb-d1 { grid-area: 3 / 2; }
.g-mb-d2 { grid-area: 2 / 1; }
.g-mb-d3 { grid-area: 2 / 3; }
.g-mb-door { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 22px; font-weight: 800; color: #fff; }
.g-mb-door:not(:has(div)) { font-size: 64px; }
.g-mb-face { font-size: 64px; }
.g-mb-table { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 6px; width: 100%; max-width: 440px; align-items: stretch; }
.g-mb-tn { display: flex; align-items: center; font-weight: 800; font-size: 15px; color: #fff; white-space: nowrap; }
.g-mb-tc { padding: 10px 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--th-line, var(--line)); color: #fff; font-size: 16px; font-weight: 700; text-align: center; }
button.g-mb-tc { cursor: pointer; touch-action: manipulation; }
button.g-mb-tc:active { transform: scale(0.95); }

/* ---- spdA ---- */
/* ---- 手速（滑鼠／觸控）spdA ---- */
.g-sa-cv { user-select: none; -webkit-user-select: none; cursor: crosshair; }
.g-sa-scratch { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: radial-gradient(circle, #fff7d6, #ffd166); box-shadow: inset 0 0 0 3px var(--th-line, #fb923c), 0 8px 22px rgba(0, 0, 0, 0.4); touch-action: none; }
.g-sa-prize { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 140px; user-select: none; }
.g-sa-coat { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.g-sa-bar { width: 100%; max-width: 340px; height: 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.g-sa-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--th-a, #fb923c), var(--th-b, #ef4444)); transition: width 0.08s; }
.g-sa-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 320px; padding: 12px; border-radius: 18px; background: linear-gradient(160deg, #8b2c1a, #5a1a0e); box-shadow: inset 0 0 0 4px #c0582f, 0 8px 22px rgba(0, 0, 0, 0.45); transition: transform 0.25s, opacity 0.25s; }
.g-sa-bento.g-sa-close { transform: scale(0.85) translateY(-10px); opacity: 0; }
.g-sa-slot { aspect-ratio: 1.3; border-radius: 12px; background: #2a1410; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; font-size: 46px; user-select: none; }
.g-sa-slot.full { background: #3d2116; }
.g-sa-ghost { opacity: 0.22; filter: grayscale(1); }
.g-sa-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 340px; min-height: 84px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.3); border: 2px dashed var(--th-line, rgba(255, 255, 255, 0.3)); }
.g-sa-food { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 42px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.g-sa-food.g-sa-drag { z-index: 10; cursor: grabbing; background: rgba(255, 255, 255, 0.25); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); }

/* ---- spdB ---- */
/* ===== 手速 spdB：快速決策 / 分類 / 排序 / 按鍵組合 ===== */
.g-sb-bad { animation: sbbad 0.35s; }
@keyframes sbbad { 0% { box-shadow: inset 0 0 0 5px var(--bad); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* 水果蔬菜分類 */
.g-sb-item { width: 170px; height: 170px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(255, 255, 255, 0.1); border: 2px solid var(--th-line, var(--line)); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.g-sb-emo { font-size: 84px; line-height: 1; }
.g-sb-name { font-size: 18px; font-weight: 800; color: #fff; }
.g-stage .g-btn-huge.g-sb-side { padding: 22px 8px; font-size: 22px; }
.g-stage .g-btn-huge.g-sb-side0 { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.g-stage .g-btn-huge.g-sb-side1 { background: linear-gradient(135deg, #16a34a, #84cc16); }
/* 格鬥搓招 */
.g-sb-move { color: #ffd166; letter-spacing: 2px; }
.g-sb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 50px; }
.g-sb-chip { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(255, 255, 255, 0.15); opacity: 0.75; transition: transform 0.1s; }
.g-sb-chip.atk { border-color: #ffb703; }
.g-sb-chip.cur { opacity: 1; border-color: #fff; transform: scale(1.12); box-shadow: 0 0 12px rgba(255, 255, 255, 0.45); }
.g-sb-chip.done { opacity: 1; background: var(--ok); border-color: var(--ok); }
.g-sb-arcade { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.g-sb-arcade .g-dpad { grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); }
.g-sb-atk { display: flex; flex-direction: column; gap: 10px; }
.g-sb-atkbtn { width: 76px; height: 76px; border-radius: 50%; font-size: 34px; padding: 0; background: radial-gradient(circle at 35% 30%, #ff8a8a, #c81e1e); border: 3px solid rgba(0, 0, 0, 0.35); box-shadow: 0 4px 0 #7a1010; }
.g-sb-atkbtn + .g-sb-atkbtn { background: radial-gradient(circle at 35% 30%, #8ab8ff, #1e4fc8); box-shadow: 0 4px 0 #10307a; }
/* 便當裝盒 */
.g-sb-ticket { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; padding: 10px 14px; border-radius: 6px; background: #fffbea; color: #3b2a12; font-size: 22px; font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); border-top: 6px dashed #e7d7a8; }
.g-sb-tno { font-size: 13px; color: #9a7b3c; }
.g-sb-tline.done { color: #15803d; text-decoration: line-through; }
.g-sb-box { width: 100%; max-width: 340px; min-height: 92px; padding: 10px; border-radius: 16px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; font-size: 30px; background: linear-gradient(#2b1a0e, #3d2614); border: 4px solid #8b5a2b; box-shadow: inset 0 0 0 3px #5c3a1a; }
.g-sb-empty { font-size: 14px; color: #b08a63; }
.g-sb-ing .g-choice { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 30px; padding: 10px 2px; }
.g-sb-ing .g-choice small { font-size: 12px; font-weight: 600; }
/* 收銀找錢 */
.g-sb-receipt { text-align: center; font-size: 17px; color: #fff; padding: 10px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); }
.g-sb-need { margin-top: 4px; font-size: 22px; font-weight: 900; color: #ffd166; font-variant-numeric: tabular-nums; }
.g-sb-tray { min-height: 52px; width: 100%; max-width: 360px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.g-sb-mbill { padding: 6px 8px; border-radius: 4px; background: #4ade80; color: #064e3b; font-weight: 900; font-size: 13px; }
.g-sb-mcoin { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #fde68a, #ca8a04); color: #422006; font-weight: 900; font-size: 12px; }
.g-sb-cash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 360px; }
.g-stage .g-sb-bill { height: 64px; border-radius: 8px; font-size: 24px; font-weight: 900; color: #064e3b; background: linear-gradient(135deg, #86efac, #22c55e); border: 2px solid #15803d; }
.g-stage .g-sb-coin { height: 64px; border-radius: 999px; font-size: 24px; font-weight: 900; color: #422006; background: radial-gradient(circle at 35% 30%, #fef3c7, #eab308 70%, #a16207); border: 2px solid #a16207; }
/* 插隊排序 */
.g-sb-inc { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--th-a, #fb923c), var(--th-b, #ef4444)); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.g-sb-line { display: flex; align-items: stretch; justify-content: center; width: 100%; min-height: 64px; gap: 3px; }
.g-sb-gap { flex: 1 1 0; min-width: 20px; max-width: 56px; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 16px; padding: 0; cursor: pointer; touch-action: manipulation; }
.g-sb-gap:active { background: rgba(255, 209, 102, 0.35); }
.g-sb-num { flex: none; width: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; color: #1f2937; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.g-sb-num.ok { background: var(--ok); color: #fff; width: 46px; }
/* 連連配對 */
.g-sb-match { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; max-width: 380px; }
.g-sb-col { display: flex; flex-direction: column; gap: 8px; }
.g-sb-mi { height: 56px; padding: 0 6px; font-weight: 800; }
.g-sb-mi.emo { font-size: 32px; }
.g-sb-mi.name { font-size: 18px; }
.g-sb-mi.ok { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 0.55; }
/* 方塊消行 */
.g-sb-next { display: flex; gap: 18px; justify-content: center; }
.g-sb-minibox { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; color: #fff; }
.g-sb-mini { display: grid; gap: 2px; }
.g-sb-mini span { width: 14px; height: 14px; border-radius: 3px; }
.g-sb-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: min(100%, 270px); padding: 4px; border-radius: 10px; background: #0b0f1c; border: 2px solid var(--th-line, var(--line)); touch-action: manipulation; }
.g-sb-tc { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.g-sb-tc.ghost { opacity: 0.38; }
.g-sb-tc.danger { background: rgba(231, 76, 60, 0.35); }
.g-sb-board .c1, .g-sb-mini .c1 { background: #f87171; }
.g-sb-board .c2, .g-sb-mini .c2 { background: #fb923c; }
.g-sb-board .c3, .g-sb-mini .c3 { background: #22d3ee; }
.g-sb-board .c4, .g-sb-mini .c4 { background: #a3e635; }
.g-sb-board .c5, .g-sb-mini .c5 { background: #c084fc; }
.g-sb-board .c6, .g-sb-mini .c6 { background: #facc15; }
.g-sb-board .c9 { background: #64748b; }
.g-sb-clear { animation: sbclear 0.35s; }
@keyframes sbclear { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* 雙鍵和弦 */
.g-sb-pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 420px; }
.g-sb-pad { height: 150px; border: none; border-radius: 16px; color: #fff; font-size: 26px; font-weight: 900; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; filter: brightness(0.35) saturate(0.6); transition: filter 0.08s, transform 0.08s; cursor: pointer; }
.g-sb-pad.on { filter: brightness(1.1); box-shadow: 0 0 22px rgba(255, 255, 255, 0.55), inset 0 0 0 3px #fff; }
.g-sb-pad.down { transform: scale(0.94); }
/* 迴轉壽司 */
.g-sb-want { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; background: #fffbea; color: #3b2a12; font-size: 18px; font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.g-sb-want-emo { font-size: 34px; }
.g-sb-lane { position: relative; width: 100%; height: 96px; overflow: hidden; border-radius: 14px; background: repeating-linear-gradient(90deg, #374151 0 38px, #4b5563 38px 40px); border-top: 6px solid #9ca3af; border-bottom: 6px solid #9ca3af; }
.g-sb-plate { position: absolute; left: 0; top: 14px; width: 62px; height: 62px; border-radius: 50%; border: 4px solid #f9fafb; background: radial-gradient(circle, #fff 55%, #e5e7eb 56%); font-size: 30px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); will-change: transform; }
.g-sb-plate.ok { border-color: var(--ok); opacity: 0; transition: opacity 0.2s; }
/* 密碼鎖 */
.g-sb-lockicon { font-size: 44px; line-height: 1; }
.g-sb-code { display: flex; gap: 8px; }
.g-sb-code span { width: 40px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #111827; color: #ffd166; font-size: 28px; font-weight: 900; font-family: ui-monospace, monospace; border: 2px solid #ffd166; }
.g-sb-dials { display: flex; gap: 10px; justify-content: center; }
.g-sb-dial { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 14px; background: linear-gradient(#9ca3af, #4b5563); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.g-sb-dbtn { width: 58px; height: 50px; padding: 0; font-size: 20px; }
.g-sb-digit { width: 58px; height: 62px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; color: #111827; font-size: 36px; font-weight: 900; font-family: ui-monospace, monospace; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.35); }
.g-sb-digit.ok { background: #bbf7d0; color: #14532d; }
/* 快速出牌 */
.g-sb-pile { min-height: 120px; display: flex; align-items: center; }
.g-sb-ucard { width: 64px; height: 92px; border-radius: 10px; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; font-weight: 900; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.g-sb-ucard.top { width: 80px; height: 114px; font-size: 52px; }
.g-sb-hand { display: flex; gap: 6px; justify-content: center; width: 100%; }
.g-sb-ubtn { padding: 0; border: none; background: none; cursor: pointer; touch-action: manipulation; flex: 0 1 64px; min-width: 0; }
.g-sb-ubtn .g-sb-ucard { width: 100%; max-width: 64px; }
.g-sb-ubtn:active .g-sb-ucard { transform: translateY(-6px); }
.g-sb-draw { font-size: 16px; }
@media (max-width: 380px) {
  .g-sb-pad { height: 120px; }
  .g-sb-dbtn, .g-sb-digit { width: 52px; }
  .g-sb-arcade .g-dpad { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); }
}

/* ---- eye ---- */
/* ===== 眼力（ey） ===== */
.g-ey-box { gap: 10px; }
.g-stage .g-choice.g-ey-right { background: linear-gradient(160deg, #2ecc71, #16a34a); border-color: #2ecc71; }
.g-stage .g-choice.g-ey-wrong { background: linear-gradient(160deg, #ef4444, #b91c1c); border-color: #ef4444; }
.g-ey-svg { width: 100%; max-width: 380px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--th-line, var(--line)); border-radius: 14px; padding: 6px; box-sizing: border-box; }
.g-ey-svg svg { display: block; width: 100%; height: auto; }
.g-ey-iso { max-width: 340px; }
/* 找碴 */
.g-ey-spot { display: flex; gap: 10px; width: 100%; justify-content: center; }
.g-ey-boardw { width: calc(50% - 5px); max-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-ey-cap { font-size: 13px; color: #cbd5e1; font-weight: 700; }
.g-ey-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: 100%; padding: 4px; box-sizing: border-box; border-radius: 10px; background: linear-gradient(160deg, #fef3c7, #fde68a); }
.g-ey-sc { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(13px, 4vw, 26px); cursor: pointer; border-radius: 50%; touch-action: manipulation; }
.g-ey-sc span { display: inline-block; line-height: 1; }
.g-ey-sc.found { box-shadow: inset 0 0 0 3px #ff2d55; background: rgba(255, 45, 85, 0.15); }
/* 威利在哪 */
.g-ey-target { font-size: 18px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.g-ey-target span { font-size: 40px; padding: 2px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 2px var(--th-a, #2dd4bf); }
.g-ey-waldo { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 100%; max-width: 400px; padding: 4px; box-sizing: border-box; background: rgba(255, 255, 255, 0.92); border-radius: 12px; }
.g-ey-wc { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 5.4vw, 30px); cursor: pointer; border-radius: 8px; touch-action: manipulation; }
.g-ey-wc.ok { background: #2ecc71; }
.g-ey-wc.bad { background: #ef4444; }
/* 杯子 */
.g-ey-cups { position: relative; width: 100%; max-width: 420px; height: 150px; border-radius: 16px; background: linear-gradient(#0000 60%, rgba(0, 0, 0, 0.35)), repeating-linear-gradient(90deg, #7c4a1e 0 28px, #6b3f19 28px 56px); box-shadow: inset 0 0 0 2px var(--th-line, var(--line)); overflow: hidden; }
.g-ey-cupw { position: absolute; bottom: 14px; height: 110px; display: flex; justify-content: center; align-items: flex-end; }
.g-ey-ball { position: absolute; bottom: 4px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ffd166 40%, #e08a00); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); }
.g-ey-cup { position: relative; width: 70%; max-width: 70px; height: 84px; background: linear-gradient(90deg, #b91c1c, #ef4444 40%, #b91c1c); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); border-radius: 6px; transition: transform 0.35s ease; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4); }
.g-ey-cups.lift .g-ey-cup { transform: translateY(-48px); }
.g-ey-cups.pick .g-ey-cupw { cursor: pointer; }
.g-ey-cupw.ok .g-ey-cup { background: linear-gradient(90deg, #15803d, #22c55e 40%, #15803d); }
.g-ey-cupw.bad .g-ey-cup { background: linear-gradient(90deg, #475569, #94a3b8 40%, #475569); }
/* 拼圖 */
.g-ey-jig { width: 100%; max-width: 260px; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.g-ey-jig svg, .g-ey-piece svg { display: block; width: 100%; height: auto; }
.g-ey-piece { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.g-stage .g-choices-4 .g-choice:has(.g-ey-piece) { padding: 6px; }
/* 鏡像 */
.g-ey-pair { display: flex; gap: 10px; width: 100%; justify-content: center; }
.g-ey-shape { width: calc(50% - 5px); max-width: 190px; aspect-ratio: 1; background: rgba(0, 0, 0, 0.3); border-radius: 14px; border: 1px solid var(--th-line, var(--line)); }
.g-ey-shape svg { display: block; width: 100%; height: 100%; }
/* 剪影 */
.g-ey-silbox { width: 200px; height: 170px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: radial-gradient(circle, #1e3a5f, #0b1220); box-shadow: inset 0 0 0 2px var(--th-line, var(--line)); }
.g-ey-sil { font-size: 120px; line-height: 1; filter: brightness(0) invert(1); transition: filter 0.4s; }
.g-ey-sil.show { filter: none; }
/* 時鐘 */
.g-ey-clock { width: 220px; max-width: 70vw; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }
.g-ey-clock svg { display: block; width: 100%; height: auto; }
/* 色階 */
.g-ey-hue { max-width: 330px; }
.g-ey-tile { font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 1px 4px #000; border: 2px solid rgba(255, 255, 255, 0.25); }
.g-ey-tile.g-ey-tok { box-shadow: inset 0 0 0 3px #2ecc71; }
.g-ey-tile.g-ey-tbad { box-shadow: inset 0 0 0 3px #ef4444; }
/* 模糊 */
.g-ey-blurview { width: 200px; height: 200px; overflow: hidden; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; box-shadow: inset 0 0 0 2px var(--th-line, var(--line)); }
.g-ey-blurem { font-size: 140px; line-height: 1; will-change: transform, filter; }
/* 視力檢查 */
.g-ey-chart { width: 100%; max-width: 320px; height: 170px; display: flex; align-items: center; justify-content: center; background: #f3f1ea; border-radius: 14px; box-shadow: inset 0 0 0 3px #d6d3c4, 0 6px 16px rgba(0, 0, 0, 0.4); }
.g-ey-chart svg { display: block; }
.g-ey-dirpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 260px; }
.g-ey-dirpad .g-choice { font-size: 26px; padding: 12px 0; }
.g-ey-dirc { display: flex; align-items: center; justify-content: center; font-size: 26px; }
/* 色點 */
.g-ey-ishi { max-width: 280px; border-radius: 50%; }

/* ---- mind ---- */

/* ---------- 心理戰（新增 13 款） ---------- */
.g-md-note { text-align: center; font-size: 16px; font-weight: 700; color: #fff; min-height: 1.3em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.g-md-coins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; max-width: 420px; }
.g-md-coin { padding: 8px 0; font-size: 24px; min-width: 0; background: rgba(0, 0, 0, 0.3); border: 2px solid var(--th-line, var(--line)); filter: grayscale(0.9) brightness(0.7); transition: filter 0.12s, transform 0.12s; }
.g-md-coin.on { filter: none; border-color: #ffd166; background: rgba(255, 209, 102, 0.22); transform: translateY(-3px); }
.g-md-zero { filter: none; font-weight: 900; color: #fff; }
.g-md-grid6 { grid-template-columns: repeat(6, 1fr); }
.g-md-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.g-md-field { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)); border: 2px solid var(--th-line, var(--line)); }
.g-md-fname { font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; }
.g-md-fcnt { font-size: 40px; font-weight: 900; color: var(--th-a, #fff); font-variant-numeric: tabular-nums; }
.g-md-fbtns { display: flex; gap: 6px; }
.g-md-fbtns .g-btn { padding: 8px 14px; font-size: 20px; font-weight: 900; }
.g-md-pools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.g-md-pool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; min-width: 0; }
.g-md-picon { font-size: 30px; }
.g-md-pval { font-size: 15px; font-weight: 900; color: #ffd166; }
.g-md-chips { font-size: 12px; min-height: 1.4em; letter-spacing: -2px; word-break: break-all; }
.g-md-road { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 380px; padding: 10px 14px; border-radius: 14px; font-size: 18px; background: repeating-linear-gradient(90deg, #444 0 26px, #ddd 26px 40px) center / 100% 4px no-repeat, #2a2a35; }
.g-md-car { font-size: 40px; }
.g-md-flip { transform: scaleX(-1); display: inline-block; }
.g-md-beach { position: relative; display: grid; grid-template-columns: repeat(21, 1fr); width: 100%; padding: 26px 0 8px; border-radius: 14px; background: linear-gradient(180deg, #38bdf8 0 30%, #fcd34d 30% 100%); }
.g-md-guest { text-align: center; font-size: 13px; line-height: 1; }
.g-md-cart { position: absolute; top: 0; font-size: 26px; transform: translateX(-50%); transition: left 0.12s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.g-md-range { accent-color: var(--th-a, #a78bfa); }
@media (max-width: 420px) {
  .g-md-picon { font-size: 24px; }
  .g-md-fcnt { font-size: 32px; }
  .g-md-fbtns .g-btn { padding: 6px 10px; }
}

/* ---- gamble ---- */

/* ===== 博弈桌・第二批（gb） ===== */
/* 基諾 */
.g-gb-keno { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 400px; }
.g-gb-keno-cell { aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 215, 120, 0.45); background: rgba(0, 0, 0, 0.3); color: #fff6dc; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform 0.12s, background 0.12s; touch-action: manipulation; }
.g-gb-keno-cell:not(:disabled):hover { background: rgba(255, 215, 120, 0.18); }
.g-gb-keno-cell:disabled { cursor: default; }
.g-gb-keno-cell.on { background: radial-gradient(circle at 35% 30%, #fff3b0, #f4c542 55%, #b8860b); color: #3a2a05; border-color: #fff3b0; }
.g-gb-keno-cell.drawn { background: radial-gradient(circle at 35% 30%, #9ad1ff, #2563eb 60%, #1e3a8a); color: #fff; border-color: #bfdbfe; }
.g-gb-keno-cell.hit { background: radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e 55%, #166534); color: #fff; border-color: #fff; box-shadow: 0 0 12px #4ade80; transform: scale(1.1); }
.g-gb-paytab { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 28px; }
.g-gb-paytab span { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 215, 120, 0.35); color: #ffd166; font-size: 13px; font-weight: 800; }

/* 花旗骰 */
.g-gb-craps { display: flex; align-items: center; gap: 18px; }
.g-gb-puck { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1d1d1f; color: #eee; border: 4px solid #fff; font-size: 14px; font-weight: 900; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); text-align: center; }
.g-gb-puck.on { background: #fff; color: #111; border-color: #1d1d1f; font-size: 16px; }

/* 牌九撲克 */
.g-gb-pg-pick { flex-wrap: nowrap; gap: 2px; min-height: 70px; max-width: 100%; }
.g-casino .g-gb-pg-pick .g-playcard { flex: 0 1 40px; width: 40px; min-width: 0; height: auto; aspect-ratio: 250 / 350; margin: 0; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.g-casino .g-gb-pg-pick .g-playcard.sel { transform: translateY(-12px); box-shadow: 0 0 0 3px #ffd166, 0 8px 14px rgba(0, 0, 0, 0.5); }
.g-gb-pg-row { min-height: 64px; }
.g-gb-pg-hands { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g-gb-pg-cards { display: flex; gap: 6px; align-items: center; }
.g-casino .g-gb-pg-row .g-hand.sm { flex: none; flex-wrap: nowrap; gap: 1px; }
.g-casino .g-gb-pg-row .g-hand.sm .g-playcard { width: 28px; min-width: 28px; height: 39px; margin: 0; }
.g-gb-pg-lo { padding-left: 6px; border-left: 2px dashed rgba(255, 215, 120, 0.5); }
.g-gb-pg-pts { font-size: 13px; font-weight: 800; color: #ffd166; }

/* 任逍遙 */
.g-gb-spots { display: flex; gap: 16px; justify-content: center; }
.g-gb-spot { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; color: #3a2a05; background: radial-gradient(circle at 35% 30%, #fff3b0, #f4c542 55%, #b8860b); border: 3px dashed #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); transition: opacity 0.3s, transform 0.3s; }
.g-gb-spot.now { box-shadow: 0 0 0 3px #ffd166, 0 0 18px #ffd166; transform: scale(1.08); }
.g-gb-spot.off { opacity: 0.25; transform: scale(0.85); }

/* 開箱大挑戰 */
.g-gb-dond-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 400px; }
.g-gb-dond-board span { padding: 4px 0; border-radius: 6px; text-align: center; font-size: 13px; font-weight: 900; color: #3a2a05; background: linear-gradient(#ffe08a, #e0a82e); transition: opacity 0.3s; }
.g-gb-dond-board span.gone { opacity: 0.2; text-decoration: line-through; }
.g-gb-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 400px; }
.g-gb-case { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 58px; padding: 0; border-radius: 8px; border: 2px solid #3b2410; background: linear-gradient(#a0702d, #6b4423); color: #ffe7b0; cursor: pointer; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.2), 0 4px 8px rgba(0, 0, 0, 0.45); touch-action: manipulation; }
.g-gb-case::before { content: ''; position: absolute; top: -7px; left: 35%; right: 35%; height: 8px; border: 3px solid #3b2410; border-bottom: 0; border-radius: 6px 6px 0 0; }
.g-gb-case b { font-size: 20px; }
.g-gb-case small { font-size: 13px; font-weight: 900; color: #fff; }
.g-gb-case:disabled { cursor: default; }
.g-gb-case.mine { background: linear-gradient(#ffd166, #c9891a); color: #3a2a05; box-shadow: 0 0 0 3px #fff, 0 0 16px #ffd166; }
.g-gb-case.open { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 215, 120, 0.35); }
.g-gb-case.pick { box-shadow: 0 0 0 3px #4ade80, 0 0 16px #4ade80; }

/* 足球串關 */
.g-gb-matches { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.g-gb-match { padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 215, 120, 0.25); transition: border-color 0.3s, box-shadow 0.3s; }
.g-gb-match.win { border-color: #4ade80; box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
.g-gb-match.lose { border-color: #f87171; opacity: 0.8; }
.g-gb-match-top { display: grid; grid-template-columns: 1fr auto 1fr 40px; align-items: center; gap: 6px; color: #fff6dc; font-weight: 800; margin-bottom: 6px; }
.g-gb-match-top > span:first-child { text-align: right; }
.g-gb-score { min-width: 54px; padding: 2px 8px; border-radius: 6px; background: #111; color: #ffd166; text-align: center; font-variant-numeric: tabular-nums; }
.g-gb-clock { font-size: 12px; color: #a7f3d0; text-align: right; }
.g-gb-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.g-casino .g-gb-odd { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; line-height: 1.2; }
.g-gb-odd small { font-size: 12px; opacity: 0.85; }
.g-casino .g-gb-odd.sel { background: linear-gradient(#ffd166, #c9891a); color: #3a2a05; text-shadow: none; border-color: #fff3b0; }
.g-casino .g-gb-odd.hit { box-shadow: 0 0 0 3px #4ade80; }

/* 番攤 */
.g-gb-ft { position: relative; width: 240px; height: 150px; }
.g-gb-ft-pile { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05) 70%, transparent 72%); }
.g-gb-bead { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e5e7eb 50%, #9ca3af); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); transition: opacity 0.15s, transform 0.15s; }
.g-gb-bead.gone { opacity: 0; transform: translateX(-40px) scale(0.6); }
.g-gb-bead.hit { background: radial-gradient(circle at 35% 30%, #fff3b0, #f4c542 55%, #b8860b); transform: scale(1.5); }
.g-gb-ft-cup { position: absolute; left: 20px; right: 20px; top: 8px; bottom: 8px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 40% 30%, #d6b07a, #8a5a2b 60%, #4a2d12); border: 3px solid #3b2410; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); transition: transform 0.45s ease-in, opacity 0.45s; }
.g-gb-ft-cup.up { transform: translateY(-120px) rotate(-12deg); opacity: 0; }
.g-gb-ft-cnt { position: absolute; right: -6px; top: -6px; min-width: 40px; padding: 4px 8px; border-radius: 999px; background: #111; color: #ffd166; font-size: 20px; font-weight: 900; text-align: center; border: 2px solid #d4a84b; }
.g-gb-ft-bets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.g-casino .g-gb-ft-bets .g-choice { min-width: 0; padding: 7px 2px; font-size: 12px; line-height: 1.3; }

/* 內外 */
.g-gb-ab-joker { min-height: 95px; display: flex; justify-content: center; }
.g-casino .g-gb-ab-joker .g-playcard { width: 64px; min-width: 64px; height: 90px; box-shadow: 0 0 0 3px #ffd166, 0 6px 14px rgba(0, 0, 0, 0.5); }
.g-gb-ab-row .g-hand { flex: 1; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; overflow: hidden; }
.g-casino .g-gb-ab-row .g-hand .g-playcard { flex: none; width: 42px; min-width: 42px; height: 59px; margin: 0; }
.g-casino .g-gb-ab-row .g-hand .g-playcard + .g-playcard { margin-left: -28px; }
.g-casino .g-gb-ab-row .g-playcard.g-gb-ab-hit { box-shadow: 0 0 0 3px #4ade80, 0 0 14px #4ade80; }
.mgo-news { max-width: 86%; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.9); color: #1d2a1d; font-size: clamp(10px, 1.6vw, 14px); font-weight: 800; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
.mgo-news:empty { display: none; }
.mgo-hint { max-width: 440px; text-align: center; font-size: 13px; font-weight: 700; color: #0d3b66; background: rgba(255, 255, 255, 0.6); padding: 6px 12px; border-radius: 10px; }
.mgo-hint:empty { display: none; }
.mgo-info { padding: 4px 16px; text-align: center; font-weight: 800; }
.mgo-info.small { font-size: 12px; font-weight: 600; color: #4a5d4a; padding-top: 8px; }
.mgo-rules ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #10314a; }
.mono-tile { cursor: pointer; }
.ol-settings { display: flex; flex-direction: column; gap: 10px; }
.ol-set { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.ol-set-l b { display: block; }
.ol-set .seg { flex: 1 1 60px; padding: 8px 10px; }
@media (max-width: 640px) { .ol-set { grid-template-columns: 1fr; gap: 4px; } }
.kart-noitems .kart-item, .kart-noitems .kart-pad.item { display: none; }
.mgo-pot { padding: 3px 12px; border-radius: 999px; background: #fff8e1; color: #2e7d32; font-size: clamp(10px, 1.6vw, 13px); font-weight: 900; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
.mono-board.size-L .mono-nm { font-size: clamp(7px, 0.95vw, 11px); }
.mono-board.size-L .mono-ic { font-size: clamp(12px, 2.2vw, 22px); }
.mono-board.size-S .mono-ic { font-size: clamp(18px, 3.6vw, 32px); }
.mono-board.size-S .mono-nm { font-size: clamp(9px, 1.4vw, 14px); }
.mono-tile.t-station { background: linear-gradient(135deg, #eceff1, #b0bec5); }
.mono-tile.t-heist { background: linear-gradient(135deg, #e8f5e9, #81c784); }
.mono-tile.t-attack { background: linear-gradient(135deg, #fff3e0, #ffb74d); }
.mono-tile.t-park { background: linear-gradient(135deg, #c8e6c9, #66bb6a); }
.mono-tile.hotel { box-shadow: 0 5px 0 #c5b88f, inset 0 0 0 3px var(--own), 0 0 14px #ffd54f; }
.mono-tile.smash { animation: mgosmash 0.6s ease-out; }
@keyframes mgosmash { 20% { transform: translateY(6px) rotate(-4deg); filter: brightness(1.6); } 40% { transform: translateX(-4px) rotate(4deg); } 60% { transform: translateX(4px) rotate(-2deg); } }
.mgo-vaults { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px 6px; }
.mgo-vault { height: 64px; border-radius: 12px; border: none; background: linear-gradient(#90a4ae, #607d8b); color: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 5px 0 #37474f; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mgo-vault:disabled { cursor: default; }
.mgo-vault.open { background: linear-gradient(#ffe082, #ffb300); color: #4e342e; font-size: 18px; box-shadow: 0 5px 0 #c67c00; animation: mgopop 0.35s ease-out; }
.mgo-vault.miss { opacity: 0.45; filter: grayscale(0.7); }
.mgo-vault.mine { outline: 4px solid #43a047; }
.mgo-vault.shake { animation: shake 0.3s; }
.mgo-targets { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.mgo-target { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; border: 3px solid var(--c); background: #fff; cursor: pointer; text-align: left; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); }
.mgo-target span:last-child { display: flex; flex-direction: column; }
.mgo-target small { color: #6d4c41; }
.mgo-target:disabled { opacity: 0.6; }
.mgo-actions { gap: 10px; align-items: center; flex-wrap: wrap; }
.kart-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kart-cv[hidden] { display: none; }
.kart-mini, .kart-hud-l, .kart-item, .kart-coins, .kart-lights, .kart-big, .kart-banner, .kart-results { z-index: 2; }
.kart-coins { position: absolute; bottom: 12px; left: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #ffd54f; font-weight: 900; font-size: 18px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); }
.kart-coins:empty { display: none; }
.kart-item.rolling { border-color: #fff; animation: kartroll 0.15s linear infinite; }
@keyframes kartroll { 50% { transform: scale(1.08); } }
.kart-item { font-size: 30px; }
.kart-lights { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); display: none; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #222; box-shadow: 0 6px 0 #000, 0 10px 20px rgba(0, 0, 0, 0.5); }
.kart-lights.show { display: flex; }
.kart-lights i { width: 34px; height: 34px; border-radius: 50%; background: #4a1010; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6); }
.kart-lights[data-lit='1'] i:nth-child(1), .kart-lights[data-lit='2'] i:nth-child(-n + 2), .kart-lights[data-lit='3'] i { background: #ff1744; box-shadow: 0 0 18px #ff1744; }
.kart-lights[data-lit='4'] i { background: #00e676; box-shadow: 0 0 18px #00e676; }
.kart-banner { position: absolute; top: 34%; left: 0; right: 0; text-align: center; font-size: 46px; font-weight: 900; color: #fff; text-shadow: 0 4px 0 #1565c0, 0 8px 20px rgba(0, 0, 0, 0.5); pointer-events: none; opacity: 0; }
.kart-banner.show { animation: kartbanner 1.8s ease-out; }
@keyframes kartbanner { 0% { opacity: 0; transform: scale(2); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.kart-pad.drift { background: rgba(79, 195, 247, 0.2); }
.kart-help { margin-top: 2px; font-size: 13px; }
.kart-help summary { cursor: pointer; font-weight: 800; }
.kart-help ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
@media (max-width: 640px) {
  .kart-controls { gap: 6px; }
  .kart-cg { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .kart-pad { min-width: 50px; height: 54px; font-size: 22px; }
  .kart-pad.small { min-width: 54px; font-size: 11px; }
}
.chip.cpu { border-style: dashed; opacity: 0.85; }

/* ---------- 便當大冒險 ---------- */
.plat-stage { position: relative; height: min(64vh, 600px); border-radius: 14px; overflow: hidden; background: #6ec6ff; touch-action: none; user-select: none; }
.plat-cv { width: 100%; height: 100%; display: block; }
.plat-hud { position: absolute; top: 34px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; z-index: 2; }
.plat-time { padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-weight: 900; font-size: 18px; }
.plat-time.hurry { background: rgba(230, 57, 70, 0.85); }
.plat-hurry { padding: 4px 12px; border-radius: 999px; background: rgba(255, 183, 3, 0.9); color: #222; font-weight: 800; font-size: 13px; animation: plat-blink 0.8s infinite alternate; }
@keyframes plat-blink { to { opacity: 0.55; } }
.plat-prog { position: absolute; top: 12px; left: 12px; right: 40px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 2; }
.plat-prog b { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.5); }
.plat-prog b.me { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-color: #fff; z-index: 1; }
.plat-prog-flag { position: absolute; right: -26px; top: -7px; font-style: normal; font-size: 16px; }
@media (max-width: 700px) { .plat-stage { height: min(calc(100dvh - 300px), 110vw); min-height: 240px; } }
.plat-banner { font-size: clamp(18px, 4vw, 34px); padding: 0 12px; }
.plat-me { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-weight: 800; font-size: 14px; }
.plat-hearts { letter-spacing: -2px; font-size: 15px; }
.plat-pw { font-size: 17px; }
.plat-buff { padding: 0 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); font-size: 12px; }
.plat-roster { position: absolute; top: 30px; right: 10px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; z-index: 2; max-width: 46%; }
.plat-ro { display: flex; gap: 6px; align-items: center; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 12px; white-space: nowrap; }
.plat-ro.me { outline: 2px solid var(--accent); }
.plat-ro i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.plat-ro b { overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.plat-ro .muted { color: rgba(255, 255, 255, 0.75); }
.plat-levels, .plat-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.plat-level, .plat-char { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--card2); color: var(--text); text-align: left; cursor: pointer; }
.plat-level.on, .plat-char.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 183, 3, 0.25); }
.plat-level:disabled:not(.on) { opacity: 0.75; cursor: default; }
.plat-char:disabled { opacity: 0.45; cursor: not-allowed; }
.plat-thumb { width: 100%; height: auto; border-radius: 8px; image-rendering: pixelated; }
.plat-char { align-items: center; text-align: center; }
.plat-char-cv { width: 64px; height: 64px; }
@media (max-width: 700px) { .plat-roster { top: 64px; } .plat-ro { font-size: 11px; } }
.kart-pad.off { opacity: 0.35; }

/* ---------- 便當漆彈戰 ---------- */
.paint-stage { position: relative; height: min(70vh, 680px); border-radius: 14px; overflow: hidden; background: #1b2033; user-select: none; outline: none; }
.paint-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.paint-wrap .kart-head { flex-wrap: wrap; }
.paint-opt { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
.paint-sens { background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 13px; }
.paint-touch { padding: 8px 12px; border-radius: 10px; background: rgba(231, 76, 60, 0.15); border: 1px solid var(--bad); font-weight: 700; }
.paint-cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); transition: width 0.12s, height 0.12s, margin 0.12s; }
.paint-cross::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; }
.paint-cross.smg { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.paint-cross.aim { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.paint-cross.sniper.aim { opacity: 0; }
.paint-cross.squid { opacity: 0.25; }
.paint-hitmark { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; opacity: 0; background: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%); -webkit-mask: radial-gradient(circle, transparent 7px, #000 8px); mask: radial-gradient(circle, transparent 7px, #000 8px); }
.paint-hitmark.show { animation: painthit 0.3s ease-out; }
@keyframes painthit { from { opacity: 1; transform: scale(1.2); } to { opacity: 0; transform: scale(1); } }
.paint-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(220, 30, 60, 0.75); }
.paint-vignette.show { animation: paintvig 0.5s ease-out; }
@keyframes paintvig { from { opacity: 1; } to { opacity: 0; } }
.paint-inkfx { position: absolute; inset: 0; pointer-events: none; transition: box-shadow 0.25s; }
.paint-inkfx.enemy { box-shadow: inset 0 -60px 80px -20px rgba(150, 0, 200, 0.55); }
.paint-inkfx.own { box-shadow: inset 0 0 90px 10px rgba(255, 255, 255, 0.18); }
.paint-scope { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(0, 0, 0, 0.92) 31%), linear-gradient(transparent calc(50% - 1px), rgba(0, 0, 0, 0.8) calc(50% - 1px), rgba(0, 0, 0, 0.8) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, 0.8) calc(50% - 1px), rgba(0, 0, 0, 0.8) calc(50% + 1px), transparent calc(50% + 1px)); }
.paint-scope.show { opacity: 1; }
.paint-timer { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; background: rgba(15, 18, 32, 0.75); color: #fff; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; pointer-events: none; }
.paint-timer.hurry { color: #ff6b6b; }
.paint-feed { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; }
.paint-feed-line { padding: 3px 10px; border-radius: 8px; background: rgba(15, 18, 32, 0.75); font-weight: 800; font-size: 14px; }
.paint-feed-line.me { border: 1px solid var(--accent); }
.paint-bars { position: absolute; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 26px; grid-template-rows: auto auto; gap: 6px 8px; align-items: end; pointer-events: none; width: 240px; }
.paint-wpn { grid-column: 1; color: #fff; font-weight: 800; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
.paint-hp { grid-column: 1; position: relative; height: 22px; border-radius: 999px; background: rgba(15, 18, 32, 0.75); overflow: hidden; }
.paint-hp-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2ecc71, #7bed9f); transition: width 0.15s; }
.paint-hp-fill.low { background: linear-gradient(90deg, #e74c3c, #ff7675); }
.paint-hp b { position: relative; display: block; text-align: center; line-height: 22px; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
.paint-ink { grid-column: 2; grid-row: 1 / span 4; position: relative; height: 90px; border-radius: 10px; background: rgba(15, 18, 32, 0.75); border: 2px solid rgba(255, 255, 255, 0.6); overflow: hidden; }
.paint-ink-fill { position: absolute; left: 0; right: 0; bottom: 0; }
.paint-ink-fill.low { animation: g-blink 0.5s infinite; }
@keyframes g-blink { 50% { opacity: 0.35; } }
.paint-ink-warn { position: absolute; right: 0; bottom: 100px; width: 260px; padding: 6px 10px; border-radius: 8px; background: rgba(231, 76, 60, 0.9); color: #fff; font-weight: 800; font-size: 13px; opacity: 0; transition: opacity 0.2s; }
.paint-ink-warn.show { opacity: 1; }
.paint-sub { grid-column: 1; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
.paint-sub.low { opacity: 0.45; }
.paint-sp { grid-column: 1; position: relative; height: 18px; border-radius: 999px; background: rgba(15, 18, 32, 0.75); overflow: hidden; }
.paint-sp-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #a55eea, #f7b731); transition: width 0.2s; }
.paint-sp b { position: relative; display: block; text-align: center; line-height: 18px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
.paint-sp.full { box-shadow: 0 0 12px #f7b731; animation: g-blink 0.8s infinite; }
.paint-jump { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); min-width: 200px; padding: 10px 14px; border-radius: 12px; background: rgba(15, 18, 32, 0.9); border: 2px solid var(--accent); display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.paint-jump[hidden] { display: none; }
.paint-mini { position: absolute; left: 12px; bottom: 12px; width: 96px; height: 144px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.6); background: rgba(15, 18, 32, 0.6); pointer-events: none; }
.paint-banner { top: 26%; font-size: 34px; }
.paint-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 18, 32, 0.55); cursor: pointer; }
.paint-lock[hidden] { display: none; }
.paint-lock-box { max-width: 520px; padding: 18px 22px; border-radius: 16px; background: rgba(15, 18, 32, 0.9); border: 2px solid var(--accent); text-align: center; }
.paint-lock-box h2 { margin: 0 0 12px; }
.paint-keys { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; font-size: 14px; }
.paint-keys kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 6px; background: var(--card2); border: 1px solid var(--line); border-bottom-width: 3px; font-family: inherit; font-weight: 800; }
.paint-dead { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(92%, 420px); padding: 16px; border-radius: 16px; background: rgba(15, 18, 32, 0.88); border: 2px solid var(--bad); text-align: center; }
.paint-dead[hidden] { display: none; }
.paint-dead h2 { margin: 0 0 6px; }
.paint-dead-count { font-size: 28px; font-weight: 900; color: var(--accent); margin-bottom: 8px; }
.paint-wpns { display: flex; gap: 6px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.paint-wpn-btn { padding: 8px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--card2); color: var(--text); cursor: pointer; }
.paint-wpn-btn.on { border-color: var(--accent); background: rgba(255, 183, 3, 0.18); }
.paint-board { position: absolute; inset: 12% 10%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(15, 18, 32, 0.9); overflow-y: auto; }
.paint-board[hidden] { display: none; }
.paint-board-team { border-top: 4px solid; padding-top: 6px; }
.paint-board-team h3 { margin: 0 0 6px; }
.paint-board table { width: 100%; border-collapse: collapse; font-size: 14px; }
.paint-board th { text-align: left; color: var(--muted); font-weight: 600; }
.paint-board td, .paint-board th { padding: 4px 6px; }
.paint-board tr.me td { color: var(--accent); font-weight: 800; }
.paint-results { inset: 6% 6%; }
.paint-results h2 { text-align: center; margin: 4px 0 12px; font-size: 30px; }
.paint-res-bar { position: relative; height: 34px; border-radius: 999px; background: var(--card2); overflow: hidden; }
.paint-res-a { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.paint-res-b { position: absolute; right: 0; top: 0; bottom: 0; width: 0; }
.paint-res-pct { display: flex; justify-content: space-between; margin: 6px 4px 12px; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.paint-res-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.paint-res-teams h3 { margin: 0 0 6px; }
.paint-res-teams li { font-size: 14px; flex-wrap: wrap; gap: 4px; }
.paint-fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; background: rgba(15, 18, 32, 0.92); }
.paint-arenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.paint-arena { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--card2); color: var(--text); text-align: left; cursor: pointer; }
.paint-arena.on { border-color: var(--accent); }
.paint-arena:disabled { cursor: default; }
.paint-arena:disabled:not(.on) { opacity: 0.7; }
.paint-thumb { width: 48px; height: 72px; border-radius: 6px; flex: none; image-rendering: pixelated; }
.paint-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paint-team { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 2px solid; background: var(--card2); min-width: 0; }
.paint-team h4 { margin: 0; }
.paint-weapons { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.paint-weapon { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--card2); color: var(--text); text-align: left; cursor: pointer; }
.paint-weapon.on { border-color: var(--accent); background: rgba(255, 183, 3, 0.12); }
.paint-stat { display: grid; grid-template-columns: 36px 1fr; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.paint-stat i { display: block; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.paint-stat u { display: block; height: 100%; background: var(--accent); }
@media (max-width: 640px) {
  .paint-stage { height: 60vh; }
  .paint-bars { width: 170px; }
  .paint-mini { width: 64px; height: 96px; }
  .paint-board, .paint-res-teams, .paint-teams { grid-template-columns: 1fr; }
}

/* 便當方塊求生 */
.flat-stage { position: relative; width: 100%; aspect-ratio: 960 / 544; max-height: 72vh; border-radius: 16px; overflow: hidden; touch-action: none; user-select: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.flat-stage .plat-hud { top: 12px; left: 12px; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.flat-stage .plat-roster { top: 12px; right: 12px; gap: 4px; }
.flat-pill { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 14px; background: rgba(8, 10, 24, 0.62); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.flat-pill.off { opacity: 0.75; }
.flat-sec { font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.flat-sec small { font-size: 12px; font-weight: 700; margin-left: 3px; opacity: 0.7; }
.flat-lvl { display: flex; flex-direction: column; gap: 4px; min-width: 64px; }
.flat-lvl b { font-size: 13px; font-weight: 900; color: #ffd166; }
.flat-lvl i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.flat-lvl u { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffd166, #ff6b6b); transition: width 0.3s; }
.flat-teams { gap: 12px; font-weight: 900; font-size: 15px; }
.flat-note { font-weight: 800; font-size: 14px; }
.flat-ro { background: rgba(8, 10, 24, 0.62); border: 1px solid rgba(255, 255, 255, 0.1); padding: 3px 10px; }
.flat-ro.out { opacity: 0.5; }
.flat-ro.out b { text-decoration: line-through; }
.flat-sos { padding: 0 6px; border-radius: 999px; background: #e63946; color: #fff; font-weight: 900; font-size: 11px; animation: flatsos 0.8s ease-in-out infinite alternate; }
@keyframes flatsos { to { opacity: 0.45; } }
.flat-stage .kart-results.flat-results { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92%); max-height: 90%; padding: 18px 20px; text-align: center; background: rgba(12, 14, 30, 0.94); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.flat-results h2 { margin: 0 0 4px; font-size: 22px; }
.flat-hero { margin: 4px 0 12px; }
.flat-hero b { font-size: 54px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flat-hero span { font-size: 16px; font-weight: 800; margin-left: 4px; opacity: 0.8; }
.flat-best { margin-top: 4px; font-size: 13px; color: var(--muted, #aab); }
.flat-best.new { color: #ffd166; font-weight: 900; }
.flat-results ol { text-align: left; margin-bottom: 14px; }
.flat-results li { align-items: center; font-weight: 700; }
.flat-rk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flat-rk em { font-style: normal; width: 22px; text-align: center; font-weight: 900; }
.flat-rk i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.flat-thumb { width: 120px; height: 68px; border-radius: 8px; flex: none; }
.flat-dpad .kart-pad { min-width: 54px; }
@media (max-width: 700px) {
  .flat-stage { border-radius: 12px; }
  .flat-stage .plat-hud { top: 8px; left: 8px; max-width: 58%; gap: 6px; }
  .flat-stage .plat-roster { top: 8px; right: 8px; }
  .flat-pill { padding: 4px 9px; gap: 7px; border-radius: 11px; }
  .flat-sec { font-size: 19px; }
  .flat-lvl { min-width: 46px; }
  .flat-teams { font-size: 12px; }
  .flat-hero b { font-size: 40px; }
  .flat-dpad .kart-pad { min-width: 44px; }
}
.flat-guide { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.flat-guide.bar { padding: 10px 14px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); }
.flat-g { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.flat-keys { display: flex; align-items: center; gap: 4px; }
.flat-keys i { font-style: normal; font-size: 12px; opacity: 0.6; }
.flat-guide kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); border-bottom-width: 3px; background: #2a2f4a; color: #fff; font: 800 12px/1.5 system-ui, sans-serif; text-align: center; }
.flat-howto { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; background: rgba(8, 10, 24, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 2; width: max-content; max-width: 92%; }
.flat-howto.show { opacity: 1; }
.flat-howto .flat-guide { flex-direction: column; gap: 7px; }
@media (hover: none) and (pointer: coarse) { .plat-wrap > .flat-guide.bar { display: none; } }
@media (max-width: 700px) { .flat-howto { display: none; } }