/* games2.css —— 消消乐 / 补字母 / 纵横填字
   单开一个文件而不是往 style.css 里塞：style.css 已经 23KB，
   项目铁律是单文件超 25KB 就拆。 */

/* ---------------- g4 消消乐 ---------------- */
.pop-target { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; }
.pop-target .pt-en { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.pop-target .pt-zh { flex: 1; color: #8B7A63; font-size: 15px; }

.pop-grid { display: grid; gap: 8px; }
.pop-cell {
  aspect-ratio: 1; background: #FFFDF6; border: 2.5px solid #4A3728; border-radius: 14px;
  padding: 5px; display: grid; place-items: center; box-shadow: 0 3px 0 #4A3728;
}
/* 入场只掉一次：落定后加 .settled 关掉，否则点错抖完一换回 popIn 又会重掉一遍 */
.pop-grid:not(.settled) .pop-cell { animation: popIn .18s ease-out both; }
.pop-cell svg, .pop-cell img { width: 100%; height: 100%; object-fit: contain; }
.pop-cell:active { transform: translateY(3px); box-shadow: 0 0 0 #4A3728; }
.pop-cell.bye { animation: popBye .2s ease-in forwards; }
.pop-cell.shake { animation: shake .3s ease; }        /* 单写 .shake 会被 style.css 之后加载的这里盖掉，所以单独写一条 */
/* 消掉的格子留一个淡淡的虚线空位：格子不挪、棋盘越点越空 */
.pop-cell.gone {
  animation: none; background: transparent; border: 2px dashed #E6DCCB; box-shadow: none;
  transform: none; cursor: default;
}
.pop-cell.gone > * { visibility: hidden; }
@keyframes popIn  { from { transform: translateY(-14px) scale(.9); opacity: 0 } }
@keyframes popBye { to   { transform: scale(.25) rotate(12deg); opacity: 0 } }

/* ---------------- g5 补字母 ---------------- */
.fill-word {
  display: flex; justify-content: center; align-items: flex-end; gap: 5px;
  margin: 18px 0 14px; flex-wrap: wrap;
}
.fill-word .fl {
  font-size: 30px; font-weight: 800; line-height: 1.1; min-width: 26px; text-align: center;
}
.fill-word .fl.fixed { color: #A3927A; }                 /* 脚手架：在，但不抢眼 */
.fill-word .fl.hole {
  min-width: 38px; height: 46px; border-bottom: 4px solid #4A3728; color: #4A3728;
  display: inline-grid; place-items: center;
}
.fill-word .fl.hole.now { border-bottom-color: #FFC93C; background: #FFF6DC; border-radius: 8px 8px 0 0; }
.fill-word .fl.hole.ok  { color: #3E8A31; border-bottom-color: #7BC96F; }

/* ---------------- 纵横填字 ---------------- */
/* 难度条：孩子自己选，当前档位高亮 */
.xlv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 12px; }
.xlv-b {
  padding: 7px 0 6px; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.15;
  background: #FFFDF6; color: #8B7A63; border: 2.5px solid #E6DCCC; border-radius: 12px;
}
.xlv-b i { display: block; font-style: normal; font-size: 11px; font-weight: 600; opacity: .75; }
.xlv-b.on { background: #FFE9B8; color: #4A3728; border-color: #4A3728; box-shadow: 0 2.5px 0 #4A3728; }
.xlv-b:active { transform: translateY(2px); }

.xclue { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; }
.xclue .xc-art { width: 54px; height: 54px; flex: 0 0 54px; }
.xclue .xc-art svg, .xclue .xc-art img { width: 100%; height: 100%; object-fit: contain; }
.xclue .xc-tx b { display: block; font-size: 15px; }
.xclue .xc-tx span { color: #8B7A63; font-size: 18px; font-weight: 600; }

.xgrid { display: grid; gap: 3px; justify-content: center; margin: 0 auto 14px; max-width: 100%; }
.xc {
  min-width: 0;                 /* 让格子在窄屏上真的能缩，而不是撑破网格 */
  aspect-ratio: 1; position: relative; display: grid; place-items: center;
  font-size: clamp(13px, 4.4vw, 19px); font-weight: 800; text-transform: uppercase;
  background: #FFFDF6; border: 2px solid #4A3728; border-radius: 5px;
}
.xc.void { background: none; border: none; }
/* 白送的字母：看得出不是自己填的，也删不掉 */
.xc.given { color: #A3927A; background: #F4EEE2; }
.xc.given.lit { background: #F0E6CF; }
.xc.lit  { background: #FFF6DC; }
.xc.now  { background: #FFE9B8; box-shadow: inset 0 0 0 2px #FFC93C; }
.xc.done { background: #E4F5DC; color: #3E8A31; }

.xkeys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 6px; }
.xk {
  padding: 11px 0; font: inherit; font-size: 17px; font-weight: 700; text-transform: uppercase;
  background: #FFFDF6; color: #4A3728; border: 2.5px solid #4A3728; border-radius: 10px;
  box-shadow: 0 2.5px 0 #4A3728;
}
.xk:active { transform: translateY(2.5px); box-shadow: 0 0 0 #4A3728; }
#del { background: #FFF0C9; }
/* 提示按钮放在网格和键盘中间：塞进键盘会被挤到第 5 行，
   在 390×800 的手机上直接掉出屏幕外（第一版就是这样） */
.xhint { text-align: center; margin: 0 0 8px; }
.xhint .btn { padding: 7px 16px; font-size: 13.5px; }

/* 今天页的入口卡（记忆罐 / 纵横填字共用一套）
   原来两张卡各写各的：图标一个 52px 一个 46px、右侧文字一个带「→」一个不带，
   于是高度不齐、箭头也没对上基线。现在只有这一套。 */
.entry-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  min-height: 76px;                      /* 两张卡强制等高，别随内容长短忽高忽低 */
  cursor: pointer;
}
.entry-card:active { transform: translateY(3px); box-shadow: 0 1px 0 #4A3728; }
.entry-card .ec-ico {
  width: 48px; height: 48px; flex: 0 0 48px;
  border: 2.5px solid #4A3728; border-radius: 15px; background: #FFFDF6;
  display: grid; place-items: center; font-size: 24px; overflow: hidden;
}
/* jar() 那张 SVG 自带 width:100%，不锁死尺寸会把整张卡撑到 400px 高 */
.entry-card .ec-ico svg { width: 82%; height: 82%; max-width: 82%; max-height: 82%; display: block; }
.entry-card .ec-tx { flex: 1; min-width: 0; }
.entry-card .ec-tx b { display: block; font-size: 16px; line-height: 1.35; }
.entry-card .ec-tx span {
  display: block; font-size: 13px; opacity: .68; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 箭头单独一个元素、用 flex 居中——原来把「→」直接写在中文里，
   两者基线不一样，看着就是没对齐 */
.entry-card .ec-go {
  display: flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 800; white-space: nowrap; opacity: .75;
}
.entry-card .ec-go i { font-style: normal; font-size: 19px; line-height: 1; opacity: .8; }

/* 复习日任务卡里的「还没玩完」小按钮 */
.task-card .btn.sm { padding: 9px; font-size: 14.5px; margin-top: 8px; }

/* ---------------- 每天三个时段 ---------------- */
.daybar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #8B7A63; padding: 0 4px; margin: 0 0 10px;
}
.slot-card { padding: 13px 15px; margin-bottom: 10px; cursor: pointer; }
.slot-card .sl-top { display: flex; align-items: center; gap: 12px; }
.slot-card .sl-ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 2.5px solid #4A3728; border-radius: 14px; background: #FFFDF6;
  display: grid; place-items: center; font-size: 22px;
}
.slot-card .sl-tx { flex: 1; min-width: 0; }
.slot-card .sl-tx b { display: block; font-size: 16px; line-height: 1.35; }
.slot-card .sl-tx span {
  display: block; font-size: 13px; opacity: .68; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-card .sl-now {
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: #FFC93C; border: 2px solid #4A3728; white-space: nowrap;
}
.slot-card .btn { margin-top: 11px; }
.slot-card .sl-sub { font-size: 12.5px; color: #8B7A63; text-align: center; margin: 7px 0 0; }
/* 做完的那一格：灰下去但仍然看得见，让她知道"今天已经走到哪儿了" */
.slot-card.done { opacity: .55; }
.slot-card.done .sl-ico { background: #E4F5DC; color: #3E8A31; font-weight: 800; }
.slot-card.open { box-shadow: 0 4px 0 #4A3728; }

/* ---------------- 晨读 ---------------- */
.read-card { text-align: center; padding: 20px 16px 16px; }
.read-card .rd-art { width: 116px; height: 116px; margin: 0 auto 10px; }
.read-card .rd-art svg, .read-card .rd-art img { width: 100%; height: 100%; object-fit: contain; }
.read-card .rd-en { font-size: 30px; font-weight: 800; letter-spacing: .5px; line-height: 1.25; }
.read-card .rd-en.line { font-size: 23px; }        /* 整句话，字号小一档才放得下 */
.read-card .rd-zh { font-size: 16px; color: #8B7A63; margin-top: 6px; }
.read-card .btn-speak { margin: 14px auto 0; }

/* ---------------- 本周复习 ---------------- */
.wk-head { padding: 16px; text-align: center; }
.wk-head .wk-tag { display: inline-block; font-size: 14px; font-weight: 700; padding: 2px 10px;
  border-radius: 999px; background: #FFE9B8; border: 2px solid #4A3728; }
.wk-head h2 { font-size: 22px; margin: 10px 0 12px; }
.wk-stats { display: flex; justify-content: center; gap: 22px; margin-bottom: 12px; }
.wk-stats b { display: block; font-size: 24px; line-height: 1.1; }
.wk-stats span { font-size: 14px; color: #8B7A63; }
.wk-bar { height: 12px; border: 2.5px solid #4A3728; border-radius: 999px; background: #FFFDF6; overflow: hidden; }
.wk-bar i { display: block; height: 100%; background: #7BC96F; transition: width .4s; }
.wk-sub { font-size: 14px; color: #8B7A63; margin: 8px 0 0; }

.wk-scenes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.wk-sc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #FFFDF6; border: 2.5px solid #4A3728; border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.wk-sc .wk-emo { font-size: 20px; }
.wk-sc b { font-size: 15px; }
.wk-sc .wk-words { flex-basis: 100%; font-size: 14px; color: #8B7A63; }

.wk-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 6px; }
/* 本周复习：马上要听写的重点卡（2026-10-16）。孩子页面不用红色、字不小于14px（I-lib 截图检查），重点用金色 */
.wk-dict { border: 2.5px solid #F2B33D; background: #FFF6DE; padding: 12px; margin: 12px 0; }
#go .wk-gsub { display: block; font-size: 14px; font-weight: 700; opacity: .92; }
.wk-dtag { display: inline-block; background: #E5A100; color: #fff; font-weight: 900; font-size: 15px; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.wk-dw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wk-dp { font: inherit; background: #fff; border: 2px solid #F2D58A; border-radius: 12px; padding: 4px 2px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #4A3728; }
.wk-dp .wart, .wk-dp img, .wk-dp svg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; }
.wk-dp b { font-size: 14px; line-height: 1.2; text-align: center; }
.wk-dp b i { font-style: normal; color: #B5602A; }
.wk-dp span { font-size: 14px; color: #8B7A63; }
.wk-w { padding: 5px 11px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: #FFFDF6; border: 2.5px solid #4A3728; }
.wk-w.mid { background: #FFF0C9; }
.wk-w.ok  { background: #E4F5DC; color: #3E8A31; }
.wk-w.bad { background: #FFF1D6; color: #B5602A; }   /* 「明天再见」：不用红色（铁律5） */
.view > .btn.green { margin-top: 14px; }
.fill-word .fl.gap { min-width: 14px; }        /* 短语里的空格 */
/* 长短语（take a shower 这种 13 位）在 390px 屏上会挤成两行：字母槽整体缩一档 */
.fill-word.long { gap: 3px; }
.fill-word.long .fl { font-size: 24px; min-width: 20px; }
.fill-word.long .fl.hole { min-width: 28px; height: 40px; }
.fill-word.long .fl.gap { min-width: 10px; }

/* ---------------- 宝可梦每日任务样板 ---------------- */
.pokemon-daily { width:100%; display:flex; align-items:center; gap:12px; padding:10px; margin:0 0 16px; color:#4A3728; text-align:left; font:inherit; cursor:pointer; overflow:hidden; background:#FFF0F6; }
.pokemon-daily img { width:72px; height:86px; flex:0 0 72px; border:2.5px solid #4A3728; border-radius:14px; object-fit:cover; }
.pokemon-daily .pd-copy { flex:1; min-width:0; }
.pokemon-daily small,.pokemon-daily b,.pokemon-daily em { display:block; }
.pokemon-daily small { color:#9A5270; font-size:10.5px; font-weight:800; }
.pokemon-daily b { font-size:16px; line-height:1.25; margin:3px 0; }
.pokemon-daily em { color:#8B7A63; font-size:11.5px; font-style:normal; }
.pokemon-daily > i { flex:0 0 auto; font-size:13px; font-style:normal; font-weight:800; white-space:nowrap; }
.pokemon-daily.done { background:#EFF8EA; }

.pm-view { max-width:430px; margin:0 auto; }
.pm-progress { height:10px; margin:-5px 0 15px; border:2px solid #4A3728; border-radius:99px; overflow:hidden; background:#FFF; }
.pm-progress i { display:block; height:100%; background:#FF8FB1; transition:width .3s ease; }
.pm-kicker { width:max-content; margin:0 auto 9px; padding:3px 11px; border:2px solid #4A3728; border-radius:99px; background:#FFC93C; font-size:11px; font-weight:900; }
.pm-hero { overflow:hidden; margin-bottom:16px; background:#FFF; }
.pm-hero .pm-scene { border:0; border-radius:0; }
.pm-copy { padding:15px 16px 18px; text-align:center; }
.pm-copy > span { color:#9A5270; font-size:12px; font-weight:800; }
.pm-copy h2 { margin:3px 0 5px; font-size:26px; }
.pm-copy p { color:#8B7A63; margin:0 0 12px; font-size:14px; }
.pm-load { display:flex; align-items:center; justify-content:center; gap:6px; }
.pm-load b { width:31px; height:31px; display:grid; place-items:center; border:2px solid #4A3728; border-radius:10px; background:#FFF0C9; }
.pm-load i { font-style:normal; opacity:.55; }

.pm-scene { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; border:3px solid #4A3728; border-radius:18px; background:#FFF8EF; }
.pm-scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.pm-spot { position:absolute; width:42px; height:42px; margin:-21px 0 0 -21px; border:0; border-radius:50%; background:transparent; padding:0; }
.pm-spot::after { content:''; position:absolute; inset:13px; border:2px solid #4A3728; border-radius:50%; background:#FFC93C; opacity:0; }
.pm-spot.active::before { content:''; position:absolute; inset:1px; border:4px solid #FFF; border-radius:50%; box-shadow:0 0 0 4px #FF6B6B; animation:pm-pulse 1.15s ease-in-out infinite; }
.pm-spot.active::after { opacity:1; }
.pm-scene.interactive .pm-spot { cursor:pointer; }
.pm-scene.interactive .pm-spot::after { opacity:1; }
.pm-scene.interactive .pm-spot.wrong { animation:shake .35s; }
@keyframes pm-pulse { 50% { transform:scale(1.16); opacity:.72; } }

.pm-word { overflow:hidden; margin-bottom:16px; }
.pm-word .pm-scene { width:100%; height:275px; aspect-ratio:auto; border:0; border-radius:0; }
.pm-word-copy { position:relative; padding:12px 16px 16px; text-align:center; }
.pm-word-copy b { display:block; font-size:38px; line-height:1.05; }
.pm-word-copy strong { display:block; color:#8B7A63; font-size:18px; margin-top:3px; }
.pm-word-copy .btn-speak { margin:10px auto 0; }
.pm-tag { display:inline-block; margin-bottom:6px; padding:2px 9px; border:2px solid #4A3728; border-radius:99px; background:#FFC93C; font-size:10px; font-weight:900; }
.pm-tag.review { background:#CDE8FA; }

.pm-question { display:flex; align-items:center; gap:12px; padding:11px 13px; margin-bottom:10px; }
.pm-question > div { flex:1; min-width:0; }
.pm-question small,.pm-question b,.pm-question span { display:block; }
.pm-question small { color:#8B7A63; font-size:11px; }
.pm-question b { font-size:21px; }
.pm-question span { color:#8B7A63; font-size:12px; }
.pm-round-say { width:48px; height:48px; flex:0 0 48px; border:3px solid #4A3728; border-radius:50%; background:#FFC93C; font-size:20px; box-shadow:0 3px 0 #4A3728; }
.pm-feedback { min-height:43px; margin:10px 0; padding:9px 12px; text-align:center; color:#8B7A63; font-size:13px; }
.pm-feedback.ok { border:2px solid #4A3728; border-radius:12px; background:#E4F5DC; color:#3E6C35; }
.pm-feedback b { margin-left:5px; }

.pm-sentence { overflow:hidden; padding-bottom:18px; text-align:center; }
.pm-sentence > img { display:block; width:100%; height:265px; object-fit:cover; object-position:72% 58%; }
.pm-line { padding:14px 14px 0; }
.pm-line b { display:block; font-size:29px; line-height:1.2; }
.pm-line em { color:#D94882; font-style:normal; }
.pm-line span { display:block; color:#8B7A63; margin-top:6px; }
.pm-sentence .btn-speak { margin:12px auto 0; }
.pm-say-steps { display:flex; gap:6px; margin:12px 0 15px; }
.pm-say-steps span { flex:1; padding:7px 3px; border:2px solid #4A3728; border-radius:11px; background:#FFF; text-align:center; font-size:12px; font-weight:700; }

.pm-finish { padding:22px 16px; text-align:center; margin-bottom:16px; }
.pm-badge { position:relative; width:132px; height:132px; margin:0 auto 12px; display:grid; place-items:center; border:5px solid #4A3728; border-radius:50%; background:#F8D6E7; box-shadow:0 6px 0 #4A3728; }
.pm-badge::before { content:''; position:absolute; inset:9px; border:3px dashed #FFF; border-radius:50%; }
.pm-badge span { font-size:57px; }
.pm-badge i { position:absolute; bottom:8px; padding:2px 8px; border:2px solid #4A3728; border-radius:99px; background:#FFC93C; font-size:10px; font-style:normal; font-weight:900; }
.pm-finish-tag { color:#9A5270; font-size:12px; font-weight:800; }
.pm-finish h2 { margin:4px 0; font-size:24px; }
.pm-finish p { color:#8B7A63; margin:4px auto 13px; font-size:14px; }
.pm-recap { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.pm-recap span { padding:4px 9px; border:2px solid #4A3728; border-radius:99px; background:#FFF; font-size:12px; font-weight:800; }
.pm-earned { margin-top:14px; padding:9px; border:2px solid #4A3728; border-radius:12px; background:#FFF0C9; font-weight:900; }
.pm-view > .btn.ghost { margin-top:12px; }

@media (prefers-reduced-motion: reduce) {
  .pm-progress i,.pm-spot.active::before { transition:none; animation:none; }
}

/* ---------------- 场景点读图 ---------------- */
.bd-modes { display: flex; border: 2.5px solid #4A3728; border-radius: 12px; overflow: hidden; background: #FFFDF6; margin-bottom: 10px; }
.bd-m { flex: 1; border: 0; background: none; padding: 9px; font: inherit; font-size: 15px; font-weight: 700; color: #8B7A63; }
.bd-m.on { background: #FFC93C; color: #4A3728; }
.bd-q { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 10px; }
.bd-qn { font-size: 12.5px; color: #8B7A63; }
.bd-qw { flex: 1; font-size: 24px; font-weight: 800; }
.bd-qw span { font-size: 14px; color: #8B7A63; font-weight: 600; margin-left: 8px; }
.bd-stage { position: relative; width: 100%; border: 2.5px solid #4A3728; border-radius: 16px; overflow: hidden; background: #FFF8EF; }

.bd-hs {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 1.5px solid #4A3728; background: rgba(255,253,246,.9); box-shadow: 0 1px 0 #4A3728;
  cursor: pointer; padding: 0;
}
.bd-hs::before { content: ''; position:absolute; inset:-8px; border-radius:50%; }
.bd-hs::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #FFC93C; }
.bd-hs.lit { background: #FFC93C; transform: scale(1.25); z-index: 2; }
.bd-hs.ok  { background: #7BC96F; }
.bd-hs.ok::after { background: #3E8A31; }
.bd-hs.shake { animation: shake .35s; }
@keyframes shake { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.bd-pop {
  position: absolute; transform: translate(-50%, 0); z-index: 3; min-width: 150px; max-width: 78%;
  background: #FFFDF6; border: 2.5px solid #4A3728; border-radius: 14px; padding: 8px 12px;
  box-shadow: 0 3px 0 #4A3728; text-align: center; pointer-events: none;
}
.bd-pop.up { transform: translate(-50%, -100%); }
.bd-pop b { display: block; font-size: 20px; }
.bd-pop span { display: block; font-size: 13px; color: #8B7A63; }
.bd-pop i { display: block; font-style: normal; font-size: 14px; margin-top: 4px; }
.bd-pop em { display: block; font-style: normal; font-size: 12px; color: #8B7A63; }
.bd-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bd-chip { padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700;
  background: #FFFDF6; color: #4A3728; border: 2.5px solid #E6DCCC; }
.bd-chip.seen { border-color: #7BC96F; background: #F1F9EC; }
/* KET 场景卡：点读仍是整张卡的默认入口，“找一找”单独露出，避免被埋在场景页里。 */
.ket-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ket-card-foot .pbar { flex: 1; margin-top: 0; }
.ket-find-link {
  flex: 0 0 auto; padding: 4px 8px; border: 2px solid #4A3728; border-radius: 999px;
  background: #FFC93C; color: #4A3728; font-size: 12px; font-weight: 800; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.ket-find-link:active { transform: translateY(2px); }
/* 横版点读图：固定高度，图比屏宽，左右拖 */
.bd-canvas { position: relative; width: 100%; }
.bd-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.bd-stage.wide { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bd-stage.wide::-webkit-scrollbar { display: none; }
.bd-stage.wide .bd-canvas { width: auto; height: min(62vh, 520px); }

/* Portrait boards: retain the whole image, with an optional detail view. */
.bd-tools { display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.bd-tools button { border:2px solid #4A3728; border-radius:12px; padding:8px 12px; min-height:44px; background:#FFFDF6; color:#4A3728; font:inherit; font-size:13px; font-weight:700; }
.bd-tools span { font-size:12px; color:#8B7A63; }
.bd-stage.zoomed { overflow:auto; max-height:68vh; -webkit-overflow-scrolling:touch; }
.bd-stage.zoomed .bd-canvas { width:190%; }

.bd-leaders { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.bd-leaders line { stroke:#4A3728; stroke-width:1; stroke-opacity:.65; vector-effect:non-scaling-stroke; stroke-linecap:round; }

.ket-3d { text-decoration:none; color:inherit; background:#edf4e7; }
.bd-3d-link { display:block; margin:0 0 10px; padding:12px; border-radius:12px; background:#edf4e7; color:#4A3728; text-decoration:none; font-size:14px; font-weight:700; }

.manual-update { flex-shrink:0; padding:9px 10px; border:1.5px solid #E6DCCC; border-radius:12px; color:#6c604f; background:#FFFDF6; font-size:12px; text-decoration:none; }

/* KET 找一找的星星（2026-10-17）：规则写在找一找卡片上、KET页场景图上面；结算页写这轮得没得 */
.bd-rule { font-size: 14px; font-weight: 800; color: #B5602A; margin-top: 2px; }
.bd-res { font-size: 22px; font-weight: 900; margin: 6px 0; color: #6f6252; }
.bd-res.win { color: #E5A100; font-size: 26px; }
.kt-bonus { background: #FFF6DE; border: 2px solid #F2B33D; border-radius: 14px; padding: 8px 12px; margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.kt-bonus b { color: #E5A100; font-size: 16px; }
.kt-bonus span { display: block; color: #B5602A; font-weight: 900; }
.kt-bonus.done { background: #F6F1E6; border-color: #E6DCCB; }
.kt-bonus.done span { color: #3c8a33; }