:root {
  --bg: #1e1f22; --panel: #2b2d31; --panel2: #313338; --line: #3f4147;
  --text: #f2f3f5; --muted: #b5bac1; --accent: #5865f2; --accent2: #4752c4;
  --good: #23a55a; --bad: #f23f43; --gold: #f0b232;
  --p0: #3ba55d; --p1: #5865f2;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.4 "gg sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
#app { max-width: 760px; margin: 0 auto; padding: 0 16px 24px; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.center { text-align: center; }

.top { display: flex; align-items: center; gap: 8px; padding: 14px 0 8px; }
.brand { font-weight: 800; font-size: 20px; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.chip b { color: var(--gold); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.tab { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 14px; white-space: nowrap; }
.tab.on { background: var(--accent); border-color: var(--accent); font-weight: 700; }
.tab:disabled { opacity: .5; cursor: not-allowed; }

.btn { background: var(--accent); border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 600; }
.btn:hover:not(:disabled) { background: var(--accent2); }
.btn.good { background: var(--good); } .btn.bad { background: var(--bad); }
.btn.ghost { background: var(--panel2); border: 1px solid var(--line); }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.on { outline: 2px solid var(--gold); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.card h3 { margin: 0 0 6px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.game-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.game-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.game-card .icon { font-size: 30px; }
.game-card h3 { margin: 4px 0; }
.game-card p { margin: 0; color: var(--muted); font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; }
.pill.on { background: var(--accent); border-color: var(--accent); font-weight: 700; }
input, select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
input[type=number] { width: 120px; }

#challenges { display: flex; flex-direction: column; gap: 8px; }
.challenge { background: #3a3d6b; border: 1px solid var(--accent); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.game-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.game-head h2 { margin: 0; font-size: 18px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; }
.timer.low { color: var(--bad); border-color: var(--bad); }
.info { text-align: center; margin: 4px 0 10px; color: var(--muted); min-height: 22px; }
.info b { color: var(--text); }
.game-root { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* minesweeper */
.ms-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 3px; width: min(100%, 460px); }
.cell { aspect-ratio: 1; border: 0; border-radius: 6px; background: #4e5058; font-weight: 800; font-size: clamp(12px, 3.6vw, 20px); padding: 0; }
.cell:hover:not(.open) { background: #5d6069; }
.cell.open { background: #232428; cursor: default; }
.cell.o0 { background: #1f4a2e; } .cell.o1 { background: #2a3270; }
.cell.boom { background: var(--bad); }
.n1 { color: #5dade2; } .n2 { color: #58d68d; } .n3 { color: #ec7063; } .n4 { color: #a569bd; }
.n5 { color: #f5b041; } .n6 { color: #48c9b0; } .n7 { color: #ddd; } .n8 { color: #999; }

/* 2048 */
.b2048 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 360px); background: #3a3c42; padding: 8px; border-radius: 12px; touch-action: none; }
.tile { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: clamp(18px, 6vw, 30px); background: #4a4d55; }
.t2 { background: #eee4da; color: #776e65; } .t4 { background: #ede0c8; color: #776e65; }
.t8 { background: #f2b179; } .t16 { background: #f59563; } .t32 { background: #f67c5f; } .t64 { background: #f65e3b; }
.t128 { background: #edcf72; font-size: clamp(16px, 5vw, 26px); } .t256 { background: #edcc61; }
.t512 { background: #edc850; } .t1024 { background: #edc53f; font-size: clamp(14px, 4.4vw, 22px); }
.t2048 { background: #edc22e; font-size: clamp(14px, 4.4vw, 22px); }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 44px); gap: 6px; justify-content: center; }
.dpad button { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; font-size: 18px; }
.dpad .up { grid-column: 2; } .dpad .left { grid-column: 1; grid-row: 2; } .dpad .down { grid-column: 2; grid-row: 2; } .dpad .right { grid-column: 3; grid-row: 2; }

/* tic-tac-toe */
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 320px); }
.sq { aspect-ratio: 1; border: 0; border-radius: 12px; background: #3a3c42; font-size: clamp(36px, 14vw, 64px); font-weight: 800; }
.sq:hover:not(:disabled) { background: #4a4d55; }
.sq.X { color: #ff7a7a; } .sq.O { color: #7aa2ff; } .sq.win { background: #2f5a3b; }
.sq:disabled { cursor: default; }

/* connect four */
.c4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: min(100%, 440px); background: #1c4fb5; padding: 8px; border-radius: 14px; }
.c4 .col { display: contents; }
.disc { aspect-ratio: 1; border-radius: 50%; background: #11285a; border: 0; padding: 0; }
.disc.p1 { background: #e84a4a; } .disc.p2 { background: #f5d130; }
.disc.win { box-shadow: 0 0 0 3px #fff inset; }
.c4 .hover:hover .disc:not(.p1):not(.p2) { background: #1b3a82; }

/* rock paper scissors */
.rps { display: flex; gap: 12px; }
.rps button { width: 96px; height: 96px; font-size: 40px; background: var(--panel2); border: 2px solid var(--line); border-radius: 18px; }
.rps button:hover:not(:disabled) { border-color: var(--accent); }
.rps button.mine { border-color: var(--gold); background: #4a4325; }
.rps button:disabled { opacity: .6; cursor: default; }

canvas { max-width: 100%; border-radius: 12px; background: #000; touch-action: none; }

/* profile & leaderboard */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat small { color: var(--muted); display: block; }
.stat b { font-size: 20px; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
tr.link { cursor: pointer; } tr.link:hover { background: var(--panel); }
.good-text { color: var(--good); } .bad-text { color: var(--bad); }

/* overlays */
#overlay { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 20; padding: 16px; }
#overlay[hidden] { display: none; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; max-width: 360px; width: 100%; text-align: center; }
.modal h2 { margin: 0 0 6px; } .modal .reward { font-size: 28px; font-weight: 800; color: var(--gold); margin: 6px 0; }
#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 30; align-items: center; }
.toast { background: #111; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; box-shadow: 0 6px 20px #0008; }
.toast.err { border-color: var(--bad); }

@keyframes flip { 0% { transform: rotateY(0) } 100% { transform: rotateY(1440deg) } }
.coin { display: inline-grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; font-size: 40px;
  background: radial-gradient(circle at 30% 30%, #ffe28a, #d79a1b); animation: flip 1.2s ease-out; }

/* playing cards (blackjack, hold'em) */
.pcard { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 76px; border-radius: 8px;
  background: #fff; color: #111; font-size: 20px; line-height: 1.05; border: 1px solid #bbb; box-shadow: 0 2px 4px #0006; }
.pcard b { font-size: 22px; } .pcard.red { color: #c62828; }
.pcard.back { background: repeating-linear-gradient(45deg, #3b4cc0, #3b4cc0 6px, #2c3a96 6px, #2c3a96 12px); border-color: #fff; }
.pcard.slot { background: #0003; border: 1px dashed #fff4; box-shadow: none; }
.pcard.sm { width: 38px; height: 54px; font-size: 14px; } .pcard.sm b { font-size: 16px; }
.cards { display: flex; gap: 6px; justify-content: center; min-height: 54px; }
.hand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hand-label { color: var(--muted); }
.hand-label b { color: var(--text); }

/* clocks */
.clock-row { display: flex; justify-content: space-between; align-items: center; width: min(100%, 460px); }
.timer.active { border-color: var(--good); }

/* chess */
.chess { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 460px); aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.sqr { border: 0; padding: 0; display: grid; place-items: center; position: relative; }
.sqr.light { background: #eed9b6; } .sqr.dark { background: #b58863; }
.sqr.last { box-shadow: inset 0 0 0 100px #f6e27a77; } .sqr.sel { box-shadow: inset 0 0 0 100px #4ec97b88; } .sqr.check { box-shadow: inset 0 0 0 100px #f23f4399; }
.sqr.dest::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: #2a7a4a99; position: absolute; }
.sqr.cap::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 4px solid #2a7a4aaa; }
.pc { font-size: clamp(24px, 8vw, 46px); line-height: 1; }
.pc.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; } .pc.b { color: #111; text-shadow: 0 0 2px #fff6; }
.movelist { width: min(100%, 460px); max-height: 80px; overflow: auto; color: var(--muted); font-size: 13px; }

/* xiangqi */
.xq-wrap { width: min(100%, 440px); } .xq { width: 100%; height: auto; display: block; }

/* hold'em */
.felt { background: #0e5a36; border: 6px solid #2b2d31; border-radius: 80px / 50px; padding: 18px 12px; text-align: center; width: 100%; box-shadow: inset 0 0 40px #0008; }
.community { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.pot { font-weight: 700; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; width: 100%; }
.seat { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.seat.you { border-color: var(--accent); } .seat.turn { border-color: var(--gold); box-shadow: 0 0 0 2px #f0b23255; }
.seat.folded { opacity: .45; } .seat.won { border-color: var(--good); } .seat.empty { opacity: .35; justify-content: center; min-height: 120px; }
.seat-top { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.seat-status { min-height: 18px; color: var(--muted); font-size: 13px; }
.badge { background: var(--gold); color: #000; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 800; }
.bet { color: var(--gold); }
input[type=range] { width: 160px; padding: 0; }

/* mahjong */
.tiles { display: flex; gap: 3px; flex-wrap: wrap; align-items: flex-end; }
.hand-row { justify-content: center; margin-top: 4px; }
.mj { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; height: 52px; border-radius: 6px; background: #f4f0dc;
  border: 1px solid #b9b394; border-bottom: 4px solid #7a8a5a; color: #222; line-height: 1; user-select: none; cursor: default; }
.mj b { font-size: 22px; } .mj small { font-size: 14px; margin-top: 2px; }
.mj.s0 { color: #1f5fbf; } .mj.s1 { color: #1f8a3b; } .mj.s2 { color: #c62828; }
.mj.h0, .mj.h1, .mj.h2, .mj.h3 { color: #222; } .mj.h4 { color: #c62828; } .mj.h5 { color: #1f8a3b; } .mj.h6 { color: #1f5fbf; }
.mj.back { background: #2f7a55; border-color: #1c4f36; border-bottom-color: #14382a; }
.mj.sm { width: 26px; height: 36px; } .mj.sm b { font-size: 15px; } .mj.sm small { font-size: 10px; }
.mj.xs { width: 16px; height: 24px; border-bottom-width: 3px; } .mj.xs b { font-size: 11px; } .mj.xs small { display: none; }
.hand-row .mj { cursor: pointer; } .hand-row .mj:hover { transform: translateY(-4px); }
.mj.pick { transform: translateY(-12px); box-shadow: 0 0 0 2px var(--gold); } .mj.new { margin-left: 12px; } .mj.hot { box-shadow: 0 0 0 2px var(--bad); }
.meld { display: inline-flex; gap: 1px; margin-right: 6px; }
.mj-seat { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mj-seat.turn { border-color: var(--gold); }
.discards { min-height: 40px; }
.btn .mj { vertical-align: middle; margin-left: 2px; }