/* ==========================================================================
   Once pisos — juego 6.
   Beat 'em up en un edificio de 1974. Los controles son botones de verdad en
   táctil y teclas en escritorio; el lienzo sólo dibuja.
   ========================================================================== */

.op-intro {
  padding: clamp(34px, 6vw, 66px) 0 clamp(14px, 2.4vw, 22px);
  background: linear-gradient(180deg, rgba(29, 36, 48, .3), transparent 90%);
}

.op-intro h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.024em;
  margin: .18em 0 .5em;
}

.op-intro .lead { max-width: 62ch; }
.op-intro .eyebrow a { color: inherit; }

.op-seccion { padding: 0 0 clamp(44px, 6vw, 76px); }
.op { max-width: 740px; margin: 0 auto; }

/* ================================================================= HUD == */

.op-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 9px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-1);
}

.op-hud[hidden] { display: none; }

.op-hud > span { display: flex; flex-direction: column; line-height: 1.15; }

.op-hud small {
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.op-hud b {
  font-size: .98rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.hud-vida { min-width: 140px; flex: 1; }

.hud-vida .barra {
  display: block;
  height: 9px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.hud-vida i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c0392b, #e0704f);
  transition: width .18s ease;
}

.hud-vida i.bien { background: linear-gradient(90deg, #2f7d55, #59b184); }
.hud-vida i.medio { background: linear-gradient(90deg, #a8791f, #d8a93e); }

.hud-fantasma b { color: #9a7fd0; }
.hud-arma b { color: #b8894a; }

/* =========================================================== el lienzo == */

.op-vista {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: #10141b;
  box-shadow: var(--shadow-s);
}

/* El descanso y el final no entran en el alto del lienzo. En vez de ponerle
   un alto fijo —que se rompe en cuanto cambia el ancho— mientras están
   puestos se saca el lienzo del medio y la pantalla deja de estar absoluta:
   así la caja mide exactamente lo que mide el texto, en cualquier pantalla. */
.op.con-pantalla .op-vista { overflow: visible; }
.op.con-pantalla .op-vista > canvas { display: none; }

.op.con-pantalla .pant-ancha:not([hidden]) {
  position: relative;
  inset: auto;
  overflow: visible;
  border-radius: var(--radius-m);
}

.op-vista canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  touch-action: none;
}

.flash {
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(12, 16, 22, .9);
  color: #e8dcc6;
  font-size: .82rem;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}

.flash[hidden] { display: none; }
.flash.mal { background: rgba(140, 34, 24, .92); color: #ffd9d2; }
.flash.bien { background: rgba(24, 88, 58, .92); color: #d5f5e3; }

/* ======================================================= las pantallas == */

.pant {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4%;
  background: #141922;
  overflow-y: auto;
  z-index: 3;
}

/* La regla del agente de usuario para [hidden] pierde contra display:grid,
   que es igual de específica y viene después. Sin esto la pantalla nunca se
   esconde y se come todos los clics. */
.pant[hidden] { display: none; }

.pant-caja { max-width: 44ch; text-align: center; color: #e6e2da; }
.pant-caja-ancha { max-width: 62ch; }
.pant-ancha { place-items: start center; padding-block: 22px; }

.pant-kicker {
  margin: 0 0 6px;
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #8f7ac0;
}

.pant-caja h2 {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  line-height: 1.16;
  color: #fff;
}

.pant-caja h3 {
  margin: 14px 0 8px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9aa4b2;
}

.pant-caja p, .pant-texto p {
  margin: 0 0 11px;
  font-size: clamp(.8rem, 2.2vw, .92rem);
  line-height: 1.62;
  color: #b6bcc6;
}

.pant-texto strong, .pant-caja strong { color: #fff; }
.pant-texto em { color: #cfd6de; }
.pant-caja b { color: #fff; }

.pant-nota {
  padding: 8px 11px;
  border-radius: 6px;
  border: 1px solid rgba(143, 122, 192, .34);
  background: rgba(143, 122, 192, .1);
}

.pant-cta {
  appearance: none;
  cursor: pointer;
  margin-top: 6px;
  padding: 11px 22px;
  border: 0;
  border-radius: 6px;
  background: #5b4a8a;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.pant-cta:hover { background: #6d59a4; }
.pant-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pant-cta[hidden] { display: none; }
.pant-cta[disabled] { opacity: .45; cursor: default; }

.pant-cta-2 {
  margin-left: 8px;
  background: transparent;
  border: 1px solid #4e5666;
  color: #d6dbe2;
}

.pant-cta-2:hover { background: rgba(255, 255, 255, .08); }

.pant-pie { margin: 13px 0 0; font-size: .78rem; }
.pant-pie a { color: #8b93a0; }

.final-botones { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }

/* ------------------------------------------------------- el descanso -- */

.descanso-caja { margin: 0 0 6px; }
.descanso-caja b { color: #d8c07a; font-variant-numeric: tabular-nums; }

.descanso-cols {
  display: grid;
  gap: 6px 22px;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  text-align: left;
}

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.lista li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  color: #b6bcc6;
}

.lista .item-txt { flex: 1; min-width: 0; }
.lista .item-txt b { display: block; color: #ece8e0; font-weight: 600; }
.lista .item-txt small { display: block; color: #8b93a0; font-size: .72rem; line-height: 1.35; }

.btn-item {
  appearance: none;
  cursor: pointer;
  flex: none;
  padding: 6px 11px;
  border: 1px solid #4e5666;
  border-radius: 5px;
  background: rgba(255, 255, 255, .04);
  color: #ece8e0;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.btn-item:hover:not([disabled]) { background: #5b4a8a; border-color: #5b4a8a; }
.btn-item:focus-visible { outline: 2px solid #8f7ac0; outline-offset: 2px; }
.btn-item[disabled] { opacity: .4; cursor: default; }
.btn-item.puesto { border-color: #5b8a6a; color: #8fd0a4; background: rgba(91, 138, 106, .16); }

/* ============================================ el panel del ascensor == */

.panel-asc {
  margin: 18px 0 4px;
  padding: 12px 14px 10px;
  border: 1px solid #3a4250;
  border-radius: 10px;
  background: linear-gradient(180deg, #222933, #1a1f27);
  text-align: center;
}

.panel-tit {
  margin: 0 0 9px;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7d8798;
}

.panel-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.panel-boton {
  appearance: none;
  cursor: pointer;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid #4a525f;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4d5462, #2b313a);
  color: #cdd4de;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.panel-boton:hover { border-color: #6c778a; }
.panel-boton:focus-visible { outline: 2px solid #8f7ac0; outline-offset: 2px; }

/* Dos están más gastados que el resto. No dice más que eso. */
.panel-boton.gastado {
  background: radial-gradient(circle at 38% 32%, #6a6250, #3b3830);
  border-color: #6a6250;
  color: #e2d7bd;
}

.panel-boton.prendido,
.panel-boton:active {
  background: radial-gradient(circle at 38% 32%, #d8c07a, #9a8440);
  border-color: #e0cd97;
  color: #2a2416;
}

/* En un teléfono angosto los siete no entran a 40px y el 11 se cae solo a
   una segunda fila. Achicados entran todos en una. */
@media (max-width: 430px) {
  .panel-botones { gap: 6px; }
  .panel-boton { width: 36px; height: 36px; font-size: .68rem; }
  .panel-asc { padding-left: 8px; padding-right: 8px; }
}

.panel-pie {
  margin: 9px 0 0;
  font-size: .72rem;
  line-height: 1.45;
  color: #7d8798;
  min-height: 2.1em;
}

.lista-fantasmas .vacio { color: #8b93a0; font-size: .78rem; font-style: italic; }

/* ===================================================== el mando táctil == */

.mandos { display: none; gap: 10px; margin-top: 10px; justify-content: space-between; }
.mandos[hidden] { display: none; }

@media (hover: none) and (pointer: coarse) {
  .mandos:not([hidden]) { display: flex; }
}

.mando-cruz { display: flex; align-items: center; gap: 6px; flex: none; }
.mando-col { display: flex; flex-direction: column; gap: 6px; }

/* Los tres de acción van en columna: al lado de la cruz no entran en un
   teléfono angosto y "Fantasma" se salía de la pantalla. */
.mando-acciones {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.mando-acciones .mando { padding: 9px 8px; width: 100%; }

.mando {
  appearance: none;
  cursor: pointer;
  min-width: 54px;
  padding: 14px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-0);
  color: var(--text-primary);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.mando:active { background: var(--surface-2); }
.mando-a { border-color: #c0392b; color: #c0392b; }
.mando-b { border-color: #a8791f; color: #a8791f; }
.mando-c { border-color: #5b4a8a; color: #7a66b0; }

.op-pista {
  margin: 10px 0 0;
  min-height: 2.6em;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.op-pista strong { color: var(--text-primary); }

/* ============================================================ libreta == */

.op-libreta {
  max-width: 740px;
  margin: clamp(30px, 5vw, 52px) auto 0;
  padding-top: clamp(22px, 3.4vw, 32px);
  border-top: 1px solid var(--border);
}

.op-libreta h2 { margin: 0 0 8px; font-size: 1.16rem; letter-spacing: -.012em; }

.op-libreta h3 {
  margin: 26px 0 10px;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.libreta-intro { margin: 0 0 16px; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }

.libreta-cols {
  display: grid;
  gap: 18px 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.libreta-cols article {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-1);
}

.libreta-cols h4 {
  margin: 0 0 4px;
  font-size: .92rem;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

.libreta-cols .piso {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8f7ac0;
}

.libreta-cols p { margin: 6px 0 0; font-size: .84rem; line-height: 1.55; color: var(--text-secondary); }

.libreta-cols .poder {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted var(--border);
  font-size: .78rem;
  color: var(--text-muted);
}

.libreta-cols .poder b { color: #7a66b0; }

.libreta-reglas { margin: 0; padding-left: 20px; }

.libreta-reglas li {
  margin-bottom: 8px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.libreta-pie {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.op-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hud-vida i { transition: none; }
}