:root{--plaque:url('assets/plaque.webp');--paper-img:url('assets/paper.webp')}
:root{
  --ink:#3c230e; --ink2:#6b4a26; --paper:#fbf1dc; --go:#3c7f23; --go2:#bde98b; --gold:#ffbd26;
  --front:#e8743b; --top:#2f86e0; --left:#35a047; --bad:#e0413a; --warn:#f2b632;
  --font:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1c2a1b;font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none}
#gl{position:fixed;left:0;top:0;width:100vw;height:100vh;display:block;touch-action:none;outline:none}
#stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;pointer-events:none}
#stage button,#stage input,#stage .interactive{pointer-events:auto}
button{font-family:inherit;font-weight:800;color:inherit;cursor:pointer;touch-action:manipulation;border:0;background:none;padding:0}
button:disabled{cursor:default;opacity:.45}
button:focus{outline:none}
button:focus-visible{outline:4px solid #127bbb;outline-offset:2px}
[hidden]{display:none!important}

/* 木牌与纸张 */
.wood{border-style:solid;border-width:24px 28px;border-image:var(--plaque) 54 fill / 24px 28px stretch;position:relative}
.paper{border-style:solid;border-width:26px;border-image:var(--paper-img) 44 fill / 26px stretch;position:relative}
.btn{border-style:solid;border-width:16px 20px;border-image:var(--plaque) 54 fill / 16px 20px stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:24px;line-height:1.1;padding:4px 10px;min-height:66px;position:relative;isolation:isolate;text-shadow:0 1px #fff6;white-space:nowrap;transition:transform .08s,filter .15s}
.btn:not(:disabled):active{transform:translateY(2px) scale(.98)}
.btn::before{content:"";position:absolute;left:-6px;right:-6px;top:-5px;bottom:-5px;z-index:-1;border-radius:2px}
.btn.go,.btn.on{color:#fff;text-shadow:0 2px #184411}
.btn.go::before,.btn.on::before{background:#3c7f23ee;box-shadow:inset 0 2px 5px var(--go2)}
.btn.gold::before{background:#ffbd26e6;box-shadow:inset 0 2px 5px #fff398}
.btn.dir-front.on::before{background:#e8743bf0;box-shadow:inset 0 2px 5px #ffd2b0}
.btn.dir-top.on::before{background:#2f86e0f0;box-shadow:inset 0 2px 5px #b8dcff}
.btn.dir-left.on::before{background:#35a047f0;box-shadow:inset 0 2px 5px #c4f0b8}
.btn.dir-front .dot{background:var(--front)} .btn.dir-top .dot{background:var(--top)} .btn.dir-left .dot{background:var(--left)}
.btn .dot{width:16px;height:16px;border-radius:3px;display:inline-block;box-shadow:inset -2px -2px #0003,0 0 0 2px #fff8}
.btn.on .dot{box-shadow:0 0 0 2px #fff}
.btn.small{font-size:20px;min-height:54px;border-width:12px 16px;border-image-width:12px 16px}
.btn.big{font-size:30px;min-height:80px}
.btn.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:none}50%{filter:brightness(1.18) drop-shadow(0 0 10px #ffe38a)}}

/* 顶栏 */
#topbar{position:absolute;left:10px;right:10px;top:6px;height:84px;display:flex;align-items:center;gap:14px;pointer-events:auto;padding:0 6px}
#topbar .brand{display:flex;align-items:center;gap:10px;font-size:22px;white-space:nowrap;padding-right:14px;border-right:2px solid #86582460}
#topbar .brand svg{width:34px;height:34px}
#chapterTag{font-size:18px;font-weight:800;color:#fff;background:#6b4a26;padding:6px 12px;border-radius:4px;white-space:nowrap;box-shadow:inset 0 -3px #0003}
#stepTitle{flex:1;margin:0;font-size:34px;letter-spacing:2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dots{display:flex;gap:6px;align-items:center}
#dots i{width:14px;height:14px;background:#c9a877;display:block;box-shadow:inset -2px -2px #0002}
#dots i.done{background:#8a6436}
#dots i.cur{background:#3c7f23;width:18px;height:18px;box-shadow:0 0 0 2px #fff}
#topbar .tools{display:flex;gap:2px}
#topbar .tools button{display:flex;flex-direction:column;align-items:center;font-size:15px;font-weight:700;padding:2px 7px;color:#4a2c10;min-width:56px}
#topbar .tools button svg{width:28px;height:28px;margin-bottom:1px}
#topbar .tools button.on{color:#1d6a1d}

/* 底部村民与对话 */
#guide{position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none}
#villagerImg{position:absolute;left:18px;bottom:6px;height:236px;filter:drop-shadow(2px 5px 4px #0006);pointer-events:auto;transform-origin:50% 100%}
#villagerImg.talk{animation:talk .5s ease-in-out 2}
@keyframes talk{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg) translateY(-3px)}70%{transform:rotate(2deg)}}
#speech{position:absolute;left:150px;right:370px;bottom:14px;min-height:124px;display:flex;align-items:center;font-size:29px;font-weight:700;line-height:1.5;padding:4px 16px;pointer-events:auto}
#speech .who{position:absolute;left:10px;top:-40px;font-size:18px;color:#fff;background:#6b4a26;padding:3px 12px;border-radius:3px}
#speech b,#speech strong{color:#b8421b}
#speech .k{color:#1d6a1d}
#speech.pop{animation:spop .35s ease-out}
@keyframes spop{from{transform:translateY(8px);opacity:.3}to{transform:none;opacity:1}}
#guide .nav{position:absolute;right:16px;bottom:20px;display:flex;gap:10px;pointer-events:auto}
#prev{width:96px}
#next{width:252px;font-size:30px}

/* 右侧面板 */
#panel{position:absolute;right:14px;top:98px;width:430px;bottom:180px;pointer-events:auto;display:flex;flex-direction:column;align-items:center;padding:4px 8px;overflow:hidden}
#panel h2{margin:0 0 4px;font-size:28px;letter-spacing:2px}
#panel .sub{font-size:22px;font-weight:800;margin:0 0 10px}
#panel .row{display:flex;gap:8px;width:100%;margin-top:auto}
#panel .row .btn{flex:1}
#panel .fb{min-height:64px;font-size:21px;font-weight:700;text-align:center;line-height:1.4;display:flex;align-items:center;justify-content:center;margin:8px 0}
.fb.good{color:#23661f}.fb.bad{color:#9b3a10}

/* 中央区域 */
#center{position:absolute;left:0;right:0;top:96px;bottom:176px;display:flex;align-items:center;justify-content:center;pointer-events:none}
#center > *{pointer-events:auto}
#viewbar{position:absolute;left:0;right:0;bottom:182px;display:flex;justify-content:center;gap:8px;pointer-events:none;flex-wrap:wrap;padding:0 20px}
#viewbar.with-panel{right:450px}
#viewbar > *{pointer-events:auto}
#viewbar .sep{width:14px}

/* 方格纸 */
.grid{display:grid;gap:3px;background:#775936;border:4px solid #775936;touch-action:manipulation}
.grid button{background:#fff6df;box-shadow:inset 0 0 14px #b98d2420;border-radius:0;transition:background .12s}
.grid button.on{background:#e5b04c;box-shadow:inset 5px 5px #f8dc92,inset -5px -5px #ad7535}
.grid.readonly{pointer-events:none}

/* 视图小图（SVG） */
.view-svg rect.c{stroke:#4a2e10;stroke-width:2.5}
.card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px;background:#fffaf0;box-shadow:0 0 0 3px #b28a55,0 6px 0 #7d5a2c;border-radius:4px}
.card h3{margin:0;font-size:22px;display:flex;align-items:center;gap:8px}
.card h3 .dot{width:16px;height:16px;border-radius:3px;display:inline-block}
.tag{display:inline-block;font-size:18px;font-weight:800;color:#fff;padding:3px 10px;border-radius:3px}
.tag.front{background:var(--front)}.tag.top{background:var(--top)}.tag.left{background:var(--left)}

/* 三维标签 */
#labels{position:absolute;left:0;top:0;width:1600px;height:900px;pointer-events:none;overflow:hidden}
.label3d{position:absolute;left:0;top:0;will-change:transform}
.label3d > .in{position:absolute;left:0;top:0;transform:translate(-50%,-100%);white-space:nowrap}
.chip{font-size:24px;font-weight:800;color:#fff;padding:6px 14px;border-radius:6px;box-shadow:0 3px 0 #0004,0 0 0 3px #fff;text-shadow:0 1px 1px #0005}
.chip.front{background:var(--front)}.chip.top{background:var(--top)}.chip.left{background:var(--left)}
.chip.ink{background:#6b4a26}
.chip.big{font-size:34px;padding:6px 20px}
.signboard{font-size:40px;font-weight:900;color:#3c230e;background:#e0bd84;padding:4px 20px;border:4px solid #7a5427;box-shadow:0 4px 0 #0005}
.bubble{font-size:26px;font-weight:800;background:#fff;padding:8px 16px;border-radius:14px;box-shadow:0 3px 0 #0003;position:relative;color:#3c230e}
.bubble::after{content:"";position:absolute;left:50%;bottom:-14px;margin-left:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}

/* 提示 */
#toast{position:absolute;left:50%;top:112px;transform:translateX(-50%);font-size:28px;font-weight:800;padding:12px 28px;background:#fffaf0;border-radius:6px;box-shadow:0 0 0 4px #6b4a26,0 8px 0 #0004;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap;z-index:30}
#toast.show{opacity:1;transform:translateX(-50%) translateY(6px)}
#toast.good{box-shadow:0 0 0 4px #3c7f23,0 8px 0 #0004;color:#1d5a17}
#toast.bad{box-shadow:0 0 0 4px #c0532b,0 8px 0 #0004;color:#8c3210}

/* 计时器 */
#timer{position:absolute;right:16px;top:100px;width:330px;pointer-events:auto;display:flex;flex-direction:column;align-items:center;padding:0 4px 2px;z-index:25}
#timer .digits{font-size:74px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:2px;line-height:1.1;color:#3c230e}
#timer.warn .digits{color:#c0392b}
#timer.end{animation:blink .5s steps(2) 6}
@keyframes blink{50%{filter:brightness(1.6)}}
#timer .row{display:flex;gap:6px;width:100%}
#timer .row .btn{flex:1;font-size:20px;min-height:52px;border-width:12px 14px;border-image-width:12px 14px}
#timer .presets{display:flex;gap:4px;margin-top:4px;width:100%}
#timer .presets button{flex:1;font-size:17px;padding:6px 0;background:#e9d3a8;border-radius:4px;box-shadow:inset 0 -3px #0002}
#timer .x{position:absolute;right:-6px;top:-14px;font-size:26px;width:40px;height:40px}

/* 弹窗 */
#modal{position:absolute;left:0;top:0;width:1600px;height:900px;background:#10251cd9;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:40}
#modal > .paper{max-width:1480px;max-height:860px;padding:14px 26px;overflow:auto}
.modal-x{position:absolute;right:6px;top:2px;font-size:30px;width:52px;height:52px;z-index:3}

/* 教案提示 */
#notes{position:absolute;left:14px;top:98px;width:470px;bottom:180px;pointer-events:auto;z-index:28;padding:6px 10px;overflow:auto;font-size:20px;line-height:1.6;font-weight:600}
#notes h3{margin:0 0 6px;font-size:22px;color:#6b4a26}
#notes ul{margin:0;padding-left:1.1em}
#notes li{margin-bottom:6px}

/* 封面 */
#cover{position:absolute;left:0;top:0;width:1600px;height:900px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:50;background:radial-gradient(ellipse at center,#0000 30%,#0b180e99 100%)}
#cover .sign{padding:24px 80px 30px;text-align:center}
#cover h1{font-size:76px;margin:0;letter-spacing:8px;color:#3c230e;text-shadow:0 3px #fff6}
#cover .sub{font-size:30px;font-weight:800;margin-top:6px;color:#6b4a26;letter-spacing:4px}
#cover .go{margin-top:34px}
#cover .hint{margin-top:20px;font-size:19px;color:#fff;text-shadow:0 2px 3px #000;font-weight:700}
#fallback{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#1c2a1b;color:#fff;font:700 26px/1.7 var(--font);text-align:center;padding:40px;z-index:100}

/* 作品展台 */
.gal{width:1420px;height:780px;display:flex;flex-direction:column;gap:10px}
.gal .bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gal .bar .hint{font-size:18px;color:#6b4a26;font-weight:700}
.gal .main{flex:1;display:flex;gap:12px;min-height:0}
.gal .show{flex:1;display:flex;gap:10px;min-width:0;align-items:stretch;justify-content:center;background:#2a2016;border-radius:6px;padding:10px}
.gal .show figure{margin:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative}
.gal .show img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 0 3px #fff}
.gal .show .empty{color:#e8d8b8;font-size:24px;font-weight:700;text-align:center;align-self:center;line-height:1.7}
.gal .thumbs{width:210px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.gal .thumbs button{position:relative;height:120px;flex-shrink:0;background:#000;box-shadow:0 0 0 3px #b28a55}
.gal .thumbs button.sel{box-shadow:0 0 0 5px #3c7f23}
.gal .thumbs img{width:100%;height:100%;object-fit:cover}
.gal .ref{width:250px;display:flex;flex-direction:column;gap:8px;align-items:center;overflow:auto}
.gal video{max-width:100%;max-height:100%;background:#000}

/* 招募令 / 证书 等卷轴 */
.scroll{width:860px;padding:18px 50px 26px;text-align:center}
.scroll h2{font-size:46px;margin:0 0 6px;letter-spacing:6px}
.scroll .lead{font-size:26px;font-weight:700;line-height:1.6;margin:6px 0 14px}
.scroll ol{text-align:left;font-size:28px;font-weight:800;line-height:1.9;margin:0 auto 10px;display:inline-block;padding-left:1.4em}
.seal{position:absolute;right:40px;top:30px;width:120px;height:120px;border:6px solid #c0392b;color:#c0392b;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;transform:rotate(-14deg);opacity:0;background:#fff3}
.seal.show{animation:stampin .35s ease-out forwards}
@keyframes stampin{from{opacity:0;transform:rotate(-14deg) scale(2.2)}to{opacity:.92;transform:rotate(-14deg) scale(1)}}

.row-cards{display:flex;gap:26px;align-items:stretch}
.big-eq{font-size:80px;font-weight:900;color:#fff;text-shadow:0 4px 0 #0006}

/* 表格（我们的发现） */
table.find{border-collapse:collapse;font-size:24px;font-weight:800;background:#fffaf0}
table.find td,table.find th{border:3px solid #b28a55;padding:8px 14px;text-align:center}
table.find th{background:#f1dfbd}
table.find .same{color:#23661f}
table.find .diff{color:#b8421b}

/* 板书 */
.board{width:1180px;padding:24px 40px 30px;background:#2f4a36;border:14px solid #8a6436;box-shadow:0 10px 0 #0005,inset 0 0 60px #0006;color:#f4f1e6;border-radius:4px}
.board h2{margin:0 0 16px;font-size:40px;text-align:center;letter-spacing:6px}
.board .ln{font-size:36px;font-weight:800;line-height:1.5;margin:14px 0;display:flex;align-items:center;gap:18px;opacity:0;transform:translateX(-20px);transition:all .45s}
.board .ln.show{opacity:1;transform:none}
.board .ln .ev{display:flex;gap:8px;margin-left:auto}
.board .ln .arrow{color:#ffd86a}
.board .final{justify-content:center;font-size:52px;color:#ffe27a;position:relative;padding:8px 30px}
.board .final svg{position:absolute;left:-20px;top:-16px;width:calc(100% + 40px);height:calc(100% + 32px);overflow:visible}
.board .final svg ellipse{fill:none;stroke:#ff6b5a;stroke-width:6;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.2s ease}
.board .final.show svg ellipse{stroke-dashoffset:0}

/* 拖拽卡片（第三环节） */
.tray{display:flex;gap:22px;padding:10px 20px;justify-content:center}
.dcard{touch-action:none;cursor:grab;background:#fffaf0;box-shadow:0 0 0 3px #b28a55,0 6px 0 #7d5a2c;border-radius:4px;padding:10px;display:flex;align-items:center;justify-content:center;width:150px;height:118px}
.dcard.sel{box-shadow:0 0 0 5px #2f86e0,0 6px 0 #7d5a2c}
.dcard.ok{box-shadow:0 0 0 5px #3fbf4f,0 6px 0 #1e6b25}
.dcard.no{box-shadow:0 0 0 5px #e0413a,0 6px 0 #8c2a20;animation:shake .4s 2}
.dcard.drag{position:absolute;z-index:60;pointer-events:none;opacity:.92;transform:scale(1.08)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.slot{width:170px;height:138px;border:4px dashed #fff;border-radius:6px;background:#ffffff30;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.slot.hot{background:#ffffff70;border-color:#ffd84a}
.slot .dcard{box-shadow:0 0 0 3px #b28a55}

/* 地图翻牌 */
.flipcard{width:250px;height:250px;perspective:900px;cursor:pointer}
.flipcard .inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.flipcard.open .inner{transform:rotateY(180deg)}
.flipcard .face{position:absolute;left:0;top:0;right:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px}
.flipcard .back{background:#8a6436;box-shadow:inset 0 0 0 8px #6b4a26,0 6px 0 #4a3017;color:#ffe9b8;font-size:40px;font-weight:900}
.flipcard .front{transform:rotateY(180deg);background:#fffaf0;box-shadow:0 0 0 4px #b28a55,0 6px 0 #7d5a2c}
.flipcard .front h4{margin:0 0 10px;font-size:24px}
/* Claude版局部优化：纸孔实验，沿用原木牌和羊皮纸组件 */
.gate-instruction{font-size:21px;line-height:1.5;white-space:pre-line;text-align:center;margin:16px 0 10px;font-weight:700;color:#6b4a26}.gate-results{width:100%;display:flex;flex-direction:column;gap:7px;padding:10px 16px;margin-top:10px;background:#efe1bf;border:2px solid #b8945b;font-size:22px;font-weight:800}.gate-results .pass{color:#397624}.gate-results .fail{color:#b33c28}.gate-three-cards{display:flex;gap:8px;width:100%;justify-content:center;margin:7px 0 16px}.gate-three-cards .card{padding:8px 3px;gap:8px;box-shadow:0 0 0 2px #b28a55,0 4px 0 #7d5a2c}.gate-three-cards .card h3{font-size:17px;gap:3px}.gate-choose{display:flex;gap:8px;width:100%;justify-content:center;margin:6px 0}.gate-choose .btn{min-width:105px}.gate-view{max-width:650px;font-size:24px;pointer-events:none}.gate-name{font-size:29px}
.gate-view{background:#6b4a26e8;color:#fff3cf;border:3px solid #d2b076;text-shadow:none;padding:8px 14px}
.find-row{height:108px}.find-row .find-cell{position:relative;min-width:100px}.find-pending{display:inline-grid;place-items:center;width:62px;height:62px;color:#d8d0bd;font-size:34px;border:1px dashed #d8d0bd;border-radius:4px}.find-row:not(.revealed) .find-cell,.find-row:not(.revealed) .find-result{color:transparent}.find-row:not(.revealed) .find-pending{opacity:.42}.find-row.revealed .find-pending{display:none}.find-row.revealed{animation:findReveal .45s ease-out both}@keyframes findReveal{from{opacity:.15;transform:translateY(7px)}to{opacity:1;transform:none}}

/* 融合：仅采用 V3 重建之光封面，不覆盖课堂内页组件。 */
/* Full-scene cover: a title in the sky, the village remains the main image. */
#cover.edition-cover{inset:0;display:block;background:linear-gradient(180deg,#13291c40 0%,transparent 43%,#12221c0a 60%,#14281cce 100%);border-radius:0;padding:0;pointer-events:none}
.cover-meta{position:absolute;left:48px;right:48px;top:35px;display:flex;justify-content:space-between;font-size:18px;color:#fff9e1;letter-spacing:2px;text-shadow:0 2px 10px #16351d}
.cover-title{position:absolute;left:0;right:0;top:109px;text-align:center;pointer-events:none}
.cover-overline{font-size:26px;font-weight:800;letter-spacing:9px;color:#fff2c9;text-shadow:0 3px 5px #2d351a}
#cover.edition-cover h1{font-size:121px;letter-spacing:12px;line-height:1.2;margin:12px 0 0;font-weight:950;color:#fff8df;-webkit-text-stroke:1.5px #faf1ca;text-shadow:0 2px #be9750,0 5px #aa813e,0 9px #735b33,0 13px #31462a,0 21px 24px #1830206b}
#cover.edition-cover .cover-title p{color:#fff8e3;font-size:24px;letter-spacing:5px;text-shadow:0 3px 9px #183120;margin:30px 0 0}
.cover-bottom{position:absolute;left:64px;right:64px;bottom:90px;display:flex;align-items:center;gap:25px;pointer-events:auto}
.cover-invite{margin-right:auto;color:#fff8e0}.cover-invite span{font-size:15px;letter-spacing:4px;color:#eadcaf}.cover-invite p{font-size:26px;font-weight:700;margin:11px 0 0;letter-spacing:1px}
.cover-start{min-width:276px;min-height:79px;display:flex;align-items:center;justify-content:space-between;gap:35px;padding:20px 30px;background:#f8d786;border:2px solid #fff4c8;border-radius:6px;color:#39462c;box-shadow:0 6px 0 #816a36,0 10px 35px #11201466;font-size:29px;transition:transform .2s,background .2s}
.cover-start:hover{transform:translateY(-3px);background:#ffe5a2}.cover-start b{font-size:37px;font-weight:500}.cover-directory{font-size:19px;color:#fff1d3;padding:20px 8px;border-bottom:1px solid #fff4b65c}
.cover-caption{position:absolute;bottom:29px;left:64px;color:#eee7ca9c;font-size:15px;letter-spacing:8px}.cover-edition{position:absolute;bottom:29px;right:64px;color:#eee7ca9c;font-size:14px;letter-spacing:2px}