/* ============ CODE BREAKER — hacker terminal theme ============ */
:root{
  --bg:#04070c;
  --bg2:#080e16;
  --panel:rgba(10,20,28,.82);
  --line:rgba(0,255,163,.22);
  --neon:#00ffa3;
  --cyan:#28e0ff;
  --magenta:#ff3ea5;
  --amber:#ffcc4d;
  --red:#ff4d5e;
  --txt:#d8fff1;
  --dim:#6f8f88;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt); font-family:var(--mono);
  overflow-x:hidden; -webkit-text-size-adjust:100%;
  background-image:radial-gradient(ellipse at 50% -10%, rgba(0,255,163,.10), transparent 60%),
                   radial-gradient(ellipse at 90% 110%, rgba(40,224,255,.08), transparent 55%);
}
button,input{font-family:inherit}
.hidden{display:none !important}

/* backdrop */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,255,163,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,255,163,.045) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 85%);}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.35) 2px 3px);}

/* ============ HUD ============ */
.hud{position:sticky;top:0;z-index:40;display:flex;gap:.5rem;align-items:center;justify-content:space-between;
  padding:.5rem .75rem;background:linear-gradient(180deg,rgba(4,7,12,.97),rgba(4,7,12,.72));
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px);flex-wrap:wrap}
.hud-stats{display:flex;gap:.4rem;flex:1;justify-content:center;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;min-width:62px;padding:.15rem .5rem;
  border:1px solid var(--line);border-radius:6px;background:rgba(0,255,163,.04)}
.stat-k{font-size:.55rem;letter-spacing:.14em;color:var(--dim)}
.stat-v{font-size:.95rem;color:var(--neon);text-shadow:0 0 8px rgba(0,255,163,.55)}
.stat-v.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
.hud-btn{background:transparent;border:1px solid var(--line);color:var(--txt);padding:.4rem .55rem;border-radius:6px;
  cursor:pointer;font-size:.72rem;letter-spacing:.08em;transition:.15s}
.hud-btn:hover{border-color:var(--neon);color:var(--neon);box-shadow:0 0 12px rgba(0,255,163,.3)}
.hud-btn.hint{border-color:rgba(255,204,77,.5);color:var(--amber)}
.hud-btn.hint:hover{box-shadow:0 0 12px rgba(255,204,77,.35);border-color:var(--amber)}
.hud-actions{display:flex;gap:.35rem}

/* ============ screens ============ */
#app{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:1rem .9rem 4rem}
.screen{display:none;animation:fadeUp .35s ease}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.screen-title{text-align:center;letter-spacing:.28em;font-size:1.05rem;color:var(--cyan);
  text-shadow:0 0 14px rgba(40,224,255,.5);margin:1.2rem 0 1.4rem}

/* ============ HOME ============ */
.home{text-align:center;padding:2.2rem 0 1rem}
.logo{font-size:clamp(2rem,9vw,4.2rem);margin:0;letter-spacing:.06em;color:#eafff7;
  text-shadow:0 0 10px rgba(0,255,163,.8),0 0 34px rgba(0,255,163,.45),0 0 70px rgba(40,224,255,.3);
  animation:flicker 5s infinite}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.55}98%{opacity:.9}}
