/* 气温计读数 · 三年级科学
   投影优先：大字号、高对比、按钮不小于 56px。 */

: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; }

/* 注意：下面 .readout 自己设了 display:flex，会把 [hidden] 的 display:none 顶掉，
   所以必须显式补一条规则。 */
[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:16px; padding:10px 20px;
  background:var(--panel);
  border-bottom:2px solid var(--line);
}
.brand{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.brand h1{ margin:0; font-size:30px; letter-spacing:.5px; }
.tag{
  font-size:15px; font-weight:700; color:var(--accent-ink);
  background:var(--accent); padding:3px 10px; border-radius:999px;
}
.sub{ font-size:15px; color:var(--sub); }
.bar-actions{ display:flex; gap:10px; flex:0 0 auto; }

.chip{
  font:inherit; font-size:17px; font-weight:600;
  padding:10px 16px; min-height:46px; cursor:pointer;
  color:var(--ink); background:var(--bg2);
  border:2px solid var(--line); border-radius:999px;
}
.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:18px; padding:14px 20px 18px;
}

.svg-wrap{
  flex:1 1 auto; min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:2px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  transition:filter .18s ease;
}
.svg-wrap.masked{ filter:blur(22px) saturate(.5); }

#scene{ width:100%; height:100%; display:block; }

/* ── 右侧面板 ───────────────────────────────────────── */
.panel{
  flex:0 0 clamp(320px,34vw,520px);
  min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
}
/* 面板是 flex 列；子项默认会被压缩（flex-shrink:1），内容比面板高时
   提示条、读作写作会被压扁、文字被裁掉。让子项保持自身高度，改由面板滚动。 */
.panel > *{ flex:0 0 auto; }

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

/* 填空题：读作 / 写作 */
.fill{ display:flex; flex-direction:column; gap:12px; }
.fill-row{ display:flex; align-items:center; gap:12px; }
.fill-row > label{
  flex:0 0 56px; font-size:19px; font-weight:800; color:var(--sub);
}
.fill-box{ flex:1 1 auto; position:relative; display:flex; align-items:center; }
.fill-box input{
  font:inherit; width:100%;
  font-size:27px; font-weight:700; letter-spacing:.5px;
  min-height:66px; padding:8px 54px 8px 16px;
  color:var(--ink); background:var(--panel);
  border:3px solid var(--line); border-radius:var(--radius);
  outline:none;
  transition:border-color .12s ease, background .12s ease;
}
.fill-box input::placeholder{ color:var(--sub); font-weight:500; opacity:.65; font-size:21px; }
.fill-box input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(11,107,212,.14); }
.fill-box input.ok{ background:var(--ok-bg); border-color:var(--ok); }
.fill-box input.bad{ background:var(--bad-bg); border-color:var(--bad); }
.fill-box input:disabled{ cursor:default; }
.fill-mark{
  position:absolute; right:14px; font-size:27px; font-weight:900; line-height:1;
  pointer-events:none;
}
.fill-box input.ok + .fill-mark{ color:var(--ok); }
.fill-box input.bad + .fill-mark{ color:var(--bad); }

/* 字卡：给不会打中文的场景用，仍然是往输入框里填字 */
.keypad-box{
  border:2px dashed var(--line); border-radius:var(--radius);
  padding:8px 12px; background:var(--panel);
}
.keypad-box summary{
  cursor:pointer; font-size:16px; font-weight:700; color:var(--sub);
  list-style:none; padding:2px 0;
}
.keypad-box summary::-webkit-details-marker{ display:none; }
.keypad-box[open] summary{ margin-bottom:8px; }

