/* ===========================
   Bit Builders - styles.css
   =========================== */

:root{
  --bg-1:#05060a;
  --muted:#9aa3b2;
  --accent1:#00ffe0;
  --accent2:#6a5cff;
  --danger:#ff5c7c;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --max-width:1100px;
  --mono: 'Orbitron', monospace;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background: linear-gradient(180deg,#000 0%,var(--bg-1) 100%);color:#e7f0f6}

/* intro overlay */
.intro{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:9999;transition:opacity .6s ease;
}
.intro.fadeOut{opacity:0;pointer-events:none}
.boot{display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(0)}
.boot-title{font-family:var(--mono);color:#00ffd0;letter-spacing:2px;font-weight:800}
.boot-sub{color:var(--muted);font-size:13px}
.boot-loader{width:160px;height:6px;border-radius:999px;background:rgba(255,255,255,0.03);overflow:hidden}
.boot-loader span{display:block;height:100%;width:28%;background:linear-gradient(90deg,var(--accent1),var(--accent2));transform:translateX(-120%);animation:boot 1.4s linear infinite}
@keyframes boot{100%{transform:translateX(220%)}}

/* header / hero */
.hero{width:100%;display:flex;justify-content:center;padding:22px 20px 6px 20px}
.hero-inner{width:100%;max-width:var(--max-width);display:flex;align-items:center;gap:16px}
.logo{width:88px;height:88px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:#021016;font-weight:900;font-size:24px;box-shadow:0 12px 46px rgba(106,92,255,0.08)}
.hero-text h1{margin:0;font-family:var(--mono);font-size:28px;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:1px}
.hero-text p{margin:6px 0 0 0;color:var(--muted);font-size:14px}
.hero-actions{margin-left:auto;display:flex;gap:8px;align-items:center}

/* main card */
.main{display:flex;align-items:center;justify-content:center;padding:12px 20px}
.card{width:100%;max-width:var(--max-width);border-radius:18px;padding:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 18px 60px rgba(3,6,12,0.6);border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 420px;gap:20px}
.left{padding:10px}
.right{padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px;border:1px solid rgba(255,255,255,0.02)}
.controls-top{display:flex;gap:12px;align-items:center;justify-content:space-between}

/* modes */
.modes{display:flex;gap:8px}
.mode{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--muted);cursor:pointer;font-weight:700}
.mode.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#021016;box-shadow:0 8px 30px rgba(106,92,255,0.06)}
.mode.help{margin-left:auto}

/* hints */
.hint{color:var(--muted);font-size:13px;margin-top:10px}

/* grid inputs */
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin-top:14px}
.cell{background:rgba(255,255,255,0.014);border-radius:10px;padding:10px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.cell input{background:transparent;border:0;outline:0;color:inherit;text-align:center;font-weight:800;font-size:18px;width:100%}
.cell:focus-within{box-shadow:0 10px 40px rgba(106,92,255,0.05);transform:translateY(-3px)}
.single-area{margin-top:12px}
.singleField{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit;font-weight:800;font-size:15px;text-transform:uppercase}

/* progress */
.progressWrap{height:10px;background:rgba(255,255,255,0.02);border-radius:999px;margin-top:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.02)}
.progress{height:100%;width:0;background:linear-gradient(90deg,var(--accent1),var(--accent2));transition:width .2s ease}

/* actions & status */
.actions{display:flex;gap:10px;margin-top:14px;align-items:center}
.primary{padding:10px 14px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#021016;font-weight:900;cursor:pointer;box-shadow:0 12px 40px rgba(106,92,255,0.08)}
.ghost{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--muted);cursor:pointer}
.status{margin-top:12px;font-weight:800;min-height:26px}
.status.ok{color:var(--accent1)}
.status.fail{color:var(--danger)}

/* reveal area */
.secret-title{font-weight:900;font-size:15px;margin-bottom:10px}
.reveal-msg{display:none;margin-top:12px;font-weight:900;color:var(--accent1);font-size:18px;text-shadow:0 0 14px rgba(0,255,224,0.12);transform:translateY(8px);opacity:0;transition:all 420ms cubic-bezier(.2,.9,.3,1)}
.reveal-msg.show{display:block;opacity:1;transform:none}
.imageWrap{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.imageBox{width:260px;height:260px;border-radius:12px;background:linear-gradient(180deg,#06090a,#0d1114);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);box-shadow:0 16px 60px rgba(10,12,20,0.6);transform:translateY(18px) scale(.96);opacity:0;transition:all .6s cubic-bezier(.2,.9,.3,1)}
.imageBox.revealed{opacity:1;transform:none}
.imageBox img{max-width:86%;max-height:86%;border-radius:8px}
.tip{color:var(--muted);font-size:13px;text-align:center;padding:8px 6px}

/* overlay scanner */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.scanner{width:80%;max-width:760px;height:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));border-radius:999px;overflow:hidden;opacity:0;transition:opacity .12s}
.scanner.active{opacity:1}
.bar{height:100%;width:6%;background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 6px 24px rgba(106,92,255,0.1);transform:translateX(-120%);animation:scan 1.6s linear}
@keyframes scan{100%{transform:translateX(220%)}}

/* small animation */
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.shake{animation:shake .6s;}

@media (max-width:980px){
  .card{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(5,1fr)}
  .imageBox{width:200px;height:200px}
}