*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#070d0f}
body{
  font-family:"Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  color:#e6e6dc;-webkit-font-smoothing:antialiased;cursor:default;
}
#game{display:block;width:100%;height:100%}
#ui{position:fixed;inset:0;pointer-events:none;user-select:none}
.hidden{display:none!important}

/* ── 进行中的 HUD ────────────────────────────────── */
#hud{position:absolute;top:30px;left:0;right:0;text-align:center;transition:opacity 1.2s;z-index:2}
#timer{
  font-size:46px;letter-spacing:.14em;font-variant-numeric:tabular-nums;
  opacity:.66;text-shadow:0 2px 20px rgba(0,0,0,.8);
}
#meta{
  margin-top:8px;font-size:12px;letter-spacing:.18em;opacity:.36;
  display:flex;gap:11px;justify-content:center;flex-wrap:wrap;
}
#meta i{font-style:normal;opacity:.45}

/* ── 大画幅提醒 ─────────────────────────────────── */
#alert{
  position:absolute;inset:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:3vh;
  opacity:0;transition:opacity 1s ease;
  background:radial-gradient(ellipse at center,rgba(78,58,18,.28),rgba(30,22,8,.5));
}
#alert.on{opacity:1}
#alert .a-main{
  font-size:clamp(52px,12vw,210px);line-height:1;
  letter-spacing:.16em;text-indent:.16em;
  color:#f7e2ad;
  text-shadow:0 0 3vw rgba(0,0,0,.75),0 0 8vw rgba(240,196,110,.28);
  animation:soft-breathe 3.6s ease-in-out infinite;
}
#alert .a-sub{
  font-size:clamp(14px,1.9vw,30px);letter-spacing:.24em;text-indent:.24em;
  color:#f0cd9a;opacity:.78;text-align:center;
}
#alert.pause{background:radial-gradient(ellipse at center,rgba(92,58,20,.34),rgba(34,20,8,.58))}
#alert.pause .a-main{color:#f8d9a2}
@keyframes soft-breathe{0%,100%{opacity:.86}50%{opacity:1}}

#toast{
  position:absolute;left:50%;top:34%;transform:translateX(-50%);
  font-size:19px;letter-spacing:.3em;white-space:nowrap;text-align:center;
  opacity:0;transition:opacity 1.5s;text-shadow:0 2px 20px rgba(0,0,0,.85);
}
#toast.on{opacity:.88}

#demo-tag{
  position:absolute;left:24px;bottom:24px;
  font-size:11px;letter-spacing:.14em;padding:5px 12px;border-radius:999px;
  background:rgba(60,40,64,.5);border:1px solid rgba(214,180,224,.26);
  color:#e0c8ea;opacity:.8;
}

#controls{
  position:absolute;right:24px;bottom:22px;display:flex;gap:9px;
  pointer-events:auto;align-items:center;
}
#controls button{
  height:30px;padding:0 13px;border-radius:999px;
  background:rgba(10,18,20,.44);border:1px solid rgba(230,230,220,.15);
  color:#e6e6dc;font-size:12px;letter-spacing:.1em;font-family:inherit;
  cursor:pointer;opacity:.4;transition:opacity .25s,background .25s;
  backdrop-filter:blur(3px);
}
#controls button:hover{opacity:.9}

/* ── 卡片通用 ───────────────────────────────────── */
#start,#end,#calib{
  position:absolute;inset:0;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:36px 24px;overflow-y:auto;
  background:radial-gradient(ellipse at center,rgba(6,12,14,.55),rgba(4,8,10,.92));
  transition:opacity 1.3s;
}
#start.gone,#end.gone,#calib.gone{opacity:0;pointer-events:none}

#start h1{font-size:58px;font-weight:400;letter-spacing:.34em;text-indent:.34em;
  text-shadow:0 3px 34px rgba(0,0,0,.9)}
#start .sub{font-size:12px;letter-spacing:.42em;text-indent:.42em;opacity:.4;margin-top:4px}
#start .desc{margin-top:30px;font-size:14.5px;line-height:2.1;letter-spacing:.12em;opacity:.62}

#go,#again{
  margin-top:38px;padding:15px 52px;border-radius:999px;font-family:inherit;
  font-size:16px;letter-spacing:.3em;text-indent:.3em;cursor:pointer;
  background:rgba(96,140,132,.26);border:1px solid rgba(198,224,214,.32);
  color:#eff2ea;transition:.3s;
}
#go:hover,#again:hover{background:rgba(124,172,158,.4)}
.dur-hint{margin-top:14px;font-size:12px;letter-spacing:.16em;opacity:.4}
.dur-hint b{font-weight:600;opacity:.85}

