/* 小游戏列表与数学思维游戏 */

/* 小游戏图标网格（移动端友好：双列大磁贴 + 按压反馈） */
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.game-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:128px;padding:20px 12px;border:1px solid rgba(233,224,209,.7);border-radius:22px;color:inherit;text-decoration:none;box-shadow:0 8px 18px rgba(147,101,45,.12);-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.game-tile:active{transform:scale(.95)}
.game-tile:focus-visible{outline:3px solid #f4a47c;outline-offset:3px}
.game-tile.blue{background:linear-gradient(160deg,#e9f3ff,#d9e9ff)}
.game-tile.peach{background:linear-gradient(160deg,#fff0e7,#ffe1cf)}
.game-tile .game-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:34px;line-height:1;background:rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(147,101,45,.14)}
.game-tile .game-name{font-weight:800;font-size:16px;color:#293449;letter-spacing:.04em}

/* 游戏页 */
.back{display:inline-block;margin-bottom:8px;color:#93652d;font-weight:700;text-decoration:none;font-size:14px}
.back:focus-visible{outline:3px solid #f4a47c;outline-offset:2px;border-radius:6px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;margin:0 2px 12px}
.chip-row{display:flex;gap:6px}
.chip{border:0;border-radius:999px;background:#f1e9dd;color:#6b6353;font-weight:700;padding:9px 14px;font-size:13px}
.chip:focus-visible{outline:3px solid #f4a47c;outline-offset:2px}
.chip.active{background:#293449;color:#fff}
.chip.action{background:#fff0df;color:#93652d}
.progress{text-align:center;color:#ea855d;font-weight:800;font-size:14px;margin:0 0 12px}
.error{color:#b34e35;font-size:14px;text-align:center}

/* 谜题网格 */
.puzzle{display:grid;gap:3px;max-width:520px;margin:0 auto}
.cell{aspect-ratio:1;min-width:0;display:grid;place-items:center;border:1px solid #e9e0d1;border-radius:6px;background:#fff;font-weight:750;font-size:clamp(12px,3vw,18px);color:#293449}
.cell.mark{border:0;background:transparent;color:#9aa2ad}
.cell.gap{visibility:hidden}
.cell.given{background:#f6f0e4}
.cell.editable{appearance:none;padding:0;border:1px solid #d9c7a4;background:#fffbf0;text-align:center;font:inherit;font-weight:750;color:#293449}
.cell.editable:focus{outline:2px solid #f4a47c;outline-offset:1px}
.cell.editable.correct{background:#e4f5e9;border-color:#73b986;color:#246b3c}
.cell.editable.wrong{background:#ffe7e3;border-color:#ff8a7a;color:#c0392b}
.cell.editable.revealed{background:#eef4ea;border-color:#cfe3cd;color:#5c8a5e}
.cell.editable:disabled{cursor:default}

/* 庆祝弹窗内的按钮（覆盖 style.css 中奖励卡按钮的绝对定位） */
#win .reward-card .chip{position:static;width:auto;height:auto;font-size:15px;padding:10px 22px;border-radius:999px;margin-top:14px}
#win .reward-card .dialog-close{position:absolute;top:10px;right:10px;border:0;border-radius:50%;width:36px;height:36px;background:#fff4df;color:#93652d;font-size:26px;line-height:1;padding:0;margin:0}
#win .reward-card .dialog-close:focus-visible{outline:3px solid #f4a47c;outline-offset:2px}

/* 英语单词闪卡 */
.chip.big{font-size:16px;padding:12px 26px}
.flash-scene{max-width:380px;margin:0 auto}
.flash-card{position:relative;width:100%;aspect-ratio:4/3;border:0;padding:0;background:transparent;cursor:pointer;font:inherit;transform-style:preserve-3d;transition:transform .45s ease;border-radius:20px}
.flash-card:focus-visible{outline:3px solid #f4a47c;outline-offset:4px}
.flash-card.flipped{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #e9e0d1;border-radius:20px;background:#fff;box-shadow:0 10px 24px rgba(147,101,45,.12);padding:16px}
.flash-face.back{transform:rotateY(180deg);background:#fff8ee}
.flash-emoji{font-size:54px;line-height:1}
.flash-word{font-size:clamp(26px,7vw,34px);font-weight:800;color:#293449;letter-spacing:.02em}
.flash-cn{font-size:clamp(22px,6vw,28px);font-weight:800;color:#293449}
.flash-example{font-size:16px;font-weight:600;color:#6b6353;text-align:center;line-height:1.5}
.flash-example small{display:block;color:#9aa2ad;font-weight:400;margin-top:4px;font-size:13px}
.flash-hint{font-size:12px;color:#b3ab9c}
.speaker{border:0;border-radius:50%;width:38px;height:38px;background:#fff0df;color:#93652d;font-size:18px;line-height:1;padding:0;position:absolute;top:12px;right:12px}
.speaker:focus-visible{outline:3px solid #f4a47c;outline-offset:2px}
.answer-row{display:flex;gap:10px;justify-content:center;margin-top:16px}
.flash-scene [hidden]{display:none}
.spelling-card{padding:24px 20px;background:#fff;border:1px solid #e9e0d1;border-radius:20px;text-align:center;box-shadow:0 10px 24px rgba(147,101,45,.12)}
.spelling-card label{display:block;color:#6b6353;font-size:14px}
.spelling-card input{width:100%;min-width:0;margin-top:12px;padding:12px;border:2px solid #e9e0d1;border-radius:12px;font-size:24px;text-align:center}
.spelling-card input:focus-visible{outline:3px solid #f4a47c;outline-offset:2px}
#spelling-feedback{min-height:44px;line-height:1.5;overflow-wrap:anywhere}
.word-categories{width:100%;min-width:0;overflow-x:auto;padding:3px 2px 7px;scrollbar-width:thin}
.word-categories .chip{flex:none;min-height:44px;white-space:nowrap}
.flash-word{max-width:100%;text-align:center;overflow-wrap:anywhere}
.flash-card.sentence{aspect-ratio:auto;height:360px}
.flash-card.sentence .flash-word{font-size:clamp(23px,6vw,28px);line-height:1.4}
.flash-card.sentence .flash-cn{font-size:22px;line-height:1.45;text-align:center}
.flash-card.sentence .flash-face{padding:44px 18px 20px}
@media (prefers-reduced-motion: reduce){.flash-card{transition:none}}

/* 阅读识字：课名标签横向滑动，每次阅读 PDF 中的一格。 */
.reading-tabs{position:sticky;top:0;z-index:1;display:flex;gap:8px;overflow-x:auto;padding:10px 0;background:#fff8ee;scrollbar-width:thin}
.reading-tabs .chip{flex:none;min-height:44px;white-space:nowrap}
.reading-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 22px}
.reading-nav .chip{min-height:44px}.reading-nav .chip:disabled{opacity:.4;cursor:default}
#reading-progress{font-size:13px;color:#64748b;white-space:nowrap}
#reading-game [role="tabpanel"][hidden]{display:none}
#reading-game .section-head{align-items:center;gap:10px}
#reading-game .section-head h2{min-width:0;overflow-wrap:anywhere}
#reading-game .date-pill{flex:none}
.reading-card{padding:18px 16px}.reading-card h3{margin:0 0 16px;color:#487744;font-size:17px}
.reading-card h3 small{display:block;margin-top:5px;color:#64748b;font-size:12px;font-weight:400}
.reading-words{display:flex;flex-wrap:wrap;gap:10px 8px}
.reading-words span{padding:8px 12px;background:#f1f8ee;border-radius:12px;font-size:26px;font-weight:650;line-height:1.5;white-space:nowrap}
.writing-card h3{color:#a6532d}.writing-card .reading-words span{background:#fff3e9}

/* 闪卡错题本 */
.mistake-book{max-width:620px;margin:0 auto 20px}
.mistake-book h2{font-size:22px}.mistake-book p{color:#6b6353;line-height:1.6}
.mistake-book article{padding:16px;margin-top:12px;border:1px solid #e9e0d1;border-radius:16px;background:#fff;overflow-wrap:anywhere}
.mistake-book h3{margin:0;font-size:20px}.mistake-book article p{margin:8px 0}
.mistake-book small{display:block;color:#6b6353;margin-bottom:12px}
#save-status{text-align:center;color:#487744;font-size:14px}
.chip:disabled{opacity:.5;cursor:wait}