/* ============================================================
   DIMENSIAN · LA MOCHILA (inventario del jugador)
   ============================================================ */
:root{
  --fondo:#04070a; --cian:#7fd8e8; --ambar:#e8b23f; --rojo:#e8574a;
  --verde:#84e8a0; --texto:#c9d6dd; --apagado:#5f7482;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--texto);
  font:14px/1.5 "Consolas","Courier New",monospace;overflow:hidden}
button,input{font:inherit}

/* ── scanlines + viñeta (ambiente compartido con el lab) ── */
#crt{position:fixed;inset:0;pointer-events:none;z-index:80;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.11) 0 2px, transparent 2px 4px)}

/* ── LA PORTADA (mochila cerrada) ── */
#portada{position:fixed;inset:0;z-index:60;background:#000}
#portadaImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.85)}
#portadaVelo{position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.72) 100%)}
#portadaTexto{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:22px;padding-bottom:9vh}
#portada .marca{color:#8fa8b5;letter-spacing:.5em;font-size:12px;opacity:.85;
  text-indent:.5em;text-align:center}
#btnAbrir{background:rgba(0,0,0,.45);color:var(--cian);cursor:pointer;
  border:1px solid rgba(127,216,232,.4);border-radius:4px;padding:13px 32px;
  letter-spacing:.32em;font-size:13px;text-indent:.32em;transition:.35s}
#btnAbrir:hover{border-color:rgba(127,216,232,.9);
  box-shadow:0 0 26px rgba(127,216,232,.25), inset 0 0 18px rgba(127,216,232,.07);
  text-shadow:0 0 12px rgba(127,216,232,.8)}
#portada.fuera{opacity:0;transition:opacity .8s ease;pointer-events:none}

/* ── EL MALETÍN ── */
#caso{position:fixed;inset:0;background:#000}
#fondoImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.98)}
#capaHuecos{position:absolute;inset:0}

/* cada hueco: botón invisible colocado sobre la foto */
.hueco{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:8px;z-index:20}
.hueco img.pieza{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none}
.hueco .brillo{position:absolute;inset:0;border-radius:8px;
  border:1px solid rgba(127,216,232,0);transition:.35s;pointer-events:none}
.hueco:hover .brillo{border-color:rgba(127,216,232,.5);
  box-shadow:0 0 18px rgba(127,216,232,.14), inset 0 0 20px rgba(127,216,232,.05)}
.hueco.vacio:hover .brillo{border-color:rgba(232,178,63,.4);
  box-shadow:0 0 16px rgba(232,178,63,.10), inset 0 0 18px rgba(232,178,63,.05)}
.hueco .nombreta{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);
  white-space:nowrap;color:var(--cian);letter-spacing:.22em;font-size:10.5px;
  opacity:0;transition:.3s;pointer-events:none;
  text-shadow:0 0 10px rgba(127,216,232,.7);z-index:30}
.hueco:hover .nombreta{opacity:1}
.hueco.vacio .nombreta{color:var(--ambar);text-shadow:0 0 10px rgba(232,178,63,.6)}

/* materialización: el objeto aparece con un latido de luz */
.hueco img.pieza.nace{animation:nacer 1.6s ease-out}
@keyframes nacer{
  0%{opacity:0;filter:brightness(3) saturate(0)}
  35%{opacity:1;filter:brightness(2.2) saturate(.4)}
  100%{opacity:1;filter:brightness(1) saturate(1)}
}

/* ── barra inferior: cuenta + código ── */
#barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  align-items:center;gap:18px;padding:10px 20px;
  background:linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));}
#cuenta{color:var(--apagado);letter-spacing:.25em;font-size:12px;min-width:70px}
#formCodigo{display:flex;gap:8px;flex:1;max-width:430px}
#campoCodigo{flex:1;background:rgba(6,12,16,.85);border:1px solid #1d2e3a;
  border-radius:4px;color:var(--verde);padding:8px 12px;letter-spacing:.14em;
  text-transform:uppercase;outline:none}
