/* 语文屋首页场景：书桌 / 长卷 / 戏台（John 9/7 三案轮转；9/8 重排动线：画只做画，字全进课桌卡）。 */
.scene-wrap { margin-bottom: 4px; }
.scene { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6); background: #ece7dc; }
.scene .sc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-switch { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(20,24,30,.55); backdrop-filter: blur(6px); }
.sc-switch button { border: 0; background: transparent; color: #eee; font: 13px/1 var(--sans, system-ui); padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.sc-switch button.on { background: #fff; color: #1f2530; font-weight: 600; }
.scene a[data-act], .scene [data-act] { cursor: pointer; }
.sc-tag { position: absolute; font: 12.5px/1 var(--sans, system-ui); color: #fff; background: rgba(20,24,30,.72); padding: 6px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: background .15s; }
.sc-tag:hover { background: rgba(20,24,30,.9); }

/* ── 课桌卡：三张画共用 ── */
.dc { background: #fbf7ee; border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 26px 50px -22px rgba(0,0,0,.75), inset 0 1px 0 #fff; font: 13px/1.5 var(--sans, system-ui); color: #1b2436; }
.dc-les { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid #e3dccb; padding-bottom: 9px; }
.dc-les small { width: 100%; color: #7b8494; font-size: 11px; letter-spacing: .12em; }
.dc-les b { font: 700 26px/1.1 var(--serif, serif); }
.dc-les span { color: #4a5566; font-size: 12px; }
.dc-les a { margin-left: auto; color: #b8412f; font-size: 12px; border-bottom: 1px solid; text-decoration: none; }
.dc-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.dc-steps li { display: grid; grid-template-columns: 24px 1fr auto; column-gap: 8px; align-items: center; padding: 8px 11px; border-radius: 11px; background: #f0e9da; color: #4a5566; cursor: pointer; transition: transform .15s; }
.dc-steps li:hover { transform: translateX(2px); }
.dc-steps li i { grid-column: 1; grid-row: 1 / 3; font: 700 15px var(--serif, serif); font-style: normal; color: #1b2436; }
.dc-steps li b { grid-column: 2; grid-row: 1; color: #1b2436; font-size: 14px; }
.dc-steps li span { grid-column: 2; grid-row: 2; font-size: 11.5px; }
.dc-steps li em { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-size: 12px; white-space: nowrap; }
.dc-steps li.done { opacity: .72; } .dc-steps li.done em { color: #2e7d32; font-weight: 700; }
.dc-steps li.now { background: #fff; box-shadow: 0 0 0 2px #b8412f inset; } .dc-steps li.now i, .dc-steps li.now em { color: #b8412f; font-weight: 700; }
.dc-go { display: block; text-align: center; font: 600 15px var(--sans, system-ui); padding: 12px; border-radius: 12px; color: #fff; text-decoration: none; background: linear-gradient(180deg, #d0553f, #b8412f); box-shadow: 0 8px 16px -8px rgba(184,65,47,.9), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .15s; }
.dc-go:hover { transform: translateY(-1.5px); }
.dc-q { margin: 10px 0 0; font: 13px/1.5 var(--kai, serif); border-top: 1px dashed #d8d0c0; padding-top: 8px; }
.dc-q small { display: block; font: 11px var(--sans, system-ui); color: #7b8494; }

/* ── 短片：小电视 / 海报 / 银幕 ── */
.sc-tv .sc-tv-scr { position: absolute; inset: 0; background: #2b2f36 center/cover; display: grid; place-items: center; overflow: hidden; }
.sc-tv .sc-tv-scr .play { width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid #ffe9b0; color: #ffe9b0; font-size: 22px; display: grid; place-items: center; transition: transform .2s; }
.sc-tv:hover .play { transform: scale(1.1); }
.sc-tv .marq { position: absolute; left: 8px; bottom: 8px; font: 12.5px/1.3 var(--sans, system-ui); color: #ffe9b0; background: rgba(0,0,0,.55); padding: 5px 9px; border-radius: 6px; }
.sc-tv.off .sc-tv-scr { background: #3a3f47; } .sc-tv.off .sc-tv-scr > span { font: 14px/1.5 var(--serif, serif); color: #cfd4dc; text-align: center; }
.sc-tv.off .play { display: none; }

/* ── 乙 · 书桌：底图方图，3:2 视窗从中间偏下裁 ── */
.scene-desk { aspect-ratio: 3 / 2; }
.sc-sq { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1; transform: translateY(-56%); }
.sc-sq .sc-tv.tv { position: absolute; left: 51.5%; top: 29%; width: 21.5%; height: 15.5%; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,.6); }
.sc-sq .sc-tag.win { left: 2%; top: 38%; }
.sc-sq .sc-tag.ink { left: 74%; top: 60%; }
.scene-desk .dc.on-desk { position: absolute; right: 2.6%; top: 46%; width: 37%; }

/* ── 甲 · 长卷 ── */
.scene-scroll { aspect-ratio: auto; background: linear-gradient(180deg, #e9e2cf, #d9d0b7); padding: 16px 0; }
.sc-roll { position: relative; display: flex; align-items: stretch; min-width: 0; }
.sc-roll .rod { flex: 0 0 20px; border-radius: 10px; background: linear-gradient(90deg, #6b4423, #b47a3c 40%, #6b4423); box-shadow: 0 8px 20px rgba(0,0,0,.35); margin: 0 6px; }
.sc-roll .paper { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border: 1px solid #cdb98a; box-shadow: inset 0 0 60px rgba(120,90,30,.25); background: #f4ead0; display: flex; flex-direction: column; }
.sc-roll .paper .sc-bg { object-position: 50% 100%; }
.sc-roll .segs { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 44px 18px 10px; }
.sc-roll .seg { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-roll .sc-tv.poster { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 28px -14px rgba(0,0,0,.6); }
.sc-roll .lit { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: rgba(250,244,228,.88); border: 1px solid rgba(160,120,60,.28); border-radius: 8px; padding: 10px 14px; font: 12.5px/1.4 var(--sans, system-ui); color: #3b3020; text-decoration: none; }
.sc-roll .lit b { font: 700 15px var(--serif, serif); color: #2c2113; }
.sc-roll .lit .shelf { margin-left: auto; display: flex; gap: 4px; }
.sc-roll .lit .shelf img, .sc-roll .lit .shelf .qq { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; border: 2px solid #f1e6cf; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.sc-roll .lit .shelf .qq { display: grid; place-items: center; background: #5d4027; color: #c9b08a; font: 700 14px var(--serif, serif); font-style: normal; }
.sc-roll .dc.on-scroll { position: relative; }
.sc-roll .sc-doors { position: relative; display: flex; justify-content: center; gap: 34px; padding: 10px 0 14px; background: linear-gradient(180deg, rgba(232,220,184,0), rgba(232,220,184,.92) 40%); }
.sc-roll .sc-doors a { font: 700 26px var(--serif, serif); color: #2c2113; border-bottom: 3px solid #b8412f; padding: 0 6px; text-decoration: none; transition: transform .15s; }
.sc-roll .sc-doors a:hover { transform: translateY(-2px); }
.scene-scroll .sc-switch { top: 8px; right: 36px; }

/* ── 丙 · 戏台：底图方图，16:10 视窗从中间裁 ── */
.scene-stage { aspect-ratio: 16 / 10; background: #120c14; }
.scene-stage .sc-sq { transform: translateY(-50%); color: #f4e7c3; }
.scene-stage .marquee { position: absolute; left: 37%; top: 15%; width: 26%; height: 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.scene-stage .marquee small { font: 600 clamp(9px, .9vw, 12px)/1.2 var(--sans, system-ui); letter-spacing: .3em; color: #e6c58a; }
.scene-stage .marquee b { font: 900 clamp(14px, 1.9vw, 28px)/1.2 var(--serif, serif); color: #ffd985; letter-spacing: .15em; text-shadow: 0 0 20px rgba(255,200,90,.5); }
.scene-stage .sc-tv.screen { position: absolute; left: 34.5%; top: 31.5%; width: 31%; height: 31%; overflow: hidden; }
.scene-stage .plate { position: absolute; display: grid; place-items: center; writing-mode: vertical-rl; font: 900 clamp(18px, 2.6vw, 38px) var(--serif, serif); color: #2c1a08; text-decoration: none; transition: transform .2s; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.scene-stage .plate:hover { transform: scale(1.06); }
.scene-stage .p1 { left: 14.2%; top: 32.5%; width: 4.4%; height: 33%; }
.scene-stage .p2 { left: 19.8%; top: 37%; width: 3.8%; height: 28%; }
.scene-stage .p3 { left: 76.3%; top: 37%; width: 3.8%; height: 28%; }
.scene-stage .p4 { left: 81.5%; top: 32.5%; width: 4.4%; height: 33%; }
.scene-stage .wallboard { position: absolute; left: 88.5%; top: 52.5%; width: 10.5%; height: 19%; display: grid; place-items: center; align-content: center; text-decoration: none; color: #3b2d1c; }
.scene-stage .wallboard b { font: 900 clamp(18px, 2.6vw, 36px) var(--serif, serif); } .scene-stage .wallboard small { font: 10px var(--sans, system-ui); color: #7a5a1a; }
.scene-stage .dc.on-stage { position: absolute; left: 50%; top: 55%; transform: translateX(-50%); width: 58%; display: grid; grid-template-columns: 1.15fr 1fr; gap: 4px 18px; padding: 12px 18px 12px; }
.scene-stage .dc.on-stage .dc-steps { gap: 4px; } .scene-stage .dc.on-stage .dc-steps li { padding: 6px 10px; } .scene-stage .dc.on-stage .dc-steps li span { display: none; } .scene-stage .dc.on-stage .dc-steps li i { grid-row: 1; }
.scene-stage .dc.on-stage .dc-les b { font-size: 22px; }
.scene-stage .dc.on-stage .dc-les { grid-column: 1 / -1; }
.scene-stage .dc.on-stage .dc-steps { grid-column: 1; margin: 6px 0 0; }
.scene-stage .dc.on-stage .dc-go { grid-column: 2; align-self: end; }
.scene-stage .dc.on-stage .dc-q { grid-column: 2; grid-row: 2; align-self: start; margin: 6px 0 0; border: 0; padding: 0; }
.scene-stage .sc-tag.foot { left: 50%; top: 92%; transform: translateX(-50%); }

/* ── 场景在时，老的三块先收起来；点画里的东西再拉开 ── */
body.has-scene .gate, body.has-scene .today, body.has-scene .doors, body.has-scene .bottom { display: none; }
body.has-scene .gate.open, body.has-scene .today.open, body.has-scene .doors.open, body.has-scene .bottom.open { display: grid; }
body.has-scene .gate.open { display: block; }
.drawer-close { display: block; text-align: right; font: 13px var(--sans, system-ui); color: var(--ink-faint); margin: 4px 0 12px; cursor: pointer; grid-column: 1 / -1; }

/* ── 随便逛逛：不跟课本走的一排 ── */
.free h3 { font: 400 20px var(--serif, serif); margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.free h3 small { font: 12.5px var(--sans, system-ui); color: var(--ink-faint); }
.free-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.free-row a { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: rgba(255,255,255,.82); border: 1px solid #fff; border-radius: 14px; padding: 12px 13px 11px; box-shadow: 0 12px 24px -18px rgba(0,0,0,.5); text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .15s; }
.free-row a:hover { transform: translateY(-3px); }
.free-row .zi { font: 700 22px var(--serif, serif); color: #b8412f; }
.free-row b { font-size: 14px; } .free-row span { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.free-row .covers, .free-row .ppl { display: flex; gap: 4px; margin-top: 2px; }
.free-row .covers img { width: 28px; height: 38px; object-fit: cover; border-radius: 3px; }
.free-row .ppl img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; border: 1.5px solid #f1e6cf; }

/* ── 进门定课 ── */
.gate-box h2 { margin: 0 0 4px; }
.gate-box .sub { margin: 0 0 12px; }
.gate-guess { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid #eee; }
.gate-guess span { color: var(--ink-soft); font-size: 13px; } .gate-guess b { font: 700 18px var(--serif, serif); }
.gate-guess .gb { margin-left: auto; } .gate-guess .no { color: var(--ink-soft); font-size: 13px; border-bottom: 1px solid; cursor: pointer; }
.gate-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 10px; }
.gate-ways a { background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid #eee; cursor: pointer; text-decoration: none; color: var(--ink); transition: transform .15s; }
.gate-ways a:hover { transform: translateY(-2px); } .gate-ways b { display: block; font-size: 15px; } .gate-ways span { font-size: 12px; color: var(--ink-soft); }
.gate-skip { display: block; text-align: center; color: var(--ink-faint); font-size: 13px; cursor: pointer; margin-top: 4px; }
.chip.lesson { background: var(--ink); color: #fff; border-color: transparent; cursor: pointer; } .chip.lesson a { color: #ffd6a0; margin-left: 8px; }

@media (max-width: 860px) {
  /* 手机：画缩成一条 16:9 横幅，课桌卡整张铺在画下面 */
  .scene-desk, .scene-stage { aspect-ratio: auto; }
  .sc-sq, .scene-stage .sc-sq { position: relative; top: 0; transform: none; aspect-ratio: auto; }
  .sc-sq > .sc-bg { position: relative; height: auto; aspect-ratio: 16 / 9; object-position: 50% 40%; }
  .scene-desk .dc.on-desk, .scene-stage .dc.on-stage { position: static; width: auto; transform: none; display: block; margin: 0; border-radius: 0; box-shadow: none; }
  .sc-sq .sc-tv.tv, .sc-sq .sc-tag.ink, .scene-stage .sc-tag.foot, .scene-stage .marquee, .scene-stage .plate, .scene-stage .wallboard { display: none; }
  .scene-stage .sc-tv.screen { top: 8%; left: 25%; width: 50%; height: auto; aspect-ratio: 16/10; }
  .sc-sq .sc-tag.win { top: 6%; left: 3%; }
  .sc-roll .segs { grid-template-columns: 1fr; padding-top: 44px; }
  .sc-roll .sc-doors { gap: 18px; }
  .free-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip.lesson { display: none; }   /* 手机顶栏放不下，换课走课桌卡上的「换一课」 */
  .gate-ways { grid-template-columns: 1fr; }
}

/* ── 首次引导小手 + 帮助钮 ── */
.yt-root { position: fixed; inset: 0; z-index: 80; }
.yt-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(20,26,36,.55), 0 0 0 3px #ffd985; transition: all .3s ease; pointer-events: none; }
.yt-hand { position: fixed; font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); animation: yt-bob 1s ease-in-out infinite; pointer-events: none; transition: left .3s, top .3s; }
@keyframes yt-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.yt-tip { position: fixed; width: 320px; max-width: calc(100vw - 24px); background: #fbf7ee; border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.7); transition: left .3s, top .3s; }
.yt-tip p { margin: 0 0 10px; font: 15px/1.6 var(--sans, system-ui); color: #1b2436; }
.yt-btns { display: flex; align-items: center; gap: 8px; }
.yt-n { font-size: 12px; color: #7b8494; margin-right: auto; }
.yt-btns button { font: 600 13px var(--sans, system-ui); padding: 7px 14px; border-radius: 10px; border: 0; cursor: pointer; }
.yt-skip { background: transparent; color: #4a5566; } .yt-next { background: linear-gradient(180deg, #d0553f, #b8412f); color: #fff; }
.yt-help { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #fff; background: rgba(255,255,255,.9); color: #1b2436; font: 600 12px var(--sans, system-ui); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); cursor: pointer; }
.yt-help:hover { background: #fff; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .yt-hand { animation: none; } }