/* ============================================================
   play.css —— V2.2第二批（P）：还想玩固定3格（pl-）、连线（ln-）、先做后玩锁条、探险两组＋按月折叠（ex-）
   抄原型 proto4 的 .pgrid/.pgrid2/.pmwrap、.lnw/.lnit、.lrow/.sec-t/.plink2
   孩子看到的字一律不小于 14px；不用红色（连错的线是橙色）
   ============================================================ */

/* ---------- 还想玩：课页小格（2026-10-04 起全部摆出来、不折叠：一排3格，按学习顺序） ---------- */
.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; transition: opacity .3s; }
.pl-grid.locked { opacity: .42; }
.pl-grid .pg {
  font: inherit; color: inherit; cursor: pointer; min-height: 88px; padding: 8px 2px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #fff; border: 2px solid #E6DCCB; border-radius: 14px; text-align: center; transition: opacity .3s;
}
.pl-grid .pg:active { transform: translateY(2px); }
.pl-grid .pg i { font-style: normal; font-size: 26px; line-height: 1.2; }
.pl-grid .pg b { font-size: 14px; line-height: 1.3; }
.pl-grid .pg .st { font-size: 15px; white-space: nowrap; }   /* 她靠这一行判断「还能不能拿星」 */
.pl-grid .pg.full { opacity: .5; }                            /* 拿满了变淡，不挪位置 */
.pl-lk { font-size: 14px; color: #B5602A; margin-left: 8px; font-weight: 800; }

/* ---------- 还想玩：做完后的大格竖排页 ---------- */
.pl22 { padding-top: calc(14px + env(safe-area-inset-top)); }
.pl22.pl-lockpage { padding-top: 0; }
.pl-h { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.pl-lv { font-weight: 800; font-size: 16px; background: #FFF1D6; border-radius: 12px; padding: 4px 14px; text-align: center; text-wrap: balance; }
.pl-wrap { margin-top: 18px; }
.pl-grid.big { grid-template-columns: 1fr; gap: 8px; }          /* 竖排一列；6–7格也要一屏放下（每格≥72px） */
.pl-grid.big .pg { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 74px; padding: 6px 18px; text-align: left; border-width: 2.5px; }
.pl-grid.big .pg b { flex: 1; font-size: 20px; }
.pl-grid.big .pg i { font-size: 34px; }
.pl-grid.big .pg .st { font-size: 18px; }
.pl-enough { margin-top: 14px; }

/* ---------- 先做后玩：锁条（大格页、从地址直接打开的游戏） ---------- */
.pl-lock {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0;
  background: #FFF1D6; border: 2px dashed #E9C46A; border-radius: 14px; padding: 10px 12px;
}
.pl-lock > i { font-style: normal; font-size: 22px; }
.pl-lock > span { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: #8a5a1f; line-height: 1.35; text-wrap: balance; }
.pl-lock .pl-lgo { margin-top: 4px; font-size: 20px; padding: 10px; }
.pl-ghost {
  margin: 26px auto 0; width: 70%; min-height: 150px; border: 2.5px dashed #D9CDBB; border-radius: 20px; opacity: .45;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
}
.pl-ghost i { font-style: normal; font-size: 52px; line-height: 1.2; }
.pl-ghost b { font-size: 20px; }
.pl-ghost span { font-size: 15px; color: #8B7A63; }

/* ---------- 连线 ---------- */
.ln22 .ln-dots { display: flex; gap: 8px; justify-content: center; margin: -2px 0 6px; }
.ln22 .ln-dots i { width: 12px; height: 12px; border-radius: 50%; background: #E6DCCB; transition: background .3s; }
.ln22 .ln-dots i.cur { background: #FFC93C; box-shadow: 0 0 0 3px rgba(255, 201, 60, .3); }
.ln22 .ln-dots i.done { background: #7BC96F; }
.ln-t { font-size: 15px; font-weight: 800; color: #8B7A63; text-align: center; margin: 0 0 10px; }
.ln-w {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 52px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ln-s { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.ln-s line { stroke: #4A3728; stroke-width: 5; stroke-linecap: round; }
.ln-s line.tmp { stroke: #E9A800; stroke-dasharray: 1 10; stroke-width: 6; }
.ln-s line.ok { stroke: #7BC96F; }
.ln-s line.bad { stroke: #F08A3C; animation: lnshake .38s; }
.ln-col { display: flex; flex-direction: column; gap: 10px; }
.ln-it {
  position: relative; height: 82px; background: #fff; border: 2.5px solid #4A3728; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity .25s, background .25s, border-color .25s;
}
.ln-w.n5 .ln-it { height: 78px; }
.ln-l { padding: 0 12px 0 8px; }
.ln-l b {
  font-size: 21px; font-family: var(--en); color: #B5602A; line-height: 1.15; text-align: center;
  overflow-wrap: anywhere; pointer-events: none;
}
.ln-l.long b { font-size: 17px; }
.ln-r { padding: 5px; }
.ln-art { height: 100%; aspect-ratio: 1; border-radius: 9px; overflow: hidden; pointer-events: none; display: grid; place-items: center; background: #FFF8EF; }
.ln-art * { pointer-events: none; -webkit-user-drag: none; }
.ln-art img, .ln-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ln-it .dot {
  position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 3px solid #4A3728; z-index: 2; pointer-events: none;
}
.ln-l .dot { right: -11px; }
.ln-r .dot { left: -11px; }
.ln-it.pick { background: #FFF1D6; box-shadow: 0 0 0 3px #FFC93C; }
.ln-it.pick .dot { background: #FFC93C; }
.ln-it.done { background: #EAF6E4; border-color: #7BC96F; opacity: .7; cursor: default; }
.ln-it.done .dot { background: #7BC96F; border-color: #5aa64f; }
.ln-it.shake { animation: lnshake .38s; }
@keyframes lnshake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-7px) } 75% { transform: translateX(7px) } }

/* ---------- 探险：两组＋按月折叠 ---------- */
.ex22 .ex-sec { margin: 6px 0 8px; font-size: 15px; }
.ex-grp + .ex-grp { margin-top: 14px; }
.ex-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px;
  background: #fff; border: 1.5px solid #E6DCCB; border-radius: 14px; padding: 6px 10px 6px 6px;
}
.ex-row:active { transform: translateY(1px); }
.ex-cv { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: none; display: block; }
.ex-cv.emo { display: grid; place-items: center; background: #FFF1D6; font-size: 30px; }
.ex-m { flex: 1; min-width: 0; }
.ex-m b { display: block; font-size: 16px; line-height: 1.3; }
.ex-st { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ex-st .hm-balls.xs { margin-top: 0; }
.ex-st .hm-balls.xs .pb { width: 14px; height: 14px; }
.ex-ok { color: #3c8a33; font-weight: 900; font-size: 20px; }
.ex-chev { font-style: normal; color: #B9AC99; font-size: 20px; }
.ex-fold {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 8px;
  background: #F7F2EA; border: 1.5px dashed #D9CDBB; border-radius: 14px; padding: 12px 14px;
}
.ex-fold b { font-size: 15px; color: #6f6252; }
.ex-fold i { font-style: normal; color: #8B7A63; font-size: 20px; transition: transform .2s; }
.ex-fold.on i { transform: rotate(90deg); }
.ex-fbody[hidden] { display: none; }
.ex-prac { text-align: center; font-size: 14px; color: #8B7A63; font-weight: 800; margin-top: 10px; padding: 10px 0; cursor: pointer; }
/* 「更多」里面按月份标一行小字（2026-10-11：每组只露3课，更早的收进「更多」） */
.ex-mon { font-size: 14px; font-weight: 800; color: #8B7A63; margin: 10px 4px 4px; }
.ex-fold.ex-more b { color: #B5602A; }
.ex22 .ex-sec .ex-n { float: right; font-weight: 600; font-size: 13px; color: #8A7E70; }