/* ════════════════════════════════════════════════
   老师页面共用样式 ｜ Shared styling for the teacher-facing pages
   配色取自游戏本身：校色蓝·绿·黄，以及游戏里的天空与山峦。
   Palette lifted from the game itself: school blue/green/yellow, plus its sky and mountains.
   （游戏 game.html 仍是单一档案、不引用这个 CSS —— SLS sandbox 不允许外部档案）
   (game.html stays single-file and does not use this CSS — the SLS sandbox blocks external files)
   ════════════════════════════════════════════════ */

:root{
  --navy:#062033;          /* 页面底色 page background */
  --panel:rgba(10,58,92,.97);
  --panel-hi:rgba(14,80,132,.97);
  --gold:#FFC72C;          /* 校色黄 school yellow */
  --green:#3fae63;         /* 校色绿 school green */
  --sky1:#2f8fd0;          /* 游戏天空 game sky */
  --sky2:#e3f4ff;
  --ink:#fff;
  --dim:rgba(255,255,255,.58);
  --dimmer:rgba(255,255,255,.42);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--navy);color:var(--ink);
  min-height:100vh;
  font-family:'Microsoft YaHei','PingFang SC','Heiti SC','SimHei',sans-serif;
  font-size:14px;line-height:1.75;
  display:flex;flex-direction:column;align-items:center;
  padding:0 12px 48px;
}
.wrap{width:100%;max-width:900px}
.wrap.home{max-width:1060px}   /* 落地页的两道门可以宽一点 ｜ the landing page's doors get more room */
a{color:var(--gold)}

/* ════════ 语言切换 ｜ language switch ════════
   每段文字标 .zh 或 .en；未标的（数字、程序码、档名）永远显示。
   Every string is tagged .zh or .en; anything untagged (numbers, code, filenames) always shows. */
html[data-lang="zh"] .en{display:none !important}
html[data-lang="en"] .zh{display:none !important}

.langbar{display:flex;justify-content:flex-end;padding:12px 2px 0}
.seg{display:inline-flex;background:rgba(10,58,92,.92);border:1px solid rgba(255,199,44,.38);
  border-radius:9px;overflow:hidden}
