:root{
  --bg:#0e1318;
  --panel:rgba(15,20,26,.80);
  --line:rgba(255,180,84,.16);
  --amber:#ffb454;
  --amber-hot:#ffc878;
  --text:#ece5d8;
  --muted:#8f887a;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:"Space Grotesk","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;}
#scene{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab;}
#scene:active{cursor:grabbing;}

.vignette{position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse 95% 85% at 50% 42%, transparent 50%, rgba(0,0,0,.62) 100%);}
.grain{position:fixed; inset:-60%; pointer-events:none; z-index:2; opacity:.045;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation:grain 1.1s steps(4) infinite;}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}}
#flash{position:fixed; inset:0; background:#fff6e8; opacity:0; pointer-events:none; z-index:8; transition:opacity .5s ease-out;}

/* ---------- HUD ---------- */
.hud{position:fixed; z-index:5; pointer-events:none;}
.panel{pointer-events:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 44px rgba(0,0,0,.5);}
.panel-label{font-size:10px; letter-spacing:.28em; color:var(--muted); margin:10px 0 7px; font-family:var(--mono);}
.panel-label:first-child{margin-top:0;}
.mono{font-family:var(--mono);}

.hud-top-left{top:22px; left:26px; pointer-events:none;}
.hud-top-left h1{font-size:27px; font-weight:700; letter-spacing:.12em;}
.hud-top-left .accent{color:var(--amber);}
.hud-top-left .sub{font-size:10px; letter-spacing:.34em; color:var(--muted); margin-top:7px; font-family:var(--mono);}

.hud-top-right{top:22px; right:26px;}
.hud-top-right .panel{width:212px;}

.hud-left{left:26px; top:50%; transform:translateY(-50%);}
.hud-left .panel{padding:14px 12px;}

.btn-row{display:flex; gap:6px;}
.btn-col{display:flex; flex-direction:column; gap:6px;}
.btn{pointer-events:auto; background:rgba(255,180,84,.05); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:7px 10px; font-size:12px; letter-spacing:.1em; cursor:pointer;
  transition:all .16s ease; font-family:inherit; text-align:center; white-space:nowrap;}
