/* 风旗观测 · 三年级科学
   投影优先：大字号、高对比、按钮高度 ≥ 48px。
   视觉沿用同系列《气温计读数·互动练习》的浅蓝底 + 白卡片 + 蓝色主按钮。 */

:root{
  --bg:#eef3f8;
  --bg2:#e2ebf4;
  --panel:#ffffff;
  --ink:#16232e;
  --sub:#5b7183;
  --line:#d3dfe9;
  --accent:#0b6bd4;
  --accent-ink:#ffffff;
  --ok:#12834a;
  --ok-bg:#e6f6ed;
  --bad:#c0392b;
  --bad-bg:#fdecea;
  --warn:#b06d00;
  --warn-bg:#fff5e0;
  --radius:14px;
}

body.dark{
  --bg:#0e1720;
  --bg2:#0a1119;
  --panel:#16222e;
  --ink:#e8f1f8;
  --sub:#93a8ba;
  --line:#2a3b4c;
  --accent:#3d9bff;
  --accent-ink:#06121d;
  --ok:#4fd18b;
  --ok-bg:#122c20;
  --bad:#ff7b6b;
  --bad-bg:#331714;
  --warn:#ffc061;
  --warn-bg:#2e2412;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",
              system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.app{ height:100%; display:flex; flex-direction:column; }

/* ── 顶栏 ───────────────────────────────────────────── */
.bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:9px 18px;
  background:var(--panel);
  border-bottom:2px solid var(--line);
  min-height:64px;
}
.brand{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.brand h1{ margin:0; font-size:27px; letter-spacing:.5px; }
.tag{
  font-size:14px; font-weight:700; color:var(--accent-ink);
  background:var(--accent); padding:3px 10px; border-radius:999px;
}
.sub{ font-size:14px; color:var(--sub); }
.bar-actions{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }

.chip{
  font:inherit; font-size:15px; font-weight:600;
  padding:8px 13px; min-height:42px; cursor:pointer;
  color:var(--ink); background:var(--bg2);
  border:2px solid var(--line); border-radius:999px;
  white-space:nowrap;
}
.chip:hover{ border-color:var(--accent); }
.chip.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* ── 舞台 ───────────────────────────────────────────── */
.stage{
  flex:1 1 auto; min-height:0;
  display:flex; gap:16px; padding:12px 18px 16px;
}

.scene-wrap{
  position:relative; flex:1 1 auto; min-width:0; min-height:0;
  background:var(--panel);
  border:2px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
#scene{ display:block; width:100%; height:100%; touch-action:none; }

/* HTML 标注层：与 canvas 同一容器尺寸，用 CSS px 定位 */
.overlay{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.lbl{
  position:absolute; left:0; top:0;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  opacity:0; transition:opacity .25s ease; will-change:transform;
}
.lbl.show{ opacity:1; }
.lbl .txt{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(140,175,210,.6);
  border-radius:10px; padding:5px 12px;
  font-size:19px; font-weight:700; color:#20384d;
  box-shadow:0 4px 14px rgba(31,70,120,.14);
}
.lbl.arrow .txt{ color:#9a4a12; border-color:rgba(240,160,110,.7); }
.lbl.rule .txt{ color:#0b5aa8; border-color:rgba(110,170,230,.75); }

.paused-tip{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  background:var(--warn-bg); color:var(--warn);
  border:2px solid var(--warn); border-radius:999px;
  padding:8px 18px; font-size:18px; font-weight:700;
  box-shadow:0 6px 18px rgba(31,70,120,.16);
}
.hint-corner{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-size:14px; color:var(--sub); background:rgba(255,255,255,.72);
  border-radius:999px; padding:4px 14px; pointer-events:none;
}
body.dark .hint-corner{ background:rgba(20,32,44,.72); }

#loader{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:var(--sub); background:var(--panel);
}

#fallback{
  position:absolute; inset:0; overflow:auto;
  padding:26px 30px; background:var(--panel);
  font-size:18px; line-height:1.7;
}
#fallback h2{ margin:0 0 12px; font-size:23px; color:var(--warn); }
#fallback ul{ margin:8px 0 14px; padding-left:24px; }
#fallback li{ margin:6px 0; }

/* ── 右侧面板 ───────────────────────────────────────── */
.panel{
  flex:0 0 clamp(300px,32vw,340px);
  min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:11px;
}
/* 面板是 flex 列，子项默认会被压缩、文字被裁；改由面板滚动 */
.panel > *{ flex:0 0 auto; }

.qhead{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.qtag{
  font-size:14px; font-weight:700; color:var(--accent-ink);
  background:var(--accent); padding:3px 10px; border-radius:999px;
}
.qhint{ font-size:21px; font-weight:700; line-height:1.35; }

/* 模式切换 */
.modes{ display:flex; gap:7px; }
.mtab{
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  flex:1 1 0; padding:8px 4px; min-height:42px;
  color:var(--sub); background:var(--bg2);
  border:2px solid var(--line); border-radius:10px;
}
.mtab:hover{ border-color:var(--accent); }
.mtab.on{ color:#fff; background:var(--accent); border-color:var(--accent); }

.ask{ display:flex; flex-direction:column; gap:8px; }
.ask-title{ font-size:17px; font-weight:700; color:var(--sub); }

/* 风力三档 */
.force-row{ display:flex; gap:8px; }
.fbtn{
  font:inherit; cursor:pointer; flex:1 1 0;
  min-height:64px; padding:8px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink); background:var(--panel);
  border:3px solid var(--line); border-radius:var(--radius);
}
.fbtn .f-ico{ font-size:23px; line-height:1; }
.fbtn .f-name{ font-size:20px; font-weight:800; }
.fbtn:hover{ border-color:var(--accent); }
.fbtn.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.fbtn.ok{ background:var(--ok-bg); border-color:var(--ok); }
.fbtn.bad{ background:var(--bad-bg); border-color:var(--bad); }

/* 八方位 3×3（中间留空） */
.dir-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.dbtn{
  font:inherit; font-size:23px; font-weight:800; cursor:pointer;
  min-height:54px; padding:4px;
  color:var(--ink); background:var(--panel);
  border:3px solid var(--line); border-radius:12px;
}
.dbtn:hover{ border-color:var(--accent); }
.dbtn.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.dbtn.ok{ background:var(--ok-bg); border-color:var(--ok); }
.dbtn.bad{ background:var(--bad-bg); border-color:var(--bad); }
.dbtn.blank{ visibility:hidden; pointer-events:none; }
/* 选中态不只靠颜色：加一个圆点前缀 */
.dbtn.on::before, .dbtn.ok::before, .dbtn.bad::before{ content:"● "; font-size:13px; vertical-align:2px; }
.dir-note{ font-size:13px; color:var(--sub); }

/* 提交 / 动作 */
.btn{
  font:inherit; font-size:18px; font-weight:700; cursor:pointer;
  flex:1 1 auto; min-height:52px; padding:9px 14px;
  color:var(--ink); background:var(--panel);
  border:3px solid var(--line); border-radius:var(--radius);
}
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn:disabled{ opacity:.5; cursor:default; }

/* 反馈 */
.feedback{
  font-size:19px; line-height:1.55; font-weight:600;
  border-radius:var(--radius);
}
.feedback.show{ padding:11px 14px; }
.feedback.hint{ background:var(--warn-bg); color:var(--warn); border:2px solid var(--warn); }
.feedback.ok{ background:var(--ok-bg); color:var(--ok); border:2px solid var(--ok); }
.feedback.bad{ background:var(--bad-bg); color:var(--bad); border:2px solid var(--bad); }

/* 读作区 */
.readout{
  background:var(--panel); border:2px solid var(--line);
  border-radius:var(--radius); padding:11px 14px;
  display:flex; flex-direction:column; gap:7px;
}
.ro-line{ display:flex; align-items:baseline; gap:10px; }
.ro-k{ flex:0 0 48px; font-size:15px; font-weight:700; color:var(--sub); }
.ro-v{ font-size:23px; font-weight:800; letter-spacing:.5px; }
.ro-exp{ font-size:16px; line-height:1.6; color:var(--sub); font-weight:600; }

.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.actions .btn{ flex:1 1 40%; font-size:16px; min-height:48px; }

/* 老师控制 */
.teacher{
  background:var(--panel); border:2px dashed var(--line);
  border-radius:var(--radius); padding:9px 13px;
}
.teacher summary{
  cursor:pointer; font-size:17px; font-weight:700; color:var(--sub);
  padding:3px 0; list-style:none;
}
.teacher summary::-webkit-details-marker{ display:none; }
.teacher summary::before{ content:"⚙ "; }
.teacher[open] summary{ margin-bottom:9px; }

.t-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 0; font-size:16px; font-weight:600;
}
.t-row label{ flex:0 0 auto; }
.t-row select{
  font:inherit; flex:1 1 130px; min-height:40px; padding:5px 9px; font-size:15px;
  color:var(--ink); background:var(--bg2);
  border:2px solid var(--line); border-radius:10px;
}
.t-row .chk{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.t-row .chk input{ width:19px; height:19px; accent-color:var(--accent); }
.t-btns .btn{ min-height:46px; font-size:15px; }
.t-note{ margin:6px 0 2px; font-size:14px; line-height:1.55; color:var(--sub); font-weight:500; }

/* ── 窄屏：上下排布 ────────────────────────────────── */
@media (max-width:1180px){
  body{ overflow:auto; }
  .app{ height:auto; min-height:100%; }
  .stage{ flex-direction:column; }
  .scene-wrap{ height:min(62vh,600px); flex:0 0 auto; }
  .panel{ flex:1 1 auto; overflow:visible; max-width:none; flex-basis:auto; }
  .brand h1{ font-size:23px; }
  .sub{ display:none; }
}
@media (max-width:620px){
  .dir-pad{ gap:5px; }
  .dbtn{ font-size:20px; min-height:48px; }
  .force-row{ flex-wrap:wrap; }
}