/* Vector Surge (光矢) — style.css : 示波器向量 CRT 介面 */
:root{
  --bg:#0A0C10; --panel:#0e131a; --panel2:#131b24;
  --cool:#4DE1FF; --warm:#FF5A47; --crystal:#FFD447; --energy:#B98CFF;
  --text:#D8E6F0; --dim:#7f93a3; --line:#22303c; --heal:#8AFFC1;
  --font: "Space Grotesk","Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; background:var(--bg); color:var(--text); font-family:var(--font);
  overflow:hidden; -webkit-user-select:none; user-select:none; touch-action:none; overscroll-behavior:none; }
.num, .score-num, .hud-timer, .results-total span, .countdown, .bartext, #hud-score, #hud-level{
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
.hidden{ display:none !important; }

#app{ position:fixed; inset:0; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; background:var(--bg); }

/* ---- HUD ---- */
#hud{ position:absolute; inset:0; pointer-events:none; }
.hud-top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start;
  justify-content:space-between; padding:12px 16px; gap:16px; }
.hud-timer{ font-size:28px; font-weight:700; letter-spacing:1px; color:var(--text);
  text-shadow:0 0 12px rgba(77,225,255,.4); }
.hud-mid{ flex:1; max-width:420px; display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.bar{ position:relative; height:16px; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.03); }
.bar .fill{ position:absolute; inset:0; width:100%; transform-origin:left; transition:width .12s linear; }
.bar.hp .fill{ background:linear-gradient(90deg,#FF5A47,#FF9640); box-shadow:0 0 12px rgba(255,90,71,.5); }
.bar.energy{ height:10px; }
.bar.energy .fill{ background:linear-gradient(90deg,#7a5cff,#B98CFF); box-shadow:0 0 10px rgba(185,140,255,.5); }
.bartext{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#eaf3fa; text-shadow:0 1px 2px #000; letter-spacing:.5px; }
.hud-score{ text-align:right; }
.score-num{ font-size:26px; font-weight:700; color:var(--crystal); text-shadow:0 0 12px rgba(255,212,71,.4); }
.score-lbl{ font-size:11px; color:var(--dim); }
.hud-combo{ position:absolute; top:74px; left:50%; transform:translateX(-50%); font-size:34px;
  font-weight:700; color:var(--energy); text-shadow:0 0 16px rgba(185,140,255,.6); }
.hud-level{ position:absolute; left:16px; bottom:16px; font-size:14px; color:var(--dim); }
.xpbar{ width:180px; height:6px; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-top:4px; }
.xpbar .fill{ height:100%; background:var(--cool); box-shadow:0 0 8px rgba(77,225,255,.6); transition:width .1s linear; }
.tip{ position:absolute; bottom:70px; left:50%; transform:translateX(-50%); max-width:80%;
  padding:10px 18px; border:1px solid var(--cool); border-radius:10px; background:rgba(10,16,22,.85);
  color:var(--text); font-size:15px; text-align:center; box-shadow:0 0 20px rgba(77,225,255,.2); }
.icon-btn{ position:absolute; top:12px; right:130px; width:40px; height:40px; pointer-events:auto;
  border:1px solid var(--line); border-radius:8px; background:rgba(14,19,26,.8); color:var(--text);
  font-size:14px; cursor:pointer; }
.icon-btn:hover{ border-color:var(--cool); }

/* ---- Screens ---- */
.screen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,11,.82); backdrop-filter:blur(3px); z-index:10; }
.screen.overlay-clear{ background:transparent; backdrop-filter:none; pointer-events:none; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 32px;
  width:min(560px,92vw); max-height:92vh; overflow:auto; box-shadow:0 0 40px rgba(0,0,0,.6); }
.panel.narrow{ width:min(400px,92vw); text-align:center; }
.panel h2{ font-size:24px; margin-bottom:18px; letter-spacing:1px; }

/* menu */
.menu-inner{ text-align:center; padding:24px; }
.title{ font-size:clamp(44px,9vw,88px); font-weight:700; letter-spacing:4px; line-height:1;
  color:var(--cool); text-shadow:0 0 30px rgba(77,225,255,.5),0 0 60px rgba(77,225,255,.25); }
.subtitle{ font-size:16px; color:var(--dim); letter-spacing:6px; margin-top:10px; }
.menu-best{ margin:18px 0 4px; color:var(--crystal); font-size:15px; min-height:20px; }
.menu-buttons{ display:flex; flex-direction:column; gap:12px; width:min(320px,80vw); margin:22px auto 0; }
.menu-char{ margin-top:18px; color:var(--dim); font-size:14px; }
.menu-continue{ margin-top:14px; }

.btn{ pointer-events:auto; border:1px solid var(--line); background:var(--panel2); color:var(--text);
  padding:13px 22px; font-size:16px; font-family:var(--font); border-radius:10px; cursor:pointer;
  letter-spacing:1px; transition:.12s; }
.btn:hover{ border-color:var(--cool); box-shadow:0 0 16px rgba(77,225,255,.2); color:#eaf9ff; }
.btn.primary{ border-color:var(--cool); color:var(--cool); background:rgba(77,225,255,.08); }
.btn.primary:hover{ background:rgba(77,225,255,.16); }
.btn.danger{ border-color:var(--warm); color:var(--warm); }
.btn.danger:hover{ box-shadow:0 0 16px rgba(255,90,71,.25); }

/* settings */
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.setting-row label{ font-size:15px; }
.setting-row select, .setting-row input[type=range]{ font-family:var(--font); }
.setting-note{ font-size:12px; color:var(--dim); margin:8px 0; }
.setting-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.toggle{ width:44px; height:24px; -webkit-appearance:none; appearance:none; background:var(--panel2);
  border:1px solid var(--line); border-radius:12px; position:relative; cursor:pointer; outline:none; }
.toggle:checked{ background:rgba(77,225,255,.25); border-color:var(--cool); }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--dim); transition:.15s; }
.toggle:checked::after{ transform:translateX(20px); background:var(--cool); }
input[type=range]{ accent-color:var(--cool); }
select{ background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px 10px; }

/* help */
.help-body{ font-size:14px; line-height:1.7; color:var(--text); }
.help-body p{ margin-bottom:10px; }
.help-body hr{ border:none; border-top:1px solid var(--line); margin:12px 0; }
.help-body .graze-tip{ color:var(--energy); }
kbd{ background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 7px;
  font-family:var(--font); font-size:13px; color:var(--cool); }

/* characters */
.char-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.char-card{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; transition:.12s; }
.char-card:hover{ border-color:var(--cool); }
.char-card.selected{ border-color:var(--cool); background:rgba(77,225,255,.08); }
.char-card.locked{ opacity:.55; cursor:not-allowed; }
.char-name{ font-size:18px; font-weight:700; }
.char-desc{ font-size:13px; color:var(--dim); margin-top:4px; }
.char-lock{ font-size:12px; color:var(--warm); margin-top:4px; }

/* upgrade */
.upgrade-inner{ text-align:center; width:min(880px,96vw); }
.upgrade-title{ font-size:26px; margin-bottom:20px; color:var(--cool); letter-spacing:2px;
  text-shadow:0 0 20px rgba(77,225,255,.4); }
.upgrade-cards{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.card{ pointer-events:auto; width:min(240px,86vw); background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:18px; cursor:pointer; transition:.14s; display:flex; flex-direction:column;
  align-items:center; gap:10px; }
.card:hover{ border-color:var(--cool); transform:translateY(-4px); box-shadow:0 8px 30px rgba(77,225,255,.18); }
.card.evolution{ border-color:var(--energy); box-shadow:0 0 24px rgba(185,140,255,.3); }
.card.evolution:hover{ box-shadow:0 0 34px rgba(185,140,255,.5); }
.card.banish-target:hover{ border-color:var(--warm); box-shadow:0 0 24px rgba(255,90,71,.3); }
.card-icon{ width:88px; height:88px; }
.card-kind{ font-size:11px; letter-spacing:2px; color:var(--dim); }
.card-name{ font-size:18px; font-weight:700; }
.card-level{ font-size:12px; color:var(--crystal); }
.card-desc{ font-size:12px; color:var(--dim); line-height:1.5; min-height:34px; }
.upgrade-actions{ margin-top:22px; display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }
.banish-hint{ color:var(--warm); font-size:13px; }

/* countdown */
.countdown{ font-size:140px; font-weight:700; color:var(--cool); text-shadow:0 0 50px rgba(77,225,255,.6); }

/* results */
.results-total{ text-align:center; font-size:20px; margin-bottom:16px; }
.results-total span{ font-size:34px; font-weight:700; color:var(--crystal);
  text-shadow:0 0 20px rgba(255,212,71,.4); display:block; margin-top:4px; }
.results-breakdown{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; font-size:14px; margin-bottom:14px; }
.results-breakdown .rb{ display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.05); padding:4px 0; }
.results-breakdown .rb b{ color:var(--cool); font-variant-numeric:tabular-nums; }
#results-chart{ width:100%; max-width:360px; display:block; margin:0 auto 16px; }
.warn-body{ font-size:14px; line-height:1.7; color:var(--text); margin-bottom:18px; }
.panel.narrow .btn{ width:100%; margin-top:10px; }

/* 每日榜 / 線上排行 */
.board-date{ font-size:13px; color:var(--dim); font-weight:400; letter-spacing:0; margin-left:8px; }
.board-status{ font-size:13px; color:var(--dim); text-align:center; padding:10px 0; min-height:18px; }
.board-status.warn{ color:var(--warm); }
.board-list{ display:flex; flex-direction:column; gap:4px; margin:6px 0 4px; max-height:44vh; overflow:auto; }
.board-row{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.05);
  font-size:14px; border-radius:6px; }
.board-row .rank{ width:26px; color:var(--dim); font-variant-numeric:tabular-nums; }
.board-row .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-row .score{ color:var(--crystal); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; font-weight:700; }
.board-row.me{ border:1px solid var(--cool); background:rgba(77,225,255,.08); box-shadow:0 0 12px rgba(77,225,255,.15); }

.daily-upload{ margin:4px 0 16px; }
.daily-upload hr{ border:none; border-top:1px solid var(--line); margin:0 0 14px; }
.daily-upload-row{ display:flex; gap:10px; }
.nick-input{ flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:8px; color:var(--text);
  font-family:var(--font); font-size:14px; padding:10px 12px; }
.nick-input:focus{ outline:none; border-color:var(--cool); }

/* joystick */
.joystick{ position:absolute; width:120px; height:120px; border:2px solid rgba(77,225,255,.4);
  border-radius:50%; pointer-events:none; z-index:5; transform:translate(-50%,-50%); }
.joystick .knob{ position:absolute; width:52px; height:52px; border-radius:50%; left:50%; top:50%;
  transform:translate(-50%,-50%); background:rgba(77,225,255,.25); border:2px solid var(--cool); }

@media (max-width:640px){
  .hud-timer{ font-size:22px; } .score-num{ font-size:20px; }
  .hud-mid{ max-width:200px; } .icon-btn{ right:12px; }
}