/* ============================================================
   小房子拼读法 —— 造型层
   依据：《小房子拼读法_长词版_1比1网页复刻交接包》（2026-09-22）
   本次只改造型：文案按交接稿、数据/音频/跳读逻辑不变
   ============================================================ */
.long-pindu{
  --lp-blue:#3160da;
  --lp-pink:#e45b90;
  --lp-ink:#243a63;
  --lp-body:#6f81a3;
  --lp-line:#dde7fa;
  --lp-card-line:#d9e4fa;
  --lp-soft-blue:#f1f5ff;
  --lp-soft-pink:#fde3eb;
  --lp-soft-yellow:#f6e8b6;
  --lp-roof-blue:#cfe3ff;
  --lp-roof-pink:#f8c5d6;
  --lp-font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --lp-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --lp-font-word:"Source Serif 4",Georgia,"Times New Roman",serif;
  margin-top:24px;padding:18px 12px;border:1.5px solid var(--lp-line);border-radius:22px;background:#fff;box-sizing:border-box;font-family:var(--lp-font-ui);
}
/* ---------- 1. Hero ---------- */
.lp-head{display:flex;align-items:center;gap:12px}
.lp-head-icon{width:52px;height:52px;flex:0 0 52px}
.lp-head-icon img{display:block;width:100%;height:100%;object-fit:contain}
.lp-head h2{margin:0;flex:1;min-width:0;font-family:var(--lp-font-display);font-size:30px;font-weight:800;line-height:36px;letter-spacing:-.2px;color:var(--lp-ink)}
.lp-title-pink{color:#e55b90}
.lp-title-blue{color:#243a63}
.lp-rule{margin:16px 0 0;height:44px;padding:0 4px;letter-spacing:-.4px;border-radius:22px;background:var(--lp-soft-yellow);color:#9a6d06;font-family:var(--lp-font-display);font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
/* ---------- 2. 分组条 / 卡片 ---------- */
.lp-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px}
.lp-group{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;height:34px;margin:0 0 -2px;padding:0 14px;border-radius:17px;background:var(--lp-soft-blue);color:var(--lp-ink);font-family:var(--lp-font-display);font-size:14px;font-weight:700}
.lp-group small{color:#7c90b3;font-size:12px;font-weight:700}
.lp-card{min-width:0;padding:18px 16px 16px;border:1.5px solid var(--lp-card-line);border-radius:22px;background:#fff;box-sizing:border-box}
/* ---------- 3. 大单词 / 释义 / 音标 ---------- */
.lp-top{display:flex;align-items:flex-end;justify-content:center;gap:10px}
.lp-word{display:inline-flex;align-items:center;padding:0;border-radius:12px;font-family:var(--lp-font-word);font-size:46px;font-weight:700;line-height:42px;letter-spacing:-.5px;cursor:pointer;transition:transform .16s,box-shadow .16s}
.lp-word.active{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(49,96,218,.11)}
.lp-cn{padding-bottom:4px;color:#94a1b7;font-size:14px;font-weight:700;transform:translateY(-4px)}
.lp-ipa{margin:10px 0 0;text-align:center;font-family:"Arial Unicode MS","Charis SIL",var(--lp-font-display);font-size:26px;font-weight:500;line-height:28px;color:#8fa0be}
.lp-ipa-button{display:block;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}
.lp-ipa-button:focus-visible,.lp-ipa-button:hover{border-color:#c9d8ff;background:#fff;transform:translateY(-1px);outline:none}
.lp-card .consonant{color:var(--lp-blue)!important}
.lp-card .vowel{color:var(--lp-pink)!important}
.lp-card .neutral{color:#8fa0be!important}
.lp-unit-tip{margin:14px auto 0;width:126px;height:28px;border-radius:14px;background:var(--lp-soft-pink);color:#d95f8f;font-family:var(--lp-font-display);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* ---------- 4. 小房子单元 ---------- */
.lp-blocks{margin-top:12px;display:flex;align-items:flex-start;justify-content:center;gap:28px;flex-wrap:wrap}
.lp-block{position:relative;display:flex;flex-direction:column;align-items:center}
.lp-roof{display:block;width:0;height:0;border-left:32px solid transparent;border-right:32px solid transparent;border-bottom:22px solid var(--lp-roof-blue);transform-origin:50% 100%;will-change:transform}
.lp-block--pink .lp-roof{border-bottom-color:var(--lp-roof-pink)}
.lp-body{width:64px;min-width:64px;height:60px;padding-inline:12px;margin-top:-2px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--lp-blue);border-radius:0 0 12px 12px;background:#fff;box-shadow:0 4px 10px rgba(58,95,160,.08);box-sizing:border-box;transform-origin:50% 50%;transition:transform .22s,box-shadow .22s;will-change:transform}
.lp-size-s .lp-body{width:64px}.lp-size-m .lp-body{width:76px}.lp-size-l .lp-body{width:92px}.lp-size-xl .lp-body{width:108px}
.lp-size-s .lp-roof{border-left-width:32px;border-right-width:32px}
.lp-size-m .lp-roof{border-left-width:38px;border-right-width:38px}
.lp-size-l .lp-roof{border-left-width:46px;border-right-width:46px}
.lp-size-xl .lp-roof{border-left-width:54px;border-right-width:54px}
.lp-block--pink .lp-body{border-color:var(--lp-pink)}
.lp-body b{font-family:var(--lp-font-word);font-size:28px;font-weight:700;line-height:26px;letter-spacing:-.3px}
.lp-block-ipa{margin-top:6px;font-family:"Arial Unicode MS","Charis SIL",var(--lp-font-display);font-size:15px;font-weight:600;line-height:15px;color:#516fc8}
.lp-block.active{z-index:1}
.lp-block.active .lp-body{transform:translateY(-2px) scale(1.08);box-shadow:0 9px 20px rgba(58,95,160,.22);animation:lp-house-pulse .62s cubic-bezier(.2,.85,.3,1.18) both}
.lp-block.active .lp-roof{animation:lp-roof-hop .62s cubic-bezier(.2,.85,.3,1.18) both}
@keyframes lp-house-pulse{
  0%{transform:translateY(0) scale(1);box-shadow:0 4px 10px rgba(58,95,160,.08)}
  34%{transform:translateY(-7px) scale(1.20);box-shadow:0 13px 26px rgba(58,95,160,.27)}
  66%{transform:translateY(1px) scale(.96);box-shadow:0 5px 12px rgba(58,95,160,.14)}
  100%{transform:translateY(-2px) scale(1.08);box-shadow:0 9px 20px rgba(58,95,160,.22)}
}
@keyframes lp-roof-hop{
  0%{transform:translateY(0) scale(1)}
  34%{transform:translateY(-13px) scale(1.16,1.10)}
  66%{transform:translateY(2px) scale(.96,1.04)}
  100%{transform:translateY(-4px) scale(1.06)}
}
.lp-block+.lp-block::before{content:"→";position:absolute;left:-25px;top:44px;color:#b8c1d3;font-size:22px;line-height:1;font-weight:700}
.lp-card--2units .lp-roof{border-left-width:36px;border-right-width:36px;border-bottom-width:24px}
.lp-card--2units .lp-body{min-width:72px;height:64px;border-radius:0 0 13px 13px}
.lp-card .silent,.lp-card .silent-letter{color:#c2cbd8!important}
.lp-card--3units .lp-blocks{gap:20px}
.lp-card--3units .lp-block+.lp-block::before{left:-21px}
/* ---------- 5. 步骤 Chips ---------- */
.lp-rhythm{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;margin:14px 0 0}
.lp-rhythm span{height:34px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#eff4fb;color:#b0bacb;font-family:var(--lp-font-display);font-size:14px;font-weight:700;white-space:nowrap}
.lp-rhythm span.on{background:#e6efff;color:var(--lp-blue)}
.lp-rhythm span.last.on{background:var(--lp-soft-pink);color:#e25b90}
/* ---------- 6. 按钮 / 状态行 ---------- */
.lp-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.lp-mode{height:48px;border:1.5px solid #afc6ff;border-radius:16px;background:#fff;color:var(--lp-blue);font-family:var(--lp-font-display);font-size:17px;font-weight:800;cursor:pointer;transition:background .16s,border-color .16s}
.lp-mode.primary{border:0;background:#243a63;color:#fff;box-shadow:0 4px 0 rgba(29,49,85,.14),0 8px 16px rgba(29,49,85,.10)}
.lp-mode[aria-pressed="true"]{border-color:#9db9f2;background:#f2f6ff;color:var(--lp-ink)}
.lp-mode.primary[aria-pressed="true"]{background:#1b2e50;color:#fff}
.lp-status{margin:12px 0 0;text-align:center;color:#6e81a6;font-family:var(--lp-font-display);font-size:15px;font-weight:700}
.lp-status b{color:var(--lp-ink)}
.lp-phoneme-modal[hidden]{display:none}
.lp-phoneme-modal{--lp-blue:#3160da;--lp-pink:#e45b90;--lp-ink:#243a63;--lp-font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--lp-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;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}
.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);font-family:var(--lp-font-ui);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:#e45b90;font-size:14px;font-weight:800;text-align:center}
.lp-phoneme-panel h3{margin:5px 36px 16px;color:#243a63;font-family:var(--lp-font-display);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",var(--lp-font-display);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{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:var(--lp-font-display);font-size:13px;font-weight:900}
.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(min-width:640px){.lp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.long-pindu{padding:26px}}
@media(max-width:380px){.long-pindu{padding-inline:10px}.lp-blocks{gap:22px}.lp-card--3units .lp-blocks{gap:16px}.lp-block+.lp-block::before{left:-20px}.lp-card--3units .lp-block+.lp-block::before{left:-18px}.lp-card--2units .lp-body{width:68px}.lp-phoneme-list{grid-template-columns:1fr 1fr;gap:8px}.lp-phoneme-choice{min-height:50px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.lp-block.active .lp-body,.lp-block.active .lp-roof{animation:none}.lp-block.active .lp-body{transform:translateY(-3px) scale(1.10)}.lp-block.active .lp-roof{transform:translateY(-5px) scale(1.06)}}
/* ---------- 点击小房子发音（2026-09-25）---------- */
.lp-block{cursor:pointer}
.lp-block:hover .lp-body{box-shadow:0 7px 16px rgba(58,95,160,.18)}
.lp-block:focus-visible{outline:none}
.lp-block:focus-visible .lp-body{border-color:#8fb0ff;box-shadow:0 0 0 4px rgba(49,96,218,.16)}

/* ---------- 方案 A：第一房造辅元单位，后续尾音按中央 chunks 各自成房 ---------- */
.lp-body--aplan{width:auto;min-width:112px;height:auto;min-height:60px;flex-direction:row;gap:16px;padding:6px 16px}
/* 2026-09-26 Frank：方案 A「一间大房子」的屋顶三角太小 —— 三角改为随房子宽度自动缩放（与小房子同坡度 1:3） */
/* 2026-10-04 回到生手卡（方案 A）正式外包装：房顶 = 110deg 蓝→紫→粉 渐变（与 01短词版 .cp-roof 同一正式参数），不再使用 90deg 淡色渐变。 */
.lp-block--aplan .lp-roof{align-self:stretch;position:relative;width:auto;height:0;padding-bottom:33.33%;border:0;filter:drop-shadow(0 3px 2px rgba(49,90,205,.14));background:linear-gradient(110deg,#4f7cff,#8d84ff 48%,#ff7aa2);clip-path:polygon(50% 0,100% 100%,0 100%)}
.lp-block--aplan .lp-roof::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:999px;background:linear-gradient(90deg,#4f7cff,#8d84ff 48%,#ff7aa2)}

.lp-sub{display:flex;flex-direction:column;align-items:center;line-height:1}
.lp-sub b{font-family:var(--lp-font-word);font-size:28px;font-weight:700}
.lp-sub i{margin-top:4px;font-style:normal;font-family:"Arial Unicode MS","Charis SIL",var(--lp-font-display);font-size:14px;font-weight:600;color:#516fc8}
.lp-sub.consonant b{color:var(--lp-blue)}
.lp-sub.vowel b{color:var(--lp-pink)}
.lp-body--aplan .lp-sub{min-width:44px;padding:5px 11px;border-radius:9px;transform-origin:center bottom;will-change:transform}
.lp-body--aplan .lp-sub.consonant{background:linear-gradient(180deg,#fff,#eaf0ff)}
.lp-body--aplan .lp-sub.vowel{background:linear-gradient(180deg,#fff,#ffeaf1)}
.lp-body--aplan .lp-sub+.lp-sub{border-left:2px dashed #d4dcf1}
.lp-block--aplan .lp-body--aplan{gap:0;padding:6px 10px}
.lp-sub.active{z-index:2;animation:lp-sub-pop .62s cubic-bezier(.2,.9,.25,1) both}
@keyframes lp-sub-pop{0%{transform:translateY(0) scale(1)}42%{transform:translateY(-7px) scale(1.18)}68%{transform:translateY(1px) scale(.97)}100%{transform:translateY(-1px) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.lp-sub.active{animation:none;transform:translateY(-2px) scale(1.05)}}
.lp-block--aplan-tail .lp-body{min-width:64px}

/* 方案 A 视觉基准：完整复刻 01-short-vowels 的 sun 生手卡比例与状态。 */
.lp-card--aplan-card{padding:15px 13px 13px;border-radius:20px;background:linear-gradient(160deg,#fff,#f9fbff)}
.lp-card--aplan-card .lp-word{font-size:34px;line-height:1.1}
.lp-card--aplan-card .lp-ipa{margin:6px auto 10px;padding:3px 12px;border-radius:15px;font-size:22px}
.lp-card--aplan-card .lp-unit-tip{margin-top:0;font-size:11px}
.lp-card--aplan-card .lp-blocks{align-items:flex-start;gap:18px;margin-top:0;padding:10px 6px 4px;overflow:visible}
.lp-card--aplan-card .lp-block+.lp-block::before{content:none}

.lp-card--aplan-card .lp-block--aplan{min-width:128px;padding-top:29px;justify-content:flex-end;isolation:isolate}
.lp-card--aplan-card .lp-block--aplan .lp-roof{position:absolute;z-index:2;top:0;left:-5px;right:-5px;width:auto;height:28px;padding:0;border:0;background:none;clip-path:none;filter:drop-shadow(0 3px 2px rgba(49,90,205,.14))}
.lp-card--aplan-card .lp-block--aplan .lp-roof::before,.lp-card--aplan-card .lp-block--aplan .lp-roof::after{position:absolute;display:block;content:""}
.lp-card--aplan-card .lp-block--aplan .lp-roof::before{inset:0 0 3px;background:linear-gradient(110deg,#4f7cff,#8d84ff 48%,#ff7aa2);clip-path:polygon(50% 0,100% 100%,0 100%)}
.lp-card--aplan-card .lp-block--aplan .lp-roof::after{right:0;bottom:0;left:0;height:4px;border-radius:999px;background:linear-gradient(90deg,#4f7cff,#8d84ff 48%,#ff7aa2)}
.lp-card--aplan-card .lp-block--aplan .lp-body--aplan{width:auto;min-width:128px;min-height:68px;height:auto;gap:0;padding:0;align-items:stretch;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)}
.lp-card--aplan-card .lp-body--aplan .lp-sub{position:relative;flex:1 1 0;min-width:54px;min-height:64px;padding:7px 8px;border-radius:0;justify-content:center;gap:3px;background:#fff}
.lp-card--aplan-card .lp-body--aplan .lp-sub.consonant{color:var(--lp-blue);background:linear-gradient(180deg,#fff,#eaf0ff)}
.lp-card--aplan-card .lp-body--aplan .lp-sub.vowel{color:var(--lp-pink);background:linear-gradient(180deg,#fff,#ffeaf1)}
.lp-card--aplan-card .lp-body--aplan .lp-sub b{font-size:24px;line-height:1.05}
.lp-card--aplan-card .lp-body--aplan .lp-sub i{min-height:16px;margin-top:0;color:#6f81a3;font-size:12px;font-weight:800;line-height:16px}
.lp-card--aplan-card .lp-body--aplan .lp-sub.active::after{position:absolute;inset:5px;border:3px solid currentColor;border-radius:10px;content:"";opacity:.24;pointer-events:none}

.lp-card--aplan-card .lp-block--aplan-tail{min-width:68px;padding-top:23px;justify-content:flex-end;isolation:isolate}
.lp-card--aplan-card .lp-block--aplan-tail .lp-roof{position:absolute;z-index:2;top:0;left:-6px;right:-6px;width:auto;height:22px;padding:0;border:0;background:none;filter:drop-shadow(0 3px 2px rgba(49,90,205,.14))}
.lp-card--aplan-card .lp-block--aplan-tail .lp-roof::before,.lp-card--aplan-card .lp-block--aplan-tail .lp-roof::after{position:absolute;display:block;content:""}
.lp-card--aplan-card .lp-block--aplan-tail .lp-roof::before{inset:0 0 3px;background:linear-gradient(135deg,#7e9cff,#4f7cff);clip-path:polygon(50% 0,100% 100%,0 100%)}
.lp-card--aplan-card .lp-block--aplan-tail .lp-roof::after{right:0;bottom:0;left:0;height:4px;border-radius:999px;background:linear-gradient(90deg,#7e9cff,#4f7cff)}
.lp-card--aplan-card .lp-block--aplan-tail .lp-body{width:68px;min-width:68px;height:68px;min-height:68px;border-color:#b9c9f5;border-radius:5px 5px 14px 14px;background:#eaf0ff;box-shadow:0 5px 0 rgba(79,124,255,.09),0 10px 18px rgba(36,50,74,.08)}

.lp-card--aplan-card .lp-rhythm{display:flex;justify-content:center;gap:9px;margin:12px 0 4px;color:#b9c3cf;font-size:14px;font-weight:850;flex-wrap:wrap}
.lp-card--aplan-card .lp-rhythm span.on{color:var(--lp-ink);text-shadow:0 2px 8px rgba(49,90,205,.18)}
.lp-card--aplan-card .lp-rhythm span.last.on{color:var(--lp-pink)}
.lp-card--aplan-card .lp-modes{gap:9px;margin-top:10px}
.lp-card--aplan-card .lp-mode{min-height:44px;border-radius:13px;font-size:14px}
.lp-card--aplan-card .lp-status{margin:9px 0 0;font-size:11px}
@media(max-width:390px){.lp-card--aplan-card{padding-inline:9px}.lp-card--aplan-card .lp-blocks{gap:13px;padding-inline:0}.lp-card--aplan-card .lp-block--aplan{min-width:120px}.lp-card--aplan-card .lp-block--aplan .lp-body--aplan{min-width:120px}.lp-card--aplan-card .lp-body--aplan .lp-sub{min-width:50px;padding-inline:6px}.lp-card--aplan-card .lp-rhythm{gap:7px}}

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

/* Approved teaching-combination pronunciation (kept separate from house units). */
.lp-combo-readings{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:7px}
.lp-combo-reading{font-size:14px;font-weight:800;line-height:1.25;padding:3px 8px;border-radius:999px;background:#f3f6fb;color:#526172}
.lp-combo-reading.vowel{color:#d94f7a;background:#ffeaf1}
.lp-combo-reading.consonant{color:#315acd;background:#eaf0ff}

/* COMPOUND WORD 合成词（Frank 2026-09-28）：compound house 边界由 parts 决定，badge 只做轻提示。 */
.lp-compound{display:flex;justify-content:center;margin-top:6px}
.lp-compound-badge{padding:1px 8px;border:1px solid #e2e9f6;border-radius:999px;background:#f6f9fe;color:#93a2b8;font:700 10px/1.5 system-ui,-apple-system,"PingFang SC","Hiragino Sans GB",sans-serif;letter-spacing:.08em}
.lp-card--compound .lp-blocks{gap:22px}
.lp-card--compound .lp-body{height:auto;min-height:64px}
.lp-card--compound .lp-size-s .lp-body{width:70px}
.lp-card--compound .lp-size-m .lp-body{width:82px}
.lp-card--compound .lp-size-l .lp-body{width:94px}
.lp-card--compound .lp-size-xl .lp-body{width:106px}
.lp-card--compound .lp-unit-tip{width:auto;padding:0 14px}
.lp-card--compound .lp-body b{font-size:25px}