/* Pensado para móvil en vertical: el lienzo pixelado ocupa toda la pantalla, notch incluido.
   En pantallas anchas se muestra como una columna con forma de teléfono. */
:root {
  --bg: #120c1f;
  --frame: #2a1f4a;
  --shadow: rgba(4, 2, 10, 0.6);
  --scan: rgba(0, 0, 0, 0.08);
  /* Panel de bloques para desarrollo */
  --outline: #140c1c;
  --dev: #d8283c;
  --dev-panel: #1c1433;
  --dev-raise: #2a1f4a;
  --dev-line: #3a2d63;
  --dev-ink: #efe9ff;
  --dev-muted: #9c8fd0;
  --dev-mark: #ffec27;
  --dev-on: #6abe30;
  --dev-warn: #ff5d73;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; background: var(--bg); overflow: hidden; overscroll-behavior: none; }
html, body, canvas {
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#wrap { position: relative; }
#wrap.framed { box-shadow: 0 0 0 3px var(--frame), 0 18px 60px var(--shadow); }
#wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--scan) 0, var(--scan) 1px, transparent 1px, transparent var(--px, 3px));
}
canvas { display: block; width: 320px; height: 480px; image-rendering: crisp-edges; image-rendering: pixelated; }
/* Sonda invisible: su alto es lo que tapa el notch arriba (lo lee core/screen.js) */
#safe { position: fixed; top: 0; left: 0; width: 0; height: env(safe-area-inset-top, 0px); visibility: hidden; pointer-events: none; }
/* Error al arrancar: ajustes o configuración de la partida (se ve encima del juego) */
.load-error {
  position: fixed; inset: 0; margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap;
  background: var(--bg); color: #ffcdd8; font: 13px/1.5 ui-monospace, Menlo, monospace;
  -webkit-user-select: text; user-select: text;
}
/* Panel de bloques para desarrollo (DEV_BLOCKS_CONFIG en server/local.env): HTML encima del juego */
.dev-toggle {
  position: fixed; z-index: 21;
  right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  padding: 6px 9px; border: 2px solid var(--outline); border-radius: 4px; box-shadow: 0 2px 0 var(--outline);
  background: var(--dev); color: #fff; font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.1em;
  opacity: 0.85; cursor: pointer;
}
.dev-toggle[aria-expanded="true"] { opacity: 1; }
.dev-back {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(48px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 4, 16, 0.6);
}
.dev-back[hidden] { display: none; }
.dev-panel {
  display: flex; flex-direction: column; width: min(380px, 100%); max-height: 100%; overflow: hidden;
  border: 2px solid var(--outline); border-radius: 6px; box-shadow: 0 0 0 2px var(--frame), 0 18px 60px var(--shadow);
  background: var(--dev-panel); color: var(--dev-ink); font: 12px/1.35 ui-monospace, Menlo, monospace;
}
.dev-panel[hidden] { display: none; }
.dev-panel button {
  padding: 6px 10px; border: 1px solid var(--dev-line); border-radius: 4px;
  background: var(--dev-raise); color: var(--dev-ink); font: inherit; cursor: pointer;
}
.dev-panel button:active { transform: translateY(1px); }
.dev-panel input { accent-color: var(--dev-on); width: 16px; height: 16px; margin: 0; flex: none; }
.dev-panel:focus { outline: none; }
.dev-panel :focus-visible { outline: 2px solid var(--dev-mark); outline-offset: 1px; }
.dev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; background: var(--dev-raise); }
.dev-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.dev-panel .dev-x { padding: 4px 8px; }
.dev-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 6px; }
.dev-opt { display: flex; align-items: center; gap: 8px; padding: 4px 12px; cursor: pointer; }
.dev-opt small { color: var(--dev-muted); }
.dev-opt:has(input:disabled) { cursor: default; }
.dev-list { flex: 1; min-height: 0; margin: 8px 0 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; border-top: 1px solid var(--dev-line); }
/* Cabecera de una rareza (--g = su color en el JSON): se queda arriba mientras se ven sus bloques */
.dev-rarity {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--dev-line); background: var(--dev-raise);
}
.dev-rarity label { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.dev-rarity b { color: var(--g); letter-spacing: 0.12em; }
.dev-rarity small, .dev-rarity .dev-pct { color: var(--dev-muted); font-variant-numeric: tabular-nums; }
.dev-rarity .dev-pct { font-style: normal; }
.dev-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--dev-line); }
.dev-row.changed { box-shadow: inset 3px 0 0 var(--dev-mark); }
.dev-row label { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.dev-row.off .dev-sw, .dev-row.off .dev-txt { opacity: 0.45; }
.dev-sw { flex: none; width: 20px; height: 10px; border: 1px solid var(--outline); background: linear-gradient(var(--t) 0 30%, var(--c) 30%); }
.dev-txt { display: flex; flex-direction: column; min-width: 0; }
.dev-txt b { letter-spacing: 0.04em; }
.dev-txt small { color: var(--dev-muted); overflow-wrap: anywhere; }
.dev-tag { color: var(--dev-warn); font-size: 10px; font-style: normal; }
.dev-panel .dev-solo { flex: none; padding: 4px 8px; color: var(--dev-muted); }
.dev-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 8px 12px; color: var(--dev-muted); }
.dev-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--dev-line); background: var(--dev-raise); }
.dev-panel .dev-tab { margin-bottom: -1px; border-radius: 4px 4px 0 0; background: transparent; color: var(--dev-muted); }
.dev-panel .dev-tab[aria-selected="true"] { border-bottom-color: var(--dev-panel); background: var(--dev-panel); color: var(--dev-ink); }
.dev-page { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.dev-page[hidden] { display: none; }
.dev-run { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
.dev-run .dev-tools, .dev-run .dev-opt { padding: 0; }
.dev-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dev-panel .dev-field input {
  width: 6em; height: auto; padding: 5px 6px; border: 1px solid var(--dev-line); border-radius: 4px;
  background: var(--dev-raise); color: var(--dev-ink); font: inherit; text-align: right;
}
.dev-panel input[type="range"] { width: 100%; height: 20px; }
.dev-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 8px 0; border-top: 1px solid var(--dev-line); border-bottom: 1px solid var(--dev-line); }
.dev-info dt { color: var(--dev-muted); }
.dev-info dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.dev-panel .dev-go { border-color: var(--dev-on); color: var(--dev-on); font-weight: 700; }
.dev-note { margin: 0; color: var(--dev-muted); }
.dev-note.dev-alert { color: var(--dev-warn); }
.dev-note[hidden], .dev-info[hidden], .dev-plan[hidden] { display: none; }
.dev-plan-top { flex: none; }
.dev-plan { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; border-top: 1px solid var(--dev-line); }
.dev-line { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-bottom: 1px solid var(--dev-line); }
.dev-line.spot { box-shadow: inset 3px 0 0 var(--dev-mark); }
.dev-line.off .dev-sw, .dev-line.off .dev-txt { opacity: 0.45; }
.dev-n { flex: none; width: 3.5em; color: var(--dev-muted); font-variant-numeric: tabular-nums; text-align: right; }
/* La clave, antes de abrir el panel (16 px en la casilla: con menos, el móvil hace zoom al escribir) */
.dev-panel.dev-lock { width: min(260px, 100%); }
.dev-pin { display: flex; align-items: center; gap: 8px; padding: 14px 12px 4px; }
.dev-panel .dev-pin input {
  flex: 1; width: auto; min-width: 0; height: auto; padding: 5px 8px; border: 1px solid var(--dev-line); border-radius: 4px;
  background: var(--dev-raise); color: var(--dev-ink); font: inherit; font-size: 16px; letter-spacing: 0.4em; text-align: center;
}
.dev-msg { min-height: 1.35em; margin: 0; padding: 4px 12px 12px; color: var(--dev-muted); }
.dev-msg.bad { color: var(--dev-warn); }