/* 第一关短词版：在一座房子里造辅元单位，再连接词尾房。 */
.chant-pindu{--navy:#24324a;--soft:#5e6b83;--line:#d9e2f5;--blue-main:#4f7cff;--blue-deep:#315acd;--blue-soft:#eaf0ff;--pink-main:#ff7aa2;--pink-deep:#d94f7a;--pink-soft:#ffeaf1;--neutral:#94a3b8;--gold:#e5b75b;--shadow:0 7px 0 rgba(49,90,205,.09),0 12px 28px rgba(36,50,74,.08)}
.chant-pindu .consonant{color:var(--blue-deep)}
.chant-pindu .vowel{color:var(--pink-deep)}
.chant-pindu .neutral{color:var(--neutral)}
.chant-pindu .target-vowel{text-decoration-color:var(--pink-main)}
.chant-pindu .color-legend{display:flex;justify-content:center;gap:16px;margin:8px 0 0;color:var(--soft);font-size:12px;font-weight:850}
.chant-pindu .color-legend i{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%}
.chant-pindu .color-legend .consonant-dot{background:var(--blue-main)}
.chant-pindu .color-legend .vowel-dot{background:var(--pink-main)}
.short-house-pindu{margin-top:24px;padding:20px 16px;border:1px solid var(--line);border-radius:25px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,255,.98));box-shadow:var(--shadow)}
.short-house-pindu .lp-head{display:flex;align-items:center;gap:12px}
.short-house-pindu .lp-head-icon{width:52px;height:52px;flex:0 0 52px}
.short-house-pindu .lp-head-icon img{display:block;width:100%;height:100%;object-fit:contain}
.short-house-pindu .lp-head h2{margin:0;flex:1;min-width:0;font-size:30px;font-weight:800;line-height:36px;letter-spacing:-.2px;color:#243a63}
.short-house-pindu .lp-title-pink{color:#e55b90}
.short-house-pindu .lp-title-blue{color:#243a63}
.short-house-pindu .lp-rule{margin:16px 0 0;height:44px;padding:0 4px;letter-spacing:-.4px;border-radius:22px;background:#f6e8b6;color:#9a6d06;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
.chant-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px}
@media(min-width:640px){.chant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vowel-road-sign{--road-border:#f19ab7;--road-deep:#d94f7a;--road-soft:#ffeaf1;--road-tint:#fff3f7;--road-shadow:rgba(217,79,122,.12);grid-column:1/-1;display:grid;grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);align-items:center;gap:12px;margin:14px 0 1px}
.vowel-road-sign--consonant{--road-border:#91adff;--road-deep:#315acd;--road-soft:#eaf0ff;--road-tint:#f2f6ff;--road-shadow:rgba(49,90,205,.12)}
.vowel-road-sign:first-child{margin-top:5px}
.vowel-road-sign::before,.vowel-road-sign::after{height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#cad7f5)}
.vowel-road-sign::after{background:linear-gradient(90deg,#cad7f5,transparent)}
.vowel-road-sign__plate{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px 0 18px;border:2px solid var(--road-border);border-radius:13px 5px 5px 13px;background:linear-gradient(135deg,#fff 0%,var(--road-tint) 100%);box-shadow:0 5px 0 var(--road-shadow),0 10px 22px rgba(36,50,74,.08);color:#6b7890;font-size:13px;font-weight:850;white-space:nowrap}
.vowel-road-sign__plate::after{position:absolute;top:50%;right:-18px;width:34px;height:34px;border-top:2px solid var(--road-border);border-right:2px solid var(--road-border);border-radius:0 6px 0 0;background:var(--road-tint);content:"";transform:translateY(-50%) rotate(45deg);z-index:-1}
.vowel-road-sign__plate strong{color:var(--road-deep);font-family:"Arial Unicode MS","Charis SIL",serif;font-size:30px;line-height:1}
.vowel-road-sign__plate em{padding:4px 7px;border-radius:999px;background:var(--road-soft);color:var(--road-deep);font-size:11px;font-style:normal;letter-spacing:.08em}
.cp-card{min-width:0;padding:15px 13px 13px;border:1.5px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#fff,#f9fbff)}
.cp-top{display:flex;align-items:flex-end;justify-content:center;gap:9px}
.cp-word{display:inline-flex;align-items:center;padding:0 4px;border-radius:10px;font-family:Georgia,"Times New Roman",serif;font-size:34px;font-weight:700;line-height:1.1;cursor:pointer;transition:box-shadow .16s ease,background .16s ease}
.cp-word.active{background:#fff7df;box-shadow:0 0 0 4px rgba(229,183,91,.28)}
.cp-cn{padding-bottom:6px;color:#aab5c5;font-size:12px;font-weight:800}
.cp-ipa{display:block;margin:6px 0 10px;text-align:center;font-family:"Arial Unicode MS","Charis SIL",serif;font-size:22px;letter-spacing:.04em}
.cp-ipa-button{width:max-content;max-width:100%;margin-inline:auto;padding:3px 12px;border:1.5px solid transparent;border-radius:15px;background:#f8fbff;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
.cp-ipa-button:focus-visible,.cp-ipa-button:hover{border-color:#c9d8ff;background:#fff;transform:translateY(-1px);outline:none}
.cp-card.ipa-direct-target{box-shadow:0 0 0 5px rgba(255,122,162,.24),0 14px 30px rgba(49,90,205,.16)}
.cp-lane{display:flex;align-items:flex-start;justify-content:center;gap:18px;padding:10px 6px 4px;overflow:visible}
.cp-pair{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.cp-brace{display:none}
.cp-house{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:128px;padding-top:29px;transform-origin:center bottom;isolation:isolate}
.cp-tail-house{min-width:68px;padding-top:23px}
.cp-roof{position:absolute;z-index:2;top:0;left:-5px;right:-5px;height:28px;filter:drop-shadow(0 3px 2px rgba(49,90,205,.14));transform-origin:center bottom}
.cp-roof::before,.cp-roof::after{position:absolute;display:block;content:""}
.cp-roof::before{inset:0 0 3px;background:linear-gradient(110deg,var(--blue-main),#8d84ff 48%,var(--pink-main));clip-path:polygon(50% 0,100% 100%,0 100%)}
.cp-roof::after{right:0;bottom:0;left:0;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--blue-main),#8d84ff 48%,var(--pink-main))}
.cp-tail-house .cp-roof{left:-6px;right:-6px;height:22px}
.cp-tail-house .cp-roof::before{background:linear-gradient(135deg,#7e9cff,var(--blue-main))}
.cp-tail-house .cp-roof::after{background:linear-gradient(90deg,#7e9cff,var(--blue-main))}
.cp-house-body{position:relative;z-index:1;display:flex;align-items:stretch;justify-content:center;min-height:68px;overflow:hidden;border:2px solid #b9c9f5;border-radius:5px 5px 14px 14px;background:#fff;box-shadow:0 5px 0 rgba(79,124,255,.09),0 10px 18px rgba(36,50,74,.08);transform-origin:center center}
.cp-tail-house .cp-house-body{border-color:#b9c9f5;background:var(--blue-soft)}
.cp-blk{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:54px;min-height:64px;padding:7px 8px;border:0;background:#fff;transform-origin:center bottom}
.cp-house-body .cp-blk+.cp-blk{border-left:2px dashed #d4dcf1}
.cp-blk.consonant{background:linear-gradient(180deg,#fff,var(--blue-soft))}
.cp-blk.vowel{background:linear-gradient(180deg,#fff,var(--pink-soft))}
.cp-blk b{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:700;line-height:1.05}
.cp-blk > span{min-height:16px;color:var(--soft);font-family:"Arial Unicode MS","Charis SIL",serif;font-size:12px;font-weight:800}
.cp-blk.consonant b{color:var(--blue-deep)!important}
.cp-blk.vowel b{color:var(--pink-deep)!important}
.cp-blk.active{position:relative;z-index:3;animation:cpLetterPop 560ms cubic-bezier(.2,.9,.25,1) both}
.cp-blk.active::after{position:absolute;inset:5px;border:3px solid currentColor;border-radius:10px;content:"";opacity:.24;pointer-events:none}
.cp-house.is-active .cp-house-body{animation:cpHouseBody 620ms cubic-bezier(.22,.9,.28,1.12) both}
.cp-house.is-active .cp-roof{animation:cpHouseRoof 620ms cubic-bezier(.22,.9,.28,1.12) both}
.cp-step{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:22px;color:var(--soft);font-size:10px;font-weight:850;white-space:nowrap}
.cp-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:#fff;font-size:9px;font-style:normal;font-weight:900}
.cp-badge.pink{background:var(--pink-main)}
.cp-badge.blue{background:var(--blue-main)}
.cp-solo-col{margin:0}
.cp-rhythm{display:flex;justify-content:center;gap:9px;margin:12px 0 4px;color:#b9c3cf;font-size:14px;font-weight:850;flex-wrap:wrap}
.cp-rhythm .seg.on{color:var(--navy);text-shadow:0 2px 8px rgba(49,90,205,.18)}
.cp-rhythm .seg.last.on{color:var(--pink-main)}
.cp-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.cp-mode{min-height:44px;border:1.5px solid #bfd0ff;border-radius:13px;background:#fff;color:var(--blue-main);font-size:14px;font-weight:850;cursor:pointer}
.cp-mode.primary{border:0;background:var(--navy);color:#fff;box-shadow:0 4px 0 rgba(24,54,79,.2)}
.cp-mode[aria-pressed="true"]{border-color:var(--pink-main);color:var(--pink-main)}
.cp-mode.primary[aria-pressed="true"]{background:var(--pink-main);color:#fff}
.cp-status{margin:9px 0 0;text-align:center;color:var(--soft);font-size:11px;font-weight:850}
.cp-status b{color:var(--navy)}
.cp-status.vowel b{color:var(--pink-deep)}
.cp-status.consonant b{color:var(--blue-deep)}
@keyframes cpLetterPop{0%{transform:translateY(0) scale(1)}42%{transform:translateY(-7px) scale(1.20)}68%{transform:translateY(1px) scale(.96)}100%{transform:translateY(0) scale(1)}}
@keyframes cpHouseBody{0%{transform:translateY(0) scale(1)}42%{transform:translateY(-7px) scale(1.20);box-shadow:0 10px 0 rgba(79,124,255,.12),0 18px 28px rgba(36,50,74,.18)}68%{transform:translateY(1px) scale(.96)}100%{transform:translateY(0) scale(1);box-shadow:0 0 0 4px rgba(229,183,91,.22),0 5px 0 rgba(79,124,255,.09),0 10px 18px rgba(36,50,74,.08)}}
@keyframes cpHouseRoof{0%{transform:translateY(0) scale(1)}42%{transform:translateY(-13px) scale(1.12)}68%{transform:translateY(1px) scale(.97)}100%{transform:translateY(0) scale(1)}}
@media(max-width:390px){.short-house-pindu{padding-inline:11px}.vowel-road-sign{grid-template-columns:minmax(10px,1fr) auto minmax(10px,1fr);gap:8px;margin-top:11px}.vowel-road-sign__plate{min-height:44px;padding-left:14px;padding-right:22px;gap:7px}.vowel-road-sign__plate strong{font-size:27px}.cp-card{padding-inline:9px}.cp-lane{gap:13px;padding-inline:0}.cp-house{min-width:120px}.cp-tail-house{min-width:68px}.cp-blk{min-width:50px;padding-inline:6px}.cp-step{font-size:9px}.cp-rhythm{gap:7px}}
@media(prefers-reduced-motion:reduce){.cp-blk.active,.cp-house.is-active .cp-house-body,.cp-house.is-active .cp-roof{animation:none}.cp-blk.active{transform:none}.cp-house.is-active .cp-house-body{transform:none;box-shadow:0 0 0 4px rgba(229,183,91,.25),0 5px 0 rgba(79,124,255,.09),0 10px 18px rgba(36,50,74,.08)}.cp-house.is-active .cp-roof{transform:none}}
.lp-phoneme-modal[hidden]{display:none}
.lp-phoneme-modal{--lp-blue:#3160da;--lp-pink:#e45b90;--lp-ink:#243a63;position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(36,58,99,.28);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif}
.lp-phoneme-panel{position:relative;width:min(360px,100%);padding:20px 16px 18px;border:2px solid #d9e4fa;border-radius:22px;background:#fff;box-shadow:0 18px 42px rgba(36,58,99,.22);box-sizing:border-box}
.lp-phoneme-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f5ff;color:#526584;font-size:24px;line-height:30px;cursor:pointer}
.lp-phoneme-kicker{margin:0;color:var(--lp-pink);font-size:14px;font-weight:800;text-align:center}
.lp-phoneme-panel h3{margin:5px 36px 16px;color:var(--lp-ink);font-size:24px;font-weight:800;line-height:1.15;text-align:center}
.lp-phoneme-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lp-phoneme-choice{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid currentColor;border-radius:16px;background:#fff;text-decoration:none;font-family:"Arial Unicode MS","Charis SIL",serif;font-size:24px;font-weight:800;box-sizing:border-box}
.lp-phoneme-choice.consonant{color:var(--lp-blue)}.lp-phoneme-choice.vowel{color:var(--lp-pink)}
.lp-choice-no{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;color:#fff;font:800 13px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
.lp-phoneme-choice.consonant .lp-choice-no{background:var(--lp-blue)}.lp-phoneme-choice.vowel .lp-choice-no{background:var(--lp-pink)}
.lp-phoneme-choice b{font:inherit;color:currentColor}
@media(max-width:380px){.lp-phoneme-list{gap:8px}.lp-phoneme-choice{min-height:50px;font-size:22px}}

/* 字母组合蕾丝（2026-09-25 Frank：全站都加上；规则搬自 09 站 letter-combo-chain.css，改为生手卡作用域）*/
/* 字母组合标记（brace）：数据里带 combination 的单词会自动生成该图片标记 */
.cp-card .cp-letter-chain {
  position: relative;
  display: inline-flex;
  padding: 0;
  isolation: isolate;
}
.cp-card .cp-letter-chain > span {
  position: relative;
  z-index: 1;
}
.cp-card .cp-letter-chain::before,
.cp-card .cp-letter-chain::after {
  content: none;
}
.cp-card .cp-combo-chain {
  position: absolute;
  top: calc(100% - 2.60px);
  left: 50%;
  width: 41.86px;
  height: 13.49px;
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}
/* 2026-09-25：尾巴小屋的字母被 <b><span> 包住，曾误吃 .cp-blk span 的 12px —— 收紧为直接子元素后，再显式声明一次字号 */
.cp-blk b span{font-size:inherit;font-weight:inherit;line-height:inherit;font-family:inherit;min-height:0}
.cp-blk{cursor:pointer}
.cp-blk:focus-visible{outline:3px solid #9db9f2;outline-offset:2px}

/* 2026-09-26 淡灰 = 不发音（letter-kinds.js 的 silent 类型） */
.silent{color:#c2cbd8!important}