/* 成语填字 · 宣纸国风皮肤（覆盖 kit.css 的糖果配色，保持语文线一致） */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; color: #3d3226;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 18% 8%, rgba(255,255,255,.95), transparent 42%),
              repeating-linear-gradient(0deg, rgba(120,90,50,.03) 0 1px, transparent 1px 4px),
              linear-gradient(160deg, #fbf6ea, #f6efdd 55%, #f2e9d4);
}

.view { display: none; width: 100%; max-width: 430px; margin: 0 auto; flex-direction: column; padding: 8px 8px 20px; }
.view.on { display: flex; }

/* ---------- 首页 ---------- */
h1 { text-align: center; color: #8f2b21; margin: 22px 0 18px; font-size: 27px; font-weight: 400;
     font-family: "STKaiti", "KaiTi", serif; letter-spacing: 4px; }
.diff-sel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.table-btn {
  text-align: center; height: auto; padding: 12px; font-size: 17px; font-weight: 700;
  font-family: "STKaiti", "KaiTi", serif; letter-spacing: 2px; color: #3d3226;
  background: linear-gradient(#fffdf7, #f4ecda); border-radius: 12px;
  box-shadow: 0 3px 0 rgba(120,90,50,.2), inset 0 0 0 1.5px rgba(120,90,50,.18); cursor: pointer;
}
.table-btn span { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; font-family: system-ui; color: #9c8b70; }
.table-btn.active { background: linear-gradient(#fdeec4, #f6dc97); color: #8f2b21; box-shadow: 0 3px 0 rgba(120,90,50,.24), inset 0 0 0 1.6px rgba(178,58,46,.55); }
.table-btn:active { transform: translateY(2px); }

/* ---------- 通用控件 ---------- */
.foot { display: flex; gap: 9px; }
.btn {
  flex: 1; min-height: 48px; border: 0; border-radius: 11px; padding: 10px 6px;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #3d3226; cursor: pointer;
  background: linear-gradient(#fffdf7, #f4ecda);
  box-shadow: 0 3px 0 rgba(120,90,50,.22), inset 0 0 0 1.5px rgba(120,90,50,.2);
}
.btn.alt { background: linear-gradient(#fdeec4, #f7dfa0); color: #8f2b21; box-shadow: 0 3px 0 rgba(178,58,46,.28), inset 0 0 0 1.5px rgba(178,58,46,.4); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,90,50,.22); }
.btn:disabled { opacity: .6; }

.hud { background: linear-gradient(#fffdf7, #f7f1e2); border-radius: 12px; padding: 9px 10px 10px;
       box-shadow: 0 3px 0 rgba(120,90,50,.18), inset 0 0 0 1.5px rgba(120,90,50,.16); }
.hud.light-hud { box-shadow: 0 3px 0 rgba(120,90,50,.18), inset 0 0 0 1.5px rgba(120,90,50,.16); }
.hud-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.back { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
        font-family: inherit; font-size: 14px; font-weight: 700; color: #8f2b21; background: linear-gradient(#fffdf7, #f4ecda);
        border: 1.4px solid rgba(178,58,46,.45); border-radius: 11px; padding: 6px 11px; cursor: pointer; }
.stats { display: flex; gap: 6px; }
.stat { background: #fffdf9; border-radius: 10px; padding: 4px 9px; text-align: center; min-width: 60px;
        box-shadow: inset 0 0 0 1.2px rgba(120,90,50,.18); }
.stat .k { font-size: 11px; color: #9c8b70; font-weight: 700; }
.stat .v { font-size: 18px; font-weight: 800; color: #b23a2e; line-height: 1.2; }

.tip { background: #f6f2e7; border-left: 5px solid #b8a888; border-radius: 0 10px 10px 0; padding: 9px 12px;
       font-size: 13.5px; line-height: 1.5; color: #5d5039; min-height: 40px; box-shadow: none; text-align: left; font-weight: 500; }

/* ---------- 棋盘 ---------- */
.game-wrap { display: flex; justify-content: center; margin: 10px 0 8px; }
.board { display: grid; gap: 2px; width: 100%; padding: 4px; border-radius: 12px;
         background: linear-gradient(#fffdf7, #f7f1e2);
         box-shadow: 0 3px 0 rgba(120,90,50,.2), inset 0 0 0 1.5px rgba(120,90,50,.16); }
.g { width: 100%; aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
     font-family: "STKaiti", "KaiTi", serif; font-size: clamp(20px, 6vw, 26px); border-radius: 6px; position: relative; }
.g.void { background: transparent; }
.g.cell { background: #fffdf9; box-shadow: inset 0 0 0 1.3px rgba(120,90,50,.3); cursor: pointer; }
.g.clue { background: #fdf3e2; color: #8f2b21; font-weight: 700; box-shadow: inset 0 0 0 1.3px rgba(178,58,46,.35); }
.g.mine { color: #2f5fa8; }
.g.sel { box-shadow: inset 0 0 0 2.5px #b23a2e; background: #fff8ea; }
.g.entry { background: #fbf3dd; }
.g.bad { background: #fdecea; color: #c2574a; animation: shake .3s; }
.g .num { position: absolute; left: 2px; top: 1px; font-size: 10px; line-height: 1; color: #a8331f; font-weight: 700; font-family: system-ui; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }

/* ---------- 线索 ---------- */
.clues-wrap { display: flex; gap: 8px; margin-bottom: 10px; }
.clues-col { flex: 1; min-width: 0; background: linear-gradient(#fffdf7, #f7f1e2); border-radius: 10px; padding: 8px 9px;
             box-shadow: 0 2px 0 rgba(120,90,50,.18), inset 0 0 0 1.2px rgba(120,90,50,.14); }
.clue-head { font-size: 13.5px; font-weight: 400; color: #8f2b21; font-family: "STKaiti", "KaiTi", serif; letter-spacing: 1px; margin-bottom: 5px; }
.clue-list { display: flex; flex-direction: column; gap: 3px; }
.clue-item { font-size: 13px; color: #5d5039; padding: 4px 5px; border-radius: 6px; cursor: pointer; line-height: 1.55; word-break: break-word; }
.clue-item.on { background: #fdf3d4; color: #8f2b21; font-weight: 700; }
.clue-item.done { color: #4c7a2f; text-decoration: line-through; }
.clue-item b { color: #b23a2e; margin-right: 2px; }

/* ---------- 字池 ---------- */
.pool { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 7px; margin-bottom: 10px; }
.ch { aspect-ratio: 1; min-height: 46px; display: flex; align-items: center; justify-content: center;
      font-family: "STKaiti", "KaiTi", serif; font-size: 22px; color: #3d3226;
      background: linear-gradient(#fffdf7, #f4ecda); border-radius: 9px;
      box-shadow: 0 2px 0 rgba(120,90,50,.2), inset 0 0 0 1.2px rgba(120,90,50,.16); cursor: pointer; }
.ch:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(120,90,50,.2); }
.ch.used { opacity: .22; pointer-events: none; box-shadow: none; }

/* ---------- 结算弹层 ---------- */
.modal { position: fixed; inset: 0; background: rgba(60,48,34,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 9; }
.candy-card { width: 100%; max-width: 380px; max-height: 86vh; overflow-y: auto; padding: 20px 16px 24px; border-radius: 12px; text-align: center;
  background: radial-gradient(circle at 20% 8%, #fffdf7, transparent 60%), linear-gradient(#fdfaf1, #f6efdd);
  box-shadow: 0 4px 0 rgba(120,90,50,.3), inset 0 0 0 2px rgba(178,58,46,.3); }
.candy-title { font-family: "STKaiti", "KaiTi", serif; font-size: 22px; letter-spacing: 3px; color: #8f2b21; }
.stars { font-size: 28px; letter-spacing: 5px; color: #e0a72b; margin: 8px 0; }
.level-subtitle { font-size: 13px; color: #6b5a3e; margin-bottom: 10px; }
.win-list { text-align: left; max-height: 44vh; overflow-y: auto; margin-bottom: 12px; padding-bottom: 6px; }
.win-item { margin-bottom: 6px; font-size: 13px; line-height: 1.55; background: #fffdf9; padding: 8px 10px; border-radius: 8px;
            box-shadow: inset 0 0 0 1px rgba(120,90,50,.14); }
.win-item .w { font-weight: 400; color: #8f2b21; font-size: 17px; font-family: "STKaiti", "KaiTi", serif; letter-spacing: 2px; }
.win-item .s { color: #9c8b70; font-size: 12px; margin-top: 2px; }

/* ---------- 家长面板 ---------- */
.stats-content { padding-top: 10px; }
.grid-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.g-stat { background: linear-gradient(#fffdf7, #f7f1e2); border-radius: 10px; padding: 8px; text-align: center;
          box-shadow: 0 2px 0 rgba(120,90,50,.18), inset 0 0 0 1.2px rgba(120,90,50,.14); }
.g-stat .k { font-size: 11.5px; color: #9c8b70; font-weight: 700; }
.g-stat .v { font-size: 19px; font-weight: 800; color: #b23a2e; }
.stat-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding-bottom: 20px; }
.stat-item { background: linear-gradient(#fffdf7, #f7f1e2); border-radius: 10px; padding: 10px;
             box-shadow: 0 2px 0 rgba(120,90,50,.18), inset 0 0 0 1.2px rgba(120,90,50,.14); }
.stat-item-top { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 4px; color: #8f2b21; font-size: 13.5px; }
.stat-item-time { font-size: 12px; color: #9c8b70; }
.stat-item-w { font-size: 13px; color: #5d5039; margin-top: 4px; line-height: 1.45; }

/* 小屏（≤340 宽）：线索两栏与字池再收一档，保证不横向溢出 */
@media (max-width: 340px) {
  .view { padding: 6px 6px 16px; }
  .clues-wrap { gap: 6px; }
  .clues-col { padding: 7px 7px; }
  .clue-item { font-size: 11.5px; }
  .pool { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; }
  .ch { min-height: 44px; font-size: 20px; }
  .stat { min-width: 52px; padding: 3px 7px; }
}