:root{
  --bg:#0A0506;
  --bg-2:#0D0708;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.012);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.055);
  --line-strong:rgba(255,255,255,.15);
  --grid:rgba(255,255,255,.026);
  --accent:#E3242B;
  --accent-2:#FF4D4D;
  --accent-deep:#B0161D;
  --accent-glow:rgba(227,36,43,.55);
  --tick-off:rgba(255,255,255,.13);
  --accent-soft:rgba(227,36,43,.12);
  --txt:#B8BDC4;
  --dim:#6E6A6C;
  --white:#F5F2F0;
  --radius:14px;
  --mono:"SF Mono","Roboto Mono",Menlo,Consolas,"Courier New",monospace;
}
html[data-theme="rei"]{
  --bg:#F4F6F8;
  --bg-2:#EEF1F4;
  --panel:rgba(255,255,255,.72);
  --panel-2:rgba(255,255,255,.4);
  --line:rgba(58,110,140,.18);
  --line-2:rgba(58,110,140,.12);
  --line-strong:rgba(58,110,140,.32);
  --grid:rgba(70,120,150,.07);
  --accent:#2E7E9E;
  --accent-2:#4FA3C2;
  --accent-deep:#1F5F78;
  --accent-glow:rgba(46,126,158,.45);
  --tick-off:rgba(58,110,140,.20);
  --accent-soft:rgba(46,126,158,.10);
  --txt:#4A5962;
  --dim:#8FA3AD;
  --white:#20444F;
  --radius:14px;
  --mono:"SF Mono","Roboto Mono",Menlo,Consolas,"Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{background:var(--bg);}
html,body{color:var(--txt);}
body{
  min-height:100dvh;
  overflow-x:hidden;
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .45s, color .45s;
}
::selection{background:rgba(227,36,43,.32);color:#fff;}
html[data-theme="rei"] ::selection{background:rgba(46,126,158,.28);color:#fff;}

/* ===== EVA 背景：警戒光 + 斜纹带 + 细网格 + 颗粒 ===== */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 72% at 50% -22%, var(--accent-soft) 0%, transparent 66%),
    radial-gradient(80% 60% at 100% 108%, rgba(120,150,255,.05), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 45%, var(--bg-2) 100%);
  transition:background .45s;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 92% 72% at 50% 6%, #000 0%, rgba(0,0,0,.28) 58%, transparent 86%);
  mask-image:radial-gradient(ellipse 92% 72% at 50% 6%, #000 0%, rgba(0,0,0,.28) 58%, transparent 86%);
}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-repeat:repeat;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* 顶部警戒斜纹条（EVA 蜂巢警示带） */
.hazard{
  position:fixed;top:0;left:0;right:0;height:5px;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(-45deg,
    var(--accent) 0 12px, var(--bg) 12px 24px);
  opacity:.85;
}
html[data-theme="rei"] .hazard{
  background:repeating-linear-gradient(-45deg,
    var(--accent) 0 12px, #E8EDF1 12px 24px);
  opacity:.55;
}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.wrap{
  position:relative;z-index:1;
  max-width:428px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding:29px 20px calc(22px + env(safe-area-inset-bottom));
}

/* 左右机体编号侧标（EVA UNIT 风格竖排字） */
.side-label{
  position:fixed;top:88px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.42em;
  writing-mode:vertical-rl;color:var(--dim);opacity:.5;
  transition:color .45s;
}
.side-label.l{left:10px;}
.side-label.r{right:10px;}
.side-label b{color:var(--accent);opacity:.9;font-weight:400;}
@media (max-width:560px){.side-label{display:none;}}

/* ---------- 头部 ---------- */
header{
  display:flex;align-items:center;gap:12px;
  padding:2px 0 18px;margin-bottom:22px;
  border-bottom:1px solid var(--line-2);
  position:relative;
}
header .mark{
  width:9px;height:9px;background:var(--accent);transform:rotate(45deg);border-radius:2px;
  box-shadow:0 0 0 3px var(--accent-soft), 0 0 20px var(--accent-glow);
}
header h1{font-size:16px;color:var(--white);font-weight:600;letter-spacing:.18em;text-indent:.18em;}
header .en{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:var(--dim);}

/* 主题切换（第1/2适格者） */
.theme-btn{
  background:none;border:1px solid var(--line);border-radius:9px;
  color:var(--dim);font-family:var(--mono);font-size:8px;letter-spacing:.18em;
  padding:6px 9px 5px;cursor:pointer;line-height:1.4;text-align:center;
  transition:border-color .25s, color .25s, box-shadow .25s, background .25s;
  flex-shrink:0;
}
.theme-btn:hover{border-color:var(--accent);color:var(--accent-2);box-shadow:0 0 14px -4px var(--accent-glow);}
.theme-btn b{display:block;font-size:10px;font-weight:700;color:var(--white);letter-spacing:.12em;}
html[data-theme="asuka"] .theme-btn:hover b{color:var(--accent-2);}
html[data-theme="rei"] .theme-btn b{color:var(--accent);}

/* ---------- 屏幕切换 ---------- */
.screen{display:none;flex:1;flex-direction:column;}
.screen.active{display:flex;animation:screenIn .5s cubic-bezier(.22,1,.36,1) both;}
@keyframes screenIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- 项目铁牌（切角面板） ---------- */
.plates{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.plate{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 14px;cursor:pointer;user-select:none;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .25s, background .25s, transform .15s, box-shadow .25s;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(95% 120% at 100% 0%, var(--accent-soft), transparent 62%);
  transition:opacity .3s;
}
.plate::before{
  content:"";position:absolute;top:11px;right:11px;width:9px;height:9px;
  border-top:1px solid transparent;border-right:1px solid transparent;
  transition:border-color .25s;
  z-index:1;
}
.plate.sel::before{border-color:var(--accent-2);}
.plate:hover{border-color:var(--line-strong);}
.plate:active{transform:scale(.985);}
.plate .no{font-size:10px;color:var(--dim);letter-spacing:.16em;transition:color .25s;}
.plate .zh{margin-top:8px;font-size:18px;color:var(--txt);font-weight:600;letter-spacing:.05em;transition:color .25s;}
.plate .pen{font-size:8.5px;letter-spacing:.22em;color:var(--dim);margin-top:5px;transition:color .25s;}
.plate.sel{
  border-color:var(--accent);
  background:linear-gradient(160deg, var(--accent-soft), var(--panel-2) 72%);
  box-shadow:
    0 0 0 1px rgba(227,36,43,.10),
    0 14px 34px -16px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="rei"] .plate.sel{
  box-shadow:
    0 0 0 1px rgba(46,126,158,.10),
    0 14px 34px -16px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.plate.sel::after{opacity:1;}
.plate.sel .no{color:var(--accent-2);}
.plate.sel .zh{color:var(--white);}
.plate.sel .pen{color:var(--accent-2);}

/* ---------- 模式切换 ---------- */
.mode{
  display:flex;gap:4px;margin-top:16px;padding:4px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2);
}
.mode button{
  flex:1;background:none;border:0;border-radius:9px;color:var(--dim);
  font-size:12px;padding:10px 0;letter-spacing:.28em;text-indent:.28em;
  cursor:pointer;font-family:inherit;
  transition:color .2s, background .2s, box-shadow .2s;
}
.mode button:hover{color:var(--txt);}
.mode button.sel{
  background:linear-gradient(180deg, var(--accent-soft), transparent);
  color:var(--accent-2);font-weight:700;
  box-shadow:
    inset 0 0 0 1px var(--accent),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px -16px var(--accent-glow);
}

/* ---------- 默认说明 / 自定义输入 ---------- */
.spec{
  margin-top:16px;border:1px solid var(--line-2);border-radius:var(--radius);
  padding:18px 16px;font-size:12px;color:var(--dim);
  letter-spacing:.08em;text-align:center;line-height:1.6;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.spec b{
  color:var(--white);font-family:var(--mono);font-weight:600;
  font-size:18px;letter-spacing:0;margin:0 3px;vertical-align:-1px;
}
.fields{margin-top:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.field label{
  display:block;font-size:9px;color:var(--dim);letter-spacing:.16em;
  margin-bottom:8px;text-align:center;
}
.field input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  color:var(--white);font-size:18px;padding:12px 4px;text-align:center;outline:none;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus{
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-soft), 0 0 26px -8px var(--accent-glow);
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}

#plankBox .field input{font-size:22px;padding:13px 4px;}

.presets{display:flex;gap:8px;margin-top:10px;}
.chip{
  flex:1;border:1px solid var(--line);border-radius:10px;padding:11px 0;
  text-align:center;color:var(--txt);font-size:12px;letter-spacing:.06em;
  cursor:pointer;user-select:none;background:var(--panel-2);
  transition:border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.chip:hover{border-color:var(--line-strong);color:var(--white);}
.chip.sel{
  border-color:var(--accent);color:var(--accent-2);
  background:var(--accent-soft);
  box-shadow:inset 0 0 18px var(--accent-soft), 0 8px 20px -14px var(--accent-glow);
}

/* ---------- 主按钮（警戒条纹按钮） ---------- */
.grow{flex:1;}
.btn-start{
  width:100%;border:0;border-radius:12px;margin-top:18px;
  background:linear-gradient(135deg,var(--accent-2),var(--accent) 58%,var(--accent-deep));
  color:#FFF;font-size:14px;font-weight:800;letter-spacing:.5em;text-indent:.5em;
  padding:18px 0;cursor:pointer;
  box-shadow:
    0 14px 34px -18px var(--accent-glow),
    0 2px 10px -6px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.3);
  transition:transform .15s, filter .2s, box-shadow .2s;
  position:relative;overflow:hidden;
}
.btn-start::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(-45deg,
    rgba(255,255,255,.85) 0 8px, transparent 8px 16px);
  opacity:.5;
}
.btn-start:hover{filter:brightness(1.08);box-shadow:0 18px 40px -18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);}
.btn-start:active{transform:translateY(1px) scale(.995);filter:brightness(.95);}

/* ---------- 训练中（HUD 准星） ---------- */
.run-top{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:10px;color:var(--dim);letter-spacing:.14em;
  padding:2px 2px 0;font-family:var(--mono);
}
#runTopL::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:9px;vertical-align:1px;
  box-shadow:0 0 10px var(--accent-glow);
  animation:blink 1.6s steps(1) infinite;
}
@keyframes blink{0%,70%{opacity:1}85%{opacity:.25}100%{opacity:1}}
.run-center{
  position:relative;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
}
.run-center::before{
  content:"";position:absolute;left:50%;top:calc(50% - 20px);transform:translate(-50%,-50%);
  width:min(76vw,300px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);
  box-shadow:inset 0 0 80px var(--accent-soft);
}
.run-center::after{
  content:"";position:absolute;left:50%;top:calc(50% - 20px);transform:translate(-50%,-50%);
  width:min(88vw,356px);aspect-ratio:1;border-radius:50%;
  border:1px dashed var(--line-2);
  animation:spin 60s linear infinite;
}
/* HUD 四角括号 + 十字准星 */
.run-center .hud{
  position:absolute;left:50%;top:calc(50% - 20px);transform:translate(-50%,-50%);
  width:min(88vw,356px);aspect-ratio:1;pointer-events:none;
}
.hud i{position:absolute;width:16px;height:16px;border:1.5px solid var(--accent);opacity:.45;}
.hud i:nth-child(1){top:7%;left:7%;border-right:0;border-bottom:0;}
.hud i:nth-child(2){top:7%;right:7%;border-left:0;border-bottom:0;}
.hud i:nth-child(3){bottom:7%;left:7%;border-right:0;border-top:0;}
.hud i:nth-child(4){bottom:7%;right:7%;border-left:0;border-top:0;}
.hud::before,.hud::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--accent);opacity:.3;
}
.hud::before{width:1px;height:22px;transform:translate(-50%,-50%);}
.hud::after{width:22px;height:1px;transform:translate(-50%,-50%);}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.run-center > *{position:relative;z-index:1;}
.big{
  font-size:clamp(88px,28vw,128px);line-height:1;font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;padding:.06em 0 .04em;
  background:linear-gradient(180deg,var(--white) 0%,var(--white) 52%,var(--dim) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,255,255,.07));
  transition:filter .25s;
}
.big.warn{
  background:linear-gradient(180deg,#FF9E9E 0%,var(--accent) 72%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 32px var(--accent-glow));
}
html[data-theme="rei"] .big.warn{
  background:linear-gradient(180deg,#BFE3F2 0%,var(--accent) 90%);
  filter:drop-shadow(0 0 32px var(--accent-glow));
}
.big .den{
  font-size:.22em;color:var(--dim);-webkit-text-fill-color:var(--dim);
  font-weight:400;margin-left:.08em;letter-spacing:.02em;
}
@keyframes pulse{0%{transform:scale(1)}35%{transform:scale(1.035)}100%{transform:scale(1)}}
.big.pulse{animation:pulse .2s ease-out;}
.phase{
  color:var(--accent-2);font-size:13px;letter-spacing:.34em;text-indent:.34em;
  min-height:22px;font-weight:600;text-shadow:0 0 22px var(--accent-glow);
}
.phase i{font-style:normal;color:var(--dim);font-size:9px;letter-spacing:.24em;font-weight:400;}
.ticks{display:flex;gap:5px;width:80%;margin-top:30px;}
.tick{
  flex:1;height:5px;border-radius:2px;background:var(--tick-off);
  transition:background .2s, box-shadow .2s;
}
.tick.on{
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  box-shadow:0 0 10px var(--accent-glow);
}
html[data-theme="rei"] .tick.on{
  background:linear-gradient(90deg,var(--accent-2),var(--accent-deep));
  box-shadow:none;
}

/* ---------- 放弃 ---------- */
.run-bottom{padding-top:8px;min-height:78px;display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.abandon{
  background:none;border:0;color:var(--dim);font-size:10px;
  letter-spacing:.4em;text-indent:.4em;padding:11px 0;cursor:pointer;width:100%;
  font-family:var(--mono);transition:color .2s;
}
.abandon:hover{color:var(--accent-2);}
.confirm{
  display:none;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  align-items:stretch;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow:0 20px 44px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}
.confirm.show{display:flex;animation:screenIn .3s cubic-bezier(.22,1,.36,1) both;}
.confirm span{
  flex:1;padding:14px;font-size:12px;color:var(--txt);letter-spacing:.06em;
  display:flex;align-items:center;
}
.confirm button{
  background:none;border:0;border-left:1px solid var(--line);color:var(--txt);
  padding:14px 16px;font-size:12px;letter-spacing:.2em;cursor:pointer;
  font-family:inherit;transition:background .2s, color .2s;
}
.confirm button:hover{background:rgba(255,255,255,.04);color:var(--white);}
.confirm button.danger{color:var(--accent-2);}
.confirm button.danger:hover{background:var(--accent-soft);}

/* ---------- 完成 ---------- */
#done{align-items:center;justify-content:center;}
.done-mark{
  width:11px;height:11px;background:var(--accent);transform:rotate(45deg);
  border-radius:2px;margin-bottom:32px;
  box-shadow:0 0 0 4px var(--accent-soft), 0 0 28px var(--accent-glow);
}
.done-title{
  font-size:36px;color:var(--white);letter-spacing:.4em;text-indent:.4em;
  font-weight:700;text-shadow:0 0 44px rgba(255,255,255,.09);
}
.done-sub{
  margin-top:14px;font-size:12px;color:var(--dim);letter-spacing:.16em;
  text-align:center;font-variant-numeric:tabular-nums;
}
.done-actions{margin-top:54px;display:flex;width:100%;gap:10px;}
.btn-again{
  flex:1.2;border:0;border-radius:12px;color:#FFF;font-size:13px;
  font-weight:700;letter-spacing:.24em;text-indent:.24em;padding:15px 0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent-2),var(--accent) 58%,var(--accent-deep));
  box-shadow:
    0 14px 32px -18px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .15s, filter .2s, box-shadow .2s;
}
.btn-again:hover{filter:brightness(1.08);}
.btn-again:active{transform:translateY(1px) scale(.995);filter:brightness(.95);}
.btn-back{
  flex:1;border:1px solid var(--line);border-radius:12px;color:var(--txt);background:var(--panel-2);
  font-size:13px;letter-spacing:.24em;text-indent:.24em;padding:15px 0;cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.btn-back:hover{background:var(--panel);border-color:var(--line-strong);color:var(--white);}
.btn-back:active{background:rgba(255,255,255,.07);}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.field input:focus-visible{outline:none;}

@media (max-width:360px){
  .plate{padding:14px 13px 12px;}
  .plate .zh{font-size:16px;}
  .btn-start{letter-spacing:.4em;text-indent:.4em;}
  .done-title{font-size:32px;}
}
@media (min-width:640px){
  .wrap{
    border-left:1px solid var(--line-2);
    border-right:1px solid var(--line-2);
    background:linear-gradient(180deg, var(--panel-2), transparent 34%);
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}