/* 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 (v0.15): el juego ocupa el alto de la pantalla, botones encima y se pide jugar en horizontal ===== */
#np-luz #play-wrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#np-luz #game-host canvas { touch-action: none; }
#np-luz #touch-ui { position: absolute; inset: 0 0 31px 0; pointer-events: none; }
#np-luz #touch-ui[hidden] { display: none; }
#np-luz #touch-ui > * { pointer-events: auto; }
#np-luz .t-heroes { position: absolute; left: 8px; top: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
#np-luz .t-hero { position: relative; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; background: rgba(11, 17, 27, 0.82); border: 1px solid var(--line); }
#np-luz .t-hero[hidden] { display: none; }
#np-luz .t-hero canvas { width: 32px; height: 32px; image-rendering: pixelated; }
#np-luz .t-hero.is-active { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(182, 255, 59, 0.35); }
#np-luz .t-hero.is-down { opacity: 0.4; }
#np-luz .t-hp { position: absolute; left: 3px; bottom: 3px; height: 3px; background: var(--hp); max-width: calc(100% - 6px); }
#np-luz .t-btn { position: absolute; font: 400 12px/1 var(--pixel); color: var(--fg); background: rgba(11, 17, 27, 0.82); border: 1px solid var(--line); }
#np-luz .t-btn:active, #np-luz .t-hero:active { border-color: var(--lime); }
#np-luz .t-special { right: 12px; bottom: 12px; width: 88px; height: 88px; border-radius: 50%; border-color: rgba(182, 255, 59, 0.5); }
#np-luz .t-pause { right: 8px; top: 8px; width: 48px; height: 48px; }
body.touch #np-luz .stage { grid-template-columns: minmax(0, 1fr); }
body.touch #np-luz #game-host { width: min(100%, calc((100dvh - 120px) * 1.5)); margin-inline: auto; } /* cabecera + barra: el juego entero cabe en pantalla */
#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: 50; 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}