/* ── 高级设置 ───────────────────────────────────── */
#adv{margin-top:30px;width:min(520px,84vw);text-align:center}
#adv summary{
  list-style:none;cursor:pointer;font-size:12px;letter-spacing:.24em;
  opacity:.34;transition:opacity .25s;
}
#adv summary::-webkit-details-marker{display:none}
#adv summary::after{content:" ⌄";opacity:.7}
#adv[open] summary::after{content:" ⌃"}
#adv summary:hover{opacity:.7}
.adv-body{
  margin-top:20px;padding:20px 22px;border-radius:14px;
  background:rgba(14,22,24,.42);border:1px solid rgba(230,230,220,.09);
  display:flex;flex-direction:column;gap:14px;
}
.field{display:flex;align-items:center;justify-content:space-between;gap:16px}
.field .label{font-size:12px;letter-spacing:.2em;opacity:.42}
.row{display:flex;gap:7px}
.row button{
  padding:6px 15px;border-radius:999px;font-family:inherit;font-size:12px;
  letter-spacing:.1em;cursor:pointer;
  background:rgba(20,32,32,.5);border:1px solid rgba(230,230,220,.12);
  color:#e6e6dc;opacity:.5;transition:.22s;
}
.row button:hover{opacity:.8}
.row button.on{opacity:1;background:rgba(96,138,124,.3);border-color:rgba(190,220,206,.32)}
.custom-duration-row{align-items:center}
.custom-duration-row input{
  width:88px;height:32px;border:1px solid rgba(230,230,220,.16);border-radius:999px;
  background:rgba(20,32,32,.5);color:#e6e6dc;padding:5px 11px;font:inherit;font-size:12px;
  text-align:center;outline:none;
}
.custom-duration-row input:focus-visible{border-color:rgba(190,220,206,.55);box-shadow:0 0 0 2px rgba(143,210,168,.22)}
.custom-duration-row span{font-size:12px;opacity:.55}
.checkline{display:flex;align-items:flex-start;gap:8px;max-width:330px;font-size:12px;line-height:1.6;text-align:left;opacity:.72}
.checkline input{margin-top:3px;accent-color:#8fd2a8}
.row select,#threshold-capture-authorize{border:1px solid rgba(230,230,220,.14);border-radius:999px;background:rgba(20,32,32,.5);color:#e6e6dc;padding:6px 12px;font:inherit;font-size:12px}
#threshold-capture-authorize{cursor:pointer;opacity:.76}
#threshold-capture-authorize:hover{opacity:1;background:rgba(96,138,124,.3)}
.note{font-size:11.5px;line-height:1.8;letter-spacing:.1em;opacity:.3}

.warn{
  margin-top:22px;font-size:12.5px;letter-spacing:.12em;line-height:1.9;
  color:#f0c79a;opacity:.9;max-width:460px;
}
.tip{margin-top:26px;font-size:11.5px;line-height:1.9;letter-spacing:.1em;opacity:.28;max-width:520px}

/* ── 设备权限引导 ─────────────────────────────── */
.permission-guide{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(4,8,10,.72);backdrop-filter:blur(8px);pointer-events:auto;
}
.permission-guide-card{
  width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid rgba(230,230,220,.14);
  border-radius:22px;background:#101a1b;box-shadow:0 24px 80px rgba(0,0,0,.45);color:#e6e6dc;
}
.permission-guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.permission-guide-kicker{font-size:12px;font-weight:600;letter-spacing:.16em;color:#8fd2a8}
.permission-guide-card h2{margin-top:4px;font-size:21px;font-weight:400;letter-spacing:.04em}
.permission-guide-close{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#aeb9b4;font-size:28px;line-height:1;cursor:pointer}
.permission-guide-close:hover,.permission-guide-close:focus-visible{background:rgba(230,230,220,.1);color:#fff;outline:none}
.permission-guide-description{margin-top:12px;font-size:14px;line-height:1.7;color:#b8c4bf}
.permission-guide-steps{margin-top:16px;padding:12px 16px 12px 36px;border-radius:12px;background:rgba(230,230,220,.06);font-size:13px;line-height:1.75;color:#e6e6dc}
.permission-guide-steps li+li{margin-top:8px}
.permission-guide-footnote{margin-top:12px;font-size:12px;line-height:1.6;color:#92a19b}
.permission-guide-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.permission-guide-actions button{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(230,230,220,.16);background:rgba(230,230,220,.08);color:#e6e6dc;font:inherit;font-size:13px;cursor:pointer}
.permission-guide-actions button:last-child{background:#55c878;border-color:#55c878;color:#07140c;font-weight:600}
.permission-guide-actions button:hover,.permission-guide-actions button:focus-visible{filter:brightness(1.1);outline:2px solid rgba(143,210,168,.75);outline-offset:2px}

/* ── 校准 ───────────────────────────────────────── */
#calib .big{font-size:22px;letter-spacing:.22em;opacity:.8}
#calib .small{margin-top:16px;font-size:12.5px;letter-spacing:.14em;opacity:.4}
#calib .bar{
  margin-top:34px;width:min(280px,60vw);height:2px;border-radius:2px;
  background:rgba(230,230,220,.14);overflow:hidden;
}
#calib .bar i{
  display:block;height:100%;width:100%;
  background:rgba(200,224,206,.75);
  transform:scaleX(0);transform-origin:left center;
}
#calib .count{margin-top:18px;font-size:12px;letter-spacing:.2em;opacity:.34;font-variant-numeric:tabular-nums}

/* ── 结算 ───────────────────────────────────────── */
#end .eyebrow{font-size:11.5px;letter-spacing:.4em;text-indent:.4em;opacity:.36}
#end h2{margin-top:14px;font-size:32px;font-weight:400;letter-spacing:.24em;text-indent:.24em}
#end .stats{margin-top:44px;display:flex;gap:44px;flex-wrap:wrap;justify-content:center}
#end .stats div{display:flex;flex-direction:column;gap:9px;align-items:center;min-width:96px}
#end .stats b{font-size:26px;font-weight:400;font-variant-numeric:tabular-nums;opacity:.9}
#end .stats span{font-size:11px;letter-spacing:.2em;opacity:.36}
#end .note{margin-top:26px;max-width:520px}

/* ── 整场音量曲线 ───────────────────────────────── */
#chart-wrap{margin-top:38px;width:min(880px,88vw)}
.chart-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;padding:0 2px;
}
.chart-title{font-size:12px;letter-spacing:.2em;opacity:.42}
.legend{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.1em;opacity:.34}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-left:8px}
.legend i:first-child{margin-left:0}
.l-quiet{background:rgba(146,186,158,.75)}
.l-loud{background:rgba(230,176,104,.8)}
.l-pause{background:rgba(226,150,88,.85)}
#chart{
  display:block;width:100%;height:184px;
  background:rgba(10,18,20,.34);
  border:1px solid rgba(230,230,220,.08);border-radius:8px;
}
.chart-axis{margin-top:9px;font-size:10.5px;line-height:1.7;letter-spacing:.08em;opacity:.26;text-align:left}

/* 本机抓拍照片只在当前设备展示和导出。 */
#threshold-capture-gallery-toggle{display:block;margin-top:9px;border:1px solid rgba(230,230,220,.14);border-radius:999px;background:rgba(20,32,32,.5);color:#e6e6dc;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer;opacity:.76}
#threshold-capture-gallery-toggle:hover{opacity:1;background:rgba(96,138,124,.3)}
.capture-gallery{position:fixed;right:24px;bottom:24px;z-index:30;width:min(420px,calc(100vw - 32px));max-height:min(52vh,480px);overflow:auto;padding:16px;border:1px solid rgba(230,230,220,.14);border-radius:16px;background:rgba(16,26,27,.96);box-shadow:0 24px 80px rgba(0,0,0,.45);color:#e6e6dc;pointer-events:auto}
.capture-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.capture-gallery-head button,.gallery-actions button,.gallery-actions a{border:1px solid rgba(230,230,220,.16);border-radius:999px;background:rgba(230,230,220,.08);color:#e6e6dc;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;text-decoration:none}
.capture-gallery-head button:hover,.gallery-actions button:hover,.gallery-actions a:hover{background:rgba(96,138,124,.3)}
.capture-gallery-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.gallery-card{overflow:hidden;border:1px solid rgba(230,230,220,.1);border-radius:10px;background:rgba(230,230,220,.05)}
.gallery-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#0a1214}
.gallery-actions{display:flex;align-items:center;gap:6px;padding:8px;font-size:10px;white-space:nowrap}
.gallery-actions span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;opacity:.6}
.gallery-empty{padding:16px 0;font-size:12px;opacity:.6;text-align:center}

/* 抓拍设置入口：高亮按钮 + 弹出卡片 */
.capture-settings-open{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:9px 18px;border:1px solid rgba(85,200,120,.55);border-radius:999px;
  background:rgba(85,200,120,.14);color:#a8e8bd;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.capture-settings-open:hover,.capture-settings-open:focus-visible{background:rgba(85,200,120,.24);border-color:#55c878;transform:translateY(-1px);outline:none}
.capture-settings-open b{margin-left:2px;padding:2px 8px;border-radius:999px;background:rgba(7,20,12,.55);color:#8fd2a8;font-size:11px;font-weight:600}
.capture-settings-open.is-on{border-color:#55c878;background:rgba(85,200,120,.28);color:#eafff0}
.capture-settings-open.is-on b{background:#55c878;color:#07140c}
#m-captures.meta-button{border:1px solid rgba(85,200,120,.35);border-radius:999px;background:rgba(85,200,120,.12);color:#a8e8bd;padding:2px 9px;font:inherit;font-size:inherit;cursor:pointer}
#m-captures.meta-button:hover{background:rgba(85,200,120,.22)}
.capture-settings-card{width:min(480px,92vw)}
.capture-settings-body{display:grid;gap:14px;margin-top:18px}
.capture-settings-body .checkline{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.6;color:#dbe6e0}
.capture-settings-row{display:flex;align-items:center;gap:10px;font-size:14px;color:#dbe6e0}
.capture-settings-row select{flex:1;height:36px;border-radius:10px;border:1px solid rgba(230,230,220,.18);background:rgba(230,230,220,.08);color:#e6e6dc;padding:0 10px;font:inherit;font-size:13px}
.capture-settings-actions{display:flex;flex-wrap:wrap;gap:9px}
.capture-settings-actions button{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(230,230,220,.16);background:rgba(230,230,220,.08);color:#e6e6dc;font:inherit;font-size:13px;cursor:pointer}
.capture-settings-actions button:hover,.capture-settings-actions button:focus-visible{background:rgba(96,138,124,.32);outline:none}
.capture-settings-body .note{font-size:12px;line-height:1.7;color:#92a19b}

.capture-gallery-head-actions{display:flex;gap:7px}
.capture-gallery-note{margin-top:8px;font-size:11px;line-height:1.6;color:#9fb0a9}

.end-captures{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:18px;padding:12px 16px;border:1px solid rgba(85,200,120,.35);border-radius:14px;background:rgba(85,200,120,.1);font-size:13px;color:#cfe8d6}
.end-captures button{height:34px;padding:0 14px;border-radius:999px;border:1px solid #55c878;background:#55c878;color:#07140c;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.end-captures button:hover{filter:brightness(1.08)}

/* 抓拍阈值：跟随系统阈值或自定义分贝 */
.capture-threshold{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid rgba(230,230,220,.12);border-radius:12px;
  background:rgba(20,32,32,.35);padding:12px;
}
.capture-threshold-note{margin:0;font-size:12px;opacity:.65;line-height:1.5}
.capture-threshold-custom{display:flex;align-items:center;gap:10px;font-size:12px}
.capture-threshold-custom input[type="range"]{flex:1;accent-color:#58cc73}
.capture-threshold-custom strong{min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
/* Local study history remains reachable before, during and after a session. */
.study-local-tools { position: fixed; z-index: 25; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); color: #d5ded0; font-size: 13px; }
.study-local-tools button, #study-history button, .study-history-actions label { min-height: 44px; padding: 10px 16px; border: 1px solid #ffffff30; border-radius: 10px; background: #20352b; color: #e8efdf; cursor: pointer; }
#study-history { width: min(780px, calc(100vw - 40px)); max-height: 86vh; margin: auto; overflow: auto; padding: 24px; border: 1px solid #ffffff30; border-radius: 18px; background: #172c24; color: #e8efdf; }
#study-history::backdrop { background: #071911cc; }
#study-history header, .study-history-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.study-history-actions { justify-content: flex-start; flex-wrap: wrap; }
.study-history-actions input { display: block; max-width: 200px; margin-top: 8px; }
#study-history-list { padding: 0; list-style: none; }
#study-history-list li { border-bottom: 1px solid #ffffff20; padding: 16px 0; }
@media (max-width: 700px) { .study-local-tools { font-size: 11px; gap: 6px; } }