.btn:hover{background:rgba(255,180,84,.15); border-color:rgba(255,180,84,.45); color:#fff;}
.btn.on{background:var(--amber); border-color:var(--amber); color:#1d1305; font-weight:700;}

/* ---------- 控件 ---------- */
input[type=range]{width:100%; accent-color:var(--amber); cursor:pointer; height:22px;}
.toggle{display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.12em; color:var(--text);
  cursor:pointer; pointer-events:auto; margin-top:10px; user-select:none;}
.toggle input{display:none;}
.toggle .tk{width:32px; height:17px; border-radius:9px; background:rgba(255,255,255,.12);
  border:1px solid var(--line); position:relative; transition:.18s; flex:0 0 auto;}
.toggle .tk::after{content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%;
  background:#cfc7b8; transition:.18s;}
.toggle input:checked + .tk{background:rgba(255,180,84,.35); border-color:var(--amber);}
.toggle input:checked + .tk::after{left:16px; background:var(--amber);}

/* ---------- 底部时间轴 ---------- */
.hud-bottom{left:50%; transform:translateX(-50%); bottom:16px; width:min(880px, calc(100% - 28px));}
.timeline{pointer-events:auto; display:flex; align-items:center; gap:9px; min-height:92px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px 14px 0 0;
  padding:10px 12px; overflow-x:auto; overflow-y:hidden; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 -10px 34px rgba(0,0,0,.4); scrollbar-width:thin; scrollbar-color:rgba(255,180,84,.3) transparent;}
.timeline::-webkit-scrollbar{height:5px;}
.timeline::-webkit-scrollbar-thumb{background:rgba(255,180,84,.3); border-radius:3px;}
.timeline::before,.timeline::after{content:""; flex:0 0 auto; width:7px; height:44px; border-radius:3px;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.55) 0 5px, rgba(255,180,84,.18) 5px 9px); opacity:.7;}
.tl-empty{color:var(--muted); font-size:12px; letter-spacing:.08em; padding:0 18px; white-space:nowrap;}
kbd{font-family:var(--mono); font-size:10px; border:1px solid rgba(255,255,255,.22); border-bottom-width:2px;
  border-radius:4px; padding:1px 5px; color:var(--amber); background:rgba(255,255,255,.05);}

.frame{position:relative; flex:0 0 auto; border:2px solid rgba(255,180,84,.14); border-radius:8px;
  overflow:hidden; cursor:pointer; transition:transform .16s, border-color .16s, box-shadow .16s; background:#000;}
.frame:hover{transform:translateY(-4px); border-color:rgba(255,180,84,.55);}
.frame.active{border-color:var(--amber); box-shadow:0 0 16px rgba(255,180,84,.4);}
.frame canvas{display:block; width:78px; height:58px;}
.frame .fnum{position:absolute; left:4px; bottom:3px; font-family:var(--mono); font-size:9px; color:var(--amber);
  text-shadow:0 1px 2px #000; pointer-events:none;}
.fdel{position:absolute; top:3px; right:3px; width:17px; height:17px; border:none; border-radius:5px;
  background:rgba(10,10,10,.72); color:#ffb0a0; font-size:10px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .15s; pointer-events:auto;}
.frame:hover .fdel{opacity:1;}
.fdel:hover{background:#a33;}

.transport{pointer-events:auto; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-top:none; border-radius:0 0 14px 14px;
  padding:10px 12px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.tbtn{pointer-events:auto; display:inline-flex; align-items:center; gap:7px; background:rgba(255,180,84,.06);
  border:1px solid var(--line); color:var(--text); border-radius:10px; padding:9px 14px; font-size:12.5px;
  letter-spacing:.08em; cursor:pointer; transition:all .16s; font-family:inherit; white-space:nowrap;}
.tbtn:hover{background:rgba(255,180,84,.16); border-color:rgba(255,180,84,.45); color:#fff;}
.tbtn.shoot{background:var(--amber); border-color:var(--amber); color:#1d1305; font-weight:700;}
.tbtn.shoot:hover{background:var(--amber-hot); box-shadow:0 0 20px rgba(255,180,84,.45);}
.tbtn.shoot .dot{width:9px; height:9px; border-radius:50%; background:#b3541e; transition:.15s;}
.tbtn.shoot.busy .dot{background:#5c1f0a;}
.counter{margin-left:auto; font-size:11px; letter-spacing:.14em; color:var(--amber);
  padding:6px 10px; border:1px dashed rgba(255,180,84,.25); border-radius:8px; white-space:nowrap;}
.counter.bump{animation:bump .3s ease;}
@keyframes bump{40%{transform:scale(1.12); color:#fff;}}

.hint{right:26px; bottom:16px; font-size:11px; letter-spacing:.1em; color:var(--muted);
  background:rgba(15,20,26,.55); padding:7px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.06);}

.toast{position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(8px); z-index:9;
  background:var(--panel); border:1px solid var(--line); color:var(--text); font-size:12.5px; letter-spacing:.08em;
  padding:10px 18px; border-radius:11px; opacity:0; pointer-events:none; transition:all .25s ease;
  backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,.5);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- 加载层 ---------- */
#loader{position:fixed; inset:0; z-index:50; background:var(--bg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; transition:opacity .7s ease;}
#loader.hidden{opacity:0; pointer-events:none;}
#loader p{font-size:11px; letter-spacing:.4em; color:var(--muted); font-family:var(--mono);}
.reel{width:64px; height:64px; border-radius:50%; border:3px dashed rgba(255,180,84,.5);
  animation:spin 1.4s linear infinite; position:relative;}
.reel span{position:absolute; inset:20px; border-radius:50%; background:var(--amber); opacity:.85;}
@keyframes spin{to{transform:rotate(360deg);}}

@media (max-width: 920px){
  .hud-top-left h1{font-size:20px;}
  .hud-top-right .panel{width:172px; padding:10px 12px;}
  .hud-left{top:auto; bottom:196px; transform:none; left:14px;}
  .hud-left .btn-col{flex-direction:row; flex-wrap:wrap; max-width:190px;}
  .hint{display:none;}
  .hud-bottom{bottom:10px;}
  .frame canvas{width:62px; height:46px;}
  .tbtn{padding:8px 10px; font-size:11.5px;}
}