/* 小游戏（games.js）的样式。客户端与工作台各放一份内容完全相同的文件，不要只改一边。
   颜色只用两端 style.css 里同名的变量，深色模式跟着走。 */

/* 石头剪刀布胜负标签：挂在后出拳的表情下面；实时到达时等表情揭晓后再淡入 */
.rps-result { align-self: center; margin-top: 2px; padding: 2px 10px; font-size: 12px; font-weight: 600; line-height: 18px; border-radius: 9px; color: #fff; }
.rps-result.win { background: #f5a623; }
.rps-result.lose { background: #8e98a8; }
.rps-result.draw { background: #4cc38a; }
.rps-result.later { animation: rps-in .35s ease-out backwards; }
@keyframes rps-in { from { opacity: 0; transform: scale(.6); } }

/* 对局卡片：两边的卡片一律用对方气泡的中性底色，棋盘颜色不随发送方变 */
.bubble.game-card, .row.mine .bubble.game-card {
    box-sizing: border-box; width: 232px; max-width: 100%; padding: 12px;
    color: var(--bubble-them-text); background: var(--bubble-them);
}
.bubble.game-card::before { display: none; }
.bubble.game-card.my-turn { box-shadow: 0 0 0 2px var(--accent); }
.gc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gc-title { flex: none; font-weight: 600; }
.gc-status { min-width: 0; color: var(--text-dim); font-size: 12px; text-align: right; }
.my-turn .gc-status { color: var(--accent); font-weight: 600; }
.gc-intro { margin: 4px 0 10px; color: var(--text-dim); font-size: 13px; }
.game-card.cancelled .gc-intro, .game-card.declined .gc-intro { text-decoration: line-through; }

.gc-board.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gc-board.ttt .gc-cell { aspect-ratio: 1; }
.gc-cell {
    display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0;
    font: inherit; font-size: 32px; font-weight: 700; line-height: 1; color: var(--text);
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.gc-cell:not(:disabled) { cursor: pointer; }
.gc-cell:not(:disabled):hover { border-color: var(--accent); }
.gc-cell:disabled { opacity: 1; }   /* 不能点只是因为没轮到，棋子不要变灰 */
.gc-cell.p0 { color: #e5534b; }
.gc-cell.p1 { color: #3a8ee6; }
.gc-cell.line { background: rgba(245, 166, 35, .28); border-color: #f5a623; }

.gc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.gc-btn { padding: 6px 14px; font: inherit; font-size: 13px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.gc-btn.primary { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }

/* 「···」→「小游戏」里的游戏列表 */
/* 游戏一多（开通狗妹后单人列表更长），弹窗会比手机屏幕还高、上下都被裁：弹窗限高，中间的列表自己滚动（同气泡样式弹窗） */
.game-modal-card { max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.game-modal-card h2, .game-modal-card .profile-hint, .game-modal-card .modal-actions { flex: none; }
.game-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.game-list > * { flex: none; }
.game-pick { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; font: inherit; color: var(--text); text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.game-pick:hover { border-color: var(--accent); }
.game-pick span { color: var(--text-dim); font-size: 13px; }

/* 五子棋：每个交叉点是一个方格，格子中心画十字线，边上的点只画半截，棋子画在中心 */
.gc-board.gomoku {
    --gk-wood: #e6c27a; --gk-line: #6b4a1e;
    display: grid; grid-template-columns: repeat(15, 1fr); padding: 4px;
    background: var(--gk-wood); border-radius: 4px;
}
.gk-pt {
    --h-size: 100% 1px; --h-pos: center; --v-size: 1px 100%; --v-pos: center;
    position: relative; display: block; min-width: 0; aspect-ratio: 1; padding: 0; border: 0;
    background: linear-gradient(var(--gk-line), var(--gk-line)) var(--h-pos) / var(--h-size) no-repeat,
                linear-gradient(var(--gk-line), var(--gk-line)) var(--v-pos) / var(--v-size) no-repeat;
}
.gk-pt.l { --h-size: 50% 1px; --h-pos: right center; }
.gk-pt.r { --h-size: 50% 1px; --h-pos: left center; }
.gk-pt.t { --v-size: 1px 50%; --v-pos: center bottom; }
.gk-pt.b { --v-size: 1px 50%; --v-pos: center top; }
button.gk-pt:not(:disabled) { cursor: pointer; }
button.gk-pt:disabled { opacity: 1; }
.gk-pt.star::before { content: ''; position: absolute; inset: 38%; background: var(--gk-line); border-radius: 50%; }
.gk-pt.s0::after, .gk-pt.s1::after { content: ''; position: absolute; inset: 7%; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.gk-pt.s0::after { background: radial-gradient(circle at 35% 30%, #666, #111 60%); }
.gk-pt.s1::after { background: radial-gradient(circle at 35% 30%, #fff, #d6d6d6 70%); }
.gk-pt.ghost::after { opacity: .5; }
.gk-pt.last::before { content: ''; position: absolute; inset: 40%; z-index: 1; background: #e5534b; border-radius: 50%; }
.gk-pt.line::after { box-shadow: 0 0 0 2px #f5a623, 0 1px 2px rgba(0, 0, 0, .45); }

/* 四子棋：蓝色竖棋盘，一列一个按钮，棋子是圆孔里的红 / 黄圆片 */
.gc-board.c4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 5px; background: #2f6fd6; border-radius: 8px; }
.c4-col { display: grid; grid-template-rows: repeat(6, 1fr); gap: 3px; min-width: 0; padding: 2px 0; background: none; border: 0; border-radius: 6px; }
.c4-col:not(:disabled) { cursor: pointer; }
.c4-col:not(:disabled):hover { background: rgba(255, 255, 255, .22); }
.c4-col:disabled { opacity: 1; }
.c4-slot { position: relative; aspect-ratio: 1; background: var(--surface); border-radius: 50%; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3); }
.c4-slot.s0::after, .c4-slot.s1::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.c4-slot.s0::after { background: #e5534b; }
.c4-slot.s1::after { background: #f5c518; }
.c4-slot.line::after { box-shadow: 0 0 0 3px #fff, inset 0 -2px 0 rgba(0, 0, 0, .2); }
.c4-slot.drop { z-index: 1; }
.c4-slot.drop::after { animation: c4-drop .45s cubic-bezier(.5, 0, .75, 0) both, c4-bounce .18s ease-out .45s; }
/* 一格高度加上 3px 间距约等于 112%，--drop 是从列顶到这一格要穿过的格数 */
@keyframes c4-drop { from { transform: translateY(calc(var(--drop) * -112%)); } }
@keyframes c4-bounce { 50% { transform: translateY(-12%); } }

/* 黑白棋：绿色棋盘，能下的位置标小圆点，翻过来的子转一下 */
.gc-board.reversi { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; padding: 1px; background: #1f5f3a; border: 3px solid #1f5f3a; border-radius: 4px; }
.rv-sq { position: relative; display: block; min-width: 0; aspect-ratio: 1; padding: 0; background: #2e8b57; border: 0; }
button.rv-sq:disabled { opacity: 1; }
button.rv-sq:not(:disabled) { cursor: pointer; }
.rv-sq.s0::after, .rv-sq.s1::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.rv-sq.s0::after { background: radial-gradient(circle at 35% 30%, #555, #111 65%); }
.rv-sq.s1::after { background: radial-gradient(circle at 35% 30%, #fff, #d9d9d9 70%); }
.rv-sq.legal::before { content: ''; position: absolute; inset: 38%; background: rgba(255, 255, 255, .45); border-radius: 50%; }
button.rv-sq.legal:hover::before { inset: 14%; background: rgba(255, 255, 255, .3); }
.rv-sq.last { box-shadow: inset 0 0 0 2px #f5a623; }
.rv-sq.flip::after { animation: rv-flip .45s ease-in-out; }
@keyframes rv-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.gc-note { margin: 0 0 8px; color: var(--text-dim); font-size: 12px; text-align: center; }

/* 卡片里的棋盘只是缩略图：点哪里都是打开全屏对局页，里面的格子不接收点击 */
.game-card .gc-board { cursor: pointer; }
.game-card .gc-board * { pointer-events: none; }

/* 全屏对局页：盖住整个聊天界面（关键词动效仍在它上面） */
.game-page {
    position: fixed; inset: 0; z-index: 2147482000; display: flex; flex-direction: column;
    color: var(--text); background: var(--bg, var(--panel));
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.gp-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.gp-back { justify-self: start; padding: 8px 10px; font: inherit; font-size: 15px; color: var(--accent); background: none; border: 0; cursor: pointer; }
.gp-title { font-size: 17px; font-weight: 600; }
.game-page > .game-panel { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 16px; }
/* 垂直居中用首尾自动外边距：内容比屏幕高时从顶部开始滚动，不会像 justify-content: center 那样把顶部截掉 */
.game-page > .game-panel > :first-child { margin-top: auto; }
.game-page > .game-panel > :last-child { margin-bottom: auto; }
.game-panel .gc-head { justify-content: center; margin-bottom: 10px; }
.game-panel .gc-status { font-size: 17px; font-weight: 600; color: var(--text); text-align: center; }
.game-panel.my-turn .gc-status { color: var(--accent); }
.game-panel .gc-note { font-size: 14px; }
.game-panel .gc-intro { font-size: 15px; }
.game-panel .gc-board { width: min(calc(100vw - 32px), calc(100dvh - 230px), 560px); }
.game-panel .gc-board.ttt { width: min(calc(100vw - 48px), calc(100dvh - 260px), 400px); gap: 8px; }
.game-panel .gc-cell { font-size: clamp(36px, 14vw, 80px); border-radius: 10px; }
.game-panel .gc-board.c4 { width: min(calc(100vw - 32px), calc((100dvh - 230px) * 7 / 6), 520px); gap: 5px; padding: 8px; }
.game-panel .c4-col { gap: 5px; }
.game-panel .gc-actions { justify-content: center; margin-top: 16px; }
.game-panel .gc-btn { padding: 9px 20px; font-size: 15px; }

/* 返回聊天后，右下角的「回到对局」 */
.game-resume {
    position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 2147481000;
    padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); cursor: pointer;
}
.game-resume.my-turn { color: var(--accent-text); background: var(--accent); border-color: var(--accent); animation: resume-pulse 1.6s ease-in-out infinite; }
@keyframes resume-pulse { 50% { box-shadow: 0 4px 16px rgba(0, 0, 0, .18), 0 0 0 6px rgba(7, 193, 96, .25); } }

/* 点格棋：点、边、格子排成 9×9 网格。边画成细线，可点区域用 ::after 向两侧撑开，手指更容易点中 */
.gc-board.dots {
    --dt-dot: 6px; --dt-line: 4px;
    display: grid; aspect-ratio: 1; padding: 6px;
    grid-template-columns: repeat(4, var(--dt-dot) 1fr) var(--dt-dot);
    grid-template-rows: repeat(4, var(--dt-dot) 1fr) var(--dt-dot);
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.gc-board.dots.big { --dt-dot: 14px; --dt-line: 8px; padding: 12px; }
.dt-dot { z-index: 2; background: var(--text); border-radius: 50%; }
.dt-edge { position: relative; display: block; min-width: 0; min-height: 0; padding: 0; background: none; border: 0; }
.dt-edge::before { content: ''; position: absolute; border-radius: 3px; }
.dt-edge.h::before { left: 0; right: 0; top: calc(50% - var(--dt-line) / 2); height: var(--dt-line); }
.dt-edge.v::before { top: 0; bottom: 0; left: calc(50% - var(--dt-line) / 2); width: var(--dt-line); }
.dt-edge.s0::before { background: #e5534b; }
.dt-edge.s1::before { background: #3a8ee6; }
.dt-edge.last::before { box-shadow: 0 0 0 3px rgba(245, 166, 35, .55); }
button.dt-edge { cursor: pointer; }
.dt-edge:not(.s0):not(.s1)::before { background: var(--border); }   /* 还没连的边：淡色底线 */
button.dt-edge::after { content: ''; position: absolute; z-index: 1; }
button.dt-edge.h::after { inset: -14px 0; }
button.dt-edge.v::after { inset: 0 -14px; }
.me0 button.dt-edge:hover::before { background: rgba(229, 83, 75, .5); }
.me1 button.dt-edge:hover::before { background: rgba(58, 142, 230, .5); }
.dt-box { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; font-size: 12px; font-weight: 700; color: #fff; }
.gc-board.dots.big .dt-box { font-size: clamp(16px, 5vw, 28px); }
.dt-box.s0 { background: rgba(229, 83, 75, .75); }
.dt-box.s1 { background: rgba(58, 142, 230, .75); }

/* 2048 合作版：配色沿用原版 2048 */
.g2048-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gc-board.g2048 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; padding: 6px; background: #bbada0; border-radius: 8px; touch-action: none; user-select: none; }
.g2048-wrap { width: 100%; }
.game-panel .g2048-wrap { width: auto; }
.game-panel .gc-board.g2048 { width: min(calc(100vw - 32px), calc(100dvh - 330px), 460px); gap: 10px; padding: 10px; }
.g2048-tile {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0;
    font-size: 18px; font-weight: 800; color: #776e65; background: rgba(238, 228, 218, .35); border-radius: 4px;
}
.gc-board.g2048.big .g2048-tile { font-size: clamp(20px, 8vw, 44px); border-radius: 6px; }
.g2048-tile.v2 { background: #eee4da; }
.g2048-tile.v4 { background: #ede0c8; }
.g2048-tile.v8 { color: #f9f6f2; background: #f2b179; }
.g2048-tile.v16 { color: #f9f6f2; background: #f59563; }
.g2048-tile.v32 { color: #f9f6f2; background: #f67c5f; }
.g2048-tile.v64 { color: #f9f6f2; background: #f65e3b; }
.g2048-tile.v128, .g2048-tile.v256, .g2048-tile.v512 { color: #f9f6f2; background: #edcf72; font-size: 15px; }
.g2048-tile.v1024, .g2048-tile.v2048, .g2048-tile.v4096 { color: #f9f6f2; background: #edc22e; font-size: 13px; }
.gc-board.g2048.big .g2048-tile.v128, .gc-board.g2048.big .g2048-tile.v256, .gc-board.g2048.big .g2048-tile.v512 { font-size: clamp(18px, 7vw, 38px); }
.gc-board.g2048.big .g2048-tile.v1024, .gc-board.g2048.big .g2048-tile.v2048, .gc-board.g2048.big .g2048-tile.v4096 { font-size: clamp(15px, 6vw, 32px); }
.g2048-tile.spawn { animation: g2048-spawn .2s ease-out; }
.g2048-tile.merged { animation: g2048-merge .2s ease-out; }
@keyframes g2048-spawn { from { transform: scale(0); } }
@keyframes g2048-merge { 50% { transform: scale(1.15); } }
.g2048-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-areas: ". up ." "left down right"; gap: 6px; }
.g2048-pad .gc-btn { padding: 8px 0; font-size: 18px; }
.g2048-pad .gc-btn:disabled { opacity: .4; cursor: default; }
.g2048-up { grid-area: up; } .g2048-left { grid-area: left; } .g2048-down { grid-area: down; } .g2048-right { grid-area: right; }

/* 猜数字 1A2B：两列猜测记录 + 自带数字键盘 */
.gc-board.ab { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.game-panel .gc-board.ab { width: min(calc(100vw - 32px), 420px); }
.ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-col { min-width: 0; padding: 6px 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.gc-board.ab.big .ab-col { max-height: 34dvh; overflow-y: auto; }
.ab-col-title { margin-bottom: 4px; color: var(--text-dim); font-size: 12px; }
.ab-row { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.gc-board.ab.big .ab-row { font-size: 17px; }
.ab-row b { color: var(--accent); }
.ab-row.hit b { color: #f5a623; }
.ab-empty { color: var(--text-dim); font-size: 12px; }
.ab-pad { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ab-slots { display: flex; gap: 8px; }
.ab-slots span { display: flex; align-items: center; justify-content: center; width: 46px; height: 54px; font-family: ui-monospace, Menlo, monospace; font-size: 28px; font-weight: 700; background: var(--surface); border: 2px solid var(--border); border-radius: 8px; }
.ab-keys { display: grid; grid-template-columns: repeat(4, 56px); gap: 6px; }
.ab-keys .gc-btn { padding: 10px 0; font-size: 18px; }
.ab-keys .gc-btn:disabled { opacity: .35; cursor: default; }
.ab-pad > .gc-btn.primary { min-width: 140px; }
.ab-pad > .gc-btn.primary:disabled { opacity: .45; cursor: default; }

/* 全屏对局页里的玩法说明 */
.gc-rules {
    box-sizing: border-box; width: min(calc(100vw - 32px), 420px); margin: 0 0 12px; padding: 10px 14px 10px 30px;
    color: var(--text-dim); font-size: 13px; line-height: 1.6; text-align: left;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.gc-rules li + li { margin-top: 2px; }

/* 双人俄罗斯方块：左边 10×20 的井，右边下一块；操作区在下面 */
.gc-board.ct { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; width: 100%; }
.ct-well { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; padding: 2px; background: #2b2f3a; border-radius: 6px; }
.game-card .ct-well { width: 110px; justify-self: center; }
.game-panel .gc-board.ct { width: auto; }
.game-panel .ct-well { width: min(calc(100vw - 120px), calc((100dvh - 330px) / 2), 300px); }
.ct-cell { aspect-ratio: 1; background: #363b48; border-radius: 2px; }
.ct-cell.c1 { background: #4dd0e1; } .ct-cell.c2 { background: #ffd54f; } .ct-cell.c3 { background: #ba68c8; }
.ct-cell.c4 { background: #81c784; } .ct-cell.c5 { background: #e57373; } .ct-cell.c6 { background: #64b5f6; } .ct-cell.c7 { background: #ffb74d; }
.ct-cell.live { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.ct-side { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-dim); font-size: 12px; }
.ct-next { display: grid; grid-template-columns: repeat(4, 12px); gap: 1px; padding: 3px; background: #2b2f3a; border-radius: 4px; }
.game-panel .ct-next { grid-template-columns: repeat(4, 16px); }
.ct-next .ct-cell { background: transparent; }
.ct-next .ct-cell.c1 { background: #4dd0e1; } .ct-next .ct-cell.c2 { background: #ffd54f; } .ct-next .ct-cell.c3 { background: #ba68c8; }
.ct-next .ct-cell.c4 { background: #81c784; } .ct-next .ct-cell.c5 { background: #e57373; } .ct-next .ct-cell.c6 { background: #64b5f6; } .ct-next .ct-cell.c7 { background: #ffb74d; }
.ct-pop { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 22px; font-weight: 900; color: #ffd84d; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); animation: ct-pop 1s ease-out forwards; pointer-events: none; }
@keyframes ct-pop { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: translateY(-30px); } }
.ct-paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); border-radius: 6px; }
.ct-pad { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ct-key { min-width: 64px; padding: 14px 0; font-size: 22px; }
.ct-rotate { min-width: 180px; color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.ct-pause { padding: 10px 14px; }
.gc-rules-fold { width: min(calc(100vw - 32px), 420px); margin: 0 0 8px; font-size: 13px; }
.gc-rules-fold summary { color: var(--accent); text-align: center; cursor: pointer; list-style-position: inside; }
.gc-rules-fold .gc-rules { width: 100%; margin: 6px 0 0; }

/* 单人俄罗斯方块：结束时的成绩框；选择列表里的「单人」分组 */
.solo-result { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; }
.solo-result strong { font-size: 30px; }
.solo-result span { color: var(--text-dim); font-size: 14px; }
.game-panel.solo .ct-pad { flex-wrap: wrap; gap: 8px; }
.game-panel.solo .ct-key { min-width: 50px; padding: 12px 0; }
.ct-pause { white-space: nowrap; }
.game-pick-sep { margin: 6px 0 -2px; color: var(--text-dim); font-size: 12px; }

/* 聊天里的「刷新纪录」成绩卡片 */
.solo-card-score { margin: 2px 0 0; font-size: 26px; font-weight: 800; text-align: center; color: var(--accent); }
.solo-card .gc-note { text-align: center; }

/* 排行榜 */
.game-panel.leaderboard { justify-content: flex-start; }
.lb-list { width: min(calc(100vw - 32px), 460px); margin: 0; padding: 0; list-style: none; }
.lb-row { display: grid; grid-template-columns: 36px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.lb-row.me { border-color: var(--accent); }
.lb-row.focus { background: rgba(7, 193, 96, .08); }
.lb-rank { grid-row: 1 / 3; font-size: 20px; text-align: center; }
.lb-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 700; }
.lb-row small { grid-column: 2 / 4; color: var(--text-dim); font-size: 12px; }

/* 排行榜页签：一级按游戏，二级按数独难度 */
.lb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 10px; }
.lb-tabs.sub { margin-top: -4px; }
.lb-tabs .gc-btn { padding: 5px 12px; border-radius: 16px; }
.lb-tabs .gc-btn.on { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.lb-tabs.sub .gc-btn { font-size: 12px; padding: 3px 10px; }
.lb-body { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* 数独：粗线分宫，选中格、同行同列同宫、相同数字、填错各有底色 */
.sd-time { margin-bottom: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 700; }
.gc-board.sudoku { display: grid; grid-template-columns: repeat(9, 1fr); width: min(calc(100vw - 32px), calc(100dvh - 330px), 460px); border: 2px solid var(--text); border-radius: 4px; overflow: hidden; background: var(--surface); }
.sd-cell { aspect-ratio: 1; padding: 0; font: inherit; font-size: clamp(16px, 5vw, 24px); font-weight: 500; color: var(--accent); background: var(--surface); border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; }
.sd-cell.given { color: var(--text); font-weight: 700; }
.sd-cell.br { border-right: 2px solid var(--text); }
.sd-cell.bb { border-bottom: 2px solid var(--text); }
.sd-cell.peer { background: rgba(7, 193, 96, .07); }
.sd-cell.same { background: rgba(7, 193, 96, .2); }
.sd-cell.sel { background: rgba(7, 193, 96, .35); }
.sd-cell.wrong { color: #e5534b; background: rgba(229, 83, 75, .15); }
.sd-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(calc(100vw - 32px), 360px); margin-top: 12px; }
.sd-key { padding: 10px 0; font-size: 18px; }
.sd-key:disabled { opacity: .35; cursor: default; }
.sd-erase { font-size: 13px; white-space: nowrap; }
.sd-levels { display: flex; flex-direction: column; gap: 10px; width: min(calc(100vw - 32px), 320px); margin-top: 12px; }
.sd-levels .gc-btn { padding: 12px; font-size: 15px; }

/* 狗妹专属分组；工作台客户没开通时的提示条 */
.game-pick-sep.puppy { color: #c2185b; }
.game-pick-lock { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 12px; color: var(--text-dim); background: rgba(255, 107, 139, .08); border-radius: 8px; }

/* 狗妹飞飞 */
.fly-canvas { display: block; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.fly-below { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* 狗妹打地鼠：草地上 3×3 九个洞，狗妹从洞里升上来；点中弹一下，点到「咬你噢」变红、整片抖一下 */
.mole-bar { width: min(calc(100vw - 32px), 380px); height: 8px; margin: 4px 0 10px; background: var(--border); border-radius: 4px; overflow: hidden; }
.mole-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .1s linear; }
.mole-field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(calc(100vw - 32px), calc(100dvh - 330px), 380px); padding: 14px; background: #9ad46a; border-radius: 16px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.mole-field.shake { animation: mole-shake .35s; }
@keyframes mole-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.mole-hole { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50% 50% 46% 46%; }
.mole-hole::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 4%; height: 30%; background: #5b3b22; border-radius: 50%; box-shadow: inset 0 4px 0 rgba(0, 0, 0, .35); }
.mole-pup { position: absolute; left: 10%; right: 10%; bottom: 10%; z-index: 1; padding: 0; background: none; border: 0; translate: 0 110%; transition: translate .12s ease-out; cursor: pointer; }
.mole-pup img { display: block; width: 100%; pointer-events: none; }
.mole-hole.up .mole-pup { translate: 0 0; }
.mole-hole.hit .mole-pup { animation: mole-hit .22s ease-out; }
.mole-hole.oops .mole-pup img { filter: drop-shadow(0 0 6px #e53935); }
@keyframes mole-hit { 40% { scale: 1.15 .85; } }
/* 洞口前沿挡住狗妹的下半身，像从洞里探出来 */
.mole-hole::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 18%; z-index: 2; background: #9ad46a; border-radius: 0 0 50% 50%; }

/* 狗妹表情翻牌：4×4，翻牌用 3D 翻转；配对成功的牌淡一点 */
.match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(calc(100vw - 32px), calc(100dvh - 300px), 420px); }
.match-card { aspect-ratio: 1; padding: 0; background: none; border: 0; perspective: 600px; cursor: pointer; }
.match-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .3s ease; }
.match-card.open .match-inner { transform: rotateY(180deg); }
.match-back, .match-front { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.match-back { background: #ff9db2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff' opacity='.85'%3E%3Cellipse cx='12' cy='15.5' rx='5.5' ry='4.5'/%3E%3Cellipse cx='5' cy='9' rx='2.3' ry='2.9'/%3E%3Cellipse cx='9.5' cy='5' rx='2.3' ry='2.9'/%3E%3Cellipse cx='14.5' cy='5' rx='2.3' ry='2.9'/%3E%3Cellipse cx='19' cy='9' rx='2.3' ry='2.9'/%3E%3C/g%3E%3C/svg%3E") center / 45% no-repeat; border: 2px solid #e06b8b; }
.match-front { transform: rotateY(180deg); background: var(--surface); border: 2px solid var(--border); }
.match-front img { width: 92%; height: 92%; object-fit: contain; }
.match-card.done .match-front { border-color: var(--accent); opacity: .75; }

/* 狗妹接零食的分值说明：图标和画面里掉下来的一样，扣分的标红 */
.snack-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 6px; }
.snack-legend span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; font-size: 13px; font-weight: 700; color: #4a2a10; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.snack-legend i { font-style: normal; font-size: 16px; line-height: 1; }
.snack-legend img { display: block; width: 26px; height: 17px; }
.snack-legend .bad { color: #e53935; border-color: rgba(229, 57, 53, .4); background: rgba(229, 57, 53, .06); }