.tagline{color:var(--dim);letter-spacing:.16em;font-size:clamp(.68rem,2.6vw,.9rem);margin:.7rem 0 1.4rem}
.terminal-line{color:var(--neon);font-size:.78rem;opacity:.85;margin-bottom:1.6rem}
.caret{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.home-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.home-stats{margin:1.8rem auto 0;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;color:var(--dim);font-size:.7rem}
.home-stats span{border:1px dashed var(--line);padding:.35rem .6rem;border-radius:6px}
.disclaimer{max-width:640px;margin:2rem auto 0;color:#5d7a74;font-size:.66rem;line-height:1.6}

/* ============ buttons ============ */
.btn{position:relative;background:linear-gradient(180deg,rgba(0,255,163,.16),rgba(0,255,163,.05));
  border:1px solid var(--neon);color:var(--neon);padding:.7rem 1.2rem;border-radius:8px;cursor:pointer;
  letter-spacing:.14em;font-size:.8rem;transition:.16s;text-shadow:0 0 8px rgba(0,255,163,.6)}
.btn:hover:not(:disabled){background:var(--neon);color:#04120c;text-shadow:none;box-shadow:0 0 24px rgba(0,255,163,.55);transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.big{padding:.95rem 2.1rem;font-size:.95rem}
.btn.ghost{border-color:var(--line);color:var(--txt);background:transparent;text-shadow:none}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(40,224,255,.08);box-shadow:0 0 18px rgba(40,224,255,.25)}
.btn.warn{border-color:var(--amber);color:var(--amber)}
.btn.warn:hover{background:var(--amber);color:#241a00;box-shadow:0 0 20px rgba(255,204,77,.45)}
.btn.small{padding:.45rem .7rem;font-size:.68rem}

/* ============ LEVEL MAP ============ */
.map{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.node{position:relative;text-align:left;padding:1rem;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);cursor:pointer;transition:.18s;overflow:hidden}
.node:hover:not(.locked){transform:translateY(-3px);border-color:var(--neon);box-shadow:0 0 26px rgba(0,255,163,.22)}
.node.locked{opacity:.42;cursor:not-allowed;filter:grayscale(.6)}
.node.done{border-color:rgba(0,255,163,.6)}
.node .n-num{font-size:.6rem;letter-spacing:.2em;color:var(--dim)}
.node .n-title{font-size:1rem;margin:.3rem 0;color:#eafff7}
.node .n-sub{font-size:.68rem;color:var(--dim);line-height:1.5}
.node .n-badge{position:absolute;top:.7rem;right:.8rem;font-size:1.1rem}
.node .n-bar{height:3px;margin-top:.7rem;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.node .n-bar i{display:block;height:100%;background:var(--neon);box-shadow:0 0 10px var(--neon);width:0;transition:width .5s}
.map-foot{display:flex;gap:.7rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}

/* ============ LEARN ============ */
.learn{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem}
.card h4{margin:.1rem 0 .5rem;color:var(--cyan);font-size:.85rem;letter-spacing:.1em}
.card p{margin:.4rem 0;font-size:.76rem;line-height:1.65;color:#b7ded3}
.card code{color:var(--amber);background:rgba(255,204,77,.08);padding:0 .25rem;border-radius:3px}

/* ============ STAGE / PANELS ============ */
.lvl-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.lvl-head h2{font-size:clamp(1.05rem,4.5vw,1.5rem);margin:0;color:#eafff7;text-shadow:0 0 16px rgba(0,255,163,.4)}
.lvl-head .tag{font-size:.6rem;letter-spacing:.2em;color:var(--dim);border:1px solid var(--line);padding:.2rem .45rem;border-radius:5px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:1rem;
  box-shadow:inset 0 0 40px rgba(0,255,163,.03);animation:fadeUp .3s ease}
.panel h3{margin:.1rem 0 .7rem;font-size:.74rem;letter-spacing:.22em;color:var(--cyan)}
.hintbox{border:1px dashed rgba(255,204,77,.5);background:rgba(255,204,77,.06);color:var(--amber);
  padding:.6rem .8rem;border-radius:8px;font-size:.75rem;margin:.6rem 0;animation:hintIn .45s ease}
@keyframes hintIn{from{opacity:0;transform:translateX(-14px) scale(.97)}to{opacity:1;transform:none}}
.note{font-size:.66rem;color:#5d7a74;line-height:1.6;margin-top:.6rem}

/* cipher text display */
.cipher{font-size:clamp(1.1rem,5.5vw,1.9rem);letter-spacing:.3em;color:var(--magenta);
  text-shadow:0 0 16px rgba(255,62,165,.55);word-break:break-word;line-height:1.7}
.plain{font-size:clamp(1.1rem,5.5vw,1.9rem);letter-spacing:.3em;color:var(--neon);
  text-shadow:0 0 16px rgba(0,255,163,.55);word-break:break-word;line-height:1.7;min-height:1.6em}
.mono-out{font-size:.9rem;color:var(--cyan);word-break:break-all;line-height:1.7;
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;padding:.6rem .75rem}
.arrow{text-align:center;color:var(--dim);font-size:1.3rem;margin:.25rem 0;animation:pulseDown 1.6s infinite}
@keyframes pulseDown{0%,100%{opacity:.35;transform:translateY(-2px)}50%{opacity:1;transform:translateY(2px)}}

/* slider */
.slider-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.slider-row label{font-size:.7rem;letter-spacing:.16em;color:var(--dim)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:180px;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--neon),var(--cyan));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#04120c;border:2px solid var(--neon);box-shadow:0 0 14px var(--neon);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#04120c;
  border:2px solid var(--neon);box-shadow:0 0 14px var(--neon);cursor:pointer}
.shift-val{min-width:2.6rem;text-align:center;font-size:1.4rem;color:var(--neon);text-shadow:0 0 12px var(--neon)}

/* text input */
.tin{width:100%;background:rgba(0,0,0,.45);border:1px solid var(--line);color:var(--neon);
  padding:.65rem .8rem;border-radius:8px;font-size:.95rem;letter-spacing:.12em;outline:none;transition:.15s}
.tin:focus{border-color:var(--neon);box-shadow:0 0 16px rgba(0,255,163,.28)}
.tin::placeholder{color:#3d5a55;letter-spacing:.08em}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row>.tin{flex:1;min-width:150px}
.lbl{font-size:.62rem;letter-spacing:.2em;color:var(--dim);display:block;margin:.7rem 0 .3rem}

/* feedback */
.fb{margin-top:.7rem;font-size:.8rem;min-height:1.2em;letter-spacing:.05em}
.fb.ok{color:var(--neon);text-shadow:0 0 10px rgba(0,255,163,.6)}
.fb.bad{color:var(--red)}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.cracked{animation:cracked .8s ease}
@keyframes cracked{0%{filter:brightness(3) blur(2px)}30%{filter:brightness(1.6)}100%{filter:none}}

/* substitution UI */
.subwrap{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 .9rem}
.slot{width:34px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.slot .c{font-size:.6rem;color:var(--magenta)}
.slot .p{width:100%;height:34px;display:flex;align-items:center;justify-content:center;font-size:1rem;
  border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.35);color:var(--neon);transition:.14s}
.slot.sel .p{border-color:var(--cyan);box-shadow:0 0 14px rgba(40,224,255,.55);background:rgba(40,224,255,.12)}
.slot.given .p{color:var(--amber);border-color:rgba(255,204,77,.45);background:rgba(255,204,77,.07)}
.slot.gap{width:14px}
.keypad{display:grid;grid-template-columns:repeat(9,1fr);gap:.28rem}
.keypad button{padding:.45rem 0;font-size:.78rem;background:rgba(0,255,163,.06);border:1px solid var(--line);
  color:var(--txt);border-radius:5px;cursor:pointer;transition:.12s}
.keypad button:hover{border-color:var(--neon);color:var(--neon);background:rgba(0,255,163,.16)}
.keypad button.used{color:var(--magenta);border-color:rgba(255,62,165,.35)}
.keypad button.wide{grid-column:span 2}

/* frequency chart */
.freq{display:flex;align-items:flex-end;gap:2px;height:110px;margin:.5rem 0}
.freq .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.freq .bar{width:100%;background:linear-gradient(180deg,var(--cyan),rgba(40,224,255,.15));border-radius:2px 2px 0 0;
  transition:height .5s ease}
.freq .bar.eng{background:linear-gradient(180deg,rgba(255,62,165,.85),rgba(255,62,165,.1))}
.freq .lb{font-size:.5rem;color:var(--dim);margin-top:2px}
.legend{font-size:.6rem;color:var(--dim);display:flex;gap:1rem;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* brute force list */
.brute{max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.35)}
.brute div{padding:.3rem .6rem;font-size:.74rem;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brute div:hover{background:rgba(0,255,163,.1);color:var(--neon)}
.brute b{color:var(--amber);margin-right:.5rem}

/* pipeline */
.pipe{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.pipe .tin{max-width:460px}
.pipe .box{width:100%;max-width:460px;text-align:center;border:1px solid var(--line);border-radius:8px;
  padding:.6rem .7rem;background:rgba(0,0,0,.3);word-break:break-word;font-size:.85rem;letter-spacing:.08em}
.pipe .box.key{border-color:rgba(255,204,77,.55);color:var(--amber);background:rgba(255,204,77,.07)}
.pipe .box.enc{color:var(--magenta);border-color:rgba(255,62,165,.4)}
.pipe .box.out{color:var(--neon);border-color:rgba(0,255,163,.5)}
.pipe .box.flash{animation:flashbox .6s ease}
@keyframes flashbox{0%{box-shadow:0 0 0 rgba(0,255,163,0)}30%{box-shadow:0 0 30px rgba(0,255,163,.65);transform:scale(1.03)}100%{box-shadow:none}}
.k-title{font-size:.6rem;letter-spacing:.2em;color:var(--dim);margin-bottom:.2rem}

/* choices */
.choices{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.choice{text-align:left;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.3);
  color:var(--txt);cursor:pointer;font-size:.76rem;transition:.14s;line-height:1.5}
.choice:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(40,224,255,.08)}
.choice.right{border-color:var(--neon);color:var(--neon);background:rgba(0,255,163,.14)}
.choice.wrong{border-color:var(--red);color:var(--red);background:rgba(255,77,94,.12)}

/* progress dots */
.tasks{display:flex;gap:.35rem;align-items:center;margin-left:auto}
.dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--line)}
.dot.on{background:var(--neon);box-shadow:0 0 10px var(--neon);border-color:var(--neon)}
.dot.cur{border-color:var(--cyan);box-shadow:0 0 10px var(--cyan)}

/* modal */
.modal-wrap{position:fixed;inset:0;z-index:70;background:rgba(2,5,8,.86);display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px)}
.modal{max-width:520px;width:100%;background:linear-gradient(180deg,#0a1720,#060d13);border:1px solid var(--neon);
  border-radius:14px;padding:1.3rem;box-shadow:0 0 60px rgba(0,255,163,.25);animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(18px)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 .7rem;color:var(--neon);font-size:.95rem;letter-spacing:.14em;text-shadow:0 0 14px rgba(0,255,163,.5)}
.modal p{font-size:.8rem;line-height:1.7;color:#c8ede3;margin:.5rem 0}
.modal .btn{width:100%;margin-top:1rem}

/* toast */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);z-index:80;background:#07161d;
  border:1px solid var(--neon);color:var(--neon);padding:.6rem 1rem;border-radius:8px;font-size:.78rem;
  box-shadow:0 0 30px rgba(0,255,163,.3);transition:transform .35s cubic-bezier(.2,1.4,.4,1);pointer-events:none;max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
.toast.bad{border-color:var(--red);color:var(--red);box-shadow:0 0 30px rgba(255,77,94,.3)}

/* fx particles */
#fx{position:fixed;inset:0;pointer-events:none;z-index:75;overflow:hidden}
.spark{position:absolute;width:8px;height:8px;border-radius:2px;opacity:1;animation:fly .9s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(320deg);opacity:0}}

/* results */
.results{max-width:560px;margin:2rem auto;background:var(--panel);border:1px solid var(--neon);border-radius:14px;
  padding:1.5rem;text-align:center;box-shadow:0 0 50px rgba(0,255,163,.2)}
.results h2{font-size:clamp(1.3rem,6vw,2rem);margin:.2rem 0 .3rem;color:var(--neon);text-shadow:0 0 22px rgba(0,255,163,.6)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin:1.3rem 0}
.rgrid div{border:1px solid var(--line);border-radius:8px;padding:.7rem .4rem;background:rgba(0,0,0,.3)}
.rgrid b{display:block;font-size:1.35rem;color:var(--cyan);text-shadow:0 0 12px rgba(40,224,255,.5)}
.rgrid span{font-size:.58rem;letter-spacing:.16em;color:var(--dim)}

@media (max-width:520px){
  .stat{min-width:52px;padding:.1rem .35rem}
  .stat-v{font-size:.8rem}
  .hud-btn{font-size:.64rem;padding:.35rem .45rem}
  .keypad{grid-template-columns:repeat(7,1fr)}
  .slot{width:30px}
  .slot .p{height:30px;font-size:.9rem}
  #app{padding:.8rem .6rem 3rem}
}