/* bomba.css — La Bomba (cuenta regresiva + cables) */

/* Barra de salida (igual que el resto de efectos) */
.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.bm-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 18%, #1c222e 0%, #10141c 55%, #090b10 100%); color:#e7e9ef; overflow:hidden; }
.bm-screen .exit-btn { background:rgba(30,34,44,.9); color:#aab0bf; border-color:#3a4050; }
.bm-inner { width:100%; max-width:520px; padding:24px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.bm-title { font-size:19px; font-weight:800; margin:0; letter-spacing:5px; color:#dfe3ec; }
.bm-status { font-size:14px; color:#8b93a7; margin:0; min-height:20px; transition:color .3s; }
.bm-status.is-ready { color:#ffb02e; }
.bm-status.is-done  { color:#2ee59d; font-weight:700; }
.bm-status.is-error { color:#ff4d6a; }

/* ---------- Caja de la bomba (carcasa metálica) ---------- */
.bm-bomb {
  position:relative; width:100%; max-width:410px; border-radius:16px;
  padding:16px 16px 12px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.28) 100%),
    repeating-linear-gradient(90deg, #2b323f 0 3px, #2d3441 3px 6px);
  border:1px solid #454e60;
  box-shadow:0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 6px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .5s, border-color .5s;
}
.bm-bomb.critical { border-color:#ff4d6a; box-shadow:0 0 0 3px rgba(255,45,63,.16), 0 0 46px rgba(255,45,63,.30), 0 24px 60px rgba(0,0,0,.65); }
.bm-bomb.defused  { border-color:#2ee59d; box-shadow:0 0 0 3px rgba(46,229,157,.16), 0 0 46px rgba(46,229,157,.28), 0 24px 60px rgba(0,0,0,.65); }

/* Tornillos de las esquinas */
.bm-screw { position:absolute; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #b9c2d4, #6a7386 55%, #3c4352); box-shadow:inset 0 -1px 2px rgba(0,0,0,.65), 0 1px 1px rgba(255,255,255,.08); }
.bm-screw::before { content:""; position:absolute; left:2px; right:2px; top:50%; height:1.6px; margin-top:-0.8px; background:#262c38; transform:rotate(45deg); border-radius:1px; }
.bm-screw.s1 { top:7px; left:7px; }
.bm-screw.s2 { top:7px; right:7px; }
.bm-screw.s3 { bottom:7px; left:7px; }
.bm-screw.s4 { bottom:7px; right:7px; transform:rotate(30deg); }

/* Cabecera: LED + modelo + franja de peligro */
.bm-head { display:flex; align-items:center; gap:10px; padding:0 12px; }
.bm-led { width:10px; height:10px; border-radius:50%; background:#39404f; box-shadow:inset 0 0 3px #000; flex:none; }
.bm-bomb.running  .bm-led { background:#ff2d3f; box-shadow:0 0 10px rgba(255,45,63,.9); animation:bmBlink 1s steps(2) infinite; }
.bm-bomb.critical .bm-led { animation:bmBlink .3s steps(2) infinite; }
.bm-bomb.defused  .bm-led { background:#2ee59d; box-shadow:0 0 10px rgba(46,229,157,.85); animation:none; }
.bm-bomb.exploded .bm-led { background:#14161c; box-shadow:none; animation:none; }
@keyframes bmBlink { 50% { opacity:.25; } }
.bm-model { font-size:10px; letter-spacing:2.6px; font-weight:700; color:#8b93a7; text-transform:uppercase; white-space:nowrap; }
.bm-hazard { height:8px; border-radius:4px; margin-left:auto; width:86px; background:repeating-linear-gradient(45deg, #ffb02e 0 8px, #1c212b 8px 16px); opacity:.85; box-shadow:inset 0 0 3px rgba(0,0,0,.5); }

/* Display: bisel metálico + LCD */
.bm-display { background:linear-gradient(180deg, #3a4150, #232936); padding:7px; border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.45); }
.bm-lcd { position:relative; overflow:hidden; background:#050608; border-radius:8px; border:1px solid #000; padding:9px 8px 12px; box-shadow:inset 0 0 26px rgba(0,0,0,.95), inset 0 0 70px rgba(255,45,63,.05); display:flex; flex-direction:column; gap:2px; }
.bm-lcd::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); pointer-events:none; }
.bm-lcd-label { font-size:9px; letter-spacing:3.5px; font-weight:700; color:#7e2730; text-align:left; padding-left:8px; text-transform:uppercase; }
.bm-bomb.defused .bm-lcd-label { color:#1d7a56; }
.bm-time { font-family:"Courier New", monospace; font-size:52px; font-weight:700; letter-spacing:4px; color:#ff2d3f; text-shadow:0 0 14px rgba(255,45,63,.85), 0 0 40px rgba(255,45,63,.35); }
.bm-bomb.running .bm-time { animation:bmLed 1s steps(2) infinite; }
@keyframes bmLed { 50% { opacity:.84; } }
.bm-bomb.critical .bm-time { color:#ff5460; animation:bmLedFast .34s steps(2) infinite; }
@keyframes bmLedFast { 50% { opacity:.55; } }
.bm-bomb.defused .bm-time { color:#2ee59d; text-shadow:0 0 14px rgba(46,229,157,.8); animation:none; }
.bm-bomb.exploded .bm-time { color:#3a3f4b; text-shadow:none; animation:none; }

/* Panel de cables: placa hundida con rieles laterales */
.bm-wires { position:relative; display:flex; flex-direction:column; gap:2px; padding:10px 20px; background:linear-gradient(180deg, #1a1f29, #141822); border:1px solid #0d1016; border-radius:10px; box-shadow:inset 0 2px 12px rgba(0,0,0,.7); }
.bm-wires::before, .bm-wires::after { content:""; position:absolute; top:8px; bottom:8px; width:10px; border-radius:3px; background:linear-gradient(90deg, #5a6376, #39404f); box-shadow:inset 0 0 3px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); }
.bm-wires::before { left:5px; }
.bm-wires::after  { right:5px; }

.bm-wire { position:relative; height:44px; width:100%; background:transparent; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bm-wire:disabled { cursor:default; }
.bm-wire .w-l, .bm-wire .w-r { position:absolute; top:50%; height:11px; width:51%; background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 45%, rgba(0,0,0,.32)) , var(--c); background-blend-mode:overlay, normal; background:var(--c); transform:translateY(-50%); box-shadow:inset 0 3px 2px -1px rgba(255,255,255,.28), inset 0 -4px 3px -1px rgba(0,0,0,.38); transition:transform .3s ease, width .3s ease; }
.bm-wire .w-l { left:0;  border-radius:6px 0 0 6px; }
.bm-wire .w-r { right:0; border-radius:0 6px 6px 0; }
/* Bornes de conexión */
.bm-wire::before, .bm-wire::after { content:""; position:absolute; top:50%; transform:translateY(-50%); width:13px; height:21px; background:linear-gradient(180deg, #98a2b6, #4a5163); border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.5); z-index:2; }
.bm-wire::before { left:-6px; } .bm-wire::after { right:-6px; }
/* Corte: el cable queda roto, con cobre expuesto en las puntas */
.bm-wire.cut .w-l { width:39%; transform:translateY(-50%) rotate(8deg);  transform-origin:left center;  border-radius:6px; filter:brightness(.75) saturate(.8); }
.bm-wire.cut .w-r { width:39%; transform:translateY(-50%) rotate(-8deg); transform-origin:right center; border-radius:6px; filter:brightness(.75) saturate(.8); }
.bm-wire.cut .w-l::after { content:""; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:6px; height:7px; background:linear-gradient(180deg, #e8bd7a, #b57e3a); border-radius:1.5px; }
.bm-wire.cut .w-r::after { content:""; position:absolute; left:-4px;  top:50%; transform:translateY(-50%); width:6px; height:7px; background:linear-gradient(180deg, #e8bd7a, #b57e3a); border-radius:1.5px; }
.bm-wire .w-spark { position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff; opacity:0; pointer-events:none; }
.bm-wire.cut .w-spark { animation:bmSpark .5s ease-out 1; }
@keyframes bmSpark {
  0%   { opacity:1; box-shadow:0 0 0 0 rgba(255,220,120,.95), 0 0 18px 6px rgba(255,180,60,.9); transform:scale(1); }
  100% { opacity:0; box-shadow:0 0 0 26px rgba(255,220,120,0), 0 0 30px 14px rgba(255,180,60,0); transform:scale(.4); }
}

/* Placa inferior */
.bm-plate { display:flex; justify-content:space-between; gap:10px; padding:0 12px 2px; font-size:8.5px; letter-spacing:1.8px; font-weight:600; color:#5f677a; text-transform:uppercase; }

/* Botones */
.bm-new { font-size:15px; font-weight:800; letter-spacing:1px; padding:13px 36px; border-radius:14px; border:none; background:linear-gradient(135deg,#ff5f3c,#d6213a); color:#fff; cursor:pointer; box-shadow:0 6px 20px rgba(214,33,58,.4); }
.bm-new:active { transform:translateY(1px); }
.bm-new:disabled { opacity:.45; cursor:default; box-shadow:none; }
.bm-new.ghost { background:#2a3040; color:#c8cede; box-shadow:none; border:1px solid #3a4050; }

/* Resultado gigante (el BOOM se desvanece solo unos segundos después) */
.bm-result { font-size:34px; font-weight:900; letter-spacing:3px; margin:0; min-height:0; transition:opacity .6s ease; }
.bm-result.fade { opacity:0; }
.bm-result.boom { color:#ff8a3c; text-shadow:0 0 24px rgba(255,110,40,.8); animation:bmBoomTxt .5s ease-out 1; }
.bm-result.ok   { color:#2ee59d; text-shadow:0 0 20px rgba(46,229,157,.7); }
@keyframes bmBoomTxt { 0% { transform:scale(.3); opacity:0; } 60% { transform:scale(1.25); opacity:1; } 100% { transform:scale(1); } }

/* Flash de explosión (pantalla completa) */
.bm-flash { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:80; }
.bm-flash.go { animation:bmFlash 1.1s ease-out 1; }
@keyframes bmFlash {
  0%  { opacity:1; background:#fff; }
  18% { opacity:.95; background:#ffd27a; }
  45% { opacity:.7;  background:#ff7a3c; }
  100%{ opacity:0;   background:#d6213a; }
}
/* Sacudida */
.bm-screen.shake { animation:bmShake .7s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes bmShake {
  10%, 90% { transform:translate(-2px, 1px); }
  20%, 80% { transform:translate(4px, -2px); }
  30%, 50%, 70% { transform:translate(-8px, 3px); }
  40%, 60% { transform:translate(8px, -3px); }
}

/* ===================== CONTROL ===================== */
.bm-ctrl-cables { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; }
.bm-ctrl-cable { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px 8px; border-radius:12px; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.bm-ctrl-cable .dot { width:26px; height:10px; border-radius:5px; background:var(--c); box-shadow:inset 0 -2px 0 rgba(0,0,0,.25); }
.bm-ctrl-cable .nm { font-size:11px; font-weight:700; color:#3a3550; }
.bm-ctrl-cable.sel { border-color:#d6213a; box-shadow:0 0 0 3px rgba(214,33,58,.18); }
.bm-ctrl-cable.sel .nm { color:#d6213a; }

.bm-ctrl-row { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; flex-wrap:wrap; }
.bm-ctrl-label { font-size:14px; color:var(--muted); font-weight:600; }
.bm-dur-btn { min-width:58px; padding:9px 0; border-radius:11px; border:1.5px solid var(--line); background:#fff; font-size:14px; font-weight:700; color:#3a3550; cursor:pointer; }
.bm-dur-btn.sel { border-color:var(--brand1); color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); }

.bm-fatal-msg { font-size:13px; font-weight:700; color:#d6213a; min-height:18px; margin:0; }
.bm-fatal-msg.none { color:#8b93a7; }

.bm-act { padding:12px 6px; border-radius:12px; border:none; font-size:13.5px; font-weight:800; letter-spacing:.4px; cursor:pointer; color:#fff; }
.bm-act:active { transform:translateY(1px); }
.bm-act:disabled { opacity:.45; cursor:default; }
.bm-act.arm { background:linear-gradient(135deg,#ff9f2e,#e8590c); }