/* Fuentes alojadas en el plugin (OFL). */
@font-face{font-family:"NP Silkscreen";font-style:normal;font-weight:400;font-display:swap;src:url(../../fuentes/silkscreen-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"NP Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../../fuentes/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"NP Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../../fuentes/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
/* Hasta donde llega la luz: estilos aislados del tema. Todo cuelga de #np-luz.
   El reset devuelve los elementos a los valores del navegador para que Kadence no se cuele. */
#np-luz :where(div,section,aside,header,nav,h1,h2,h3,p,ul,li,a,b,i,small,span,label,button,input,select,option,output,canvas,details,summary,dl,dt,dd,table,thead,tbody,tr,th,td){all:revert}
#np-luz [hidden]{display:none!important}
#np-luz .top .meta a.chip{text-decoration:none;color:var(--muted)}#np-luz .top .meta a.chip:hover{color:var(--lime);border-color:var(--lime)}
#np-luz .np-luz-versiones{display:inline-flex;align-items:center;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#np-luz .np-luz-versiones a,#np-luz .np-luz-versiones span.chip{display:inline-block;text-decoration:none}
#np-luz .np-luz-versiones a.chip:hover{color:var(--lime);border-color:var(--lime)}
#np-luz .np-luz-tactil{display:none;margin:0;padding:8px 12px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:12px}
@media (hover:none) and (pointer:coarse){#np-luz .np-luz-tactil{display:block}}

/* Layout: cabecera de laboratorio, escenario + panel del grupo en dos columnas, parámetros y notas debajo */
#np-luz {
  --bg: #06080c;
  --grid: rgba(70, 110, 170, 0.08);
  --panel: #0b111b;
  --panel-2: #0f1724;
  --line: #1d2b44;
  --blue: #2f6fb0;
  --blue-soft: #8fb3e6;
  --lime: #b6ff3b;
  --fg: #dde6f2;
  --muted: #7d8ba3;
  --hp: #ff4d5e;
  --mind: #b07cf0;
  --gold: #d9b04a;
  --mono: "NP Plex Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pixel: "NP Silkscreen", "Silkscreen", "NP Plex Mono", "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}
#np-luz * { box-sizing: border-box; }
#np-luz {
  margin: 0;
  background: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--fg);
  font: 14px/1.5 var(--mono);
}
#np-luz .page { max-width: 1240px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 48px; display: grid; gap: 16px; }

#np-luz .top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
#np-luz .top h1 { font: 400 22px/1.1 var(--pixel); margin: 0; letter-spacing: 0.02em; text-wrap: balance; }
#np-luz .top h1 span { color: var(--lime); }
#np-luz .top .meta { display: flex; flex-wrap: wrap; gap: 6px; }
#np-luz .chip { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--line); padding: 2px 8px; color: var(--muted); background: var(--panel); }
#np-luz .lvl-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
#np-luz .lvl-pick select { font: inherit; text-transform: none; letter-spacing: 0; background: var(--panel); color: var(--fg); border: 1px solid var(--line); padding: 2px 4px; }
#np-luz .lvl-pick .btn { padding: 2px 10px; font-size: 11px; }
#np-luz .chip.lime { color: var(--lime); border-color: rgba(182, 255, 59, 0.4); }

#np-luz .stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 960px) { #np-luz .stage { grid-template-columns: minmax(0, 1fr); } }

#np-luz #play-wrap { position: relative; border: 1px solid var(--line); background: #05070a; outline: none; }
#np-luz #play-wrap.is-active { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(182, 255, 59, 0.25); }
#np-luz #game-host { aspect-ratio: 21 / 14; width: 100%; max-width: 100%; }
#np-luz #game-host canvas { display: block; image-rendering: pixelated; }
#np-luz .play-bar { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
#np-luz #run-info { display: contents; }

