/* ============================================================================
   Gacha Cockpit — panel de una máquina expendedora, no un dashboard.
   Metal gris + lectura ámbar de recreativa. Todo el color lo ponen las cartas.
   ========================================================================== */

:root{
  --void:#0b0d10;        /* chasis */
  --steel:#14181e;       /* panel */
  --steel-2:#1b212a;     /* panel elevado */
  --edge:#262e3a;        /* canto de chapa */
  --edge-hot:#394454;
  --ink:#e8ecf2;
  --ink-dim:#7b8798;
  --amber:#ffb020;       /* lectura de siete segmentos */
  --amber-dim:#8a6318;

  --epic:#ffc233;
  --rare:#b06bff;
  --uncommon:#3ee08c;
  --common:#5a6678;
  --up:#3ee08c;
  --down:#ff4d5e;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--void);
  color:var(--ink);
  font:13px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;
  /* Rejilla de chapa perforada, casi invisible: da materia sin ruido. */
  background-image:radial-gradient(var(--steel) 1px,transparent 1px);
  background-size:22px 22px;
}
.n{text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ riel superior */
.rail{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:11px 20px;
  background:linear-gradient(180deg,#11151b,#0d1116);
  border-bottom:1px solid var(--edge);
  box-shadow:0 1px 0 #000a,0 8px 24px -18px #000;
}
.ident{display:flex;align-items:center;gap:10px}
.pilot{
  width:8px;height:8px;border-radius:50%;
  background:var(--down);box-shadow:0 0 0 3px #ff4d5e18;
  transition:background .3s,box-shadow .3s;
}
.pilot.on{background:var(--up);box-shadow:0 0 0 3px #3ee08c22,0 0 12px #3ee08c88}
.wordmark{
  font:700 15px/1 var(--mono);letter-spacing:.34em;
  color:var(--ink);text-indent:.34em;
}

/* ------------------------------------------------ banco de gachapones (firma) */
.bank{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--edge);border-bottom:1px solid var(--edge);
}

.unit{
  background:linear-gradient(180deg,var(--steel-2),var(--steel));
  padding:14px 10px 12px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.gm{width:74px;height:116px;flex:none;transform-origin:50% 92%}
.gm .chassis{fill:#232b36;stroke:#39424f;stroke-width:2;transition:stroke .5s,filter .5s}
.gm .knob{fill:#39424f}
.gm .knob-slot{fill:#151a21}
.gm .flap{fill:#0a0d11;stroke:#39424f;stroke-width:1.5}
.gm .caps{transform-origin:32px 32px}

.tag{display:flex;flex-direction:column;gap:3px;min-width:0}
.tag b{font:700 20px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tag span{
  font:9px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .5s;
}

/* --- cinco grados de nervio. El temblor ES el dato. --- */
.unit.lvl-1 .gm{animation:tremble 2.4s ease-in-out infinite}
.unit.lvl-1 .caps{animation:rattle 1.1s ease-in-out infinite}

.unit.lvl-2 .gm{animation:tremble 1.1s ease-in-out infinite}
.unit.lvl-2 .caps{animation:rattle .5s ease-in-out infinite}
.unit.lvl-2 .gm .chassis{stroke:#ffd166;filter:drop-shadow(0 0 4px #ffd16655)}
.unit.lvl-2 .tag span{color:#ffd166}
.unit.lvl-2 .gm .knob{fill:#5a5233}

.unit.lvl-3 .gm{animation:tremble .5s ease-in-out infinite}
.unit.lvl-3 .caps{animation:rattle .3s ease-in-out infinite}
.unit.lvl-3 .gm .chassis{stroke:var(--amber);filter:drop-shadow(0 0 6px #ffb02088)}
.unit.lvl-3 .tag span{color:var(--amber)}
.unit.lvl-3 .tag b{color:var(--amber)}

.unit.lvl-4 .gm{animation:tremble .22s linear infinite}
.unit.lvl-4 .caps{animation:rattle .16s linear infinite}
.unit.lvl-4 .gm .chassis{stroke:var(--down);filter:drop-shadow(0 0 10px #ff4d5ecc)}
.unit.lvl-4 .tag span,.unit.lvl-4 .tag b{color:var(--down)}
.unit.lvl-4::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 120%,#ff4d5e1f,transparent 70%);
}

@keyframes tremble{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(-1.1px,.4px) rotate(-.9deg)}
  45%{transform:translate(1.1px,-.4px) rotate(.9deg)}
  70%{transform:translate(-.7px,.2px) rotate(-.5deg)}
}
@keyframes rattle{
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(1.4px,-1.1px)}
  65%{transform:translate(-1.2px,1.3px)}
}

/* Entra una carta en esta máquina: la trampilla escupe y el chasis destella. */
.unit.bump .flap{animation:spit .4s ease-out}
.unit.bump{animation:panel .42s ease-out}
@keyframes spit{
  0%{transform:translateY(0)}
  35%{transform:translateY(4px) scaleY(.7)}
  100%{transform:translateY(0)}
}
@keyframes panel{0%{background:#232b36}100%{background:transparent}}

.unit.dead{opacity:.32}
.unit.dead .gm{animation:none}

/* ------------------------------------------------------------------ vistas */
main{padding:16px 20px 70px}
.view{display:none}
.view.on{display:block}
.note{color:var(--ink-dim);font:10px/1.5 var(--mono);letter-spacing:.04em;margin:0 0 12px}
.empty{color:var(--ink-dim);text-align:center;padding:70px 0;font:11px/1 var(--mono);letter-spacing:.1em}

.filters{margin-bottom:14px}
.filters-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
input[type=search]{
  background:var(--void);border:1px solid var(--edge);color:var(--ink);
  padding:7px 11px;border-radius:2px;width:250px;font:11px/1 var(--mono);
}
input[type=search]:focus{outline:none;border-color:var(--amber)}
.chk{display:flex;align-items:center;gap:6px;color:var(--ink-dim);font:10px/1 var(--mono);letter-spacing:.06em;cursor:pointer}
.tally{color:var(--ink-dim);font:10px/1 var(--mono);letter-spacing:.06em}

.chips{display:flex;gap:1px;flex-wrap:wrap;background:var(--edge);padding:1px;border-radius:2px;width:fit-content}
.chip{
  background:var(--steel);border:0;color:var(--ink-dim);cursor:pointer;
  padding:6px 11px;font:10px/1 var(--mono);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.chip:hover:not(:disabled){color:var(--ink)}
.chip.on{background:var(--amber);color:#0b0d10;font-weight:700}
.chip:disabled{opacity:.3;cursor:default}
.chip .cnt{opacity:.55;margin-left:4px}

/* ------------------------------------------------------------------- chute */
.chute{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px}

.slab{
  background:var(--steel);border:1px solid var(--edge);
  position:relative;cursor:pointer;
  transition:transform .12s,border-color .12s;
}
.slab:hover{transform:translateY(-3px);border-color:#3a4553}

/* Cabecera del slab: imita la etiqueta de la carcasa de gradeo. */
.slab .label{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:5px 8px;border-bottom:1px solid var(--edge);
  font:9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.slab .label .tier{font-weight:700}
.slab .label .pack{color:var(--ink-dim);font-variant-numeric:tabular-nums}

.slab .img{aspect-ratio:5/7;width:100%;object-fit:cover;display:block;background:#0c0f13}
.slab .body{padding:8px 9px 10px}
.slab .nm{font:11px/1.35 var(--sans);height:2.7em;overflow:hidden;margin-bottom:7px;color:#cfd6e0}
.slab .row{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.slab .val{font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.slab .mult{font:600 11px/1 var(--mono)}
.slab .meta{font:9px/1 var(--mono);color:var(--ink-dim);letter-spacing:.04em;margin-top:5px;display:flex;justify-content:space-between}

.good{color:var(--up)} .bad{color:var(--down)}

/* Rareza: el canto del slab, no un badge de color. */
.slab.t-common{border-color:var(--edge)}
.slab.t-common .label .tier{color:var(--common)}
.slab.t-uncommon{border-color:#256b4a}
.slab.t-uncommon .label .tier{color:var(--uncommon)}
.slab.t-rare{border-color:#6b3fb0;box-shadow:0 0 0 1px #b06bff22,0 0 22px -10px var(--rare)}
.slab.t-rare .label .tier{color:var(--rare)}
.slab.t-epic{border-color:var(--epic);box-shadow:0 0 0 1px #ffc23333,0 0 30px -10px var(--epic)}
.slab.t-epic .label .tier{color:var(--epic)}

/* La epic respira. Una sola cosa en la página lo hace. */
.slab.t-epic{animation:pulse 3s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 1px #ffc23333,0 0 30px -12px var(--epic)}
  50%{box-shadow:0 0 0 1px #ffc23366,0 0 40px -4px var(--epic)}
}

/* Caída: entra por arriba con peso, no aparece. */
.slab.drop{animation:drop .42s cubic-bezier(.2,.8,.25,1)}
@keyframes drop{
  0%{transform:translateY(-26px);opacity:0}
  60%{transform:translateY(3px);opacity:1}
  100%{transform:translateY(0)}
}
.slab.drop.t-rare{animation:drop .42s cubic-bezier(.2,.8,.25,1),shake .28s 2}
.slab.drop.t-epic{animation:drop .42s cubic-bezier(.2,.8,.25,1),shake .24s 4}
@keyframes shake{
  0%,100%{translate:0 0;rotate:0deg}
  25%{translate:-4px 0;rotate:-.7deg}
  75%{translate:4px 0;rotate:.7deg}
}

/* Destello de página: solo epic y rare muy alta. Breve, una vez. */
.flash{
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;
  background:radial-gradient(60% 45% at 50% 0%,var(--fc,#ffc233)55,transparent 70%);
}
.flash.go{animation:flash 1s ease-out}
@keyframes flash{0%{opacity:.5}100%{opacity:0}}

/* ------------------------------------------------------------------ tablas */
.grid{width:100%;border-collapse:collapse;font:11px/1.5 var(--mono)}
.grid th{
  text-align:left;color:var(--ink-dim);font-weight:400;font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;
  padding:8px 10px;border-bottom:1px solid var(--edge);
  position:sticky;top:49px;background:var(--void);
}
.grid td{padding:8px 10px;border-bottom:1px solid #141920;font-variant-numeric:tabular-nums}
.grid tbody tr:hover{background:var(--steel)}
.clickable{cursor:pointer;color:var(--amber)}
.warn{color:var(--amber)}
.pill{display:inline-block;padding:1px 6px;background:var(--steel-2);border:1px solid var(--edge);font-size:9px}

/* ------------------------------------------------------------------ modal */
.modal{position:fixed;inset:0;background:#000d;display:grid;place-items:center;z-index:60;padding:20px}
.modal[hidden]{display:none}
.modal-inner{
  background:var(--steel);border:1px solid var(--edge);
  max-width:940px;width:100%;max-height:88vh;overflow:auto;padding:22px;position:relative;
}
.close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--ink-dim);font-size:16px;cursor:pointer}
.detail{display:flex;gap:22px;flex-wrap:wrap}
.detail img{width:236px;border:1px solid var(--edge)}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0;font:11px/1.6 var(--mono);align-content:start}
.detail dt{color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase;font-size:9px}
.detail dd{margin:0}

/* --------------------------------------------------------- accesibilidad */
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .slab.drop,.slab.drop.t-rare,.slab.drop.t-epic,.slab.t-epic{animation:none}
  .unit .gm,.unit .caps,.unit.bump,.unit.bump .flap{animation:none}
  .flash.go{animation:none}
}

/* ─────────────────────────────────────────────────────────────── LOADING
   El gesto del producto: la manivela gira, la cápsula cae. No un spinner. */
.boot{
  position:fixed;inset:0;z-index:99;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--void);
  background-image:radial-gradient(var(--steel) 1px,transparent 1px);
  background-size:22px 22px;
  transition:opacity .45s ease,visibility .45s;
}
.boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-gm{width:96px;height:auto}
.boot-gm .b-dome{transform-origin:32px 32px;animation:b-shake 1.6s ease-in-out infinite}
.boot-gm .b-caps{transform-origin:32px 32px;animation:b-rattle .42s ease-in-out infinite}
.boot-gm .b-knob{transform-origin:32px 72px;animation:b-turn 1.6s cubic-bezier(.6,0,.3,1) infinite}
.boot-gm .b-drop{opacity:0;animation:b-fall 1.6s ease-in infinite}

@keyframes b-shake{
  0%,55%,100%{transform:translate(0,0) rotate(0)}
  62%{transform:translate(-1.6px,.6px) rotate(-1.4deg)}
  72%{transform:translate(1.6px,-.6px) rotate(1.4deg)}
  82%{transform:translate(-.9px,.3px) rotate(-.7deg)}
}
@keyframes b-rattle{
  0%,100%{transform:translate(0,0)}
  35%{transform:translate(1.6px,-1.2px)}
  70%{transform:translate(-1.4px,1.4px)}
}
/* La manivela da media vuelta, se para, y entonces cae la cápsula. */
@keyframes b-turn{
  0%,45%{transform:rotate(0)}
  70%,100%{transform:rotate(180deg)}
}
@keyframes b-fall{
  0%,62%{opacity:0;transform:translateY(0) scale(.6)}
  70%{opacity:1;transform:translateY(4px) scale(1)}
  92%{opacity:1;transform:translateY(20px) scale(1)}
  100%{opacity:0;transform:translateY(26px) scale(.9)}
}

.boot-txt{
  margin:0;color:var(--ink-dim);
  font:10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
}
.boot-txt span{animation:b-dot 1.4s infinite}
.boot-txt span:nth-child(2){animation-delay:.2s}
.boot-txt span:nth-child(3){animation-delay:.4s}
@keyframes b-dot{0%,60%,100%{opacity:.2}30%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .boot-gm .b-dome,.boot-gm .b-caps,.boot-gm .b-knob,.boot-gm .b-drop,.boot-txt span{animation:none}
  .boot-gm .b-drop{opacity:1}
}


/* ---------------------------------------------------------------- marca */
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--amber)}
.mark span{font:700 14px/1 var(--mono);letter-spacing:.3em;text-indent:.3em;color:var(--ink)}
.logo{width:26px;height:26px;flex:none;overflow:visible}
.rail .logo{width:23px;height:23px;color:var(--amber)}
/* Las estelas caen al pasar el ratón: la cápsula está cayendo, no posando. */
.ident:hover .logo .sweep{animation:fall .9s cubic-bezier(.4,0,.6,1)}
@keyframes fall{
  0%{transform:translateY(-6px);opacity:0}
  35%{opacity:.85}
  100%{transform:translateY(9px);opacity:0}
}
@media (prefers-reduced-motion:reduce){.ident:hover .logo .sweep{animation:none}}