/* 学习小游戏 /game/(069):纸色底、大字、手机优先;四个游戏共用(按钮 / 计分条 / 排行 / 结束卡),各游戏自己的格子在下面 */
.game{max-width:640px;margin:0 auto;padding-bottom:64px}
.game h1{font-size:clamp(34px,8vw,52px);margin:6px 0 10px}
.game .lede{color:var(--ink2);font-size:17px;margin-bottom:18px}
.g-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;margin:16px 0}
.g-hud{display:flex;justify-content:space-between;gap:10px;font:600 15px/1 var(--f-b);color:var(--ink2);padding:10px 2px 14px}
.g-hud b{color:var(--ink);font-size:20px;font-variant-numeric:tabular-nums}
.g-hud .hot b{color:var(--clay)}
.g-muted{color:var(--ink2);font-size:15px}
.g-note{font-size:14px;color:var(--ink2);background:var(--paper2);border-radius:12px;padding:10px 14px;margin:12px 0}
.g-note a,.g-muted a{color:var(--clay);font-weight:700}
.g-end{text-align:center}
.g-end .big{font:800 22px/1.4 var(--f-b);margin:6px 0 10px}.g-end .big b{font-size:44px;color:var(--clay)}
.g-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.g-lv{display:flex;gap:10px;flex-wrap:wrap}
.g-lv button{flex:1;min-width:90px;padding:16px 10px;border-radius:14px;border:2px solid var(--line);background:#fff;font:800 18px var(--f-b);color:var(--ink)}
.g-lv button:hover{border-color:var(--clay);color:var(--clay)}
.g-board{list-style:none;margin:8px 0 0;padding:0;border-top:2px solid var(--ink)}
.g-board li{display:flex;gap:12px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line);font-size:15px}
.g-board li span{width:22px;font-weight:800;color:var(--ink2)}.g-board li:nth-child(1) span{color:var(--clay)}
.g-board li b{flex:1}.g-board li em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.g-h{font:800 16px var(--f-b);margin-top:18px}
.shake{animation:gShake .35s}
@keyframes gShake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* 目录页 */
.g-list{list-style:none;margin:10px 0 0;padding:0;border-top:2px solid var(--ink)}
.g-item{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.g-item video,.g-item .ph{width:140px;aspect-ratio:9/16;border-radius:14px;background:var(--night);object-fit:cover;display:block}
.g-item .ph{display:grid;place-items:center;font:900 46px var(--f-h);color:var(--gold)}
.g-item h2{font-size:24px;margin-bottom:4px}
.g-item p{color:var(--ink2);font-size:15px;margin-bottom:10px}
.g-item .tag{display:inline-block;font:700 12px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--clay);margin-bottom:6px}

/* 每日一字 */
.t-hints{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.t-hints li{background:var(--paper2);border-radius:999px;padding:6px 14px;font-size:14px}
.t-hints li.new{background:var(--gold);color:var(--ink)}
.t-grid{display:grid;gap:8px}
.t-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t-syl{display:grid;grid-template-columns:1fr 1.4fr;gap:4px}
.t-syl span{height:52px;border-radius:10px;border:2px solid var(--line);display:grid;place-items:center;font:800 22px var(--f-b);text-transform:lowercase;background:#fff}
.t-syl span.g{background:#3e9a5f;border-color:#3e9a5f;color:#fff}
.t-syl span.y{background:#e2b23d;border-color:#e2b23d;color:#fff}
.t-syl span.x{background:#a59a90;border-color:#a59a90;color:#fff}
.t-form{display:flex;gap:8px;margin-top:14px}
.t-form input{flex:1;min-width:0;font:600 20px var(--f-b);padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.t-form input:focus{border-color:var(--clay);outline:none}
.t-msg{min-height:22px;color:var(--clay);font-size:14px;margin-top:8px}
.t-ans{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0}
.t-ans .zh{font-size:72px;font-weight:900;line-height:1.1}.t-ans .py{font:700 22px var(--f-b);color:var(--clay)}.t-ans .ar{font-size:17px}
.t-legend{font-size:13px;color:var(--ink2);margin-top:10px}

/* 声调抢答 */
.n-card{display:flex;flex-direction:column;align-items:center;padding:18px 0 8px}
.n-card .zh{font-size:120px;font-weight:900;line-height:1.05}
.n-card .py{font:700 26px var(--f-b);color:var(--ink2);margin-top:6px}.n-card .py i{font-style:normal;color:var(--clay);margin-left:4px}
.n-card .py em{font-style:normal;color:var(--clay);font-size:18px;margin-left:6px}
.n-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.n-btns button{padding:16px 0 12px;border-radius:14px;border:2px solid var(--line);background:#fff;font:800 30px/1 var(--f-b);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px}
.n-btns button small{font:600 13px var(--f-b);color:var(--ink2)}
.n-btns button.ok{background:#3e9a5f;border-color:#3e9a5f;color:#fff}.n-btns button.ok small{color:#fff}
.n-btns button.bad{background:var(--clay);border-color:var(--clay);color:#fff}.n-btns button.bad small{color:#fff}
.n-again{display:block;margin:4px auto 0;color:var(--clay);font-weight:700;font-size:15px}

/* 配对 */
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-card{min-height:92px;border-radius:14px;border:2px solid var(--line);background:#fff;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:700 15px/1.25 var(--f-b);color:var(--ink);text-align:center;transition:transform .15s,opacity .3s}
.p-card.zh .zh{font-size:30px;font-weight:900}.p-card small{font-size:12px;color:var(--ink2);font-weight:600}
.p-card.sel{border-color:var(--clay);transform:scale(1.04);box-shadow:0 6px 18px #b8352c33}
.p-card.done{opacity:0;pointer-events:none;transform:scale(.8)}
.p-card.bad{border-color:var(--clay);animation:gShake .35s}

/* 排句子 */
.s-prompt{font:700 22px/1.35 var(--f-b);margin-bottom:6px}
.s-ans{min-height:70px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border:2px dashed var(--line);border-radius:14px;margin:12px 0;background:var(--paper)}
.s-ans.win{border-color:#3e9a5f;background:#e8f4ec}
.s-tiles{display:flex;flex-wrap:wrap;gap:8px}
.s-tile{padding:10px 16px;border-radius:12px;border:2px solid var(--line);background:#fff;font-size:26px;font-weight:700;color:var(--ink)}
.s-tile.in{border-color:var(--ink)}.s-tile.used{opacity:.25}.s-tile.bad{border-color:var(--clay);background:#fbe9e6}
.s-end{font-size:26px}
.s-fb{min-height:24px;font-size:15px;color:var(--ink2);margin-top:8px}
.s-fb .zh{font-size:22px;color:var(--ink)}