#np-luz #overlay[hidden] { display: none; } /* v0.15: sin esto la capa vacía tapaba el juego y el clic no le llegaba */
#np-luz #overlay { position: absolute; inset: 0 0 31px 0; display: grid; place-items: center; background: rgba(5, 7, 10, 0.72); padding: 16px; }
#np-luz .ov-card { background: var(--panel); border: 1px solid var(--line); padding: 20px 22px; max-width: 460px; display: grid; gap: 12px; }
#np-luz .ov-card.small { max-width: 340px; padding: 14px 16px; }
#np-luz .ov-card h2 { font: 400 20px/1.2 var(--pixel); margin: 0; color: var(--fg); text-wrap: balance; }
#np-luz .ov-card p { margin: 0; color: var(--muted); }
#np-luz .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lime) !important; }
#np-luz .ov-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#np-luz .ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
#np-luz .ov-stats div { border: 1px solid var(--line); padding: 6px 8px; }
#np-luz .ov-stats dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
#np-luz .ov-stats dd { margin: 0; font-size: 18px; font-variant-numeric: tabular-nums; }

#np-luz .btn { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 14px; background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); cursor: pointer; }
#np-luz .btn:hover { border-color: var(--blue); }
#np-luz .btn.primary { background: var(--lime); color: #0a0f05; border-color: var(--lime); }
#np-luz .btn.primary:hover { filter: brightness(1.08); }
#np-luz .btn:focus-visible, #np-luz .hero-slot:focus-visible, #np-luz select:focus-visible, #np-luz input:focus-visible, #np-luz summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* panel del grupo */
#np-luz #panel { background: var(--panel); border: 1px solid var(--line); display: grid; }
#np-luz .psec { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; min-width: 0; }
#np-luz .psec:last-child { border-bottom: 0; }
#np-luz .psec h3 { margin: 0; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); display: flex; justify-content: space-between; }
/* grupo bajo el escenario: una casilla por héroe, encontrado o no */
#np-luz .play-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
#np-luz .group-bar { background: var(--panel); border: 1px solid var(--line); padding: 10px 12px 14px; display: grid; gap: 8px; }
#np-luz .group-bar h3 { margin: 0; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); display: flex; justify-content: space-between; }
#np-luz #roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#np-luz .hero-slot.is-locked { cursor: default; border-style: dashed; background: transparent; }
#np-luz .hero-slot.is-locked canvas { filter: brightness(0); opacity: 0.55; }
#np-luz .hero-slot.is-locked .slot-name { color: var(--muted); }
#np-luz .slot-lock { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--line); padding: 1px 5px; }
#np-luz .hero-slot { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 2px 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: inherit; transition: transform 0.12s; }
#np-luz .hero-slot canvas { image-rendering: pixelated; width: 48px; height: 48px; }
#np-luz .hero-slot.is-selected { border-color: var(--lime); color: var(--fg); transform: translateY(-3px); }
#np-luz .hero-slot.is-selected::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 8px; height: 4px; margin-left: -4px; background: var(--lime); }
#np-luz .hero-slot.is-down canvas { filter: grayscale(1) brightness(0.5); }
#np-luz .hero-slot.is-down .slot-name { text-decoration: line-through; }
#np-luz .slot-meta { display: grid; justify-items: center; gap: 3px; width: 100%; padding: 0 6px; }
#np-luz .slot-key { font-size: 9px; color: var(--blue-soft); }
#np-luz .hero-slot.is-selected .slot-key { color: var(--lime); }
#np-luz .slot-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
#np-luz .slot-bars { display: grid; gap: 2px; width: 100%; }
#np-luz .slot-bars i { display: block; height: 2px; background: var(--hp); }
#np-luz .slot-bars i.mind { background: var(--mind); }