.seg button{
  font:inherit;font-size:12px;padding:7px 14px;background:none;border:none;
  color:rgba(255,255,255,.6);cursor:pointer;transition:background .12s,color .12s;
  -webkit-tap-highlight-color:transparent;
}
.seg button+button{border-left:1px solid rgba(255,199,44,.22)}
.seg button:hover{color:#fff}
.seg button[aria-pressed="true"]{background:var(--gold);color:#3a2600;font-weight:700}

/* ════════ 游戏场景当页头 ｜ the game scene as a page header ════════
   画面由 assets/hero.js 用游戏本身的公式画在 <canvas> 上，
   满版铺到窗口两边，高度随视窗缩放，任何尺寸都不会变形。
   assets/hero.js paints it on a <canvas> with the game's own formulas;
   it runs edge to edge and rescales with the viewport without distorting. */
.scene{
  position:relative;
  width:calc(100% + 24px);margin:10px -12px 0;   /* 抵销 body 两侧的 12px，做到满版 */
  height:clamp(230px,44vh,440px);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
  overflow:hidden;background:linear-gradient(#65addE 0%,var(--sky2) 100%);
}
.scene canvas{display:block;width:100%;height:100%}
/* 顶部柔和压暗，让标题读得清楚 ｜ soft scrim so the title stays readable */
.scene::after{
  content:'';position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(rgba(6,32,51,.6),rgba(6,32,51,0));
}
.scene .title{
  position:absolute;left:0;right:0;top:clamp(16px,4vh,34px);z-index:2;
  text-align:center;padding:0 16px;
  font-size:clamp(15px,2.4vw,26px);font-weight:900;letter-spacing:1px;color:#fff;line-height:1.5;
  text-shadow:0 2px 0 #0a3a5c,0 0 18px rgba(6,32,51,.65);
}
.scene .title .en{display:block;font-size:clamp(11px,1.2vw,15px);font-weight:700;margin-top:5px;opacity:.9}
html[data-lang="en"] .scene .title .en{font-size:clamp(14px,2.2vw,24px);margin-top:0;opacity:1}
/* 手机：页头收短一点，正文才不用一直往下滑 ｜ a shorter header on phones */
@media(max-width:620px){
  .scene{height:clamp(190px,30vh,260px)}
  .scene .title{top:12px;letter-spacing:0}
}

/* ════════ 页头文字 ｜ intro text ════════ */
.intro{text-align:center;padding:20px 6px 24px}
.intro p{font-size:13px;line-height:1.95;color:var(--dim)}
.intro p.en{color:var(--dimmer)}

@media(min-width:1100px){
  .intro p{font-size:15px}
  .door{padding:26px 24px}
  .door .icon{font-size:38px}
  .door .ttl{font-size:20px}
  .door .desc,.door .go,.door li{font-size:13.5px}
  .secHead h2{font-size:20px}
  .secHead p{font-size:13.5px}
}

/* ════════ 面板与门 ｜ panels and doors ════════ */
.doors{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.paths{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.doors,.paths{grid-template-columns:1fr}}

.door{
  display:block;text-align:left;width:100%;font:inherit;text-decoration:none;color:var(--ink);
  background:var(--panel);border:2px solid var(--gold);border-radius:14px;padding:20px 18px;
  cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;
  -webkit-tap-highlight-color:transparent;
}
.door:hover,.door:focus-visible{transform:translateY(-3px);background:var(--panel-hi);
  box-shadow:0 8px 22px rgba(0,0,0,.35);outline:none}
.door .icon{font-size:32px;line-height:1;display:block;margin-bottom:10px}
.door .ttl{font-size:17px;font-weight:900;color:var(--gold);letter-spacing:.5px;display:block}
.door .ttl.en{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.82);margin-top:3px}
html[data-lang="en"] .door .ttl.en{font-size:17px;font-weight:900;color:var(--gold);margin-top:0}
.door .desc{font-size:12px;color:var(--dimmer);margin-top:10px;line-height:1.8;display:block}
.door .go{font-size:12px;color:var(--green);font-weight:700;margin-top:12px;display:block}
.door ul{margin:10px 0 0 16px;padding:0}
.door li{font-size:12px;color:var(--dimmer);line-height:1.85}
.badge{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;
  padding:3px 9px;border-radius:20px;margin-bottom:11px;
  background:rgba(255,199,44,.14);color:var(--gold);border:1px solid rgba(255,199,44,.3)
}

/* ════════ 任务页 ｜ task pages ════════ */
.card{
  background:var(--panel);border:2px solid rgba(255,199,44,.45);border-radius:14px;
  padding:20px 20px 22px;margin:14px 0;
}
.card > .num{
  display:inline-block;background:var(--gold);color:#3a2600;font-weight:900;font-size:12px;
  border-radius:20px;padding:3px 12px;margin-bottom:10px
}
.card h2{font-size:16.5px;color:var(--gold);font-weight:900;letter-spacing:.4px}
.card h2.en{font-size:13px;color:rgba(255,255,255,.72);font-weight:700;margin-top:4px}
html[data-lang="en"] .card h2.en{font-size:16.5px;color:var(--gold);font-weight:900}
.card h3{font-size:13.5px;color:#fff;font-weight:800;margin:18px 0 5px}
.card h3.en{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:700;margin:2px 0 5px}
html[data-lang="en"] .card h3.en{font-size:13.5px;color:#fff;font-weight:800;margin:18px 0 5px}
.card p{font-size:13px;color:var(--dim);margin:7px 0}
.card p.en{color:var(--dimmer)}
html[data-lang="en"] .card p.en{color:var(--dim)}
.card ol,.card ul{margin:8px 0 10px 20px}
.card li{font-size:13px;color:var(--dim);margin:5px 0}
.card li.en{color:var(--dimmer)}
html[data-lang="en"] .card li.en{color:var(--dim)}
.card code{
  background:rgba(0,0,0,.32);border:1px solid rgba(255,199,44,.18);border-radius:5px;
  padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#ffe08a
}
.note{
  background:rgba(255,199,44,.09);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:11px 14px;margin:12px 0;font-size:12.5px;color:var(--dim);line-height:1.9
}
.note.warn{background:rgba(255,110,110,.1);border-left-color:#ff8888}
.note p{margin:2px 0;font-size:12.5px}

/* ════════ 下载与复制按钮 ｜ download and copy buttons ════════ */
.dl{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.btn{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:700;
  background:linear-gradient(#FFD35C,#E8A81E);color:#3a2600;border:none;border-radius:10px;
  padding:11px 17px;cursor:pointer;text-decoration:none;transition:filter .12s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:rgba(14,80,132,.85);color:#fff;border:1px solid rgba(255,199,44,.45)}
.btn .sub{font-weight:400;font-size:11px;opacity:.75}

.prompt{
  position:relative;background:#04161f;border:1px solid rgba(255,199,44,.3);
  border-radius:10px;padding:15px;margin:12px 0;
}
.prompt pre{
  white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.75;color:#d8ecff;max-height:360px;overflow:auto
}
.prompt .copy{position:absolute;top:10px;right:10px;font-size:11.5px;padding:7px 12px}

/* ════════ 导航 ｜ navigation ════════ */
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--dimmer);padding:14px 2px 0}
.crumb a{color:rgba(255,199,44,.8);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.back{
  display:inline-flex;align-items:center;gap:6px;margin:22px auto 0;
  background:rgba(14,80,132,.6);border:1px solid rgba(255,199,44,.35);border-radius:9px;
  padding:9px 16px;color:rgba(255,255,255,.78);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:none
}
.back:hover{background:var(--panel-hi);color:#fff}
.center{text-align:center}
.rule{height:1px;background:rgba(255,199,44,.16);margin:26px 0}

footer{margin-top:30px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.32);line-height:2}
footer a{color:rgba(255,199,44,.75);text-decoration:none}
footer a:hover{text-decoration:underline}

.section{display:none}
.section.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.secHead{text-align:center;padding:6px 6px 20px}
.secHead h2{font-size:17px;font-weight:900;color:var(--gold);letter-spacing:.5px}
.secHead h2.en{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.62);margin-top:5px}
html[data-lang="en"] .secHead h2.en{font-size:17px;font-weight:900;color:var(--gold);margin-top:0}
.secHead p{font-size:12px;color:var(--dimmer);margin-top:11px;line-height:1.85}