/* Parque Abierto · estilos */
@font-face{font-family:'Jersey 15';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fuentes/jersey-15-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jersey 15';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fuentes/jersey-15-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(../fuentes/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(../fuentes/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(../fuentes/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(../fuentes/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
html{-webkit-text-size-adjust:100%}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: interfaz de videojuego. La escena manda arriba; debajo, la tira de plazas (servidores) y tres tablones de papel: taquilla, corona y caja. Un solo mundo visual, elegido a propósito. */
:root{
  color-scheme: light;
  --noche:#1d1638;        /* fondo: cielo de anochecer */
  --noche-2:#2b2152;      /* bandas y chips */
  --tinta:#1a1230;        /* contornos y texto sobre papel */
  --papel:#f7e7c2;        /* tablones */
  --papel-2:#e9d3a0;      /* relieve del papel */
  --oro:#ffc62e;          /* acento: el euro */
  --teja:#d8452f;
  --hoja:#3d9a58;
  --mar:#3b9fd1;
  --malva:#9a6bd6;
  --claro:#f6efff;        /* texto sobre noche */
  --txt:#1a1230;          /* texto de los paneles (en los oscuros se vuelve claro) */
  --txt-2:#5a4a6e;
  --carta:#fffaf0;        /* filas y botones claros dentro de un panel */
  --carta-2:#fff3cf;
  --panel:#1c1538;        /* paneles oscuros: ventanas, tablones y menú */
  --panel-2:#271f4c;
  --panel-3:#33296a;
  --borde:#3d3170;
  --suave:#b9aee0;        /* texto secundario sobre noche */
  --sepia:#6b5638;        /* texto secundario sobre papel */
  --f-display:"Jersey 15","Courier New",monospace;
  --f-body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
html{background:var(--noche)}
body{background:linear-gradient(#150f2b 0 60px,#191231 60px 130px,#1d1638 130px) var(--noche);color:var(--claro);font-family:var(--f-body);font-size:16px;line-height:1.5}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:20px 48px;display:flex;flex-direction:column;gap:20px}
button{font-family:var(--f-display);cursor:pointer}
:focus-visible{outline:3px solid var(--oro);outline-offset:2px}

header{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,7vw,60px);line-height:.9;margin:0;color:var(--claro);text-shadow:4px 4px 0 var(--tinta)}
h1 span{color:var(--oro)}
.lema{margin:8px 0 0;color:var(--suave)}
.lema b{color:var(--oro);font-family:var(--f-display);font-weight:600}
.vistas{display:flex;align-self:flex-start;border:3px solid var(--tinta);box-shadow:3px 3px 0 #0d0820}
.vistas button{border:0;background:var(--noche-2);color:var(--suave);font-weight:600;font-size:16px;padding:8px 14px}
.vistas button[aria-pressed="true"]{background:var(--oro);color:var(--tinta)}
.vista{display:flex;flex-direction:column;gap:20px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.kpi{background:var(--tinta);border:3px solid #4a3c86;padding:10px 12px;min-width:0}
.kpi small{display:block;font-size:13px;color:var(--suave)}
.kpi b{display:block;font:700 28px/1.15 var(--f-display);color:var(--oro);font-variant-numeric:tabular-nums}
.kpi.neg b{color:#ff8a78}
.kpi span{font-size:12px;color:var(--suave)}
.adm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.adm-grid .ancho{grid-column:1/-1}
@media (max-width:760px){.adm-grid{grid-template-columns:minmax(0,1fr)}}
.tabla{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:600 12px var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:var(--sepia);text-align:left;padding:4px 8px;border-bottom:3px solid var(--tinta);white-space:nowrap}
td{padding:6px 8px;border-bottom:2px solid var(--papel-2);white-space:nowrap}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums}
.carga{display:inline-block;width:70px;height:10px;background:var(--papel-2);border:2px solid var(--tinta);vertical-align:middle;margin-right:6px;position:relative;box-sizing:border-box}
.carga i{position:absolute;inset:0 auto 0 0;background:var(--hoja)}
.tag{font:600 12px var(--f-display);text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;background:var(--tinta);color:var(--papel)}
.tag.ok{background:var(--hoja)}
.tag.libre{background:var(--papel-2);color:var(--txt)}
.colal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-height:60px}
.colal li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}
.colal .q{min-width:0;overflow-wrap:anywhere}
.colal .q b{font:600 17px var(--f-display)}
.colal .q small{display:block;color:var(--sepia)}
.colal .ac{display:flex;gap:6px;flex-wrap:wrap}
.colal .vacio{color:var(--sepia);font-size:14px}
.b3.mal{background:var(--teja);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.guia{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;background:var(--noche-2);border:3px solid var(--oro);padding:10px 14px}
.guia p{margin:0;flex:1;min-width:240px;color:var(--claro)}
.guia b{font-family:var(--f-display);color:var(--oro)}
.rejilla.ancha{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.rk{border:3px solid var(--tinta);background:var(--carta);padding:10px;min-width:0;display:flex;flex-direction:column;gap:8px}
.rk ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:rk}
.rk li{display:flex;gap:8px;align-items:baseline;counter-increment:rk;font-size:14px}
.rk li::before{content:counter(rk);font:700 14px var(--f-display);color:var(--sepia);width:14px;flex:none}
.rk li button{border:0;background:none;padding:0;font:600 15px var(--f-display);color:var(--txt);text-align:left;cursor:pointer;text-decoration:underline;min-width:0;overflow-wrap:anywhere;flex:1}
.rk li span{font:600 14px var(--f-display);white-space:nowrap}
.mis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mis li{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.mis li.ok{color:var(--hoja);font-weight:700}
input[type=color]{width:100%;height:38px;padding:2px;border:3px solid var(--tinta);background:var(--carta);box-sizing:border-box}
.mega{display:inline-flex;align-items:stretch;border:3px solid var(--tinta);box-shadow:3px 3px 0 #0d0820;max-width:100%}
.mega input[type=text]{border:0;width:240px;min-width:0;flex:1}
.mega .mg-n{background:var(--carta);color:var(--sepia);font:600 12px var(--f-display);display:flex;align-items:center;padding:0 8px;font-variant-numeric:tabular-nums}
.mega .b2{border:0;box-shadow:none;border-left:3px solid var(--tinta)}
input:disabled{opacity:.6}
textarea{font:15px var(--f-body);padding:6px 8px;background:var(--carta);color:var(--txt);border:3px solid var(--tinta);width:100%;box-sizing:border-box;resize:vertical}
.fh{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.fh canvas.av{width:190px;max-width:100%;height:auto;image-rendering:pixelated;border:3px solid var(--tinta);flex:none}
.fh > div{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.prog{height:12px;border:3px solid var(--tinta);background:var(--papel-2);position:relative}
.prog i{position:absolute;inset:0 auto 0 0;background:var(--oro)}
.chips.logros span{background:var(--oro)}
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sg div{border:2px solid var(--tinta);background:var(--carta);padding:5px 8px;min-width:0}
.sg small{display:block;font-size:12px;color:var(--sepia)}
.sg b{font:600 18px var(--f-display);font-variant-numeric:tabular-nums}
.adminbox{border:3px dashed var(--tinta);padding:10px;display:flex;flex-direction:column;gap:8px}
.b3.on{background:var(--hoja);color:#fff}
.tablon[data-j]{display:block;columns:2 300px;column-gap:28px}
.tablon[data-j]>*{break-inside:avoid;margin:0 0 12px}
.tablon[data-j]>h2{column-span:all}
.tablon[data-j].plano{columns:auto}
.tablon[data-j] .btn{display:block;width:100%}
.tablon[data-j]>div>*{margin:0 0 10px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.art{border:3px solid var(--tinta);background:var(--carta);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.art canvas{width:72px;height:72px;image-rendering:pixelated;background:var(--papel-2)}
.art canvas.fach{width:100%;height:auto;background:#a3d3f4}
.art b{font:600 16px/1.1 var(--f-display);overflow-wrap:anywhere}
.art small{font-size:12px;color:var(--sepia)}
.art .b3{align-self:stretch}
.tag.temp{background:var(--teja);color:#fff}
.velo{position:fixed;inset:0;background:rgba(13,8,32,.74);z-index:35;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.ficha{background:var(--papel);color:var(--txt);border:4px solid var(--tinta);box-shadow:8px 8px 0 #0d0820;padding:16px;width:min(560px,100%);position:relative;box-sizing:border-box}
.ficha h2{padding-right:84px;margin-bottom:12px;overflow-wrap:anywhere}
.ficha .cerrar{position:absolute;top:12px;right:12px}
.f-c{display:flex;flex-direction:column;gap:12px}
.f-c p{margin:0;font-size:14px;color:var(--sepia)}
.f-c p.grande{font:600 22px/1.2 var(--f-display);color:var(--txt)}
.fc{display:flex;gap:14px;align-items:center}
.fc canvas{width:110px;height:110px;image-rendering:pixelated;background:var(--papel-2);border:3px solid var(--tinta);flex:none}
.fc canvas.fach{height:auto;background:#a3d3f4}
.fc > div{min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font:600 13px var(--f-display);background:var(--papel-2);border:2px solid var(--tinta);padding:1px 7px}
.f-c canvas.sala,.f-c img{display:block;width:100%;height:auto;image-rendering:pixelated;border:3px solid var(--tinta);box-sizing:border-box}
.evb{position:absolute;top:10px;right:10px;background:var(--tinta);color:var(--claro);border:2px solid var(--oro);font:600 14px var(--f-display);padding:4px 10px;max-width:44%;text-align:right;cursor:pointer}
.evb.vivo{background:var(--teja);border-color:#fff}
.enlace{font:600 15px var(--f-display);background:var(--carta);border:3px solid var(--tinta);padding:6px 8px;overflow-wrap:anywhere;user-select:all}
.acciones{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.acciones .ac-t{font:600 15px var(--f-display);color:var(--oro)}
.acciones .ac-n{font-size:13px;color:var(--suave);flex-basis:100%}
.acciones input[type=text]{width:210px;max-width:100%;padding:5px 8px;font-size:15px}
.b2.oro{background:var(--oro);color:var(--tinta)}
.b2:disabled{opacity:.45;cursor:default}
.campos.dos-c{grid-template-columns:1fr 1fr}
#rc-l{min-height:0}
.subt{display:flex;flex-wrap:wrap;gap:8px}
.subt button{border:3px solid var(--tinta);box-shadow:3px 3px 0 #0d0820;background:var(--noche-2);color:var(--suave);font-weight:600;font-size:15px;padding:6px 12px}
.subt button[aria-pressed="true"]{background:var(--papel);color:var(--txt)}
.asec{display:flex;flex-direction:column;gap:20px;min-width:0}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 14px}
.campo .u{display:flex;align-items:center;gap:6px;color:var(--txt);font:600 14px var(--f-display);white-space:nowrap}
input[type=number],select{font:16px var(--f-body);padding:6px 8px;background:var(--carta);color:var(--txt);border:3px solid var(--tinta);min-width:0;width:100%;box-sizing:border-box}
td input[type=text],td select{min-width:130px;padding:4px 6px;font-size:15px}
td input[type=number]{width:84px;padding:4px 6px;font-size:15px}
td .u{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--f-display)}
.fila-b{display:flex;flex-wrap:wrap;gap:8px}
td .fila-b{flex-wrap:nowrap}
.gr{min-width:560px}
.gr svg{display:block;width:100%;height:auto}
.gr text{font:12px var(--f-body);fill:var(--sepia)}
.gr text.fuerte{fill:var(--tinta);font-weight:700}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--txt)}
.leyenda span{display:flex;gap:6px;align-items:center}
.leyenda i{width:14px;height:4px;display:block}
.veredicto{font-size:16px !important;color:var(--txt) !important;font-weight:700}
details summary{cursor:pointer;font:600 14px var(--f-display);color:var(--sepia)}
.peso{display:inline-block;width:90px;height:10px;background:var(--papel-2);vertical-align:middle;margin-right:6px;position:relative}
.peso i{position:absolute;inset:0 auto 0 0;background:#1f6fb5;border-radius:0 3px 3px 0}
.tip{position:fixed;z-index:10;background:var(--tinta);color:var(--claro);font-size:13px;line-height:1.35;padding:6px 9px;pointer-events:none;white-space:pre-line;max-width:240px;border:2px solid var(--oro)}
.extra.abono{border-top:3px dotted var(--papel-2);padding-top:8px;margin-top:4px}
.caja-top{display:flex;gap:14px;align-items:center;background:var(--tinta);border:3px solid var(--oro);box-shadow:6px 6px 0 #0d0820;padding:8px 16px}
.caja-top small{display:block;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--suave)}
.caja-top output{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(30px,6vw,46px);line-height:1;color:var(--oro);font-variant-numeric:tabular-nums}
.caja-top output.pop{animation:pop .22s ease-out}
.caja-top .ritmo-e{font-family:var(--f-display);color:var(--claro);font-size:15px;white-space:nowrap}
@keyframes pop{from{transform:scale(1.07)}to{transform:scale(1)}}

.marco{position:relative;border:4px solid var(--tinta);box-shadow:0 0 0 2px #4a3c86,8px 8px 0 #0d0820;background:var(--tinta)}
.visor{overflow-x:auto;scrollbar-width:thin}
canvas#plaza{display:block;width:100%;min-width:640px;aspect-ratio:16/9;image-rendering:pixelated;touch-action:pan-x pan-y}
@media (max-width:640px){.chip,.evb,.sim,.anuncio{position:static;display:block;max-width:none;width:100%;box-sizing:border-box;text-align:left;border-width:0 0 2px 0;box-shadow:none}.toast{top:8px}}
.chip{position:absolute;top:10px;left:10px;background:var(--tinta);color:var(--claro);border:2px solid var(--oro);padding:4px 10px;font-family:var(--f-display);line-height:1.2;pointer-events:none;max-width:50%}
.chip b{display:block;font-size:18px;color:var(--oro)}
.chip span{font-size:13px}
.sim{position:absolute;bottom:10px;left:10px;background:rgba(26,18,48,.85);color:var(--claro);font-size:12px;padding:3px 8px;pointer-events:none;max-width:45%}
.anuncio{position:absolute;right:10px;bottom:10px;background:var(--papel);color:var(--txt);border:3px solid var(--tinta);box-shadow:3px 3px 0 var(--tinta);font:600 14px var(--f-display);padding:4px 10px;max-width:48%;pointer-events:none;overflow-wrap:anywhere}
.toast{position:absolute;left:50%;top:56px;transform:translateX(-50%);background:var(--oro);color:var(--tinta);border:3px solid var(--tinta);box-shadow:4px 4px 0 var(--tinta);font:600 16px var(--f-display);padding:6px 14px;text-align:center;width:max-content;max-width:min(80%,420px);pointer-events:none}

.barra{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.seg{display:flex;border:3px solid var(--tinta);box-shadow:3px 3px 0 #0d0820}
.seg button{border:0;background:var(--noche-2);color:var(--suave);font-weight:600;font-size:15px;padding:6px 12px}
.seg button[aria-pressed="true"]{background:var(--oro);color:var(--tinta)}
.b2{border:3px solid var(--tinta);box-shadow:3px 3px 0 #0d0820;background:var(--noche-2);color:var(--claro);font-weight:600;font-size:15px;padding:6px 12px}
.chk{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--suave)}

h2{font-family:var(--f-display);font-weight:700;font-size:24px;line-height:1.1;margin:0;text-wrap:balance}
.sec-cab{display:flex;flex-direction:column;gap:4px}
.sec-cab p{margin:0;color:var(--suave);max-width:68ch}
.tira-wrap{overflow-x:auto;position:relative;contain:paint;max-width:100%;padding:4px 6px 10px 2px;scrollbar-width:thin}
.tira{display:flex;gap:12px;width:max-content}
.pl{width:186px;text-align:left;background:var(--noche-2);color:var(--claro);border:3px solid var(--tinta);box-shadow:4px 4px 0 #0d0820;padding:0;display:flex;flex-direction:column;font-family:var(--f-body)}
.pl .foto{height:34px;border-bottom:3px solid var(--tinta);display:flex;align-items:flex-end;justify-content:space-between;padding:0 8px 3px;font:600 12px var(--f-display);color:var(--txt);text-transform:uppercase;letter-spacing:.08em}
.pl .cuerpo{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px}
.pl .nom{font:700 18px/1.1 var(--f-display)}
.pl .fila{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--suave);font-variant-numeric:tabular-nums}
.pl .fila b{color:var(--oro);font-family:var(--f-display);font-size:15px;white-space:nowrap}
.pl .med{height:8px;background:var(--tinta);position:relative}
.pl .med i{position:absolute;inset:0 auto 0 0;background:var(--oro)}
.pl .est{font:600 12px var(--f-display);text-transform:uppercase;letter-spacing:.08em;padding:1px 6px;background:var(--tinta);color:var(--claro)}
.pl[data-e="abierta"] .est{background:var(--hoja)}
.pl[data-e="proxima"]{opacity:.62;cursor:default}
.pl[aria-pressed="true"]{border-color:var(--oro);box-shadow:4px 4px 0 #0d0820,0 0 0 2px var(--oro)}

.tablones{display:block}
.tablon{background:var(--papel);color:var(--txt);border:4px solid var(--tinta);box-shadow:inset 0 -6px 0 var(--papel-2),6px 6px 0 #0d0820;padding:16px 16px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.tablon p{margin:0;font-size:14px;color:var(--sepia)}
.dos{display:flex;gap:12px;align-items:flex-start}
.dos > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
/* el creador de personaje: la escena a la izquierda, las pestañas y las miniaturas a la derecha */
.creador{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;background:var(--noche);color:var(--claro);border:3px solid var(--tinta);border-radius:12px;padding:10px;box-shadow:inset 0 0 0 2px #2f2456}
.cr-escena{position:relative;align-self:start}
#previa{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border:3px solid var(--tinta);border-radius:8px;background:#241a44}
.cr-flecha{position:absolute;top:42%;width:30px;height:38px;border:2px solid var(--tinta);border-radius:6px;background:rgba(26,18,48,.82);color:var(--oro);font:700 24px/1 var(--f-display);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cr-izq{left:6px}.cr-der{right:6px}
.cr-flecha:hover,.cr-flecha:focus-visible{background:var(--oro);color:var(--tinta)}
.cr-azar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap}
.cr-panel{display:flex;flex-direction:column;gap:8px;min-width:0}
.cr-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:#14102a;border-radius:8px;padding:4px}
.cr-tab{border:0;border-radius:6px;background:none;color:#cfc2e8;font:600 15px/1 var(--f-display);padding:8px 4px;cursor:pointer}
.cr-tab[aria-selected="true"]{background:var(--oro);color:var(--tinta)}
.cr-tab:hover:not([aria-selected="true"]){background:#2b2152;color:var(--claro)}
.cr-tab:focus-visible{outline:2px solid var(--claro);outline-offset:1px}
.cr-pest{display:flex;flex-direction:column;gap:6px}
.cr-pest[hidden]{display:none}
.cr-et{margin:4px 0 0;font:600 13px/1 var(--f-display);color:#cfc2e8;letter-spacing:.02em}
.cr-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.cr-op{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid #3a2c5c;border-radius:8px;background:#2b2152;color:#cfc2e8;padding:4px 2px 5px;cursor:pointer;font:600 11px/1 var(--f-display)}
.cr-op canvas{width:48px;height:48px;image-rendering:pixelated;border-radius:5px}
.cr-op span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-op:hover{border-color:#6a5a9a}
.cr-op.on{border-color:var(--oro);background:#3a2c5c;color:var(--claro);box-shadow:0 0 0 2px rgba(255,198,46,.25)}
.cr-op:focus-visible{outline:2px solid var(--claro);outline-offset:2px}
.creador .colores span{border-color:#14102a;border-radius:6px}
.creador .colores input:checked + span{box-shadow:0 0 0 3px var(--oro)}
.cr-flecha{top:auto;bottom:44%}
.cr-gestos{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.creador .nota{color:#cfc2e8}

label.campo{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--sepia)}
input[type=text]{font:16px var(--f-body);padding:7px 9px;background:var(--carta);color:var(--txt);border:3px solid var(--tinta);min-width:0;width:100%;box-sizing:border-box}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:13px;color:var(--sepia);padding:0;margin-bottom:6px}
.colores{display:flex;flex-wrap:wrap;gap:7px}
.colores label{position:relative;width:26px;height:26px}
.colores input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.colores span{display:block;width:100%;height:100%;border:3px solid var(--tinta);box-sizing:border-box}
.colores input:checked + span{box-shadow:0 0 0 3px var(--oro)}
.colores input:focus-visible + span{outline:3px solid var(--teja);outline-offset:3px}
.extras{display:flex;flex-direction:column;gap:4px}
.extra{display:flex;justify-content:space-between;gap:10px;font-size:15px;cursor:pointer}
.extra span{display:flex;gap:8px;align-items:center}
.extra b{font:600 15px var(--f-display);color:var(--sepia);white-space:nowrap}
.btn{border:3px solid var(--tinta);background:var(--oro);color:var(--tinta);font-weight:700;font-size:19px;padding:10px;box-shadow:0 5px 0 var(--tinta)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tinta)}
.b3{border:3px solid var(--tinta);background:var(--carta);color:var(--txt);font-weight:600;font-size:13px;padding:3px 8px;align-self:flex-start}
.rey{display:flex;gap:12px;align-items:center}
.rey .puja{font:700 40px/1 var(--f-display);font-variant-numeric:tabular-nums}
.rey .quien{font:600 18px/1.1 var(--f-display);overflow-wrap:anywhere}
.reloj{font:600 15px var(--f-display);font-variant-numeric:tabular-nums}
.pila{display:flex;height:18px;border:3px solid var(--tinta);background:var(--tinta)}
.pila i{display:block;height:100%}
.ley{display:flex;flex-direction:column;gap:3px;margin:0}
.ley div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.ley dt{display:flex;gap:8px;align-items:center}
.ley dt i{width:12px;height:12px;border:2px solid var(--tinta);flex:none}
.ley dd{margin:0;font:600 15px var(--f-display);font-variant-numeric:tabular-nums}
h3{font:600 15px var(--f-display);text-transform:uppercase;letter-spacing:.1em;margin:4px 0 0;color:var(--sepia)}
#feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:14px;min-height:138px}
#feed li{display:flex;justify-content:space-between;gap:10px}
#feed li span{min-width:0;overflow-wrap:anywhere}
#feed li b{font:600 15px var(--f-display);white-space:nowrap}
#feed li.yo span{font-weight:700}
#feed li.gordo{background:var(--oro);padding:0 4px;margin:0 -4px}
@media (prefers-reduced-motion:reduce){.caja-top output.pop{animation:none}}
/* el creador se apila cuando su hueco es estrecho (panel lateral o móvil) */
.cr-escena{max-width:300px;justify-self:center;width:100%}