#np-luz .hero-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
#np-luz #hero-portrait { width: 72px; height: 72px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; }
#np-luz #hero-portrait canvas { width: 64px; height: 64px; image-rendering: pixelated; }
#np-luz #hero-name { font: 400 18px/1.1 var(--pixel); margin: 0; }
#np-luz #hero-role { margin: 2px 0 6px; color: var(--muted); font-size: 12px; }
#np-luz #hero-status { display: flex; flex-wrap: wrap; gap: 4px; }
#np-luz .tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border: 1px solid currentColor; }
#np-luz .tag.orb { color: #6ad0ff; } #np-luz .tag.bad { color: var(--hp); } #np-luz .tag.mind { color: var(--mind); } #np-luz .tag.gold { color: var(--gold); } #np-luz .tag.good { color: var(--lime); } #np-luz .tag.dim { color: var(--muted); border-color: var(--line); }

#np-luz .meter { display: grid; grid-template-columns: 70px minmax(0, 1fr) 52px; gap: 8px; align-items: center; font-size: 11px; font-variant-numeric: tabular-nums; }
#np-luz .meter .lbl { text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
#np-luz .meter .track { height: 8px; background: #05070a; border: 1px solid var(--line); }
#np-luz .meter .track, #np-luz .meter .fill { display: block; }
#np-luz .meter .fill { height: 100%; transition: width 0.15s; }
#np-luz .meter .num { text-align: right; }
#np-luz #bar-hp { background: var(--hp); } #np-luz #bar-mind { background: var(--mind); }

#np-luz #hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
#np-luz .core { background: var(--panel-2); border: 1px solid var(--line); padding: 6px 10px; display: grid; gap: 1px; }
#np-luz .core dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
#np-luz .core dd { margin: 0; font: 400 22px/1.1 var(--pixel); font-variant-numeric: tabular-nums; }
#np-luz .core small { font-size: 10px; color: var(--muted); }
#np-luz #hero-sub { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }
#np-luz #hero-sub b { color: var(--fg); font-weight: 500; }
#np-luz .stat { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 2px; }
#np-luz .stat dt { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }
#np-luz .stat dd { margin: 0; display: flex; gap: 6px; align-items: baseline; font-variant-numeric: tabular-nums; }
#np-luz .pips { color: var(--blue); font-size: 9px; letter-spacing: -1px; }

#np-luz #hero-actions { display: grid; gap: 6px; }
#np-luz .action { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 8px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
#np-luz .action b { font-weight: 500; font-size: 12px; display: block; }
#np-luz .action small { color: var(--muted); font-size: 11px; line-height: 1.35; display: block; }
#np-luz .act-key { font-size: 9px; text-align: center; border: 1px solid var(--blue); color: var(--blue-soft); padding: 2px 0; letter-spacing: 0.06em; }
#np-luz .action.ready .act-key { border-color: var(--lime); color: var(--lime); }
#np-luz .cd { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--f, 0) * 100%); background: var(--blue); }
#np-luz .action.passive .act-key { border-style: dashed; }

#np-luz #log { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 11px; color: var(--muted); min-height: 6.5em; }
#np-luz #log li:first-child { color: var(--fg); }
#np-luz #log li.good { color: #cfe9a6; } #np-luz #log li.bad { color: #ff9aa4; } #np-luz #log li.mind { color: #cfb2f5; }
#np-luz #log li:first-child.good { color: var(--lime); }