#campoCodigo:focus{border-color:rgba(127,216,232,.55)}
#btnCanjear{background:transparent;border:1px solid rgba(127,216,232,.4);
  border-radius:4px;color:var(--cian);cursor:pointer;padding:8px 16px;
  letter-spacing:.22em;font-size:12px;transition:.3s}
#btnCanjear:hover{border-color:rgba(127,216,232,.9);
  box-shadow:0 0 14px rgba(127,216,232,.2)}
#aviso{font-size:12px;letter-spacing:.18em;min-height:18px}
#aviso.mal{color:var(--rojo)}
#aviso.bien{color:var(--verde)}
#campoCodigo.tiembla{animation:tmb .3s linear 2}
@keyframes tmb{25%{transform:translateX(3px)}75%{transform:translateX(-3px)}}

/* ── la ficha de un objeto ── */
#ficha{position:fixed;inset:0;z-index:50;display:none;align-items:center;
  justify-content:center;background:rgba(0,0,0,.78)}
#ficha.abierta{display:flex}
#fichaCaja{display:flex;gap:0;max-width:min(940px,94vw);max-height:88vh;
  background:#070d12;border:1px solid #1d2e3a;border-radius:8px;overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.8)}
#fichaImg{width:min(460px,48vw);object-fit:cover;background:#000}
#fichaDatos{padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;
  min-width:260px;max-width:380px}
#fichaNombre{color:var(--cian);letter-spacing:.2em;font-size:15px;line-height:1.5}
#fichaEstado{font-size:11px;letter-spacing:.24em}
#fichaEstado.si{color:var(--verde)}
#fichaEstado.no{color:var(--ambar)}
#fichaLore{color:var(--texto);opacity:.85;font-size:13px;line-height:1.7;flex:1}
#btn3d{background:transparent;border:1px solid rgba(127,216,232,.4);border-radius:4px;
  color:var(--cian);cursor:pointer;padding:11px 18px;letter-spacing:.24em;
  font-size:12px;transition:.3s;display:none}
#btn3d.hay{display:block}
#btn3d:hover{border-color:rgba(127,216,232,.9);box-shadow:0 0 18px rgba(127,216,232,.22)}
#fichaCerrar{position:absolute;margin:10px;background:transparent;border:0;
  color:var(--apagado);cursor:pointer;font-size:16px;align-self:flex-start;z-index:2}
#fichaCerrar:hover{color:var(--cian)}
#fichaCaja{position:relative}

/* ── visor 3D ── */
#visor3d{position:fixed;inset:0;z-index:70;display:none;background:
  radial-gradient(ellipse at center, #0a141b 0%, #04070a 75%)}
#visor3d.abierto{display:block}
#mv{width:100%;height:100%;--poster-color:transparent}
#visorNombre{position:absolute;top:22px;left:0;right:0;text-align:center;
  color:var(--cian);letter-spacing:.3em;font-size:13px;pointer-events:none;
  text-shadow:0 0 14px rgba(127,216,232,.6)}
#visorCerrar{position:absolute;right:22px;bottom:20px;background:rgba(0,0,0,.4);
  border:1px solid #22323e;border-radius:4px;color:var(--apagado);cursor:pointer;
  padding:9px 18px;letter-spacing:.22em;font-size:11.5px}
#visorCerrar:hover{color:var(--cian);border-color:rgba(127,216,232,.5)}

/* ── el golpe de estática ── */
#estatica{position:fixed;inset:0;width:100%;height:100%;display:none;z-index:75;
  image-rendering:pixelated;opacity:.9;pointer-events:none}

/* ── móvil ── */
@media (max-width:820px){
  #fichaCaja{flex-direction:column;overflow:auto}
  #fichaImg{width:100%;max-height:44vh}
  #fichaDatos{max-width:none}
  #barra{flex-wrap:wrap;gap:10px}
}