/* 玩作业：手机竖屏、一屏一件事。课程数据和出题逻辑不依赖本文件。 */
:root { --home-ink: #263b35; --home-green: #176f50; --home-mint: #dff2b2; --home-paper: #f7f5ed; --home-muted: #7d897b; }
/* 首页用原版的标题、大按钮和年级色块（style.css），这里只补三科切换。 */
.subject-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 340px); }
.subject-tabs button { height: 46px; padding: 0; border: 3px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); font-family: var(--chunky); font-size: 20px; box-shadow: 0 4px 0 var(--ink); }
.subject-tabs button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.subject-tabs [data-subject="chinese"][aria-pressed="true"] { background: #ff9d4d; }
.subject-tabs [data-subject="math"][aria-pressed="true"] { background: #3fdcb0; }
.subject-tabs [data-subject="english"][aria-pressed="true"] { background: #8fb4ff; }
.grades button[aria-pressed="true"] { background: var(--ink) !important; color: #fff; }
.gift-btn { right: auto; left: 14px; padding: 8px; }
.gift-btn svg { animation: gift-nudge 1.8s ease-in-out infinite; }
@keyframes gift-nudge { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
#start-review:disabled { opacity: .55; }
.home-note { margin: 2px 0 0; font-size: 11px; font-weight: 900; opacity: .55; text-align: center; }
/* 一屏放下：尺寸跟着可见高度（dvh）走，手机浏览器的地址栏算在外面。舞台吃掉剩余高度。 */
#screen-title { height: 100%; min-height: 0; overflow: hidden; gap: clamp(5px, 1.2dvh, 12px); padding: calc(8px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom)); }
#screen-title .settings-btn { top: calc(8px + env(safe-area-inset-top)); width: 40px; height: 40px; padding: 8px; }
#screen-title .help-btn { top: calc(8px + env(safe-area-inset-top)); right: 60px; }
#screen-title .gift-btn { left: 14px; right: auto; }
#screen-title .logo { --s: clamp(34px, min(6.6dvh, 11.5vw), 54px); display: flex; gap: 6px; margin: 0; padding-top: 2px; }
#screen-title .logo i { display: grid; place-items: center; width: var(--s); height: var(--s); border: 3px solid var(--ink); border-radius: calc(var(--s) * .28); box-shadow: 0 3px 0 var(--ink); box-sizing: border-box; color: #fff; font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif; font-style: normal; font-weight: 400; font-size: calc(var(--s) * .66); line-height: 1; text-shadow: 0 2px 0 rgba(27, 29, 77, .3); }
#screen-title .logo i:nth-child(1) { background: #ff8a3d; transform: rotate(-5deg); }
#screen-title .logo i:nth-child(2) { background: #22b573; transform: rotate(3deg); }
#screen-title .logo i:nth-child(3) { background: #3b82f6; transform: rotate(-3deg); }
#screen-title .title-stage { flex: 1 1 60px; min-height: 60px; height: auto; }
#screen-title .modes { gap: clamp(5px, 1.1dvh, 10px); width: 100%; }
#screen-title .subject-tabs, #screen-title .grades, #screen-title .mode-row { width: min(100%, 420px); }
#screen-title .subject-tabs button { height: clamp(36px, 5.4dvh, 46px); font-size: clamp(17px, 2.6dvh, 20px); }
#screen-title .level-btn { width: min(100%, 420px); min-width: 0; height: clamp(54px, 8.6dvh, 74px); font-size: clamp(22px, 3.4dvh, 28px); }
#screen-title .level-btn { gap: 0; line-height: 1.15; }
.level-btn small { font-size: 12px; }
#screen-title .grades { grid-template-columns: repeat(6, 1fr); gap: 5px; }
#screen-title .grades button { display: flex; align-items: baseline; justify-content: center; height: clamp(36px, 5.2dvh, 44px); padding: 0; border-radius: 12px; font-size: clamp(17px, 2.6dvh, 21px); box-shadow: 0 3px 0 var(--ink); }
#screen-title .grades button small { margin-left: 0; font-size: 9px; }
#screen-title .mode-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
#screen-title .mode-row .sub-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; height: clamp(46px, 6.8dvh, 56px); padding: 0; border-width: 2.5px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); font-size: 11px; white-space: nowrap; }
#screen-title .mode-row svg { width: 20px; height: 20px; fill: #fff4c4; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#screen-title .mode-row b { position: absolute; right: -3px; top: -5px; min-width: 16px; height: 16px; margin: 0; padding: 0 3px; border-radius: 8px; background: var(--pink); color: #fff; font-size: 10px; line-height: 16px; }
#review-count:empty, #start-review:disabled #review-count { display: none; }
@media (max-height: 620px) { .home-note { display: none; } }

.course-screen { flex-direction: column; padding: max(22px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)); gap: 16px; color: var(--home-ink); overflow: hidden; }
.course-head { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.course-head h2 { margin: 3px 0 0; font-size: 23px; }
.course-head p { margin: 0; font-size: 10px; color: #89947f; font-weight: 500; }
.course-head .publisher-badge { margin-left: auto; }
.course-head .icon-btn { color: var(--home-green); background: #e9efd9; border: 1px solid #c7d4b5; font-size: 28px; }
.growth-tabs { display: flex; background: #e9efdd; border-radius: 12px; padding: 4px; gap: 4px; flex-shrink: 0; }
.growth-tabs button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 11px 3px; color: #89957c; font-size: 12px; }
.growth-tabs button[aria-selected="true"] { background: #fffef8; color: var(--home-green); box-shadow: 0 2px 4px #36503010; }
.growth-panel { flex: 1; min-height: 0; overflow: auto; }
.growth-panel[hidden] { display: none; }
.growth-panel .quest-card, .growth-panel .cal-card { width: 100%; margin: 0; }
.growth-panel .game-notes { margin: 0; padding: 14px; width: 100%; background: #fffef8; border: 1px solid #d9e0ce; border-radius: 16px; font-size: 12px; line-height: 1.8; }
body[data-screen="growth"] #actors-back, body[data-screen="growth"] #actors-front { visibility: hidden; }
.play-context { display: flex; align-items: center; gap: 8px; padding: 0 16px 4px; height: 30px; flex-shrink: 0; color: var(--ink); }
.play-context button { width: 30px; height: 26px; padding: 0; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); font-size: 20px; line-height: 18px; }
.play-context span { font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button:focus-visible { outline: 3px solid #e7b75c; outline-offset: 3px; }
@media (max-height: 740px) { .course-screen { gap: 12px; } }
@media (max-height: 610px) { .course-screen { padding: 12px 16px; gap: 9px; } }
.release-note { padding: 10px 12px; background: #eaf1df; border-radius: 10px; }

/* 技能树：年级页签 + 三列网格，手机上不用横滑。语文英语共用。 */
#tree-links { display: none; }
.tree-lanes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 0 14px 8px; background: none; position: static; }
.tree-lanes button { display: flex; align-items: baseline; justify-content: center; height: 40px; padding: 0; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font-family: var(--chunky); font-size: 19px; box-shadow: 0 3px 0 var(--ink); }
.tree-lanes button small { font-family: var(--round); font-size: 9px; font-weight: 900; }
.tree-lanes button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tree-scroll { padding: 4px 14px calc(30px + env(safe-area-inset-bottom)); overflow-x: hidden; min-height: 0; }
.tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; padding-top: 10px; }
.tree .node { position: relative; left: auto; top: auto; width: auto; min-height: 76px; padding: 8px 5px 10px; font-size: 13px; line-height: 1.25; }
.tree .node .g { font-family: var(--chunky); font-size: 12px; opacity: .7; }
.tree .node.new-lg { background: #fff4c4; }
#screen-language-tree .tree-scroll { flex: 1; overflow: auto; padding: 4px 0 8px; }
/* 日历按科目看 */
.cal-subjects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 8px; }
.cal-subjects button { height: 34px; padding: 0; border: 2.5px solid var(--ink); border-radius: 11px; background: #fff; color: var(--ink); font-family: var(--chunky); font-size: 15px; box-shadow: 0 3px 0 var(--ink); }
.cal-subjects button[aria-pressed="true"] { background: var(--yellow); }
.cal-day { position: relative; }
.cal-dots { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
.cal-dots .chinese { background: #ff8a3d; } .cal-dots .math { background: #22b573; } .cal-dots .english { background: #3b82f6; }

/* 成长页 */
#screen-growth { padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; color: var(--ink); }
.course-head .icon-btn { color: var(--ink); background: #fff; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 26px; }
.course-head h2 { font-family: var(--chunky); font-weight: 400; color: var(--ink); }
.course-head p { color: var(--ink); opacity: .6; }
.growth-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0; background: none; }
.growth-tabs button { padding: 0; height: 38px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font-family: var(--chunky); font-size: 14px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.growth-tabs button[aria-selected="true"] { background: var(--yellow); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.growth-panel { padding: 2px 2px 8px; }
.lv-card, .ch-card, .sub-card { margin-bottom: 12px; padding: 12px; border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); }
.lv-card { display: flex; align-items: center; gap: 12px; }
.lv-badge { flex: none; display: flex; align-items: baseline; justify-content: center; width: 72px; height: 72px; line-height: 72px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); box-sizing: border-box; }
.lv-badge b { font-family: var(--chunky); font-weight: 400; font-size: 30px; }
.lv-badge small { font-size: 11px; font-weight: 900; }
.lv-main { flex: 1; min-width: 0; }
.lv-main h3, .ch-card h3, .sub-card h3 { margin: 0; font-family: var(--chunky); font-weight: 400; font-size: 20px; }
.lv-bar { height: 14px; margin: 6px 0 4px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.lv-bar i { display: block; height: 100%; background: var(--pink); }
.lv-main p, .ch-note { margin: 0; font-size: 12px; font-weight: 700; opacity: .7; }
.ch-head { display: flex; align-items: center; justify-content: space-between; }
.ch-head span { font-family: var(--chunky); color: var(--pink); }
.ch-note { margin: 4px 0 8px; }
.ch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ch-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0; border: 3px solid var(--ink); border-radius: 15px; color: #fff; box-shadow: 0 4px 0 var(--ink); }
.ch-btn b { font-family: var(--chunky); font-weight: 400; font-size: 18px; text-shadow: 0 2px 0 rgba(27, 29, 77, .3); }
.ch-btn small { font-size: 11px; font-weight: 900; }
.ch-btn.chinese { background: #ff8a3d; } .ch-btn.math { background: #22b573; } .ch-btn.english { background: #3b82f6; }
.ch-btn:disabled { opacity: .55; box-shadow: none; }
.sub-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 900; }
.sub-row b { font-family: var(--chunky); font-weight: 400; font-size: 13px; }
.sub-bar { height: 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.sub-bar i { display: block; height: 100%; }
.sub-bar.chinese i { background: #ff8a3d; } .sub-bar.math i { background: #22b573; } .sub-bar.english i { background: #3b82f6; }
.sub-card .ch-note { margin: 10px 0 0; }
.score-card-btn { display: block; width: 100%; margin-bottom: 8px; }
.score-modal .modal-card { max-height: 92dvh; overflow: auto; }
.score-modal img { display: block; width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 14px; }
.score-tip { margin: 8px 0; font-size: 12px; font-weight: 700; text-align: center; }
.score-save { display: grid; place-items: center; min-width: 120px; color: var(--ink); text-decoration: none; }