:root{
  --bg:#0b0d10; --panel:#15181d; --panel2:#1c2027; --line:#2a2f38;
  --red:#e5484d; --green:#3fd68a; --yellow:#f2c94c; --blue:#4f8ef7;
  --white:#eef1f5; --text:#e7eaee; --muted:#8b93a1;
}
*{box-sizing:border-box;}
html{background:#0b0d10;}
body{
  margin:0;
  background:#0b0d10 radial-gradient(circle at 50% -10%, #1a1f27 0%, #0b0d10 60%) no-repeat fixed;
  color:var(--text); font-family:'Segoe UI','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  min-height:100vh; padding:20px;
}
h1{text-align:center; letter-spacing:2px; margin:0 0 6px; font-size:26px;}
h1 span{color:var(--red);}
h1 small{color:var(--muted); font-size:12px; letter-spacing:1px;}
.tagline{text-align:center; color:var(--muted); margin:0 0 20px; font-size:13px;}

.topbar{
  max-width:1000px; margin:0 auto 16px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:14px 18px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.field{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted); letter-spacing:1px;}
.field select{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font-size:13px;
}
.status{display:flex; gap:22px; align-items:center;}
.stat{display:flex; flex-direction:column; gap:4px; align-items:center;}
.stat-label{font-size:10px; color:var(--muted); letter-spacing:1px;}
.timer{
  font-family:'Consolas','Courier New',monospace; font-size:30px; color:var(--green);
  background:#000; padding:2px 14px; border-radius:6px; border:1px solid var(--line); min-width:150px; text-align:center;
}
.timer.warn{color:#ff8a3d;}
.timer.crit{color:var(--red); animation:blink .6s infinite;}
@keyframes blink{50%{opacity:.3;}}
.progress{font-size:14px; font-family:monospace;}
.strikes{display:flex; gap:6px;}
.strike-dot{width:15px; height:15px; border-radius:50%; border:2px solid var(--line);}
.strike-dot.on{background:var(--red); border-color:var(--red); box-shadow:0 0 8px var(--red);}

.buttons{display:flex; gap:8px; flex-wrap:wrap;}
.btn{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  padding:9px 15px; border-radius:8px; cursor:pointer; font-size:13px; transition:transform .1s,border-color .2s;
}
.btn:hover{border-color:#4a5261;}
.btn:active{transform:scale(.96);}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff; font-weight:600;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

.edgework{
  max-width:1000px; margin:0 auto 18px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.ew-widget{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 14px;
  display:flex; flex-direction:column; gap:4px; min-width:150px;
}
.ew-label{font-size:10px; color:var(--muted); letter-spacing:1px;}
.ew-value{font-size:13px;}
.ew-serial{font-family:'Consolas',monospace; font-size:18px; letter-spacing:3px; background:#000; padding:2px 8px; border-radius:4px;}
.ew-ind{
  display:inline-block; font-size:10px; padding:2px 6px; margin:1px; border-radius:3px;
  background:#2a2f38; color:#666; border:1px solid #333; letter-spacing:1px;
}
.ew-ind.lit{background:#e9ecef; color:#111; border-color:#fff;}
.ew-port{
  display:inline-block; font-size:10px; padding:2px 6px; margin:1px; border-radius:3px;
  background:#242a33; color:#9fb0c3; border:1px solid #3a4350;
}
.ew-none{color:#555; font-size:12px;}

.modules{
  max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
}
.modules.idle{opacity:.45; pointer-events:none; filter:grayscale(.4);}
.module{
  background:var(--panel); border:2px solid var(--line); border-radius:16px;
  padding:20px; width:430px; position:relative; min-height:230px;
}
.module h2{margin:0 0 16px; font-size:13px; color:var(--muted); letter-spacing:1px; text-transform:uppercase;}
.module:has(.done):not(:has(*:not(.done)))::after{}

/* Wires */
.wire-row{display:flex; align-items:center; margin-bottom:12px; cursor:pointer; user-select:none;}
.wire-row.locked{cursor:default;}
.plug{width:13px; height:13px; border-radius:50%; background:#555; border:1px solid #333; flex-shrink:0;}
.wire-line{flex:1; height:10px; margin:0 -1px; border-radius:3px;}
.wire-line.cut{background:transparent!important; display:flex; justify-content:space-between;}
.wire-line.cut::before,.wire-line.cut::after{content:''; display:block; width:44%; height:10px; border-radius:3px; background:inherit;}
.wc-red{background:var(--red);} .wc-blue{background:var(--blue);} .wc-yellow{background:var(--yellow);}
.wc-white{background:var(--white);} .wc-black{background:#3a3f47;}
.wire-line.cut.wc-red::before,.wire-line.cut.wc-red::after{background:var(--red);}
.wire-line.cut.wc-blue::before,.wire-line.cut.wc-blue::after{background:var(--blue);}
.wire-line.cut.wc-yellow::before,.wire-line.cut.wc-yellow::after{background:var(--yellow);}
.wire-line.cut.wc-white::before,.wire-line.cut.wc-white::after{background:var(--white);}
.wire-line.cut.wc-black::before,.wire-line.cut.wc-black::after{background:#3a3f47;}

/* Button */
.btn-body{display:flex; gap:22px; align-items:center; justify-content:center; padding:10px 0;}
.btn-strip{width:12px; height:110px; border-radius:6px; background:#2a2f38; transition:background .1s;}
.btn-strip.lit.strip-blue{background:var(--blue); box-shadow:0 0 12px var(--blue);}
.btn-strip.lit.strip-yellow{background:var(--yellow); box-shadow:0 0 12px var(--yellow);}
.btn-strip.lit.strip-white{background:#fff; box-shadow:0 0 12px #fff;}
.btn-strip.lit.strip-red{background:var(--red); box-shadow:0 0 12px var(--red);}
.the-button{
  width:120px; height:120px; border-radius:50%; border:6px solid #444;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
  letter-spacing:1px; cursor:pointer; color:#111; user-select:none;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.4); transition:transform .08s;
}
.the-button.pressed{transform:scale(.93);}
.bc-red{background:var(--red);} .bc-blue{background:var(--blue); color:#fff;}
.bc-yellow{background:var(--yellow);} .bc-white{background:var(--white);}

/* Keypad */
.keypad-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:240px; margin:0 auto;}
.kp-key{
  aspect-ratio:1; font-size:34px; background:#e7e4d8; color:#1a1a1a; border:3px solid #b7b09a;
  border-radius:10px; cursor:pointer; transition:transform .08s;
}
.kp-key:active{transform:scale(.93);}
.kp-key.done{background:var(--green); border-color:var(--green); color:#04210f;}
.kp-key:disabled{cursor:default;}

/* Memory */
.mem-display{
  font-family:'Consolas',monospace; font-size:48px; text-align:center; background:#000;
  border:1px solid var(--line); border-radius:8px; padding:6px 0; color:var(--yellow); margin-bottom:12px;
}
.mem-progress{display:flex; gap:6px; justify-content:center; margin-bottom:14px;}
.mem-pip{width:32px; height:6px; border-radius:3px; background:#2a2f38;}
.mem-pip.on{background:var(--green);}
.mem-pip.cur{background:var(--yellow);}
.mem-keys{display:flex; gap:10px; justify-content:center;}
.mem-key{
  width:56px; height:56px; font-size:22px; font-family:monospace; background:var(--panel2);
  color:var(--text); border:2px solid var(--line); border-radius:8px; cursor:pointer;
}
.mem-key:active{transform:scale(.93);}

/* Simon */
.simon-pad{
  display:grid; grid-template-columns:repeat(2,90px); grid-template-rows:repeat(2,90px);
  gap:10px; justify-content:center; margin:0 auto 12px;
}
.simon-btn{border:none; border-radius:12px; cursor:pointer; opacity:.55; transition:opacity .1s,transform .08s;}
.simon-btn:active{transform:scale(.95);}
.simon-btn.flash{opacity:1; box-shadow:0 0 24px currentColor;}
.sm-red{background:var(--red); color:var(--red);}
.sm-blue{background:var(--blue); color:var(--blue);}
.sm-green{background:var(--green); color:var(--green);}
.sm-yellow{background:var(--yellow); color:var(--yellow);}
.simon-status{text-align:center; color:var(--muted); font-size:12px; margin-bottom:8px; min-height:16px;}
.simon-play{
  display:block; margin:0 auto; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:8px; padding:6px 18px; cursor:pointer;
}

/* Morse */
.morse-lamp{
  width:60px; height:60px; border-radius:50%; margin:6px auto 16px; background:#241a1a;
  border:3px solid #402; transition:background .05s,box-shadow .05s;
}
.morse-lamp.on{background:#ffb038; box-shadow:0 0 26px #ffb038;}
.morse-lamp.solved{background:var(--green); box-shadow:0 0 20px var(--green);}
.morse-freq{display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom:14px;}
.morse-val{font-family:'Consolas',monospace; font-size:20px; background:#000; padding:4px 12px; border-radius:6px; border:1px solid var(--line);}
.morse-arrow{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:6px 12px; cursor:pointer; font-size:14px;
}
.morse-tx{
  display:block; margin:0 auto; background:var(--red); color:#fff; border:none;
  border-radius:8px; padding:8px 24px; cursor:pointer; font-weight:600;
}

/* Solved state */
.module.solved{border-color:var(--green);}
.module.solved::after{
  content:'✓ 解除完了'; position:absolute; top:10px; right:14px;
  color:var(--green); font-size:12px; font-weight:600;
}
.module.solved .keypad-grid,
.module.solved .simon-pad,
.module.solved .mem-keys,
.module.solved .btn-body,
.module.solved .morse-freq,
.module.solved .morse-tx,
.module.solved .simon-play{opacity:.5; pointer-events:none;}

/* Strike log */
.strike-log-wrap{max-width:1000px; margin:18px auto 0;}
.log-toggle{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px;
}
.strike-log{display:none; margin-top:8px; font-size:12px; color:var(--red); line-height:1.7;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px;}
.strike-log-wrap.open .strike-log{display:block;}
.strike-log .muted{color:var(--muted);}
.muted{color:var(--muted);}

/* Manual */
.manual-overlay{position:fixed; inset:0; background:rgba(0,0,0,.72); display:none;
  align-items:center; justify-content:center; z-index:50; padding:20px;}
.manual-overlay.open{display:flex;}
.manual-box{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  max-width:720px; width:100%; max-height:84vh; overflow-y:auto; padding:22px 26px;
}
.manual-head{display:flex; justify-content:space-between; align-items:center; position:sticky; top:-22px;
  background:var(--panel); padding-top:6px; margin-top:-6px;}
.manual-head h3{margin:0; color:var(--yellow);}
#manualBody h4{color:var(--text); margin:22px 0 6px; border-bottom:1px solid var(--line); padding-bottom:4px;}
#manualBody p{color:var(--text); line-height:1.7; margin:6px 0; font-size:13.5px;}
#manualBody ul{color:var(--muted); line-height:1.8; margin:6px 0 14px; font-size:13px;}
#manualBody b{color:var(--text);}
.manual-diff{background:var(--panel2); padding:8px 12px; border-radius:8px;}
.keypad-manual{display:flex; gap:8px; flex-wrap:wrap; justify-content:space-between;}
.kp-col{background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:6px; text-align:center;}
.kp-col-h{font-size:10px; color:var(--muted); margin-bottom:4px;}
.kp-col-s{font-size:20px; line-height:1.5;}
.simon-table,.morse-table{width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:12px;}
.simon-table th,.simon-table td,.morse-table th,.morse-table td{border:1px solid var(--line); padding:4px 6px; text-align:center;}
.simon-table th,.morse-table th{background:var(--panel2); color:var(--muted);}
.morse-ref{font-size:11px!important; color:var(--muted)!important; line-height:2!important;}

/* End */
.end-overlay{position:fixed; inset:0; background:rgba(0,0,0,.86); display:none;
  align-items:center; justify-content:center; z-index:60; text-align:center; padding:20px;}
.end-overlay.open{display:flex;}
.end-box{background:var(--panel); border:2px solid var(--line); border-radius:16px; padding:34px 40px; max-width:520px;}
.end-box h2{font-size:30px; margin:0 0 12px;}
.end-box.win h2{color:var(--green);}
.end-box.lose h2{color:var(--red);}
.end-box p{color:var(--muted); line-height:1.7;}
.end-box .btn{margin-top:16px;}

.shake{animation:shake .32s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}

@media (max-width:520px){
  .module{width:100%;}
  .status{gap:14px;}
  .timer{font-size:24px; min-width:120px;}
}

@media print{
  body{background:#fff; color:#000;}
  .topbar,.edgework,.modules,.strike-log-wrap,.end-overlay,.tagline,h1 small{display:none!important;}
  .manual-overlay{position:static; display:block!important; background:#fff; padding:0;}
  .manual-box{max-height:none; box-shadow:none; border:none; color:#000;}
  #manualBody p,#manualBody b,#manualBody h4{color:#000;}
  #manualBody ul{color:#222;}
  .btn{display:none!important;}
}