/* ============================================================
   v22.css —— V2.2 地基零件：伙伴卡、弹窗、飞星、页签角标、长按、家长门
   （样式抄原型 proto.css / proto2.css / proto3.css 的 .pc 等；类名带 v22- 前缀的是地基专用）
   孩子看到的字一律不小于 14px
   ============================================================ */

/* ---------- 底栏：字放大到 14px；图标能挂角标 ---------- */
.tab .tl { font-size: 14px; }
.tab .ti { position: relative; overflow: visible; }
.tab .ti .bdg { position: absolute; font-style: normal; pointer-events: none; }
.bdg.pbb {                       /* 今天那一课没做完：小精灵球 */
  top: -3px; right: -9px; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid #4A3728;
  background: linear-gradient(#FF6B6B 0 44%, #4A3728 44% 56%, #fff 56%);
}
.bdg.starb { top: -8px; right: -14px; font-size: 15px; line-height: 1; }   /* 有闪卡能领：唯一的提示，不能小 */
.v22-bump { animation: v22bump .35s; }
.v22-flash { animation: v22flash .6s 3; border-radius: 12px; }
.v22-plus1 {
  position: absolute; left: 50%; top: -8px; font-style: normal; font-size: 14px; font-weight: 900;
  color: #B5602A; pointer-events: none; white-space: nowrap; animation: v22plus1 .9s forwards;
}
@keyframes v22bump { 0% { transform: scale(1) } 40% { transform: scale(1.3) } 100% { transform: scale(1) } }
@keyframes v22flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,201,60,0) } 50% { box-shadow: 0 0 0 6px rgba(255,201,60,.7) } }
@keyframes v22plus1 { 0% { opacity: 0; transform: translate(-50%, 6px) } 25% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -20px) } }

/* ---------- 飞星（flyToMe） ---------- */
.v22-fly {
  position: fixed; z-index: 95; font-size: 26px; line-height: 1; margin: -13px 0 0 -13px;
  pointer-events: none; transition: transform .6s cubic-bezier(.5, -.3, .6, 1);
}

/* ---------- 弹窗（modal）：外层盖一层，第一层 div 是白卡片 ---------- */
.v22-modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(42, 33, 26, .55);
  display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);
  padding: 20px 16px; animation: v22fade .18s ease both;
}
.v22-modal > div {
  width: 100%; max-width: 380px; margin: 0 auto; background: #fff; color: #4A3728;
  border: 3px solid #4A3728; border-radius: 18px; padding: 18px 16px; text-align: center;
  font-size: 15px; box-shadow: 0 6px 0 rgba(74, 55, 40, .25);
}
@keyframes v22fade { from { opacity: 0 } to { opacity: 1 } }

/* ---------- 提示条（toast） ---------- */
.v22-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 85;
  max-width: 440px; margin: 0 auto; background: #4A3728; color: #FFF8EF; border-radius: 12px;
  padding: 10px 12px; font-size: 15px; text-align: center; pointer-events: none;
  animation: v22toast 2.6s forwards;
}
@keyframes v22toast { 0% { opacity: 0; transform: translateY(8px) } 10%, 85% { opacity: 1; transform: none } 100% { opacity: 0 } }

/* ---------- 长按（longPress）：底下一条进度 ---------- */
.lp-press { filter: brightness(.96); }
.lp-bar {
  position: absolute; left: 0; bottom: -4px; height: 3px; width: 0; border-radius: 2px;
  background: #4A3728; pointer-events: none; font-style: normal;
  animation: v22press 2s linear forwards;
}
@keyframes v22press { from { width: 0 } to { width: 100% } }

