:root{--ink:#5b4a3b;--muted:#998e83;--cream:#fffaf3;--paper:#f7f3ec;--line:#eadfd1;--orange:#ef9639;--pink:#ff91b5;--blue:#70b0ef;--mint:#8bcf8b;--yellow:#ffd35e;--bead-shadow:inset -3px -4px 5px #8b552522,0 5px 10px #8c6c4b1c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(#eaf6ff,#fffaf3 55%);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}.game-app{width:min(560px,100%);margin:auto;padding:24px 16px 30px}.game-header{display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{display:block;font-size:10px;letter-spacing:.16em;color:#ae9a87;font-weight:800}.game-header h1{margin:6px 0 0;font-size:25px;letter-spacing:-.04em}.header-actions{display:flex;align-items:center;gap:8px}.pill,.mistakes{border:1px solid var(--line);background:#fffdf9;border-radius:999px;padding:8px 11px;color:#887667;font-size:11px}.mistakes{color:#d9858d}.hero{height:116px;margin-top:16px;border:1px solid var(--line);border-radius:22px;background:#fffdf9;display:flex;align-items:center;justify-content:space-between;overflow:hidden;box-shadow:0 10px 25px #886a4312}.hero-copy{display:flex;gap:10px;align-items:center;padding-left:17px;max-width:310px}.hero-copy strong{font-size:14px}.hero-copy p{font-size:11px;color:var(--muted);line-height:1.5;margin:5px 0 0}.bead-dot{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 33% 30%,#fff9 0 10%,transparent 11%),linear-gradient(145deg,#ffbdcf,#ff7ca5);box-shadow:var(--bead-shadow);flex:none}.hero-art{height:100%;width:156px;overflow:hidden}.hero-art img{height:100%;width:100%;object-fit:cover;object-position:23% 40%;filter:saturate(.85)}.hud{display:grid;grid-template-columns:58px 1fr 58px;gap:12px;align-items:end;margin:20px 2px 12px}.hud>div:first-child,.hud>div:last-child{text-align:center}.hud span{display:block;color:var(--muted);font-size:10px}.hud strong{display:block;color:var(--orange);font-size:18px;margin-top:2px}.hud strong b{font-weight:800}.hud-progress>span{display:block;text-align:center;font-size:11px;color:#8d8074;margin-bottom:7px}.hud-progress>div{height:7px;background:#eadfd1;border-radius:99px;overflow:hidden}.hud-progress i{display:block;width:12%;height:100%;background:linear-gradient(90deg,var(--orange),var(--pink));border-radius:inherit;transition:width .3s}.board{position:relative;height:410px;border:1px solid #e8e1d7;border-radius:24px;background:radial-gradient(circle at 35% 30%,#fff 0 8%,transparent 9%),linear-gradient(180deg,#fffdf9,#f9f2e9);overflow:hidden;box-shadow:0 14px 30px #886a4310}.word-card{position:absolute;width:86px;height:62px;transform:translate(-50%,-50%);border:0;border-radius:17px;background:linear-gradient(145deg,#fffdf8,#fff3df);box-shadow:var(--bead-shadow);color:var(--ink);z-index:var(--z);transition:transform .16s,filter .16s,opacity .2s}.word-card:before,.word-card:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#f8b4c9;box-shadow:12px 0 #f7d369,24px 0 #9cd69c;left:12px;top:9px}.word-card:after{left:auto;right:12px;background:#a8d8f4;box-shadow:-12px 0 #f7d369,-24px 0 #f8b4c9}.word-card span{display:block;font-size:14px;font-weight:850;margin-top:8px}.word-card small{display:block;color:#aa9e91;font-size:9px;margin-top:3px}.word-card.is-blocked{filter:brightness(.86) saturate(.65)}.word-card:not(.is-blocked):hover{transform:translate(-50%,-50%) translateY(-4px)}.word-card.is-gone{opacity:0;transform:translate(-50%,-50%) scale(.7)}.tray-section{margin-top:16px}.tray-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.tray-label span{font-size:13px;font-weight:800}.tray-label small{font-size:10px;color:var(--muted)}.tray{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.tray-slot{height:48px;border:1px dashed #d8cbbb;border-radius:13px;background:#fffdf9;display:grid;place-items:center;text-align:center;font-size:9px;color:#a08f7e;overflow:hidden}.tray-slot.filled{border:1px solid #f0c994;background:#fff3dd;color:#ad762e;font-weight:800}.tray-slot.matched{animation:pop .35s ease}@keyframes pop{50%{transform:scale(1.14);background:#f0ffe9}}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.tools button{height:54px;border:1px solid var(--line);border-radius:16px;background:#fffdf9;color:var(--orange);font-size:20px}.tools small{display:block;color:#8d8074;font-size:10px;margin-top:2px}.message{text-align:center;color:#9a8e82;font-size:11px;margin:14px 0 0}.study-dialog,.result-dialog{border:0;padding:0;background:transparent}.study-dialog::backdrop,.result-dialog::backdrop{background:#5b4a3b55;backdrop-filter:blur(4px)}.dialog-card,.result-card{width:min(350px,calc(100vw - 36px));background:#fffdf9;border:1px solid var(--line);border-radius:26px;padding:28px 24px;box-shadow:0 24px 60px #5b4a3b33;text-align:center;position:relative}.close{position:absolute;right:13px;top:11px;background:none;color:#b0a49a;font-size:22px}.word-orb{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 5px}.word-orb span{font-size:30px;font-weight:900;color:var(--orange)}.word-orb button{width:38px;height:38px;border-radius:50%;border:0;background:#e8f4ff;color:var(--blue);font-size:18px}.pronounce-state{font-size:10px;color:#a59b91;margin:0 0 20px}.dialog-card h2{font-size:16px;margin:0 0 15px}.dialog-card h2 em{font-style:normal;color:var(--orange)}.meaning-options{display:grid;gap:8px}.meaning-option{padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13px}.meaning-option:hover{border-color:#f6bb73}.task-feedback{height:20px;font-size:11px;color:var(--mint)}.result-card h2{font-size:25px;margin:14px 0 8px}.result-card p{color:var(--muted);font-size:12px}.result-words{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:18px 0}.result-words span{padding:7px 10px;border-radius:999px;background:#fff1da;color:#ad762e;font-size:11px}.primary{border:0;border-radius:15px;background:var(--orange);color:#fff;padding:13px 28px;font-weight:800}@media(max-width:390px){.word-card{width:78px}.board{height:380px}.hero-art{width:130px}.hero-copy p{font-size:10px}} .onboarding{min-height:100vh;padding:18px 16px 28px;background:linear-gradient(180deg,#9bdcff 0%,#dff4ff 38%,#fff8e9 100%);display:grid;place-items:center}.onboarding-card{width:min(430px,100%);padding:22px 20px 24px;border:1px solid #ffffffaa;border-radius:30px;background:#fffdf9e8;box-shadow:0 20px 50px #4789a52b;text-align:center}.onboarding-card h1{margin:6px 0 6px;font-size:34px;letter-spacing:-.06em;color:#6b4a35}.welcome-lead{margin:0 auto 14px;color:#8d7b6d;font-size:13px}.onboarding-art{height:235px;border-radius:22px;overflow:hidden;background:#d7f2ff;margin-bottom:16px}.onboarding-art img{width:100%;height:100%;object-fit:cover;object-position:31% 43%;filter:saturate(.88)}.profile-form{display:grid;gap:10px;text-align:left}.profile-form label{font-size:12px;color:#7d6a5a;font-weight:700}.profile-form input,.profile-form select{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:13px;padding:11px 12px;background:#fff;font:inherit;color:var(--ink);outline:none}.profile-form input:focus,.profile-form select:focus{border-color:#f3b15f;box-shadow:0 0 0 3px #f3b15f22}.start-button{width:100%;margin-top:4px;font-size:16px;padding:14px}.player-greeting{display:block;font-size:11px;color:#a48568;margin-top:4px}.tray-slot.filled i{width:8px;height:8px;border-radius:50%;background:#ffac62;box-shadow:8px 0 #ff91b5,16px 0 #8bcf8b;display:block;margin:0 auto 2px}.tray-slot.filled span{display:block} .profile-title{margin:10px 0 4px;font-size:24px;color:#6b4a35} .tray-receive{animation:trayReceive .42s ease-out}.tray-slot.filled.matched{animation:slotMatch .5s ease-out}@keyframes trayReceive{0%{transform:translateY(5px);filter:brightness(1)}45%{transform:translateY(-3px);filter:brightness(1.12)}100%{transform:translateY(0);filter:brightness(1)}}@keyframes slotMatch{0%{transform:scale(1)}45%{transform:scale(1.12);background:#eaffdd}100%{transform:scale(1)}} body{background:radial-gradient(circle at 8% 12%,#ffd9e7 0 18px,transparent 19px),radial-gradient(circle at 92% 18%,#ffe59a 0 13px,transparent 14px),radial-gradient(circle at 15% 72%,#c9f2d2 0 24px,transparent 25px),linear-gradient(180deg,#dff4ff 0%,#fffaf3 58%)}.onboarding{background:radial-gradient(circle at 12% 10%,#fff4c7 0 11px,transparent 12px),radial-gradient(circle at 88% 18%,#ffd0e1 0 18px,transparent 19px),radial-gradient(circle at 8% 85%,#c9f0d5 0 26px,transparent 27px),linear-gradient(180deg,#8fd8ff 0%,#dff6ff 46%,#fff8e9 100%)} .onboarding-home{width:min(510px,100%);min-height:100vh;padding:18px 14px 24px;display:flex;flex-direction:column}.home-status{display:flex;justify-content:space-between;align-items:center}.learner-chip{display:flex;align-items:center;gap:9px;padding:8px 15px 8px 9px;border-radius:999px;background:#fffdf9db;box-shadow:0 8px 20px #5e8b9d2e}.avatar-bead{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff 0 8%,transparent 9%),linear-gradient(145deg,#ffc36c,#ef8739);color:#fff;font-weight:900;box-shadow:var(--bead-shadow)}.learner-chip strong,.learner-chip small{display:block}.learner-chip strong{font-size:13px;color:#604835}.learner-chip small{font-size:10px;color:#8e7c6e;margin-top:2px}.learner-chip b{color:#e8892f}.home-icons{display:flex;gap:9px}.home-icons span{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#fffdf9d9;border:1px solid #fff;color:#6e8b73;font-size:20px;box-shadow:0 6px 15px #5e8b9d22}.home-title{text-align:center;margin:16px 0 4px}.home-title h1{margin:6px 0 3px;font-size:36px;letter-spacing:-.08em;color:#694a36;text-shadow:0 2px #fff}.home-title p{margin:0;color:#8d7866;font-size:12px}.home-art{position:relative;flex:1;min-height:360px;margin:10px 0 12px;border:7px solid #fffdf9;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px #477d9230;background:#d5f2ff}.home-art:after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#77bd6d77);pointer-events:none}.home-art img{width:100%;height:100%;object-fit:cover;object-position:28% 43%;filter:saturate(.92)}.scene-badge{position:absolute;right:14px;top:14px;padding:7px 10px;border-radius:999px;background:#fffdf9dd;color:#a26c3e;font-size:10px;font-weight:800}.home-start{align-self:center;min-width:72%;padding:15px 25px;border-radius:22px;font-size:18px;box-shadow:0 7px 0 #d87c24,0 12px 22px #dc8b3d44;transform:translateY(-2px)}.home-start:active{transform:translateY(3px);box-shadow:0 3px 0 #d87c24}.home-start span{margin-right:8px;font-size:15px}.home-menu{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.home-menu button{min-height:59px;text-align:left;padding:9px 12px;border:1px solid #ffffffaa;border-radius:17px;background:#fffdf9dd;color:#5d4b3f;box-shadow:0 5px 15px #477d9220}.home-menu b,.home-menu small{display:block}.home-menu b{font-size:12px}.home-menu small{font-size:9px;color:#96877b;margin-top:4px}.profile-card{align-self:center}.profile-card[hidden]{display:none}@media(max-width:390px){.home-title h1{font-size:31px}.home-art{min-height:320px}.home-menu{gap:7px}.home-menu button{padding:8px 9px}} *[hidden]{display:none !important} .result-reward{display:flex;align-items:center;gap:10px;text-align:left;margin:15px 0;padding:11px 13px;border:1px solid #f4d293;border-radius:16px;background:linear-gradient(135deg,#fff4d9,#fffdf7);color:#a96f2e}.result-reward[hidden]{display:none!important}.reward-bead{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 30% 25%,#fff 0 8%,transparent 9%),linear-gradient(145deg,#ffd66d,#f09535);color:#fff;font-size:22px;box-shadow:var(--bead-shadow)}.result-reward strong,.result-reward small{display:block}.result-reward strong{font-size:12px}.result-reward small{font-size:10px;margin-top:3px;color:#b38a5e} .word-card.hinted{outline:3px solid #ffd35e;outline-offset:4px;animation:hintPulse .72s ease-in-out infinite;filter:brightness(1.08) saturate(1.2);z-index:999!important}@keyframes hintPulse{50%{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 8px #ffd35e44,var(--bead-shadow)}}.board.match-burst{animation:boardBurst .48s ease-out}@keyframes boardBurst{35%{filter:brightness(1.22) saturate(1.3)}100%{filter:brightness(1)}} .tray{grid-template-columns:repeat(4,1fr)}.home-icons b{font-size:10px;color:#b57935;vertical-align:middle}.result-reward strong{color:#a96f2e} .reward-art{position:relative;width:72px;height:72px;flex:none;border:4px solid #fff;border-radius:16px;background-color:#ffbd73;background-image:radial-gradient(circle at 18% 20%,#fff 0 4px,transparent 5px),radial-gradient(circle at 40% 38%,#f36f9d 0 5px,transparent 6px),radial-gradient(circle at 63% 57%,#83cf9b 0 5px,transparent 6px),radial-gradient(circle at 78% 25%,#6db7ec 0 5px,transparent 6px),radial-gradient(circle at 30% 75%,#ffd45e 0 5px,transparent 6px),radial-gradient(circle at 75% 82%,#956bc5 0 5px,transparent 6px);box-shadow:var(--bead-shadow);overflow:hidden}.reward-art:before{content:"";position:absolute;inset:9px;border:2px solid #fff9;border-radius:10px}.reward-art span{position:absolute;z-index:2;right:4px;top:2px;color:#fff;font-size:10px;font-weight:900}.reward-art i{position:absolute;left:20px;top:24px;width:30px;height:24px;border-radius:45% 45% 35% 35%;background:#f7a53f;box-shadow:-8px 8px #f7a53f,8px 8px #f7a53f}.reward-level-challenge{background-color:#91c9f2;background-image:radial-gradient(circle at 18% 20%,#fff 0 4px,transparent 5px),radial-gradient(circle at 40% 38%,#ff7fb2 0 5px,transparent 6px),radial-gradient(circle at 63% 57%,#7f6ac7 0 5px,transparent 6px),radial-gradient(circle at 78% 25%,#ffd45e 0 5px,transparent 6px),radial-gradient(circle at 30% 75%,#8bd39e 0 5px,transparent 6px),radial-gradient(circle at 75% 82%,#f06e6e 0 5px,transparent 6px)}.reward-copy{min-width:0}.reward-copy em{display:block;font-style:normal;font-size:9px;color:#b38a5e;margin-top:4px} .reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 7px}.reward-flip-card{position:relative;aspect-ratio:1;border:1px solid #f0d5a4;border-radius:10px;background:linear-gradient(145deg,#ffd878,#f19a38);color:#fff;overflow:hidden;box-shadow:0 3px 7px #9a6d3a33;cursor:pointer;transform-style:preserve-3d;transition:transform .35s,filter .2s}.reward-flip-card:hover{filter:brightness(1.08);transform:translateY(-2px)}.reward-flip-card .card-back{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:900;color:#fff8d8;background:radial-gradient(circle at 20% 20%,#fff8 0 3px,transparent 4px),radial-gradient(circle at 70% 70%,#fff6 0 3px,transparent 4px),linear-gradient(145deg,#f6b34f,#df7d2b)}.reward-flip-card .card-front{position:absolute;inset:0;display:none;background-image:url("./assets/rewards/cow-series.png");background-size:300% 300%;background-position:calc(var(--card-x) * 50%) calc(var(--card-y) * 50%);background-repeat:no-repeat}.reward-flip-card.is-revealed .card-back{display:none}.reward-flip-card.is-revealed .card-front{display:block}.reward-flip-card b{position:absolute;right:3px;bottom:2px;font-size:8px;text-shadow:0 1px 2px #5b4a3b99}.reward-flip-hint{text-align:center;font-size:10px;color:#b38a5e;margin:3px 0 10px}.result-card .reward-grid + .result-words{margin-top:8px}@media(max-width:390px){.reward-grid{gap:5px}} /* ===== 2026-10-25 遮挡与卡槽修正 ===== 1) 卡牌尺寸改用棋盘百分比（21% × 15.5%），和 levels.js 的判定常量同源， 让「看起来被压住」和「实际点不动」永远是同一件事。 2) 卡槽从 7 列改回 4 列（逻辑本来就是 4 格）。 3) 只剩最后一格时进危险态：红光呼吸 + 心跳。 */ .board{height:410px} .word-card{width:21%;height:15.5%;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center} .word-card span{font-size:clamp(11px,3.4vw,14px);line-height:1.15;margin-top:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .word-card small{font-size:9px;margin-top:2px;white-space:nowrap} .word-card.is-blocked{filter:brightness(.94) saturate(.18) contrast(.92);opacity:.62;cursor:not-allowed;box-shadow:inset 0 0 0 2px #ece0d2,0 2px 6px #8c6c4b16} .word-card.is-blocked small{color:#bda992} .tray{grid-template-columns:repeat(4,1fr);gap:8px} .tray-slot{height:58px;font-size:11px} .tray-slot span{font-size:12px;font-weight:800;line-height:1.1;padding:0 2px} .tray.is-danger .tray-slot{border-color:#f7a8b4;background:#fff6f7;animation:trayDanger .9s ease-in-out infinite} @keyframes trayDanger{0%,100%{box-shadow:0 0 0 0 #f7a8b400}50%{box-shadow:0 0 0 4px #f7a8b455}} .tray.is-danger .tray-slot:not(.filled){border-color:#f27d90;background:#ffeef1} .reward-flip-card .card-front{background-size:100% 100%;background-position:center;background-repeat:no-repeat} .reward-grid[hidden],.reward-flip-hint[hidden],.iron-process[hidden]{display:none!important}.iron-process{position:relative;margin:8px 0;border-radius:14px;overflow:hidden;background:#f6efe4}.iron-process video{display:block;width:100%;height:140px;object-fit:cover;object-position:center 43%;filter:saturate(.9)}.iron-process span{position:absolute;left:0;right:0;bottom:0;padding:7px;background:#5b4a3bcc;color:#fff;text-align:center;font-size:11px}.reward-flip-card.is-ironing{animation:ironShake .18s linear infinite;filter:brightness(1.15)}@keyframes ironShake{50%{transform:translateX(2px) rotate(.5deg)}} .reward-flip-card{transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .2s;perspective:800px}.reward-flip-card.is-revealed{transform:rotateY(180deg)}.reward-flip-card.is-revealed:hover{transform:rotateY(180deg) translateY(-2px)}.reward-flip-card .card-back,.reward-flip-card .card-front{backface-visibility:hidden}.reward-flip-card .card-front{transform:rotateY(180deg)} .reward-flip-card.is-revealing{filter:brightness(1.08) saturate(1.12);z-index:20} .reward-flip-card.is-flying{animation:rewardFlyToCollection .68s cubic-bezier(.2,.75,.25,1) forwards;z-index:30;pointer-events:none} @keyframes rewardFlyToCollection{to{transform:translate(var(--fly-x),var(--fly-y)) scale(.34) rotate(8deg);opacity:.08}} .reward-art.reward-art-collected{background-size:cover;background-position:center;border-color:#fff;box-shadow:0 0 0 3px #ffd36e66,var(--bead-shadow);animation:rewardArtPop .52s ease-out} @keyframes rewardArtPop{0%{transform:scale(.78) rotate(-6deg)}55%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0)}} /* ===== 移动端横向溢出修正 ===== hero 原来是「文字 max-width:310 + 图片 156」的固定组合，窄屏下总宽超出屏幕， 导致整页产生横向滚动、第四个卡槽和按钮被切。 改成图片定宽、文字弹性收缩。 */ html,body{max-width:100%;overflow-x:hidden} .hero{overflow:hidden} .hero-copy{flex:1 1 auto;min-width:0;max-width:none;padding-left:14px} .hero-copy p{overflow-wrap:anywhere} .hero-art{flex:0 0 auto;width:min(36%,156px)} @media(max-width:430px){.hero-art{width:31%}.hero-copy{padding-left:12px}} .reward-flip-card.is-showcase{transform:rotateY(180deg) scale(1.62);z-index:40;filter:brightness(1.16) saturate(1.18);box-shadow:0 0 0 5px #ffd36e66,0 14px 28px #8c6c4b44;transition:transform .35s ease-out,filter .35s,box-shadow .35s} .music-button[aria-pressed="false"]{opacity:.58} @media(max-width:430px){.game-header{align-items:flex-start}.header-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}.music-button{font-size:10px;padding:7px 8px}.header-actions .mistakes{font-size:10px;padding:7px 8px}} .reward-flip-card .card-front img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} .reward-grid.is-draw-locked .reward-flip-card:not(.is-revealed){opacity:.58;filter:saturate(.55);cursor:not-allowed;pointer-events:none} /* ===== 规则说明 + 抽卡修正（2026-10-25 晚） ===== */ .rules-link{align-self:flex-start;margin-top:6px;padding:4px 10px;border:1px solid #f0d5a4;border-radius:999px;background:#fff8ea;color:#b8722a;font-size:11px;font-weight:800;cursor:pointer} .rules-link:active{background:#ffeccd} .rules-card{text-align:left} .rules-card h2{text-align:center} .rules-list{margin:4px 0 18px;padding:0;list-style:none;counter-reset:rule} .rules-list li{position:relative;padding:0 0 0 34px;margin-bottom:13px;counter-increment:rule} .rules-list li:before{content:counter(rule);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#ffd878,#f19a38);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 5px #9a6d3a33} .rules-list b{display:block;font-size:13px;color:#5b4a3b;margin-bottom:3px} .rules-list span{display:block;font-size:11.5px;line-height:1.6;color:#8d8074} .rules-card .primary{width:100%} .result-card{max-height:88vh;overflow-y:auto} /* 抽卡网格加透视，翻牌才有立体感（透视必须放在父级才生效） */ .reward-grid{perspective:900px} .reward-flip-card.is-static{transition:none!important} .reward-reset{width:100%;margin:0 0 6px;padding:10px;border:1px dashed #e8c98f;border-radius:12px;background:#fff8ea;color:#b8722a;font-size:12px;font-weight:800;cursor:pointer} .reward-reset:active{background:#ffeccd} /* ===== 抽卡翻面修正（2026-10-25 夜） ===== ironShake 的关键帧写的是 transform:rotate(.5deg)，会把 is-revealed 的 rotateY(180deg) 整个顶掉 —— 熨烫那几秒卡片会翻回去、只剩一条边缘。 单独给已翻面的卡一套保留 rotateY(180deg) 的抖动。 */ .reward-flip-card.is-ironing{animation:ironShakeFlip .18s linear infinite;filter:brightness(1.15)} @keyframes ironShakeFlip{ 0%,100%{transform:rotateY(180deg)} 50%{transform:rotateY(180deg) translateX(2px) rotate(.5deg)} } /* 定住展示时也别被 grid 裁掉 */ .reward-flip-card.is-showcase{transform:rotateY(180deg) scale(1.55)} .reward-flip-card:focus{outline:2px solid #f6bb73;outline-offset:2px} .reward-flip-card:focus:not(:focus-visible){outline:none} /* ===== 抽卡翻面：改用 scaleX 翻片，彻底绕开 3D 被拍平的问题 ===== 原因：.reward-flip-card 有 overflow:hidden，CSS 规定此时 preserve-3d 会被 强制降级为 flat，卡面的 rotateY(180deg) 于是被 backface-visibility:hidden 判成背面而不渲染 —— 表现就是「翻开了但只有一片金色」。 这里不再使用 3D，改为横向压扁再展开，靠 JS 在中间那一帧换面。 */ .reward-flip-card .card-back, .reward-flip-card .card-front{backface-visibility:visible;transform:none} .reward-flip-card.is-revealed{transform:none} .reward-flip-card.is-revealed:hover{transform:translateY(-2px)} .reward-flip-card.is-flipping{animation:cardFlipSwap .52s ease-in-out} @keyframes cardFlipSwap{ 0%{transform:scaleX(1)} 48%{transform:scaleX(.06)} 100%{transform:scaleX(1)} } .reward-flip-card.is-ironing{animation:ironShakeFlat .18s linear infinite;filter:brightness(1.15)} @keyframes ironShakeFlat{ 0%,100%{transform:none} 50%{transform:translateX(2px) rotate(.5deg)} } .reward-flip-card.is-showcase{transform:scale(1.55)} .profile-rules{text-align:left;margin:16px 0 0;padding:16px 15px;border:1px solid #f0d5a4;border-radius:18px;background:linear-gradient(145deg,#fff8e8,#fffdf9);box-shadow:0 8px 18px #9a6d3a12} .profile-rules h3{margin:0 0 11px;text-align:center;color:#8c5a2b;font-size:17px} .profile-rules ol{margin:0;padding-left:22px;color:#6f5d4e} .profile-rules li{padding:6px 0 6px 3px;font-size:13px;line-height:1.45} .profile-rules li::marker{color:#e68d32;font-weight:900} .rules-confirm{width:100%;margin-top:11px;padding:12px 14px;font-size:14px} /* 普通权重前面加个小徽标：告诉家长这一段是必读，不是装饰 */ .rules-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#ffe1d6;color:#d9633a;font-size:10px;font-weight:900;letter-spacing:.06em;vertical-align:2px} /* ===== 学段选择 + 教材导航（2026-10-25 夜） ===== */ .stage-field{margin-bottom:13px} .stage-label{display:block;font-size:12px;font-weight:700;color:#7a6a5c;margin-bottom:6px} .stage-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px} .stage-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 6px;border:1.5px solid #eee0cf;border-radius:14px;background:#fffdf9;color:#7a6a5c;cursor:pointer;transition:border-color .16s,background .16s,transform .12s} .stage-card b{font-size:14px;font-weight:900} .stage-card small{font-size:10px;color:#a49485} .stage-card.is-active{border-color:#f19a38;background:linear-gradient(160deg,#fff4e2,#ffe9cc);color:#b8722a;box-shadow:0 3px 10px #e0a45733} .stage-card.is-active small{color:#c08a4e} .stage-card:active{transform:scale(.98)} .book-app{padding-bottom:40px} .choice-app{padding-bottom:40px} .choice-lead{margin:8px 3px 16px;color:#8d7b6d;font-size:12px;line-height:1.6;text-align:center} .level-map-list{display:grid;gap:11px;position:relative}.level-map-list:before{content:"";position:absolute;left:31px;top:24px;bottom:24px;width:4px;border-radius:4px;background:linear-gradient(#ffd46c,#ff9dbd,#8ec8ee);opacity:.55}.level-map-node{position:relative;z-index:1;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;width:100%;padding:13px 12px 13px 7px;border:1px solid #f0dcc6;border-radius:21px;background:#fffdf9;text-align:left;box-shadow:0 6px 16px #b5834918;cursor:pointer}.level-map-node.is-locked{filter:grayscale(.35);opacity:.55;cursor:not-allowed}.level-bead{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffc968,#ed8e38);color:#fff;font-size:12px;font-weight:1000;box-shadow:0 3px 0 #d77e2e,0 5px 10px #c57b3638}.level-map-node:nth-child(2) .level-bead{background:linear-gradient(145deg,#ff9cc1,#ef6b9f);box-shadow:0 3px 0 #d65d91,0 5px 10px #d65d9138}.level-map-node:nth-child(3) .level-bead{background:linear-gradient(145deg,#8ed5f5,#528bd5);box-shadow:0 3px 0 #4476bb,0 5px 10px #4476bb38}.level-map-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.level-map-copy b{font-size:15px;color:#5b4a3b}.level-map-copy small,.level-map-copy em{font-size:10px;color:#a49485;font-style:normal;line-height:1.35}.level-map-copy em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-map-node>i{font-size:10px;color:#b57b45;font-style:normal;text-align:right;max-width:60px;line-height:1.3} .level-map-node{grid-template-columns:48px 1fr}.scenario-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:4px}.scenario-node{min-height:52px;padding:7px 5px;border:1px solid #f0dcc6;border-radius:12px;background:#fff8ee;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}.scenario-node b{font-size:10px;color:#b8732b}.scenario-node span{font-size:10px;line-height:1.2;color:#6d5949}.scenario-node i{font-size:9px;color:#b9906b;font-style:normal}.scenario-node.is-locked{opacity:.46;filter:grayscale(.4);cursor:not-allowed}.scenario-node.is-open:active{background:#ffe9cc} .exam-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .exam-card{min-height:190px;padding:18px 13px;border:1px solid #f0d9bc;border-radius:22px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#5b4a3b;cursor:pointer;box-shadow:0 8px 18px #b5834920} .exam-card:active{transform:scale(.98)} .ket-card{background:linear-gradient(155deg,#fff7dc,#ffe7ad)} .pet-card{background:linear-gradient(155deg,#eaf7ff,#c8e9ff)} .exam-level{font-size:25px;font-weight:1000;letter-spacing:.04em;color:#da8d2f} .pet-card .exam-level{color:#3689be} .exam-card b{font-size:16px}.exam-card small{font-size:10.5px;line-height:1.45;color:#927c69}.exam-card i{margin-top:auto;font-style:normal;font-size:11px;font-weight:800;color:#ba762d} .mode-choice-grid{display:grid;gap:11px}.mode-choice{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:14px;border:1px solid #eee0cf;border-radius:18px;background:#fffdf9;text-align:left;cursor:pointer;box-shadow:0 5px 14px #b5834914}.mode-choice:active{background:#fff4e3}.mode-choice>span{grid-row:1/3;font-size:25px}.mode-choice b{font-size:15px;color:#5b4a3b}.mode-choice small{font-size:11px;color:#a49485;margin-top:3px}.mode-choice:after{content:'›';grid-column:3;grid-row:1/3;color:#c9b8a4;font-size:22px} .book-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 12px;padding:5px;border-radius:999px;background:#f4ece1} .book-tab{border:0;border-radius:999px;padding:9px 4px;background:transparent;color:#8d7d6d;font-size:13px;font-weight:800;cursor:pointer} .book-tab.is-active{background:#fffdf9;color:#3f8f5f;box-shadow:0 2px 8px #b58a5526} .book-list{display:grid;gap:9px} .book-row,.unit-row{display:flex;align-items:center;gap:11px;width:100%;padding:13px 13px 13px 11px;border:1px solid #eee0cf;border-radius:16px;background:#fffdf9;text-align:left;cursor:pointer} .book-row:active,.unit-row:active{background:#fff6e9} .book-icon{font-size:19px;flex:none} .book-main,.unit-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0} .book-main b,.unit-main b{font-size:14px;color:#5b4a3b} .book-main small,.unit-main small{font-size:10.5px;color:#a49485} .book-arrow{color:#c9b8a4;font-size:18px;flex:none} .book-note{margin:16px 2px 0;font-size:11px;line-height:1.6;color:#a49485;text-align:center} .unit-back{border:0;background:transparent;color:#b8722a;font-size:12px;font-weight:800;padding:7px 0 2px;cursor:pointer} .unit-head{display:flex;justify-content:space-between;align-items:baseline;margin:6px 2px 11px;font-size:15px;font-weight:900;color:#5b4a3b} .unit-head span{font-size:10.5px;font-weight:600;color:#a49485} .unit-list{display:grid;gap:8px} .unit-no{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;background:#ffe9cc;color:#b8722a;font-size:12px;font-weight:900} /* ===== 单元三种玩法 + 长句卡（2026-10-25 夜） ===== */ .mode-card{text-align:left} .mode-card h2{text-align:center} .mode-sub{font-size:11.5px;color:#a49485;text-align:center;margin:0 0 12px;line-height:1.5} .mode-list{display:grid;gap:9px;margin-bottom:14px} .mode-row{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid #eee0cf;border-radius:16px;background:#fffdf9;text-align:left;cursor:pointer} .mode-row:active{background:#fff6e9} .mode-row:disabled{opacity:.45;cursor:not-allowed} .mode-icon{font-size:20px;flex:none} .mode-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0} .mode-main b{font-size:14px;color:#5b4a3b} .mode-main small{font-size:10.5px;color:#a49485;line-height:1.35} .mode-close{width:100%;margin:0} /* 语法/句子模式文字长：允许两行小字，宁可小也别截断 */ .word-card.is-long{padding:2px 4px} .word-card.is-long span{font-size:8.5px;line-height:1.12;white-space:normal;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:0} .word-card.is-long small{display:none} .tray-slot span.is-long{font-size:9px;line-height:1.05;white-space:normal} .book-main small .tagged{color:#c08a4e} /* 弹窗字体回到无衬线（dialog 默认字体不是继承 body 的），聚焦框换成品牌色 */ .result-dialog,.result-card{font-family:inherit} .mode-row:focus,.rules-card button:focus,.unit-back:focus{outline:2px solid #f6bb73;outline-offset:2px} .mode-row:focus:not(:focus-visible){outline:none} /* ===== 教材导航三级：玩法 → 册次 → 单元 ===== */ .mode-list-nav{display:grid;gap:10px} .mode-entry{display:flex;align-items:center;gap:12px;padding:16px 14px;border:1px solid #eee0cf;border-radius:18px;background:#fffdf9;text-align:left;cursor:pointer;box-shadow:0 3px 10px #b58a5514} .mode-entry:active{background:#fff6e9} .mode-entry-icon{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:#fff1da;font-size:19px} .mode-entry:focus{outline:2px solid #f6bb73;outline-offset:2px} .mode-entry:focus:not(:focus-visible){outline:none} .step-back{border:0;background:transparent;color:#b8722a;font-size:12px;font-weight:800;padding:6px 0 10px;cursor:pointer;text-align:left} .unit-row:disabled{opacity:.5;cursor:not-allowed} .unit-row:disabled .unit-no{background:#f1e9de;color:#b9a894} /* ===== 卡牌尺寸分级 + 中文卡配色（2026-10-25 深夜） ===== 词卡紧凑、句卡加宽：卡片够宽，字才敢放大，孩子不用眯眼。 */ .board{--cw:21%;--ch:15.5%} .word-card{width:var(--cw);height:var(--ch)} /* 中文卡淡粉底：一眼分得清"这是中文那张"，不用去读小字 */ .word-card.is-cn{background:linear-gradient(145deg,#fff9fc,#ffe9f1);box-shadow:inset 0 0 0 3px #ffe3ee,inset 0 0 0 4px #f8a0c0b3,0 2px 0 #8b55251f,0 5px 10px #8c6c4b1a} .word-card.is-cn.is-blocked{box-shadow:inset 0 0 0 2px #f4e2ea,0 2px 6px #8c6c4b1f} .word-card.is-cn span{color:#a3416a} /* 语法：卡略宽，两行 10.5px */ .board[data-mode="grammar"] .word-card{border-radius:17px} .board[data-mode="grammar"] .word-card span{font-size:10.5px;line-height:1.14;white-space:normal;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 句子：卡更宽、牌更少，11.5px 两行，整句看得清 */ .board[data-mode="sentences"] .word-card{border-radius:18px} .board[data-mode="sentences"] .word-card span{font-size:11.5px;line-height:1.18;letter-spacing:-.01em;white-space:normal;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .board[data-mode="grammar"] .word-card small, .board[data-mode="sentences"] .word-card small{display:none} /* 卡槽里的字同样放大，句卡进槽也要读得清 */ body[data-mode="sentences"] .tray-slot span{font-size:10px;line-height:1.1} body[data-mode="grammar"] .tray-slot span{font-size:10.5px;line-height:1.1} /* 灰卡的小字沉到卡片底部，别和主文字叠在一起 */ .word-card small{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:8px;line-height:1;color:#c3ae96} .word-card span{position:relative;z-index:1} /* ================================================================== 2026-10-26 手机全屏版（终局覆盖层） 1) 游戏页改成 100dvh 纵向弹性布局：去掉小牛和规则卡，牌区吃掉剩余高度 2) 卡牌做「厚度 + 高光 + 落影」三层立体，不再用伪元素豆点 3) 字号整体放大一档，手机上不用眯眼 注意：卡牌宽高仍是百分比（--cw / --ch），和 levels.js 的判定常量同源， 改尺寸必须同时改 src/game/levels.js 与 src/data/units.js。 ================================================================== */ html,body{height:100%} body{overscroll-behavior:none} /* ---------- 1. 游戏页全屏布局 ---------- */ .game-app.play{ display:flex!important;flex-direction:column; width:min(560px,100%);margin:auto; height:100vh;height:100dvh;min-height:0; padding:0;overflow:hidden; background:linear-gradient(180deg,#e8f4ff 0%,#fbf6ee 26%,#fdf8f0 100%); } .game-app.play[hidden]{display:none!important} .playbar{ flex:0 0 auto;display:flex;align-items:center;gap:8px; padding:8px 12px 4px; } .gbtn{ flex:0 0 auto;width:34px;height:34px;padding:0; border:1px solid #eadfd2;border-radius:11px;background:#fffdfa; color:#8a7561;font-size:17px;line-height:1; display:grid;place-items:center;cursor:pointer; box-shadow:0 2px 0 #ece1d4; } .gbtn:active{transform:translateY(1px);box-shadow:none} .playbar-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25} .playbar-mid strong{ font-size:12.5px;font-weight:800;color:#4a3728; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .playbar-mid small{ font-size:10px;color:#a8937e; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .hud-strip{ flex:0 0 auto;display:flex;align-items:center;gap:10px; padding:0 14px 7px; } .hs-item{font-size:10.5px;color:#a8937e;white-space:nowrap} .hs-item b{font-size:13.5px;font-weight:800;color:#4a3728;font-variant-numeric:tabular-nums} .hs-slash{font-style:normal;font-size:10px;color:#b6a391} .hud-strip .hud-progress{ flex:1 1 auto;height:8px;border-radius:99px;background:#efe4d6; overflow:hidden;margin:0;box-shadow:inset 0 1px 2px #d9cbb9; } .hud-strip .hud-progress i{ display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,#ffd58c,#f7a544); transition:width .32s cubic-bezier(.2,1,.3,1); } .game-app.play .board{ flex:1 1 auto;height:auto!important;min-height:0; margin:0 7px;border-radius:20px; border-color:#e5dacb; } .game-app.play .board[data-mode]{--cw:23%;--ch:17%} .tray-strip{ flex:0 0 auto;display:flex;align-items:center;gap:7px; padding:7px 12px 0; } .tray-tag{ flex:0 0 auto;font-size:9.5px;color:#b6a391;letter-spacing:.06em; writing-mode:vertical-rl;line-height:1; } .game-app.play .tray{flex:1 1 auto;gap:7px;margin:0} .game-app.play .tray-slot{ height:62px;border-radius:14px; border:1.5px dashed #ddcfbc;background:#fffdf9; font-size:11px;color:#b3a493; } .game-app.play .tray-slot span{font-size:14.5px;font-weight:800;line-height:1.1;padding:0 2px} .game-app.play .tray-slot.filled{ border-style:solid;border-color:#ecdfcd;background:#fff; box-shadow:inset 0 -3px 0 rgba(214,186,152,.35),0 3px 7px rgba(120,90,50,.12); } .game-app.play .tools{ flex:0 0 auto;margin:7px 0 0;padding:0 12px;gap:7px; } .game-app.play .tools button{ height:44px;border-radius:14px;font-size:18px; box-shadow:0 3px 0 #ece1d4; } .game-app.play .tools button:active{transform:translateY(1px);box-shadow:none} .game-app.play .tools small{font-size:9.5px} .game-app.play .message{ flex:0 0 auto;margin:3px 0 0; padding:0 14px calc(7px + env(safe-area-inset-bottom)); font-size:10.5px;line-height:1.35;min-height:22px;color:#9a8e82; } /* ---------- 2. 卡牌立体化 ---------- */ /* 去掉原来的三个彩豆装饰，立体感交给阴影层 */ .game-app.play .word-card::before, .game-app.play .word-card::after{display:none} .game-app.play .word-card:not(.is-blocked){ box-shadow: inset 0 2px 0 rgba(255,255,255,.98), inset 0 -6px 0 rgba(214,168,116,.42), inset 0 0 0 2.5px rgba(247,190,132,.62), inset 0 0 12px rgba(255,206,150,.35), 0 4px 0 #e3c9a8, 0 9px 13px rgba(122,90,52,.18), 0 18px 30px rgba(122,90,52,.10); } .game-app.play .word-card:not(.is-blocked).is-cn{ box-shadow: inset 0 2px 0 rgba(255,255,255,.98), inset 0 -6px 0 rgba(214,148,177,.40), inset 0 0 0 2.5px rgba(248,160,192,.60), inset 0 0 12px rgba(255,196,216,.35), 0 4px 0 #ecc8d8, 0 9px 13px rgba(150,80,110,.17), 0 18px 30px rgba(150,80,110,.09); } .game-app.play .word-card{ border:0;border-radius:15px; background: radial-gradient(120% 80% at 22% 8%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 58%), linear-gradient(168deg,#ffffff 0%,#fffdf6 42%,#fdf0dd 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.98), inset 0 -5px 0 rgba(210,178,138,.40), inset 0 0 0 2px rgba(247,233,215,.92), 0 4px 0 #e7d3b8, 0 8px 11px rgba(122,90,52,.15), 0 15px 26px rgba(122,90,52,.09); transition:transform .15s cubic-bezier(.2,1.3,.4,1),box-shadow .15s,filter .18s,opacity .18s; } .game-app.play .word-card:not(.is-blocked):active{ transform:translate(-50%,-50%) translateY(2px) scale(.97); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(210,178,138,.35), inset 0 0 0 2px rgba(247,233,215,.9), 0 2px 0 #e7d3b8, 0 4px 7px rgba(122,90,52,.14); } /* 中文卡：粉色同一套立体层级 */ .game-app.play .word-card.is-cn{ background: radial-gradient(120% 80% at 22% 8%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 58%), linear-gradient(168deg,#ffffff 0%,#fff8fb 42%,#ffe5ef 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.98), inset 0 -5px 0 rgba(214,148,177,.38), inset 0 0 0 2px rgba(255,229,239,.95), 0 4px 0 #eecfdc, 0 8px 11px rgba(150,80,110,.14), 0 15px 26px rgba(150,80,110,.08); } .game-app.play .word-card.is-cn span{color:#a3416a} /* 被压住：压暗 + 蒙一层暖灰，而不是"洗白"。 之前用 saturate(.22) 把牌洗成一片白雾，孩子分不清哪张是牌、哪张是背景。 */ .game-app.play .word-card.is-blocked{ filter:brightness(.9) saturate(.55) contrast(.97); opacity:.94; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(196,180,161,.35), inset 0 0 0 2px rgba(226,213,197,.95), 0 3px 0 #ddd0c0, 0 5px 9px rgba(110,85,55,.11); } .game-app.play .word-card.is-blocked::after{ content:'';display:block;position:absolute;inset:0; width:auto;height:auto;left:0;right:0;top:0;bottom:0; box-shadow:none;border-radius:inherit; background:rgba(138,124,108,.30);pointer-events:none; } .game-app.play .word-card.is-blocked span{color:#5d5047} .game-app.play .word-card.is-blocked small{display:none} /* ---------- 3. 字号放大 ---------- */ .game-app.play .word-card span{ font-size:17.5px;font-weight:800;line-height:1.08; letter-spacing:-.01em;margin-top:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } .game-app.play .word-card.is-long span{font-size:15px;line-height:1.14} /* 语法/句子必须换行：单行 ellipsis 会把整句截成 "Nice to meet you, t..."， 孩子根本读不完，配对就变成猜谜。 */ .game-app.play .board[data-mode="grammar"] .word-card span, .game-app.play .board[data-mode="sentences"] .word-card span{ white-space:normal;word-break:break-word; display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden; padding:0 4px;letter-spacing:0; } .game-app.play .board[data-mode="grammar"] .word-card span{ font-size:14.5px;line-height:1.18;-webkit-line-clamp:3; } .game-app.play .board[data-mode="sentences"] .word-card span{ font-size:14.5px;line-height:1.22;-webkit-line-clamp:3; } .game-app.play .word-card small{display:none} /* 牌堆在窄屏也要留出足够的上下呼吸 */ @media (max-height:700px){ .game-app.play .tray-slot{height:50px} .game-app.play .tools button{height:40px} .game-app.play .word-card span{font-size:16px} } /* 声音提示横幅：微信内置浏览器 / 静音开关是最常见的两个"没声音"原因 */ .sound-hint{ flex:0 0 auto;position:relative;margin:0 12px 6px; padding:8px 26px 8px 10px;border-radius:12px; background:#fff6e6;border:1px solid #f6dcae; font-size:10.5px;line-height:1.45;color:#8a6a3a; } .sound-hint b{display:block;font-size:11px;color:#a8601c;margin-bottom:1px} .sound-hint button{ position:absolute;top:3px;right:4px;width:20px;height:20px;padding:0; border:0;background:transparent;color:#b99155;font-size:15px;line-height:1;cursor:pointer; } /* 字号放大后的收尾：内边距收紧，长单词优先完整显示 */ .game-app.play .word-card{padding:2px 3px} .game-app.play .word-card span{max-width:100%} /* ===== 2026-10-26 首页改版：标题换成「拼豆英语闯关」，主图换成卡册封面 ===== */ /* 六个字比原来四个字长，字号改为按屏宽伸缩，窄屏也不挤 */ .home-title{margin:14px 0 6px} .home-title h1{ margin:8px 0 6px; font-size:clamp(30px, 11.2vw, 46px); font-weight:900; letter-spacing:.02em; line-height:1.12; color:#6a3f22; text-shadow: 0 3px 0 #fffdf7,-3px 0 0 #fffdf7,3px 0 0 #fffdf7,0 -3px 0 #fffdf7, -3px -3px 0 #fffdf7,3px -3px 0 #fffdf7,-3px 3px 0 #fffdf7,3px 3px 0 #fffdf7, 0 7px 0 rgba(122,74,30,.16), 0 10px 18px rgba(122,74,30,.18); } .home-title p{font-size:12.5px;letter-spacing:.02em} /* 主图是正方形卡面：用 contain 完整显示，别裁掉卡框和标题 */ .home-art{ flex:0 0 auto; aspect-ratio:1/1; min-height:0; margin:8px 0 10px; background:linear-gradient(180deg,#eaf8ff,#d3ecfb); } .home-art img{ object-fit:contain; object-position:center center; padding:6px; filter:none; } .home-art .scene-badge{ right:12px;top:12px; background:#fffdf9e8; box-shadow:0 2px 8px rgba(90,60,30,.12); } /* ========================================================== 2026-10-27 首页小牛彩蛋：点一下喊「妈——妈——」 为什么用覆盖层、而不是把 包成