/* parámetros y notas */
#np-luz .docs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { #np-luz .docs { grid-template-columns: minmax(0, 1fr); } }
#np-luz details.box { background: var(--panel); border: 1px solid var(--line); }
#np-luz details.box > summary { cursor: pointer; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue-soft); list-style: none; display: flex; justify-content: space-between; }
#np-luz details.box > summary::after { content: "+"; color: var(--lime); }
#np-luz details.box[open] > summary::after { content: "-"; }
#np-luz details.box > summary::-webkit-details-marker { display: none; }
#np-luz .box-body { padding: 4px 14px 14px; display: grid; gap: 10px; }
#np-luz .box-body p { margin: 0; color: var(--muted); font-size: 12px; max-width: 65ch; }
#np-luz .box-body p b { color: var(--fg); font-weight: 500; }
#np-luz #params { display: grid; gap: 8px; }
#np-luz .prow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 10px; align-items: center; border-bottom: 1px dashed var(--line); padding-bottom: 6px; font-size: 12px; }
@media (max-width: 700px) { #np-luz .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #np-luz .plabel { grid-column: 1 / -1; } #np-luz .pcurve { grid-column: 1 / -1; } }
#np-luz .pctl { display: grid; grid-template-columns: auto minmax(0, 1fr) 34px; gap: 6px; align-items: center; }
#np-luz .ptag { font-size: 9px; color: var(--blue-soft); border: 1px solid var(--line); padding: 0 4px; }
#np-luz .pctl output { text-align: right; font-variant-numeric: tabular-nums; }
#np-luz .pcurve { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
#np-luz input[type=range] { accent-color: var(--lime); width: 100%; min-width: 0; }
#np-luz select { background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); font: inherit; font-size: 12px; padding: 4px 6px; }
#np-luz .prow-inline { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 12px; }
#np-luz .prow-inline input[type=number] { width: 110px; background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); font: inherit; padding: 4px 6px; }
#np-luz .keys { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12px; }
#np-luz .keys dt { color: var(--lime); }
#np-luz .keys dd { margin: 0; color: var(--muted); }
#np-luz .formula { font-size: 13px; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); padding: 6px 10px; justify-self: start; }
@media (prefers-reduced-motion: reduce) { #np-luz .hero-slot, #np-luz .meter .fill { transition: none; } }

#np-luz .bestiary { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
#np-luz .beast { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
#np-luz .beast-img canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
#np-luz .beast b { font-weight: 500; }
#np-luz .beast small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: 2px; }
#np-luz .beast .beast-num { color: var(--blue-soft); font-variant-numeric: tabular-nums; }

#np-luz .beast-cfg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--muted); }
#np-luz .beast-cfg select, #np-luz .beast-cfg input { width: 100%; min-width: 0; font-size: 11px; padding: 2px 4px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); font-family: var(--mono); }
#np-luz .beast-cfg input:disabled { opacity: 0.4; }
#np-luz .beast.is-changed { border-color: var(--lime); }

#np-luz .plus { font-style: normal; color: var(--lime); font-size: 10px; margin-left: 2px; }
#np-luz .items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 11px; }
#np-luz .items li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; }
#np-luz .items li.empty { display: block; color: var(--muted); }
#np-luz .items b { font-weight: 500; display: block; }
#np-luz .items small { color: var(--muted); }
#np-luz .item-ico canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; background: var(--panel-2); border: 1px solid var(--line); }

#np-luz .play-bar .boss { color: var(--hp); }

#np-luz #announce { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--lime); padding: 10px 16px; max-width: calc(100% - 32px); pointer-events: none; }
#np-luz #announce canvas { image-rendering: pixelated; width: 48px; height: 48px; flex: none; }
#np-luz #announce p { margin: 0; }
#np-luz #announce .ann-name { font: 400 18px/1.2 var(--pixel); color: var(--fg); }
#np-luz #announce .ann-role { font-size: 11px; color: var(--muted); }
#np-luz #announce.show { animation: ann-in 0.35s ease-out; }
@keyframes ann-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { #np-luz #announce.show { animation: none; } }
#np-luz .play-bar .keys { color: var(--gold); }
#np-luz .hero-slot canvas { max-width: 100%; height: auto; }

/* parámetros: tabla de 12 mazmorras con desplazamiento horizontal propio */
#np-luz .ptable-wrap { overflow-x: auto; max-width: 100%; }
#np-luz .ptable { border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
#np-luz .ptable th, #np-luz .ptable td { border-bottom: 1px dashed var(--line); padding: 3px 4px; text-align: center; white-space: nowrap; }
#np-luz .ptable th[scope=row] { text-align: left; font-weight: 400; color: var(--fg); min-width: 200px; white-space: normal; }
#np-luz .ptable thead th { color: var(--muted); font-weight: 500; }
#np-luz .ptable input { width: 48px; background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); font: inherit; padding: 2px 3px; text-align: right; }
#np-luz .ptable input.is-changed { border-color: var(--lime); }
#np-luz #hint { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--blue); color: var(--fg); padding: 8px 14px; font-size: 12px; max-width: calc(100% - 32px); pointer-events: none; }
#np-luz #hint b { color: var(--lime); font-weight: 500; }

/* ===== Táctil y modo juego (v0.16) ===== */
#np-luz #play-wrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#np-luz #game-host canvas { touch-action: none; }
body.touch #np-luz #play-wrap.hud-right, body.game #np-luz #play-wrap.hud-right { padding-right: 128px; }
body.touch #np-luz #play-wrap.hud-left, body.game #np-luz #play-wrap.hud-left { padding-left: 128px; }
body.touch #np-luz .stage { grid-template-columns: minmax(0, 1fr); }
body.touch:not(.game) #np-luz #game-host { width: min(100%, calc((100dvh - 120px) * 1.5)); margin-inline: auto; } /* cabecera + barra: el juego entero cabe en pantalla */

/* columna de control: menú, retratos en acordeón y Especial */
#np-luz #hud { position: absolute; top: 0; bottom: 31px; width: 128px; box-sizing: border-box; padding: 10px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--panel); z-index: 10; }
#np-luz #hud[hidden] { display: none; }
#np-luz .hud-right #hud { right: 0; border-left: 1px solid var(--line); }
#np-luz .hud-left #hud { left: 0; border-right: 1px solid var(--line); }
#np-luz .h-top { display: flex; flex-direction: column; gap: 6px; }
#np-luz .h-btn { width: 112px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); font: 400 12px/1 var(--pixel); }
#np-luz .h-btn span { font: 10px var(--mono); color: var(--muted); }
#np-luz .h-full { min-height: 36px; font: 10px var(--mono); }
#np-luz .h-btn[hidden] { display: none; }
#np-luz .h-list { flex: 1; width: 112px; display: flex; flex-direction: column; gap: 6px; justify-content: center; touch-action: none; }
#np-luz .h-slot { position: relative; width: 112px; min-height: 50px; box-sizing: border-box; padding: 6px 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 8px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); font: 10px/1.2 var(--mono); text-align: left; cursor: pointer; }
#np-luz .h-slot canvas { width: 32px; height: 32px; image-rendering: pixelated; }
#np-luz .h-name, #np-luz .h-num { display: none; }
#np-luz .h-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#np-luz .h-bars i { display: block; height: 4px; background: var(--line); }
#np-luz .h-bars i b { display: block; height: 100%; width: 0; }
#np-luz .h-hp b { background: var(--hp); } #np-luz .h-mind b { background: var(--mind); }
#np-luz .h-tag { position: absolute; right: 4px; top: 2px; font-size: 9px; color: var(--hp); }
#np-luz .h-slot.is-hurt { border-color: var(--hp); }
#np-luz .h-slot.is-down { opacity: 0.45; }
#np-luz .h-slot.is-locked { opacity: 0.45; cursor: default; }
#np-luz .h-slot.is-locked canvas { filter: brightness(0); opacity: 0.6; }
#np-luz .h-slot.is-locked .h-bars { visibility: hidden; }
#np-luz .h-slot.is-active { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 6px; padding: 8px; border: 2px solid var(--lime); }
#np-luz .h-slot.is-active canvas { width: 56px; height: 56px; }
#np-luz .h-slot.is-active .h-name { display: block; font: 400 12px/1 var(--pixel); color: var(--lime); }
#np-luz .h-slot.is-active .h-bars { width: 100%; gap: 3px; }
#np-luz .h-slot.is-active .h-num { display: block; color: var(--muted); font-size: 10px; }
#np-luz .h-slot.is-active .h-bars i { height: 6px; }
@keyframes genio { 0% { transform: translateY(36px) scale(0.5, 0.35); transform-origin: 50% 100%; opacity: 0.3; } 55% { transform: translateY(6px) scale(0.85, 1.12); opacity: 0.9; } 100% { transform: none; opacity: 1; } }
#np-luz .h-slot.genio { animation: genio 380ms cubic-bezier(.2, .8, .2, 1); }
#np-luz .h-special { position: relative; width: 100px; height: 100px; padding: 0; border: none; background: none; color: var(--fg); flex-shrink: 0; }
#np-luz .h-special svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#np-luz .h-track { fill: var(--panel-2); stroke: var(--line); stroke-width: 8; }
#np-luz .h-ring { fill: none; stroke: #4a9cff; stroke-width: 8; }
#np-luz .h-sp-name, #np-luz .h-sp-left { position: relative; display: block; text-align: center; padding: 0 12px; }
#np-luz .h-sp-name { font: 400 11px/1.2 var(--pixel); }
#np-luz .h-sp-left { font-size: 11px; color: var(--blue-soft); margin-top: 2px; }
#np-luz .h-special.is-ready .h-track { fill: var(--lime); stroke: var(--lime); }
#np-luz .h-special.is-ready .h-ring { stroke: var(--lime); }
#np-luz .h-special.is-ready, #np-luz .h-special.is-ready .h-sp-left { color: var(--bg); }
#np-luz .h-special.is-off { opacity: 0.4; }
@keyframes listo { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
#np-luz .h-special.pulse { animation: listo 360ms ease-out; }

/* modo juego: el área de juego ocupa toda la pantalla */
body.game { overflow: hidden; }
body.game #np-luz #play-wrap { position: fixed; inset: 0; z-index: 30; border: 0; box-shadow: none; background: #05070a; overflow: hidden; }
body.game #np-luz #game-host { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
body.game #np-luz #hud { bottom: 0; }
body.game #np-luz .play-bar { position: absolute; top: 12px; z-index: 5; border: 1px solid var(--line); background: rgba(11, 17, 27, 0.82); }
body.game #np-luz .hud-right .play-bar { left: 12px; }
body.game #np-luz .hud-left .play-bar { left: 140px; }
body.game #np-luz #overlay { inset: 0; z-index: 20; }

/* menú de pausa del modo juego */
#np-luz #game-menu { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px; box-sizing: border-box; background: rgba(5, 7, 10, 0.88); }
#np-luz #game-menu[hidden] { display: none; }
#np-luz .gm-card { width: min(1100px, 100%); height: calc(100dvh - 48px); max-height: 760px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); }
#np-luz .gm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
#np-luz .gm-title { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
#np-luz .gm-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
#np-luz .gm-name { font: 400 22px/1.2 var(--pixel); }
#np-luz .gm-hand { display: flex; align-items: center; border: 1px solid var(--line); }
#np-luz .gm-hand span { padding: 0 10px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
#np-luz .gm-hand button { min-height: 42px; padding: 0 12px; border: none; border-left: 1px solid var(--line); background: var(--panel-2); color: var(--fg); font: 12px var(--mono); }
#np-luz .gm-hand button.is-on { background: var(--lime); color: var(--bg); }
#np-luz .gm-exit { min-height: 44px; padding: 0 14px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); font: 12px var(--mono); }
#np-luz .gm-go { min-height: 44px; padding: 0 20px; background: var(--lime); border: none; color: var(--bg); font: 400 14px var(--pixel); }
#np-luz .gm-body { flex: 1; min-height: 0; display: flex; }
#np-luz .gm-nav { width: 220px; flex-shrink: 0; box-sizing: border-box; padding: 16px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
#np-luz .gm-tab { min-height: 44px; padding: 0 12px; text-align: left; background: none; border: 1px solid transparent; color: var(--fg); font: 12px var(--mono); }
#np-luz .gm-tab.is-on { background: var(--panel-2); border-color: var(--lime); color: var(--lime); }
#np-luz .gm-pane { flex: 1; min-width: 0; overflow: auto; padding: 20px 24px; box-sizing: border-box; }
#np-luz .gm-sec[hidden] { display: none; }
#np-luz .gm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { #np-luz .gm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } #np-luz .gm-nav { width: 170px; } }
#np-luz .gm-card-h { display: flex; flex-direction: column; gap: 8px; padding: 14px; text-align: left; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); font: 11px/1.4 var(--mono); }
#np-luz .gm-card-h.is-active { border: 2px solid var(--lime); }
#np-luz .gm-card-h.is-down { opacity: 0.6; }
#np-luz .gm-card-h.is-locked { opacity: 0.7; }
#np-luz .gm-card-h.is-locked canvas { filter: brightness(0); opacity: 0.6; }
#np-luz .gm-hrow { display: flex; gap: 10px; align-items: center; }
#np-luz .gm-hrow b { display: block; font: 400 14px var(--pixel); }
#np-luz .gm-hrow small { display: block; font-size: 10px; color: var(--muted); }
#np-luz .gm-spr canvas { width: 48px; height: 48px; image-rendering: pixelated; display: block; }
#np-luz .gm-meter { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
#np-luz .gm-bar { display: block; height: 6px; background: var(--line); }
#np-luz .gm-bar b { display: block; height: 100%; }
#np-luz .gm-bar.hp b { background: var(--hp); } #np-luz .gm-bar.mind b { background: var(--mind); }
#np-luz .gm-stats { color: var(--muted); } #np-luz .gm-stats b { color: var(--fg); font-weight: 500; }
#np-luz .gm-sp em { font-style: normal; color: var(--blue-soft); }
#np-luz .gm-items { display: flex; flex-wrap: wrap; gap: 6px; }
#np-luz .gm-items span { font-size: 10px; padding: 3px 6px; border: 1px solid var(--line); color: var(--gold); }
#np-luz .gm-note, #np-luz .gm-hint { font-size: 11px; color: var(--muted); }

/* en tablet: recomendar el modo juego */
#np-luz #fs-offer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 10, 0.8); }
#np-luz #fs-offer[hidden] { display: none; }
#np-luz .fs-card { max-width: 520px; box-sizing: border-box; padding: 28px; display: flex; flex-direction: column; gap: 16px; background: var(--panel); border: 1px solid var(--blue); }
#np-luz .fs-card h2 { margin: 0; font: 400 22px/1.25 var(--pixel); }
#np-luz .fs-card p { margin: 0; color: var(--muted); }
#np-luz .fs-card .fs-small { font-size: 11px; }
#np-luz .fs-card .btn { min-height: 48px; }

#np-luz #rotate-note { display: none; }
@media (orientation: portrait) {
  body.touch #np-luz #rotate-note { display: grid; place-items: center; position: fixed; inset: 0; z-index: 70; background: rgba(5, 7, 10, 0.94); padding: 24px; text-align: center; font: 400 16px/1.4 var(--pixel); color: var(--fg); }
}


/* contenedor a ancho completo dentro del tema (va al final para ganar al body del prototipo) */
#np-luz{position:relative;width:100vw;max-width:100vw;margin:0 0 0 calc(50% - 50vw);text-align:left;font-style:normal;letter-spacing:normal;text-transform:none;word-break:normal;hyphens:manual;text-indent:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
/* capas a pantalla completa (modo juego, avisos de tablet) por encima de la cabecera del tema */
body.game #np-luz #play-wrap{z-index:100000}#np-luz #fs-offer{z-index:100001}body.touch #np-luz #rotate-note{z-index:100002}