/* ---------- 家长门（gate.js） ---------- */
.gate-t { display: block; font-size: 17px; font-weight: 900; }
.gate-q { font-family: var(--en); font-size: 30px; font-weight: 900; margin: 8px 0 4px; letter-spacing: .02em; }
.gate-in {
  font: inherit; font-family: var(--en); font-size: 26px; width: 150px; text-align: center;
  border: 2.5px solid #4A3728; border-radius: 12px; padding: 6px; margin: 4px 0 14px; color: #4A3728;
  -webkit-user-select: text; user-select: text;
}
.gate-in.bad { border-color: #E08A00; animation: v22shake .38s; }
.gate-err { min-height: 20px; margin: 6px 0 0; font-size: 14px; color: #B5452F; }
.gate-err a { color: #B5452F; font-weight: 700; }
.gate-b { display: flex; gap: 10px; }
.gate-b button {
  flex: 1; font: inherit; font-size: 17px; font-weight: 900; border-radius: 14px; padding: 11px 0; cursor: pointer;
  border: 2.5px solid #4A3728;
}
.gate-ok { background: #7BC96F; color: #fff; box-shadow: 0 3px 0 #5aa64f; border-color: #5aa64f !important; }
.gate-no { background: #fff; color: #4A3728; }
@keyframes v22shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

/* ============================================================
   伙伴卡 .pc（partnerCard）
   l0 黑影 → l1 线稿灰 → l2 上色 → l3 加背景 → l4 闪光 → l5 3D（右上角标、轻轻转）
   ============================================================ */
.pc {
  position: relative; width: 196px; height: 258px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  background: #2b2440; border: 5px solid #E9D9A6; box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
  font-family: var(--zh); color: #4A3728; flex: none;
}
.pc .bg {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s;
  background: radial-gradient(circle at 50% 30%, #FFF3C4 0 18%, transparent 46%),
              linear-gradient(#FFE7B8, #FFC98A);
}
.pc[data-pid="sprigatito"] .bg {           /* 新叶喵：草地（2026-10-03 换成爸爸让画图AI画的背景） */
  background: #CFF0FF url("../img/partners/bg-sprigatito-dd0dea34.jpg") center / cover no-repeat;
}
.pc[data-pid="fuecoco"] .bg {           /* 呆火鳄：暖色夕阳（2026-10-03 换成爸爸让画图AI画的背景） */
  background: #CFF0FF url("../img/partners/bg-fuecoco-d7553bff.jpg") center / cover no-repeat;
}
.pc[data-pid="quaxly"] .bg {           /* 润水鸭：水面（2026-10-03 换成爸爸让画图AI画的背景） */
  background: #CFF0FF url("../img/partners/bg-quaxly-1e351b33.jpg") center / cover no-repeat;
}
.pc[data-pid="snivy"] .bg {             /* 藤藤蛇：阳光草地（2026-10-23 换成爸爸让画图AI画的背景） */
  background: #CFF0FF url("../img/partners/bg-snivy-c6bd7c16.jpg") center / cover no-repeat;
}
.pc .mon {
  position: absolute; left: 9%; top: 8%; width: 82%; transition: filter 1.2s;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.pc .mon.qmk {
  top: 22%; height: 48%; display: grid; place-items: center; font-size: 64px; font-weight: 900; color: rgba(255,255,255,.75);
}
.pc:not(.l0) .mon.qmk { color: #B9AC98; }
.pc .nm {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .93);
  font-weight: 900; font-size: 15px; text-align: center; padding: 6px 0; line-height: 1.3;
}
.pc .holo {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity 1.2s;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 40%, rgba(120,220,255,.3) 46%, rgba(255,130,220,.3) 52%, transparent 60%);
  background-size: 300% 300%;
}
.pc .b3d {
  position: absolute; top: 8px; right: 8px; background: #FFC93C; border-radius: 8px; padding: 1px 7px;
  font-weight: 900; font-size: 14px; display: none; z-index: 2;
}
/* 层 */
.pc.l0 { background: radial-gradient(circle at 50% 42%, #5b4f8c, #2b2440 70%); }
.pc.l0 .mon { filter: brightness(0) drop-shadow(0 0 1.5px rgba(255,255,255,.85)) drop-shadow(0 0 7px rgba(190,170,255,.45)); }
.pc.l1 { background: #F4EFE6; }
.pc.l1 .mon { filter: grayscale(1) brightness(1.15) contrast(.9); }
.pc.l1::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(74,55,40,.06) 0 1.5px, transparent 1.5px 6px);
}
.pc.l2 { background: #FFF8EF; }
.pc.l2 .mon, .pc.l3 .mon, .pc.l4 .mon, .pc.l5 .mon { filter: none; }
.pc.l3 .bg, .pc.l4 .bg, .pc.l5 .bg { opacity: 1; }
.pc.l4 .holo, .pc.l5 .holo { opacity: 1; animation: v22holo 3s linear infinite; }
.pc.l5 { animation: v22tilt 3.2s ease-in-out infinite; }
.pc.l5 .b3d { display: block; }
/* 尺寸 */
.pc.mini { width: 92px; height: 122px; border-width: 3px; border-radius: 10px; }
.pc.mini .nm { font-size: 14px; padding: 3px 0; }
.pc.mini .mon.qmk { font-size: 34px; }
.pc.mini .b3d { top: 4px; right: 4px; padding: 0 5px; }
.pc.tiny { width: 34px; height: 45px; border-width: 2px; border-radius: 6px; box-shadow: none; }
.pc.tiny .nm, .pc.tiny .b3d { display: none !important; }
.pc.tiny .mon { top: 10%; }
.pc.tiny .mon.qmk { font-size: 18px; top: 18%; }
.pc.tiny.l5 { animation: none; }
.pc.big { width: 240px; height: 316px; }
@keyframes v22holo { 0% { background-position: 0% 0% } 100% { background-position: 100% 100% } }
@keyframes v22tilt { 0%, 100% { transform: perspective(600px) rotateY(-14deg) } 50% { transform: perspective(600px) rotateY(14deg) } }
.v22-spin .pc { animation: v22spin 4s linear infinite; }
@keyframes v22spin { from { transform: perspective(700px) rotateY(0) } to { transform: perspective(700px) rotateY(360deg) } }

/* 伙伴5层的小菱形 */
.seg5 { display: flex; gap: 3px; padding: 2px 1px; }
.seg5 i { width: 6px; height: 6px; transform: rotate(45deg); background: #E6DCCB; border-radius: 1px; }
.seg5 i.on { background: #FFC93C; box-shadow: 0 0 3px #FFC93C; }

@media (prefers-reduced-motion: reduce) {
  .pc.l4 .holo, .pc.l5 .holo, .pc.l5, .v22-spin .pc { animation: none; }
}

/* 孩子看到的字不小于14px（铁律5）：老页面的 .tip（style.css 里12.5px）、题目下面的小字统一兜底 */
.view .tip { font-size: 14px; opacity: .7; }
.q-prompt .sub { font-size: 14px; }
.xlv-b i, .xhint .btn, .hw-line span + span, .hw-chunks span, .hw-entry span { font-size: 14px; }
/* 老词卡/老漫画的进度点：当前那颗原来是珊瑚红（--red），孩子端不用红色，换成黄色（同 .gx-dots 当前那颗） */
.dots i.on { background: #FFC93C; }
/* KET 页（首页「下面那一行」的老师作业会进来）：小字也补到14px */
.ket-find-link, .kc-week, .kc-item span, .kc-item small, .kc-w-tx a, .bank-word a, .kc-day em { font-size: 14px; }

/* ---------- 先做后玩（lock.js，第二批） ---------- */
.locked{opacity:.42;transition:opacity .3s}
.lk-big{font-size:40px;line-height:1.2;margin-bottom:4px}