/* 自然拼读道馆（2026-10-24）js/tabs/phonics.js，前缀 ph- */
.ph { --c: #3E9B4F; --b: #E8F6EA; padding-bottom: 40px; }
.ph-test { display: block; width: 100%; margin: 6px 0 12px; padding: 14px; border: 2px dashed #3E9B4F; border-radius: 16px; background: #F1FAF2; color: #2C6B38; font-size: 17px; font-weight: 800; }
.ph-next { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; background: #fff; border: 2px solid var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 45%, #fff); text-align: left; margin: 4px 0 10px; }
.ph-next i { font-style: normal; font-size: 26px; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; flex: none; }
.ph-next div { flex: 1; min-width: 0; }
.ph-next b { display: block; font-size: 17px; color: #4A3728; }
.ph-next span { display: block; font-size: 14px; color: #6B5844; }
.ph-next em { font-style: normal; font-size: 26px; color: var(--c); font-weight: 900; }
.ph-stat { display: flex; justify-content: center; gap: 22px; font-size: 14px; color: #8A7E70; margin: 0 0 10px; }
.ph-stat b { color: #4A3728; font-size: 16px; }

.ph-gyms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-gym { display: flex; gap: 10px; align-items: center; padding: 12px 10px; border-radius: 16px; border: 2px solid var(--c); background: var(--b); text-align: left; min-width: 0; }
.ph-gym i { font-style: normal; font-size: 32px; flex: none; }
.ph-gym div { min-width: 0; }
.ph-gym b { display: block; font-size: 16px; color: #4A3728; }
.ph-gym span { display: block; font-size: 13px; color: #6B5844; line-height: 1.35; }
.ph-gym em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--c); }
.ph-gym.lock { filter: grayscale(.85); opacity: .6; }
.ph-gym.got { box-shadow: 0 0 0 3px #F2C94C; }
.ph-gym .ph-bd { color: #A87400; }
.ph-rules { margin: 16px 2px 0; font-size: 15px; color: #5d5246; }
.ph-rules summary { font-weight: 800; color: #4A3728; }
.ph-rules li { margin: 6px 0; line-height: 1.5; }
.ph-src { font-size: 12px; color: #A89C8C; text-align: center; margin-top: 18px; }

/* 道馆页 */
.ph-head { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--b); border: 2px solid var(--c); margin: 4px 0 10px; }
.ph-head i { font-style: normal; font-size: 38px; }
.ph-head b { display: block; font-size: 20px; color: #4A3728; }
.ph-head span { font-size: 14px; color: #6B5844; }
.ph-note { font-size: 14px; color: #8B6A2E; background: #FFF6DC; border-radius: 12px; padding: 8px 12px; }
.ph-list { display: grid; gap: 8px; }
.ph-ls { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 2px solid #E6DCCB; background: #fff; text-align: left; }
.ph-ls i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--b); color: var(--c); font-weight: 900; flex: none; }
.ph-ls b { flex: 1; font-size: 17px; color: #4A3728; }
.ph-ls span { font-size: 14px; color: var(--c); font-weight: 800; }
.ph-ls.ok i { background: var(--c); color: #fff; }
.ph-ls.lock { opacity: .5; }
.ph-battle { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 16px; border: 2px dashed var(--c); background: #FFFDF7; }
.ph-battle div { flex: 1; min-width: 0; }
.ph-battle b { display: block; font-size: 18px; color: #4A3728; }
.ph-battle span { font-size: 14px; color: #6B5844; }
.ph-battle .hm-go { width: auto; margin: 0; padding: 10px 18px; }
.ph-battle.lock { opacity: .55; }
.ph-mon { width: 54px; height: 54px; flex: none; }

/* 一节课 */
.ph-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.ph-dots i { font-style: normal; font-size: 13px; width: 30px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: #F1ECE2; color: #A89C8C; font-weight: 800; }
.ph-dots i.on { background: color-mix(in srgb, var(--c) 30%, #fff); color: var(--c); }
.ph-dots i.cur { background: var(--c); color: #fff; }
.ph-q { display: block; text-align: center; font-size: 20px; color: #4A3728; margin: 4px 0 10px; }
.ph-card { text-align: center; }
.ph-big { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 170px; height: 170px; border-radius: 36px; border: 3px solid var(--c); background: var(--b); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 45%, #fff); }
.ph-big b { font-size: 92px; line-height: 1; color: var(--c); font-family: 'Andika', 'Comic Sans MS', system-ui, sans-serif; }
.ph-big small { font-size: 17px; color: #6B5844; margin-top: 4px; }
.ph-big:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 45%, #fff); }
.ph-tip { font-size: 16px; color: #5d5246; margin: 14px auto; max-width: 340px; line-height: 1.5; text-wrap: balance; }
.ph-ex { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ph-w { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px; padding: 8px 4px; border-radius: 14px; border: 2px solid #E6DCCB; background: #fff; }
.ph-w i { font-style: normal; font-size: 34px; }
.ph-w b { font-size: 18px; color: #4A3728; }
.ph-w u, .ph-big u { text-decoration: none; color: var(--c); font-weight: 900; }
.ph-nx { margin-top: 18px; }
.ph-snd { display: block; margin: 0 auto 12px; padding: 10px 20px; border-radius: 22px; border: 2px solid var(--c); background: #fff; color: var(--c); font-size: 17px; font-weight: 800; }
.ph-snd b { font-size: 20px; }

/* 泡泡 */
.ph-bub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 380px; margin: 0 auto; }
.ph-bb { aspect-ratio: 1; border-radius: 50%; border: 2px solid #BFE3F5; background: radial-gradient(circle at 30% 30%, #fff 0 18%, #E9F7FF 40%, #CDEBFA); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: phfloat 3s ease-in-out infinite; animation-delay: var(--d); }
.ph-bb i { font-style: normal; font-size: 40px; }
.ph-bb small { font-size: 14px; color: #4A6A7A; }
.ph-bb.pop { animation: phpop .45s forwards; pointer-events: none; }
@keyframes phfloat { 50% { transform: translateY(-6px); } }
@keyframes phpop { 60% { transform: scale(1.25); opacity: .7; } 100% { transform: scale(.2); opacity: 0; } }
.shake { animation: phshake .35s; }
@keyframes phshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* 选项 */
.ph-opts { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.ph-o { min-width: 84px; height: 84px; padding: 0 14px; border-radius: 20px; border: 2px solid #E6DCCB; background: #fff; font-size: 38px; font-weight: 800; color: #4A3728; box-shadow: 0 3px 0 #E6DCCB; }
.ph-opts.four .ph-o { min-width: 0; width: calc(50% - 8px); height: 70px; font-size: 32px; }
.ph-o.pic { font-size: 48px; }
.ph-o.right { background: #E3F5DF; border-color: #5CB85C; box-shadow: 0 3px 0 #9BD38F; }
.ph-o.wrong { background: #FDE6E2; border-color: #E57368; }
.ph-o:disabled:not(.right) { opacity: .45; }

/* 词族大楼 */
.ph-tower { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.ph-fl { width: 170px; height: 34px; border-radius: 8px; background: #F1ECE2; color: #A89C8C; font-size: 17px; font-weight: 800; display: grid; place-items: center; }
.ph-fl.on { background: color-mix(in srgb, var(--c) 25%, #fff); color: #4A3728; }
.ph-fl.cur { background: var(--c); }
.ph-fam { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 14px; }
.ph-fam i { font-style: normal; font-size: 60px; }
.ph-fam b { font-size: 52px; color: #4A3728; letter-spacing: 2px; }
.ph-fam b span { color: var(--c); display: inline-block; min-width: 34px; border-bottom: 4px solid var(--c); text-align: center; }

/* 拼读火车 */
.ph-train { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 16px 0 8px; }
.ph-eng { font-size: 54px; background: none; border: none; padding: 0; filter: grayscale(.7); }
.ph-eng.go { filter: none; animation: phpulse 1s ease-in-out infinite; }
@keyframes phpulse { 50% { transform: scale(1.12); } }
.ph-car { width: 72px; height: 72px; border-radius: 14px; border: 3px solid var(--c); background: #fff; font-size: 40px; font-weight: 800; color: #4A3728; position: relative; }
.ph-car::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -12px; height: 10px; background: radial-gradient(circle at 25% 50%, #6B5844 0 5px, transparent 6px), radial-gradient(circle at 75% 50%, #6B5844 0 5px, transparent 6px); }
.ph-car.on { background: var(--b); }
.ph-train.run { animation: phrun 1.2s ease-in; }
@keyframes phrun { 40% { transform: translateX(-8px); } 100% { transform: translateX(0); } }
.ph-wd { font-size: 34px; color: var(--c); letter-spacing: 1px; }
.ph-wd.big { display: block; text-align: center; font-size: 56px; margin: 10px 0 16px; }
.ph-pick .ph-q { margin-top: 6px; }

/* 听音拼词 */
.ph-slots { display: flex; justify-content: center; gap: 8px; margin: 6px 0 16px; }
.ph-slots i { font-style: normal; width: 64px; height: 70px; border-radius: 12px; border: 3px dashed #D9CDB8; display: grid; place-items: center; font-size: 38px; font-weight: 800; color: var(--c); }
.ph-slots i.on { border-style: solid; border-color: var(--c); background: var(--b); }
.ph-tiles { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ph-tiles .ph-o { min-width: 64px; height: 64px; font-size: 32px; }

/* 小故事 */
.ph-story { background: #FFFDF7; border: 2px solid #EFE4CF; border-radius: 18px; padding: 14px 14px 6px; }
.ph-sc { font-size: 64px; text-align: center; }
.ph-line { font-size: 26px; line-height: 1.6; color: #4A3728; margin: 6px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; }
.ph-ln { font-size: 18px; border: none; background: var(--b); border-radius: 50%; width: 34px; height: 34px; margin-right: 8px; flex: none; align-self: center; }
.ph-tk { padding: 0 2px; border-radius: 6px; cursor: pointer; }
.ph-tk:active { background: var(--b); }
.ph-tk.tr { color: #B5602A; border-bottom: 2px dotted #E0A070; }
.ph-leg { text-align: center; font-size: 14px; color: #8A7E70; margin: 8px 0; }
.ph-rd { margin-top: 12px; }

/* 道馆战 */
.ph-hp { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 10px; border-radius: 14px; background: #F7F2FB; }
.ph-hp small { font-size: 13px; color: #8A7E70; flex: none; }
.ph-bar { flex: 1; display: flex; gap: 3px; }
.ph-bar i { flex: 1; height: 14px; border-radius: 4px; background: #E57368; }
.ph-bar i.gone { background: #EEE6DA; }
.ph-bigpic { display: block; text-align: center; font-style: normal; font-size: 80px; margin: 4px 0 6px; }
.ph-res { display: inline-block; text-align: left; font-size: 16px; color: #4A3728; margin-bottom: 6px; }
.ph-res p { margin: 6px 0; }

/* 「今天」页横条 */
.hm-read.hm-ph { background: #E8F6EA; border-color: #6CC07A; box-shadow: 0 3px 0 #B2DDB8; }
.hm-read.hm-ph span { color: #2E7A3C; }
.hm-ph .abi { font-size: 26px; background: #fff; }
.hm-read.hm-ph.ok { background: #F6F1E6; border-color: #E6DCCB; box-shadow: none; }
.hm-mt1 { margin-top: 12px; }
.hm-mt1 .hm-read { margin-top: 0; }
.ph-abc { display: block; width: 100%; margin-top: 14px; padding: 12px; border-radius: 14px; border: 2px solid #9CC3EA; background: #EEF5FC; color: #2F5F8F; font-size: 15px; font-weight: 800; text-align: left; }
/* 拼读横条加进来以后「今天」页多了一行两列，行距收一点，一屏放得下（2026-10-24） */
.hm-pair { margin-top: 10px; }
.hm-pair .hm-read { padding: 7px 8px; }