:root { --bg:#eef5fa; --panel:rgba(255,255,255,.88); --panel-border:rgba(60,90,120,.18); --text:#1f3345; --muted:#5d7284; --accent:#d9674f; --accent2:#2fae9b; --r:14px; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; font-size:15px; overflow:hidden; }
#stage { position:fixed; inset:0; }
#stage canvas { display:block; width:100%; height:100%; outline:none; }
#loading { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); font-size:18px; color:var(--muted); z-index:50; transition:opacity .5s; }
#loading.done { opacity:0; pointer-events:none; }
.panel, #hud-top, #hud-side, #clock, #info-card { background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(20,40,60,.14); }
.btn { font:inherit; color:var(--text); background:transparent; border:1px solid var(--panel-border); border-radius:10px; padding:7px 12px; cursor:pointer; min-height:36px; transition:background .15s, border-color .15s; }
.btn:hover { background:rgba(127,160,190,.16); }
.btn.on, .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:focus-visible, input:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
.seg { display:inline-flex; gap:4px; align-items:center; }
.seg-l { color:var(--muted); font-size:13px; margin-right:2px; }

#hud-top { position:fixed; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; padding:10px 14px; max-width:540px; }
.brand b { font-size:18px; letter-spacing:.06em; } .brand span { margin-left:10px; color:var(--muted); font-size:14px; }

#hud-side { position:fixed; top:16px; right:16px; width:230px; padding:10px 14px 14px; }
#hud-side h4 { margin:12px 0 6px; font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.08em; }
#side-toggle { display:none; width:100%; }
.chips { display:flex; flex-wrap:wrap; gap:6px; } .chip { padding:5px 10px; min-height:32px; font-size:14px; }
#explode { width:100%; accent-color:var(--accent); }
.chk { display:flex; gap:8px; align-items:center; margin-top:12px; cursor:pointer; }

#clock { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; width:min(900px, calc(100% - 32px)); padding:12px 16px 10px; }
.clk-top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.clk-time { font-size:20px; } .clk-time b { font-size:30px; font-variant-numeric:tabular-nums; letter-spacing:.02em; margin-left:6px; }
.clk-slot { display:flex; flex-direction:column; min-width:130px; } #clk-slot { font-size:18px; font-weight:700; color:var(--accent); } .clk-slot small { color:var(--muted); font-size:13px; }
.clk-btns { margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.clk-days { display:flex; gap:6px; margin:8px 0 6px; } .day-b { padding:4px 12px; min-height:32px; }
.clk-track { position:relative; height:30px; margin-top:4px; }
.clk-segs { position:absolute; left:0; right:0; top:9px; height:12px; border-radius:6px; overflow:hidden; background:rgba(127,160,190,.18); }
.seg-blk { position:absolute; top:0; bottom:0; opacity:.85; border-right:1px solid rgba(255,255,255,.5); }
.k-class { background:#4c8fd6; } .k-break { background:#7cc47f; } .k-lunch { background:#f0b04a; } .k-nap { background:#9a8fd1; } .k-assembly { background:#e0705b; }
.k-clean { background:#6fb8b0; } .k-home { background:#9fb6c9; } .k-arrive { background:#c9b78f; } .k-dismiss { background:#d98cab; } .k-none { background:transparent; }
#clk-range { position:absolute; inset:0; width:100%; margin:0; background:transparent; -webkit-appearance:none; appearance:none; }
#clk-range::-webkit-slider-runnable-track { background:transparent; height:30px; }
#clk-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:28px; border-radius:8px; background:var(--accent); border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35); cursor:grab; margin-top:1px; }
#clk-range::-moz-range-track { background:transparent; } #clk-range::-moz-range-thumb { width:12px; height:26px; border-radius:8px; background:var(--accent); border:2px solid #fff; cursor:grab; }
.clk-ticks { position:relative; height:16px; font-size:12px; color:var(--muted); } .clk-ticks span { position:absolute; transform:translateX(-50%); }

#info-card { position:fixed; left:16px; top:84px; width:290px; padding:14px 16px; display:none; }
#info-card.show { display:block; } #info-card h3 { margin:0 0 4px; font-size:19px; } #info-card .meta { color:var(--muted); font-size:14px; } #info-card p { margin:10px 0 0; line-height:1.55; }
#info-card .tag { display:inline-block; margin-top:8px; padding:2px 10px; border-radius:20px; background:var(--accent2); color:#fff; font-size:13px; }
#info-card .x { position:absolute; right:8px; top:6px; border:0; background:transparent; font-size:24px; color:var(--muted); cursor:pointer; }
#tooltip { position:fixed; display:none; pointer-events:none; z-index:20; padding:5px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--panel-border); font-size:14px; }

@media (max-width: 820px) {
  #hud-top { max-width:none; padding:8px 12px; } .brand span { display:none; }
  #hud-side { top:70px; width:210px; padding:8px 12px; } #side-toggle { display:block; } .side-body { display:none; } #hud-side.open .side-body { display:block; }
  .clk-time b { font-size:26px; } .clk-slot { min-width:100px; }
  #info-card { top:auto; bottom:210px; left:16px; right:16px; width:auto; }
}

[hidden] { display: none !important; }

/* 圖例與效果開關 */
#legend { display:block; }
#legend #lg-toggle { width:100%; min-height:30px; padding:3px 10px; text-align:left; font-weight:700; letter-spacing:.08em; }
#legend.closed .lg-body { display:none; }
.lg-list { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:5px; font-size:14px; }
.lg-list li { display:flex; align-items:center; gap:8px; }
.lg-list i { width:14px; height:14px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.12); }
.lg-list i.idle { background:repeating-linear-gradient(45deg, rgba(150,170,185,.15) 0 4px, rgba(150,170,185,.45) 4px 5px); }
.lg-sound { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.lg-sound .btn { min-height:32px; padding:3px 9px; font-size:14px; } .lg-sound input { flex:1; min-width:60px; accent-color:var(--accent); }
.lg-note { display:block; margin-top:8px; color:var(--muted); font-size:12px; line-height:1.4; }
/* 資訊卡：上課狀態 */
#card-status { margin-top:8px; padding-top:8px; border-top:1px solid var(--panel-border); font-size:14px; }
.st-now { display:flex; align-items:center; gap:8px; margin-bottom:3px; } .st-now i { width:12px; height:12px; border-radius:4px; flex:none; }
.st-row { color:var(--text); } .st-dim, .st-idle { color:var(--muted); }

.lg-fade { display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:14px; color:var(--text); } .lg-fade input { width:100%; accent-color:var(--accent); }

/* 人物與事件面板（階段4）*/
#people { position:fixed; right:16px; top:340px; width:262px; z-index:4; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(20,40,60,.14); overflow:hidden; }
#pp-tabs { display:flex; gap:4px; padding:6px 6px 4px; } #pp-tabs .tab { flex:1; min-height:30px; padding:2px 6px; font-size:13.5px; font-weight:700; } #pp-tabs .tab.on { background:var(--accent); border-color:var(--accent); color:#fff; } #pp-tabs .tab-x { min-height:30px; width:32px; padding:0; } #pp-tabs b { font-variant-numeric:tabular-nums; }
#people.closed .pp-pane { display:none; }
.pp-pane { padding:2px 12px 12px; overflow:auto; min-height:0; flex:1 1 auto; } #pp .chk { margin-top:7px; font-size:14px; }
.pp-sl { display:block; margin-top:8px; font-size:13px; color:var(--muted); } .pp-sl input { width:100%; accent-color:var(--accent); } .pp-sl output { float:right; }
.pp-kinds { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:8px; } .pp-k { font-size:12.5px; display:flex; align-items:center; gap:4px; cursor:pointer; }
.pp-k input { margin:0; accent-color:var(--accent); } .pp-k i, .el-list i { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 3px; border-radius:50%; color:#fff; font-style:normal; font-size:12px; font-weight:700; flex:none; }
.pp-follow { margin-top:4px; margin-bottom:4px; padding:8px 10px; border-radius:10px; background:rgba(224,86,47,.12); border:1px solid var(--accent); font-size:13.5px; line-height:1.5; } .pp-follow .btn { margin-top:6px; min-height:28px; padding:2px 10px; }
#eventlog { display:flex; flex-direction:column; overflow:hidden; } #eventlog[hidden] { display:none !important; }
.el-head { display:flex; justify-content:space-between; align-items:baseline; } .el-head small { color:var(--muted); }
.el-tools { margin-top:4px; } .el-chk { margin-top:6px !important; font-size:13px !important; } .el-row { display:flex; gap:6px; margin-top:6px; } .el-row select { flex:1; min-width:0; font:inherit; font-size:13px; border:1px solid var(--panel-border); border-radius:8px; background:transparent; color:var(--text); padding:3px 4px; }
.el-row .btn { min-height:30px; padding:2px 8px; font-size:13px; white-space:nowrap; }
.el-list { list-style:none; margin:8px 0 0; padding:0; overflow:auto; flex:1; min-height:80px; }
.el-list li { display:flex; gap:7px; align-items:flex-start; padding:5px 4px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1.4; } .el-list li:hover { background:rgba(127,160,190,.16); }
.el-list li.fut { opacity:.5; } .el-list li.empty { cursor:default; color:var(--muted); } .el-list small { display:block; color:var(--muted); font-size:12px; }
#ptip { position:fixed; display:none; pointer-events:none; z-index:30; padding:7px 11px; border-radius:10px; background:var(--panel); border:1px solid var(--panel-border); box-shadow:0 6px 20px rgba(20,40,60,.2); font-size:13.5px; line-height:1.45; max-width:250px; }
#ptip span { color:var(--muted); font-size:12.5px; } #ptip em { color:var(--accent); font-style:normal; font-size:12.5px; }
@media (max-width: 820px) { #people { top:auto !important; right:12px; bottom:210px; width:230px; max-height:46vh !important; } }

/* 面板把手（可拖移、可收合）*/
.dock-h { display:flex; align-items:center; gap:6px; padding:2px 4px 4px; font-size:12px; color:var(--muted); cursor:grab; user-select:none; touch-action:none; }
.dock-h .dock-t { flex:1; letter-spacing:.08em; } .dock-h .dock-grip { opacity:.6; } .dock-b { border:1px solid var(--panel-border); background:transparent; color:var(--text); border-radius:6px; width:22px; height:20px; line-height:1; cursor:pointer; padding:0; }
.dock-min { min-height:0 !important; height:auto !important; } .dock-min > :not(.dock-h) { display:none !important; }
#info-card { z-index:6; left:224px; } #hud-side { z-index:4; } #people { z-index:5; }
@media (max-width: 820px) { #info-card { left:16px; } }

/* ---- 階段5：使用圖表 ---- */
#btn-charts.on { background:var(--accent); color:#fff; }
#charts { position:fixed; left:50%; top:76px; width:min(560px,92vw); transform:translateX(-50%); z-index:7; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r); backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(20,40,60,.2); color:var(--text); max-height:78vh; overflow:auto; }
#charts[hidden] { display:none; }
#charts.dock-min .ch-root { display:none; }
.ch-root { padding:8px 12px 10px; }
.ch-tabs { display:flex; gap:6px; margin-bottom:8px; }
.ch-tabs button { flex:1; padding:5px 6px; border:1px solid var(--panel-border); background:transparent; color:var(--text); border-radius:8px; cursor:pointer; font:inherit; font-size:12px; }
.ch-tabs button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.ch-body { position:relative; }
.ch-body canvas { max-width:100%; }
.ch-note { margin:8px 0 0; font-size:11px; color:var(--muted); }
.ch-sub { margin:6px 0 0; font-size:11.5px; color:var(--muted); line-height:1.5; }
.ch-heat { width:100%; border-collapse:separate; border-spacing:2px; font-size:12px; text-align:center; }
.ch-heat th { font-weight:600; color:var(--muted); font-size:11px; padding:3px 4px; white-space:nowrap; }
.ch-heat td { padding:6px 0; border-radius:4px; font-variant-numeric:tabular-nums; }
.ch-heat td.nil { color:var(--muted); background:rgba(128,128,128,.1); }

/* ---- 階段6：防災劇場 ---- */
#btn-drill.on { background:#e53935; border-color:#e53935; color:#fff; }
#drill { position:fixed; right:16px; top:76px; width:300px; z-index:8; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r); backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(20,40,60,.22); color:var(--text); max-height:calc(100vh - 100px); overflow:auto; }
#drill[hidden] { display:none; }
#drill.dock-min .dt-root { display:none; }
.dt-root { padding:8px 12px 12px; font-size:12.5px; }
.dt-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dt-row .btn { min-height:30px; padding:4px 10px; font-size:12.5px; }
.dt-rates { display:flex; gap:4px; margin-left:auto; } .dt-rates .btn { padding:4px 7px; min-height:28px; } .dt-rate.on { background:var(--accent); border-color:var(--accent); color:#fff; }
#dt-seek { width:100%; margin:8px 0 0; }
.dt-time { display:flex; justify-content:space-between; color:var(--muted); font-size:11.5px; }
.dt-cap { background:rgba(127,160,190,.14); border-radius:10px; padding:8px 10px; margin:8px 0; }
.dt-ch { font-weight:700; color:var(--accent); font-size:13px; }
.dt-step { min-height:2.6em; margin-top:3px; font-size:13.5px; line-height:1.45; font-weight:600; }
.dt-steps { margin:4px 0 0; padding-left:18px; color:var(--muted); font-size:11.5px; line-height:1.55; } .dt-steps li.on { color:var(--text); font-weight:700; }
.dt-focus h5 { margin:8px 0 4px; font-size:11.5px; color:var(--muted); font-weight:600; }
.dt-focus .chips { display:flex; flex-wrap:wrap; gap:5px; }
.dt-focus .chip { border:1px solid var(--panel-border); background:transparent; color:var(--text); border-radius:999px; padding:4px 10px; cursor:pointer; font:inherit; font-size:12px; display:inline-flex; align-items:center; gap:5px; }
.dt-focus .chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.dt-v { width:9px; height:9px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.25); }
.dt-opts { display:flex; flex-wrap:wrap; gap:4px 12px; margin:10px 0 6px; } .dt-opts label { display:flex; align-items:center; gap:4px; cursor:pointer; }
.dt-leg { display:flex; flex-wrap:wrap; gap:3px 10px; color:var(--muted); font-size:11px; margin-bottom:8px; } .dt-leg i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; border:1px solid rgba(0,0,0,.2); }
@media (max-width: 820px) { #drill { right:8px; left:8px; width:auto; top:64px; } }
.dt-steps { list-style:none; padding-left:0; }
#hud-top { flex-wrap:nowrap; } #hud-top .btn, #hud-top .seg button { white-space:nowrap; } #hud-top .btn { padding:6px 10px; font-size:13px; } #hud-top .brand { white-space:nowrap; }
#hud-top { max-width:720px; }
.dt-cards { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin:6px 0 8px; font-size:12px; } .dt-cards label { display:flex; align-items:center; gap:3px; cursor:pointer; } .dt-cards .btn { min-height:26px; padding:2px 8px; font-size:12px; }

/* ---- 階段7g：教室近景 ---- */
#info-card .go { margin-top:12px; width:100%; background:var(--accent2); color:#fff; border:0; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:15px; }
#focus-bar { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:8; display:flex; align-items:center; gap:14px; flex-wrap:wrap; max-width:calc(100vw - 32px); padding:8px 14px; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(20,40,60,.18); }
#focus-bar[hidden] { display:none; }
#fb-title { font-weight:700; font-size:17px; } #fb-state { font-size:14px; } #fb-state .st-row, #fb-state b { display:inline; margin-right:8px; } #fb-tip { font-size:12px; color:var(--muted); }
body.focusing #info-card { display:none !important; }
@media (max-width: 820px) { #fb-tip { display:none; } }

/* ---- 時鐘提醒 ---- */
#clk-note { margin:6px 0 2px; padding:6px 10px; border-radius:8px; background:#fff4d6; color:#7a4b00; font-size:14px; line-height:1.4; border:1px solid #f1d38a; }
#clk-note[hidden] { display:none; }

/* ---- 階段7j：手機版面（≤820px）---- */
#mtabs { display:none; }
@media (max-width: 820px) {
  #mtabs { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:12; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); gap:6px; background:var(--panel); border-top:1px solid var(--panel-border); backdrop-filter:blur(10px); }
  #mtabs .mt { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 2px; min-height:46px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
  #mtabs .mt.on { background:var(--accent); color:#fff; } #mtabs .mt-i { font-size:18px; line-height:1; } #mtabs .mt-t { font-size:12px; font-variant-numeric:tabular-nums; }
  body.focusing #mtabs .mt[data-k="info"] { display:none; }
  /* 上方列：縮小、可換行 */
  #hud-top { top:8px; left:8px; right:8px; padding:6px 8px; gap:6px; flex-wrap:wrap; justify-content:flex-start; }
  #hud-top .btn { padding:4px 8px; min-height:32px; font-size:13px; } .brand b { font-size:15px; }
  /* 面板：平常全部收起，點分頁才從下方升起（一次一個）*/
  #clock, #hud-side, #people, #info-card { display:none !important; position:fixed !important; left:8px !important; right:8px !important; top:auto !important; bottom:calc(64px + env(safe-area-inset-bottom)) !important; width:auto !important; max-width:none !important; max-height:58vh !important; overflow:auto; transform:none !important; z-index:11 !important; }
  body[data-mtab="clock"] #clock, body[data-mtab="side"] #hud-side, body[data-mtab="people"] #people { display:block !important; }
  body[data-mtab="info"] #info-card.show { display:block !important; }
  .dock-h { display:none !important; } .dock-min > :not(.dock-h) { display:revert !important; }
  #side-toggle { display:none !important; } .side-body { display:block !important; }
  .clk-time b { font-size:24px; } .clk-slot { min-width:0; } .clk-top { gap:8px; } .clk-btns { margin-left:0; width:100%; } .btn, .day-b, .chip { min-height:40px; }
  #charts { left:8px !important; right:8px !important; width:auto !important; top:56px !important; bottom:calc(64px + env(safe-area-inset-bottom)) !important; max-height:none !important; z-index:10; overflow:auto; }
  /* 防災劇場：改成下方的小面板（平常只留播放控制與當下說明），按「選項」才展開完整內容，不再遮住整個畫面 */
  #drill { left:8px !important; right:8px !important; width:auto !important; top:auto !important; bottom:calc(64px + env(safe-area-inset-bottom)) !important; max-height:36vh !important; z-index:10; overflow:auto; }
  #drill.more { max-height:62vh !important; }
  #drill:not(.more) .dt-steps, #drill:not(.more) .dt-focus, #drill:not(.more) .dt-opts, #drill:not(.more) .dt-cards, #drill:not(.more) .dt-leg { display:none; }
  #drill .dt-cap { margin:6px 0; padding:6px 8px; } #drill .dt-step { min-height:0; }
  .dt-more { display:inline-block !important; }
  /* 教室近景：上方列縮成一行 */
  #focus-bar { top:8px; left:8px; right:8px; transform:none; max-width:none; padding:6px 8px; gap:8px; flex-wrap:nowrap; }
  #fb-title { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } #fb-state { display:none; } #fb-back { padding:4px 8px; min-height:34px; font-size:13px; white-space:nowrap; }
  body.focusing #hud-top { display:none; }
  #tooltip { display:none !important; }
}
#lg-uni { display:block; width:100%; margin-top:4px; font:inherit; font-size:14px; padding:5px 6px; border:1px solid var(--panel-border); border-radius:8px; background:var(--panel); color:var(--text); }

.dt-more { display:none; }