/* 字卡填哪一栏：一直可见，避免静默写错栏 */
.keypad-target{ display:flex; gap:8px; margin:0 0 10px; }
.ktab{
  font:inherit; font-size:16px; font-weight:700; cursor:pointer;
  padding:7px 16px; border-radius:999px;
  color:var(--sub); background:var(--bg2); border:2px solid var(--line);
}
.ktab:hover{ border-color:var(--accent); }
.ktab.on{ color:#fff; background:var(--accent); border-color:var(--accent); }

.keypad-group{ margin-bottom:10px; }
.kgroup-title{
  display:block; font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--sub); margin:0 0 6px;
}
.keypad{ display:flex; flex-wrap:wrap; gap:8px; }
.kkey{
  font:inherit; font-size:21px; font-weight:700; cursor:pointer;
  min-width:54px; min-height:48px; padding:6px 12px;
  color:var(--ink); background:var(--bg2);
  border:2px solid var(--line); border-radius:10px;
}
.kkey:hover{ border-color:var(--accent); }
.kkey:active{ transform:scale(.96); }
.kkey-fn{ font-size:17px; color:var(--sub); }

/* 反馈 */
.feedback{
  font-size:19px; line-height:1.55; font-weight:600;
  min-height:0; padding:0; border-radius:var(--radius);
}
.feedback.show{ padding:12px 16px; }
.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:12px 16px;
  display:flex; flex-direction:column; gap:8px;
}
.ro-line{ display:flex; align-items:baseline; gap:12px; }
.ro-k{ flex:0 0 56px; font-size:16px; font-weight:700; color:var(--sub); }
.ro-v{ font-size:27px; font-weight:800; letter-spacing:.5px; }
.ro-exp{ font-size:17px; line-height:1.55; color:var(--sub); font-weight:600; }

/* 动作按钮 */
.actions{ display:flex; gap:12px; }
.btn{
  font:inherit; font-size:19px; font-weight:700; cursor:pointer;
  flex:1 1 auto; min-height:56px; padding:10px 18px;
  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); }

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

.t-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:7px 0; font-size:17px; font-weight:600;
}
.t-row label{ flex:0 0 auto; }
.t-row select, .t-row input[type=range]{ font:inherit; }
.t-row select{
  flex:1 1 160px; min-height:42px; padding:6px 10px; font-size:16px;
  color:var(--ink); background:var(--bg2);
  border:2px solid var(--line); border-radius:10px;
}
.t-row input[type=range]{ flex:1 1 140px; min-width:120px; accent-color:var(--accent); height:30px; }
.t-row output{ font-size:19px; font-weight:800; min-width:74px; text-align:right; }
.t-row .chk{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.t-row .chk input{ width:20px; height:20px; accent-color:var(--accent); }
.t-btns .btn{ min-height:48px; font-size:17px; }
.t-note{ margin:6px 0 2px; font-size:15px; line-height:1.5; color:var(--sub); font-weight:500; }

/* 兜底 */
.fallback{
  margin:24px; padding:22px 26px;
  background:var(--panel); border:3px solid var(--warn); border-radius:var(--radius);
  font-size:19px; line-height:1.6;
}
.fallback h2{ margin:0 0 10px; font-size:24px; }

/* ── 窄屏：改为上下布局 ────────────────────────────── */
@media (max-width:1180px){
  body{ overflow:auto; }
  .app{ height:auto; min-height:100%; }
  .stage{ flex-direction:column; }
  /* 上下排布时画布变"矮而宽"。场景 viewBox 是 1060×890（宽高比 1.191），
     若让 .svg-wrap 撑满整行宽度，xMidYMid meet 会按高度缩放，
     左右各留一大片空白、温度计被挤小。这里把宽度锁成 1.191×高度。 */
  .svg-wrap{
    height:min(58vh,560px);
    width:min(100%, calc(min(58vh,560px) * 1.191));
    align-self:center;
    flex:0 0 auto;
  }
  .panel{ flex:1 1 auto; overflow:visible; }
  .brand h1{ font-size:25px; }
}
@media (max-width:620px){
  .fill-row{ flex-direction:column; align-items:stretch; gap:6px; }
  .fill-row > label{ flex:0 0 auto; }
  .fill-box input{ font-size:23px; min-height:60px; }
  .kkey{ font-size:19px; min-width:48px; min-height:44px; }
}