/* El Edificio · interfaz. La escena (pixel art) ocupa toda la pantalla; la interfaz flota encima, con piel de juego
   (7/11): papel y madera, esquinas en escalón, botones con relieve y etiquetas de juego (ver el final del archivo).
   Mobile primero; en compu el panel va al costado. */

/* Tipografía: Nunito (licencia SIL OFL 1.1, ver fuentes/OFL.txt), servida desde el propio sitio. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fuentes/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fuentes/nunito-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --tinta:#3A2418; --suave:#7A5C44; --linea:rgba(58,36,24,.16); --superficie:#F6E9CC; --superficie-2:#EBD6AC;
  --acento:#F2A33A; --acento-tinta:#3A2200; --acento-suave:#FBDDA6; --bien:#2E8B57; --mal:#C2412D;
  --borde:#2B1A12; --madera:#8C5C3D; --madera-luz:#B47D51; --ranura:rgba(58,36,24,.32); --bisel-luz:rgba(255,255,255,.5); --bisel-sombra:rgba(58,36,24,.22);
  --led-fondo:#14161B; --led:#FFB547;
  --r-especial:#2F64B5; --r-juegos:#7A49B0; --r-temporada:#2E7A4C; --r-legendario:#9A6400; --r-comun:#6B7280;
  --sombra:0 10px 30px rgba(10,14,30,.18), 0 2px 6px rgba(10,14,30,.10);
  --radio:20px; --radio-chico:12px;
  --titulo:"Nunito",system-ui,sans-serif; --texto:"Nunito",system-ui,sans-serif;
  --peso-titulo:800;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --tinta:#F4E6C6; --suave:#C9B79A; --linea:rgba(244,230,198,.14); --superficie:#2E2533; --superficie-2:#3B3042;
    --acento:#F5B04F; --acento-tinta:#2A1800; --acento-suave:#4A3A22; --bien:#45B378; --mal:#E8735E;
    --borde:#120D16; --madera:#5B3B2F; --madera-luz:#7A5240; --ranura:rgba(244,230,198,.2); --bisel-luz:rgba(255,255,255,.12); --bisel-sombra:rgba(0,0,0,.35);
    --sombra:0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --tinta:#F4E6C6; --suave:#C9B79A; --linea:rgba(244,230,198,.14); --superficie:#2E2533; --superficie-2:#3B3042;
  --acento:#F5B04F; --acento-tinta:#2A1800; --acento-suave:#4A3A22; --bien:#45B378; --mal:#E8735E;
  --borde:#120D16; --madera:#5B3B2F; --madera-luz:#7A5240; --ranura:rgba(244,230,198,.2); --bisel-luz:rgba(255,255,255,.12); --bisel-sombra:rgba(0,0,0,.35);
  --sombra:0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#1A1F28;overscroll-behavior:none}
body{font:500 15px/1.45 var(--texto);color:var(--tinta);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* El logo de OfiTown (src/arte/logo.ts): pixel art agrandado a escala entera, sin suavizar. */
.logo{display:block;image-rendering:crisp-edges;image-rendering:pixelated}
.titulo-logo{line-height:0;margin:-6px 0 -2px -6px}
.mapa-encabezado .titulo-logo{margin:-2px 0 -4px -4px}
.mapa-botones{display:flex;gap:6px}
h2,h3{font-family:var(--titulo);font-weight:var(--peso-titulo);margin:0;line-height:1.15}

#escena{position:fixed;inset:0;width:100vw;height:100dvh;display:block;touch-action:none;cursor:grab}
#escena.arrastrando{cursor:grabbing}

/* ---------- barra superior ---------- */
.barra{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));pointer-events:none}
.barra > *{pointer-events:auto}
.led{display:flex;align-items:center;gap:6px;background:var(--led-fondo);color:var(--led);border-radius:12px;padding:7px 12px;min-width:52px;
  font:700 20px/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.08em;text-shadow:0 0 8px rgba(255,181,71,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.25)}
.led{border:0;cursor:pointer}
.led-abrir{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;margin-left:2px}
.ascensor-abierto .led-abrir{transform:rotate(180deg)}
.led-flecha{font-size:14px}
.led-flecha:empty{display:none}
.barra-datos{display:flex;align-items:center;gap:8px}
.pildora{display:inline-flex;align-items:center;gap:6px;background:var(--superficie);border-radius:999px;padding:6px 12px 6px 8px;box-shadow:var(--sombra);
  font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:15px;backdrop-filter:blur(8px)}
.moneda{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE28E,#EAB14A 55%,#A86A2B);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.llama{width:16px;height:18px;background:linear-gradient(180deg,#FFD25E,#F2743A);clip-path:path("M8 0C9 4 14 6 14 11a6 6 0 0 1-12 0c0-3 2-4 3-6 0 2 1 3 2 3 0-3 0-5 1-8Z")}
.boton-icono{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--superficie);box-shadow:var(--sombra);backdrop-filter:blur(8px)}
.hamburguesa,.hamburguesa::before,.hamburguesa::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--tinta);position:relative}
.hamburguesa::before,.hamburguesa::after{content:"";position:absolute;left:0}
.hamburguesa::before{top:-6px}.hamburguesa::after{top:6px}

/* ---------- botonera del ascensor: se abre tocando el número de piso ---------- */
body:not(.ascensor-abierto) .botonera{display:none}
/* Va entre la barra de arriba y el dock, centrada en ese hueco: nunca tapa el menú ni los botones de abajo. */
.botonera{--arriba:calc(max(10px, env(safe-area-inset-top)) + 56px);--abajo:calc(max(10px, env(safe-area-inset-bottom)) + 92px);
  position:fixed;right:max(10px, env(safe-area-inset-right));top:calc((var(--arriba) + 100dvh - var(--abajo)) / 2);transform:translateY(-50%);
  max-height:calc(100dvh - var(--arriba) - var(--abajo));display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 7px;border-radius:18px;background:linear-gradient(180deg,#5A606C,#3E434D);box-shadow:var(--sombra),inset 0 1px 0 rgba(255,255,255,.18)}
.botonera button{width:36px;height:36px;border-radius:50%;border:0;background:radial-gradient(circle at 40% 35%,#F4F5F7,#C8CDD5);color:#2B2F38;
  font:800 13px/1 var(--titulo);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.3);position:relative}
.botonera button[aria-pressed="true"]{background:radial-gradient(circle at 40% 35%,#FFE7B5,#F2A33A);color:#3A2200;box-shadow:0 0 0 2px rgba(255,181,71,.55),0 0 14px rgba(255,181,71,.6)}
.botonera button.mio::after{content:"";position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:#2E8B57;box-shadow:0 0 0 2px #3E434D}
.botonera .boton-edificio{width:36px;height:36px;font-size:0}
.botonera .boton-edificio::before{content:"";display:block;width:14px;height:16px;margin:auto;background:
  linear-gradient(#2B2F38 0 0) 3px 3px/3px 3px no-repeat,linear-gradient(#2B2F38 0 0) 8px 3px/3px 3px no-repeat,
  linear-gradient(#2B2F38 0 0) 3px 8px/3px 3px no-repeat,linear-gradient(#2B2F38 0 0) 8px 8px/3px 3px no-repeat,
  linear-gradient(#2B2F38 0 0) 5px 12px/4px 4px no-repeat;border:2px solid #2B2F38;border-radius:2px}
.botonera .separador{width:22px;height:1px;background:rgba(255,255,255,.2);margin:2px 0;flex:none}
/* Si no entra, la botonera se desplaza (sin barra visible) y arranca mostrando tu piso. */
.botonera{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.botonera::-webkit-scrollbar{display:none}
.botonera button{flex:none}

/* ---------- dock de juego: cuatro botones grandes abajo, al alcance del pulgar ---------- */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px, env(safe-area-inset-bottom));width:min(520px, calc(100% - 20px));z-index:5;
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:7px;border-radius:22px;background:rgba(26,30,40,.93);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.dock[hidden]{display:none}
.dock-boton{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:#E7EAF0;padding:4px 2px;border-radius:16px;cursor:pointer;
  font:800 12px/1 var(--titulo);transition:transform .12s ease,background .12s ease}
.dock-boton:active{transform:scale(.94)}
.dock-boton[aria-pressed="true"]{background:rgba(255,255,255,.1)}
.dock-icono{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#3A4050;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.dock-icono canvas{width:36px;height:36px;image-rendering:pixelated}
.dock-boton.principal .dock-icono{background:var(--acento);box-shadow:inset 0 -3px 0 rgba(90,51,0,.35),0 0 0 3px rgba(242,163,58,.25)}
.dock-marca{position:absolute;top:0;right:calc(50% - 30px);min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#CF4A3C;color:#fff;
  font:900 12px/20px var(--titulo);text-align:center;box-shadow:0 0 0 2px rgba(26,30,40,.93)}
.dock-marca.punto{min-width:12px;width:12px;height:12px;padding:0;top:2px;right:calc(50% - 26px)}
.dock-marca[hidden]{display:none}

/* ---------- globito: lo que dice tu personaje ---------- */
.globito{position:fixed;z-index:4;transform:translate(-50%, -100%);max-width:min(240px, 70vw);border:0;border-radius:14px;padding:9px 12px;background:#FFFFFF;color:#1B1F27;
  font:800 14px/1.25 var(--titulo);text-align:center;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.18);animation:flota 2.4s ease-in-out infinite}
.globito::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-top-color:#FFFFFF;border-bottom:0}
.globito[hidden]{display:none}
@keyframes flota{50%{translate:0 -3px}}

/* ---------- cartas: suben desde abajo (celular) o aparecen al costado (compu) ---------- */
/* En el celular la carta flota encima del dock, que sigue a mano para cambiar de carta o cerrarla. */
.panel{--sobre-dock:calc(max(10px, env(safe-area-inset-bottom)) + 92px);position:fixed;left:max(8px, env(safe-area-inset-left));right:max(8px, env(safe-area-inset-right));
  bottom:var(--sobre-dock);z-index:6;max-height:calc(100dvh - var(--sobre-dock) - max(10px, env(safe-area-inset-top)) - 64px);display:flex;flex-direction:column;
  background:var(--superficie);backdrop-filter:blur(14px);border-radius:24px;box-shadow:0 10px 40px rgba(10,14,30,.35);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility .3s;overflow:hidden}
.panel[data-estado="cerrado"]{transform:translateY(24px) scale(.98);opacity:0;visibility:hidden;pointer-events:none}
.carta-encabezado{flex:none;padding:12px 12px 10px;touch-action:none}
.carta-barra{display:flex;align-items:center;gap:10px;background:#2E2738;border-radius:14px;padding:10px 10px 10px 14px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.carta-titulo{margin:0;display:flex;align-items:center;min-width:0}
.titulo-pixel{image-rendering:pixelated;display:block}
.carta-sub{flex:1;min-width:0;color:#CFC8DD;font:700 14px/1.2 var(--titulo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carta-titulo + .carta-cerrar{margin-left:auto}
.carta-cerrar{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#FFE28E;font:800 15px/1 var(--titulo);cursor:pointer}
.panel-cuerpo{overflow:auto;padding:4px 16px 20px;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px}
.panel-cuerpo > *{flex-shrink:0}
.panel-cuerpo > .pestanas{padding-bottom:4px}

@media (min-width: 900px){
  .panel{left:auto;top:72px;right:12px;bottom:12px;width:400px;max-height:none;border-radius:var(--radio);box-shadow:var(--sombra)}
  .panel[data-estado="cerrado"]{transform:translateX(24px)}
  .botonera{right:max(10px, env(safe-area-inset-right))}
  body:has(.panel[data-estado="abierto"]) .botonera{right:424px}
}
@media (prefers-reduced-motion: reduce){ .globito{animation:none} .panel{transition:none} }

/* ---------- piezas del panel ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 18px;font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:16px;
  background:var(--superficie-2);color:var(--tinta);transition:transform .12s ease,filter .12s ease}
.boton:active{transform:scale(.97)}
.boton-principal{background:var(--acento);color:var(--acento-tinta);box-shadow:0 4px 0 color-mix(in srgb,var(--acento) 60%,#5A3300),0 8px 18px rgba(242,163,58,.35)}
.boton-principal:active{box-shadow:0 2px 0 color-mix(in srgb,var(--acento) 60%,#5A3300)}
.boton[disabled]{opacity:.55;cursor:not-allowed}
.boton-ancho{width:100%}

.pestanas{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{flex:none;border:0;border-radius:999px;padding:8px 14px;background:var(--superficie-2);font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:14px;color:var(--suave)}
.pestanas button[aria-selected="true"]{background:var(--tinta);color:var(--superficie-2)}

.seccion{display:flex;flex-direction:column;gap:12px}
.seccion > p{margin:0;color:var(--suave)}
.tarjeta{background:var(--superficie-2);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center}
.tarjeta h3{font-size:16px}
.tarjeta p{margin:2px 0 0;color:var(--suave);font-size:13.5px}
.tarjeta .crece{flex:1;min-width:0}
.icono-juego{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:#FFFDF6;
  box-shadow:inset 0 0 0 3px var(--color,#3F905A),inset 0 -7px 0 color-mix(in srgb,var(--color,#3F905A) 18%,transparent)}
.icono-juego canvas{width:36px;height:auto;max-height:36px;image-rendering:pixelated;position:static;inset:auto}
.chip{display:inline-block;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;background:var(--acento-suave);color:color-mix(in srgb,var(--acento) 40%,var(--tinta))}
.chip-bien{background:color-mix(in srgb,var(--bien) 16%,transparent);color:var(--bien)}
.chip-gris{background:var(--linea);color:var(--suave)}

.barra-progreso{position:relative;height:14px;border-radius:999px;background:var(--linea);overflow:visible}
.barra-progreso > i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#F2A33A,#FFC86B)}
.barra-progreso .escalon{position:absolute;top:-4px;width:3px;height:22px;border-radius:2px;background:var(--superficie);box-shadow:0 0 0 1px var(--linea)}
.escalones{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.escalones div{text-align:center;font-size:12px;color:var(--suave);background:var(--superficie-2);border-radius:10px;padding:6px 2px}
.escalones div.logrado{background:color-mix(in srgb,var(--bien) 16%,transparent);color:var(--bien);font-weight:700}
.dato-grande{font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:28px;line-height:1}

.grilla-kiosco{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.producto{background:var(--superficie-2);border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.producto canvas{width:64px;height:64px;image-rendering:pixelated}
.producto h3{font-size:14px}
.producto .precio{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-family:var(--titulo)}
.producto .precio .moneda{width:14px;height:14px}

.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lista li{background:var(--superficie-2);border-radius:14px;padding:12px 14px}
.nota{background:var(--acento-suave);border-radius:16px;padding:14px;position:relative}
.nota b{font-family:var(--titulo)}
.nota-circular{background:var(--superficie-2);border-left:4px solid var(--suave);border-radius:6px 16px 16px 6px;font-family:'Courier New',ui-monospace,monospace;font-size:14.5px}
.nota-circular b{font-family:var(--titulo);font-size:13px;letter-spacing:.02em;text-transform:uppercase}

.opciones{display:flex;flex-direction:column;gap:8px}
.opcion{display:flex;align-items:center;gap:12px;background:var(--superficie-2);border-radius:14px;padding:12px 14px;border:2px solid transparent;text-align:left;width:100%}
.opcion[aria-checked="true"]{border-color:var(--acento)}
.opcion .muestra{font-size:22px;line-height:1.1}
.opcion small{display:block;color:var(--suave);font-size:13px}
.fila-botones{display:flex;gap:8px;flex-wrap:wrap}
.fila-botones .boton{flex:1;padding:10px 12px;font-size:14px}
.fila-botones .boton[aria-pressed="true"]{background:var(--tinta);color:var(--superficie-2)}
.estado-servidor{font-size:13px;color:var(--suave)}

/* ---------- aviso y etiqueta de demo ---------- */
.aviso{position:fixed;left:50%;top:calc(max(10px, env(safe-area-inset-top)) + 58px);transform:translateX(-50%);background:var(--tinta);color:var(--superficie-2);
  border-radius:16px;padding:12px 16px;box-shadow:var(--sombra);font-family:var(--titulo);font-weight:var(--peso-titulo);max-width:min(92vw,420px);text-align:center;
  animation:entra .35s cubic-bezier(.2,.8,.2,1)}
.aviso small{display:block;font-family:var(--texto);font-weight:500;opacity:.8}
@keyframes entra{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
/* ---------- modos: sin sesión o pendiente se ve el edificio con una pantalla encima ---------- */
body:not([data-modo="juego"]) .panel,
body:not([data-modo="juego"]) .barra-datos{display:none}
.pantalla{position:fixed;inset:auto 0 0 0;z-index:5;display:flex;justify-content:center;padding:0 12px max(12px, env(safe-area-inset-bottom));pointer-events:none}
.pantalla-tarjeta{pointer-events:auto;width:100%;max-width:440px;max-height:78dvh;overflow:auto;background:var(--superficie);backdrop-filter:blur(14px);
  border-radius:24px;box-shadow:var(--sombra);padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.pantalla-tarjeta h2{font-size:22px}
.pantalla-tarjeta p{margin:0;color:var(--suave)}
@media (min-width: 900px){
  .pantalla{inset:0 auto 0 0;align-items:center;padding:24px}
  .pantalla-tarjeta{width:420px;max-height:calc(100dvh - 48px)}
}
.formulario{display:flex;flex-direction:column;gap:8px}
.formulario label,.etiqueta-campo{font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:15px;margin-top:4px}
.formulario small{color:var(--suave)}
input[type="text"]{font:600 17px/1.2 var(--texto);color:var(--tinta);background:var(--superficie-2);border:2px solid transparent;border-radius:14px;padding:12px 14px;width:100%}
input[type="text"]:focus{outline:none;border-color:var(--acento)}
.error,.pantalla-tarjeta p.error{color:var(--mal);font-weight:700;margin:0}
.casilla{display:flex;align-items:center;gap:8px;font-weight:700}
.casilla input{width:20px;height:20px;accent-color:var(--acento)}
.codigo-grande{font:800 26px/1.2 var(--titulo);letter-spacing:.02em;text-align:center;background:var(--acento-suave);color:var(--tinta)!important;border-radius:16px;padding:14px;margin:0;user-select:all}
.desplegable summary{cursor:pointer;font-weight:700;padding:6px 0}
.espera{font-weight:700}
.boton-chico{padding:8px 12px;font-size:14px;border-radius:12px}
.boton-peligro{color:var(--mal)}
.aviso-prueba{margin:6px 0 0;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--acento) 16%,transparent);color:var(--tinta);font-size:14px;line-height:1.35}
.aviso-prueba .chip-boton{margin:0 0 0 4px;vertical-align:baseline}
.vista-cartel{align-self:center;width:240px;height:66px;image-rendering:pixelated;border-radius:10px;box-shadow:0 0 0 1px var(--linea)}
.chip-boton{margin-top:6px;border:0;border-radius:999px;padding:5px 12px;background:var(--acento);color:var(--acento-tinta);font:800 13px/1.2 var(--titulo)}
.pestanas .punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mal);margin-left:6px;vertical-align:middle}

/* ---------- editor de personaje ---------- */
.editor-personaje{display:flex;flex-direction:column;gap:8px;background:var(--superficie-2);border-radius:16px;padding:12px}
.editor-vista{display:grid;place-items:center;padding:4px 0}
.editor-fila{display:flex;flex-direction:column;gap:4px}
.editor-titulo{font-size:13px;font-weight:700;color:var(--suave)}
.editor-opciones{display:flex;flex-wrap:wrap;gap:6px}
.muestra-color{width:38px;height:38px;border-radius:50%;border:3px solid var(--superficie);box-shadow:0 0 0 1px var(--linea)}
.muestra-texto{border:0;border-radius:999px;padding:6px 12px;background:var(--superficie);font-weight:700;font-size:13px}
.muestra-color[aria-checked="true"],.muestra-texto[aria-checked="true"]{box-shadow:0 0 0 3px var(--acento)}
.tarjeta-columna{flex-direction:column;align-items:stretch}

/* ---------- integrantes y link ---------- */
.integrantes li{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}
.integrantes canvas{flex:none}
.acciones summary{list-style:none;cursor:pointer;font-weight:800;font-size:20px;line-height:1;min-width:40px;min-height:40px;display:grid;place-items:center;border-radius:8px}
.acciones summary::-webkit-details-marker{display:none}
.acciones[open]{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap}
.tarjeta-link{align-items:flex-start}
.link{display:block;word-break:break-all;background:var(--superficie);border-radius:10px;padding:8px 10px;margin:8px 0;font-size:13px}
.vinculo:empty{display:none}

@media (prefers-reduced-motion: reduce){
  .panel,.boton{transition:none}
  .aviso{animation:none}
}

/* ---------- juegos del día: pantalla encima de todo (hoja desde abajo en el celular, tarjeta al centro en la compu) ---------- */
.juego{position:fixed;inset:0;z-index:8;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,14,30,.38)}
.juego-tarjeta{width:100%;max-width:480px;max-height:100dvh;overflow:auto;background:var(--superficie);backdrop-filter:blur(14px);border-radius:24px 24px 0 0;
  box-shadow:var(--sombra);padding:16px 16px max(16px, env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;animation:sube .28s cubic-bezier(.2,.8,.2,1)}
@media (min-width: 700px){ .juego{align-items:center} .juego-tarjeta{border-radius:24px;max-height:calc(100dvh - 32px)} }
@keyframes sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.juego-tarjeta>*{flex-shrink:0}
.juego-encabezado{display:flex;align-items:flex-start;gap:12px}
.juego-encabezado>div{flex:1}
.juego-encabezado h2{font-size:21px}
.juego-encabezado p{margin:2px 0 0;color:var(--suave);font-size:14px}
.juego-cerrar{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--superficie-2);font-size:16px;font-weight:700;color:var(--suave)}
.juego-mensaje{text-align:center;min-height:1.4em;font-weight:700;margin:0}
.juego-pie{display:flex;flex-direction:column;gap:8px;text-align:center}
.juego-pie small{color:var(--suave)}
.juego-final{font:800 22px/1.2 var(--titulo);margin:0}
.juego-cobro{font:800 20px/1.2 var(--titulo);display:flex;align-items:center;justify-content:center;gap:6px;margin:0}
.juego-cobro{flex-wrap:wrap}
.juego-cobro small{font:600 14px var(--texto);color:var(--suave)}
.juego-cobro .extras{flex-basis:100%;color:var(--bien);font-weight:800}
/* botones al terminar y tarjeta para compartir */
.botones-finales{width:100%}
.botones-finales .crece{flex:1}
.foto-piso{width:100%;height:auto;image-rendering:pixelated;border-radius:var(--radio-chico);display:block}
.tarjeta-texto{margin:0;padding:12px 14px;border-radius:var(--radio-chico);background:var(--superficie-2);font:600 14px/1.35 var(--texto);
  white-space:pre-wrap;word-break:break-word;user-select:text;-webkit-user-select:text}
.lista-juegos{display:flex;flex-direction:column;gap:10px}
.tarjeta-juego{border:0;width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:transform .12s ease}
.tarjeta-juego:active{transform:scale(.98)}

/* Palabra del día */
.palabra-grilla{display:grid;gap:6px;justify-content:center}
.palabra-fila{display:grid;grid-template-columns:repeat(5, min(12vw, 52px, 7.2dvh));gap:6px}
.casilla-letra{aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--linea);border-radius:10px;background:var(--superficie-2);
  font:800 clamp(18px, 6vw, 26px)/1 var(--titulo);color:var(--tinta)}
.casilla-letra.llena{border-color:color-mix(in srgb,var(--tinta) 40%,transparent);animation:pulso .12s ease}
.m-v{background:#3F905A!important;border-color:#3F905A!important;color:#fff!important}
.m-a{background:#D29B12!important;border-color:#D29B12!important;color:#fff!important}
.m-g{background:#787F8E!important;border-color:#787F8E!important;color:#fff!important}
.revela{animation:revela .45s ease both}
@keyframes revela{0%{transform:scale(.6) rotateX(80deg);opacity:.3}100%{transform:none;opacity:1}}
@keyframes pulso{50%{transform:scale(1.08)}}
.sacude{animation:sacude .38s ease}
.salta{animation:salta .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes salta{40%{transform:translateY(-12px)}70%{transform:translateY(2px)}}
@keyframes sacude{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.teclado{display:flex;flex-direction:column;gap:6px;user-select:none}
.teclado-fila{display:flex;gap:4px;justify-content:center}
.tecla{flex:1;max-width:44px;height:clamp(40px, 6.4dvh, 50px);padding:0;border:0;border-radius:8px;background:var(--superficie-2);font:800 15px/1 var(--titulo);color:var(--tinta);
  box-shadow:inset 0 -2px 0 var(--linea)}
.tecla:active{transform:translateY(1px)}
.tecla-ancha{flex:1.6;max-width:70px;font-size:13px}

/* Lógica del día: Cadete, Escritorios y Mate o café. El tablero es de colores claros en los dos temas, como un juego de mesa. */
.logica-arriba{display:flex;align-items:center;justify-content:space-between;gap:8px}
.reloj{font:800 16px/1 var(--titulo);font-variant-numeric:tabular-nums;color:var(--suave)}
.juego-mensaje.error{color:var(--mal)}
.grilla-logica{--borde:#2E2738;position:relative;display:grid;width:min(100%, 58dvh, 420px);aspect-ratio:1;margin:0 auto;gap:1px;background:var(--borde);
  border:3px solid var(--borde);border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.grilla-logica:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.grilla-logica .casilla{position:relative;min-width:0;min-height:0;border:0;padding:0;background:#F7F4EE;color:#1B1F27;display:grid;place-items:center;cursor:pointer;font:inherit}
.grilla-logica .casilla:disabled{cursor:default}
.grilla-logica .casilla.mal{box-shadow:inset 0 0 0 3px var(--mal)!important}
.grilla-logica .pieza{position:absolute;inset:16%;width:68%;height:68%;image-rendering:pixelated;pointer-events:none}
.grilla-logica .equis{font:900 15px/1 var(--titulo);opacity:.45}
/* Escritorios: un color por sector, con borde grueso donde cambia */
.grilla-logica .casilla[data-reg="0"]{background:#F6C9A8} .grilla-logica .casilla[data-reg="1"]{background:#BFD7EA} .grilla-logica .casilla[data-reg="2"]{background:#C8E3B6}
.grilla-logica .casilla[data-reg="3"]{background:#F2B8D8} .grilla-logica .casilla[data-reg="4"]{background:#F7E3A1} .grilla-logica .casilla[data-reg="5"]{background:#CBC3EE}
.grilla-logica .casilla[data-reg="6"]{background:#B9E4DD} .grilla-logica .casilla[data-reg="7"]{background:#DCCDB4}
.grilla-logica .casilla.borde-arriba{box-shadow:inset 0 3px 0 var(--borde)}
.grilla-logica .casilla.borde-izquierda{box-shadow:inset 3px 0 0 var(--borde)}
.grilla-logica .casilla.borde-arriba.borde-izquierda{box-shadow:inset 0 3px 0 var(--borde),inset 3px 0 0 var(--borde)}
/* Cadete: recorrido, números y paredes */
.grilla-logica svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.grilla-logica .recorrido{fill:none;stroke:var(--acento);stroke-width:.42;stroke-linecap:round;stroke-linejoin:round}
.cadete .casilla.en-camino{background:#FBE3BD}
.cadete .numero{position:absolute;inset:18%;z-index:2;border-radius:50%;background:#2E2738;color:#FFFFFF;display:grid;place-items:center;font:900 clamp(13px, 4vw, 18px)/1 var(--titulo);pointer-events:none}
.grilla-logica .pared{position:absolute;z-index:3;background:#2E2738;border-radius:3px;pointer-events:none}
.grilla-logica .pared.entre-columnas{width:6px;height:calc(100% / var(--n, 6));transform:translate(-50%, -50%)}
.grilla-logica .pared.entre-filas{height:6px;width:calc(100% / var(--n, 6));transform:translate(-50%, -50%)}
/* Mate o café: casillas dadas y marcas entre vecinas */
.grilla-logica .casilla.dada{background:#ECE6DA;cursor:default}
.grilla-logica .casilla.dada::after{content:"";position:absolute;inset:4px;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(46,39,56,.35)}
.grilla-logica .marca{position:absolute;z-index:3;width:18px;height:18px;transform:translate(-50%, -50%);border-radius:50%;background:#FFFFFF;color:#2E2738;
  display:grid;place-items:center;font:900 12px/1 var(--titulo);box-shadow:0 0 0 2px #2E2738;pointer-events:none}
@media (prefers-reduced-motion: reduce){ .juego-tarjeta,.revela,.sacude,.salta,.casilla-letra.llena{animation:none} }

/* Tu semana (racha semanal) y lo que jugó hoy el piso */
.tu-semana .dias{display:flex;gap:6px;margin:8px 0 6px}
.tu-semana .dia{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--titulo);color:var(--suave);background:var(--superficie);box-shadow:inset 0 0 0 2px var(--linea)}
.tu-semana .dia.jugado{background:var(--acento);color:var(--acento-tinta);box-shadow:none}
.tu-semana .dia.hoy{box-shadow:inset 0 0 0 2px var(--acento)}
.tu-semana .dia.hoy.jugado{box-shadow:0 0 0 3px var(--acento-suave)}
.tu-semana small{color:var(--suave);font-size:12.5px}
.hoy-piso{display:flex;flex-direction:column;gap:8px}
.hoy-piso h3{font-size:16px}
.hoy-piso>p{margin:0;color:var(--suave)}
.resultados-piso{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.resultados-piso li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--superficie-2);border-radius:12px;padding:8px 12px}
.resultados-piso .quien{font-weight:800;min-width:72px;flex:1}
.mini-palabra{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.mini-grilla{display:flex;flex-direction:column;gap:2px}
.mini-fila{display:flex;gap:2px}
.mini-fila span{width:9px;height:9px;border-radius:2px}
.mini-fila .v{background:#3F905A}
.mini-fila .a{background:#D29B12}
.mini-fila .g{background:#787F8E}
.mini-logica{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.icono-mini{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#FFFDF6;box-shadow:inset 0 0 0 2px var(--color,#7A49B0)}
.icono-mini canvas{width:16px;height:auto;max-height:16px;image-rendering:pixelated}

/* ---------- fase 5: vaquita, kiosco, lo tuyo y decoración ---------- */
select{font:600 15px/1.2 var(--texto);color:var(--tinta);background:var(--superficie);border:2px solid var(--linea);border-radius:12px;padding:8px 10px;max-width:100%}
select:focus{outline:none;border-color:var(--acento)}
select:disabled{opacity:.7}
.tarjeta-columna{flex-direction:column;align-items:stretch}
.aportar{display:flex;flex-direction:column;gap:8px}
.aportar label{font-weight:700}
.fila-aporte{display:flex;gap:8px}
.fila-aporte input{width:110px;font:800 18px/1 var(--titulo);color:var(--tinta);background:var(--superficie-2);border:2px solid transparent;border-radius:14px;padding:10px 12px}
.fila-aporte input:focus{outline:none;border-color:var(--acento)}
.fila-aporte .boton{flex:1}
.placa-obra .lista li,.camino-obras li{font-size:14px}
.placa{display:block;color:var(--suave);font-style:italic}
.kiosco-partes{display:flex;flex-direction:column;gap:14px}
.grilla-catalogo{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.producto-chico canvas{width:48px;height:48px}
.producto .boton{gap:4px}
.nota-producto{color:var(--suave);font-size:12.5px}
.lo-tuyo{display:flex;flex-direction:column;gap:10px}
.escenita{width:100%;height:auto;image-rendering:pixelated;border-radius:14px;display:block}
.vaquita-cuenta{display:flex;align-items:baseline;gap:8px;font-size:15px;color:var(--suave)}
.vaquita-cuenta b{font:800 30px/1 var(--titulo);color:var(--tinta)}
.vaquita-cuenta .moneda{align-self:center}
.placa-obra{background:linear-gradient(170deg,#E3B06C,#B9803F);color:#3B2410;border:2px solid #8A5A2A;border-radius:10px;padding:12px 14px;box-shadow:inset 0 0 0 2px rgba(255,240,200,.45);font-family:'Courier New',ui-monospace,monospace}
.placa-obra h3{font:800 13px/1.2 var(--titulo);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:#3B2410}
.placa-obra .lista li{background:transparent;padding:2px 0;color:#3B2410}
.ropero-espejo{display:flex;gap:14px;align-items:flex-start}
.espejo{flex:none;padding:10px 12px;border-radius:48% 48% 12px 12px / 22% 22% 12px 12px;background:linear-gradient(160deg,#F2F8FC 0%,#D4E6F1 55%,#BCD5E5 100%);border:6px solid #B07440;box-shadow:inset 0 0 0 2px #E0A866,0 4px 0 #8E5A30}
.espejo .escenita{width:84px;border-radius:0}
.ropero{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;flex:1}
.ficha-prenda{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;background:var(--superficie-2);border:2px solid transparent;color:var(--tinta);font:600 12.5px/1.2 var(--texto);text-align:center;cursor:pointer}
.ficha-prenda[aria-pressed="true"]{border-color:var(--acento);background:var(--acento-suave)}
.ficha-prenda canvas{image-rendering:pixelated}
.banderas{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.ficha-bandera canvas{width:48px;height:auto}
.ficha-bandera[aria-checked="true"]{border-color:var(--acento);background:var(--acento-suave)}
.sin-bandera{display:grid;place-items:center;width:48px;height:35px;color:var(--suave);font-weight:800}
.toldo{display:block;width:calc(100% + 4px);margin:-4px -2px 4px;image-rendering:pixelated;border-radius:10px 10px 0 0}
.seccion-kiosco .producto{border-bottom:6px solid #B88A55;border-radius:14px 14px 6px 6px}
.decoracion,.encargos{display:flex;flex-direction:column;gap:8px}
.chip-comun{background:var(--linea);color:var(--suave)}
.chip-especial{background:color-mix(in srgb,var(--r-especial) 16%,transparent);color:var(--r-especial)}
.chip-juegos{background:color-mix(in srgb,var(--r-juegos) 16%,transparent);color:var(--r-juegos)}
.chip-temporada{background:color-mix(in srgb,var(--r-temporada) 16%,transparent);color:var(--r-temporada)}
.chip-legendario{background:color-mix(in srgb,var(--r-legendario) 18%,transparent);color:var(--r-legendario)}
.foto-escritorio{max-width:380px;margin:0 auto}

/* ---------- cómo se juega: bienvenida del portero y reglas de la lógica ---------- */
.bienvenida{display:flex;flex-direction:column;gap:14px}
.bienvenida-dibujo{display:grid;place-items:center;background:var(--superficie-2);border-radius:20px;padding:18px}
.bienvenida-dibujo canvas{image-rendering:pixelated}
.bienvenida-dialogo{display:flex;gap:12px;align-items:flex-start;background:var(--acento-suave);border-radius:16px;padding:12px 14px}
.bienvenida-dialogo canvas{flex:none;image-rendering:pixelated}
.bienvenida-dialogo h3{margin:6px 0 4px;font-size:17px}
.bienvenida-dialogo p{margin:0;line-height:1.4}
.bienvenida-dialogo .chip{background:var(--superficie);font-size:11px}
.puntos-pasos{display:flex;gap:6px;justify-content:center}
.puntos-pasos span{width:8px;height:8px;border-radius:4px;background:var(--linea);transition:width .2s}
.puntos-pasos span.activo{width:22px;background:var(--acento)}
.reglas{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;line-height:1.4}
.grilla-logica.grilla-ejemplo{width:min(180px,50vw)}
.reglas-juego{flex:1}
.reglas-juego summary{font-size:14px;color:var(--suave)}
.reglas-juego .reglas{font-size:14px;padding:4px 0 6px 20px}
.led-flecha:not(:empty) + .led-abrir{display:none}
.pantalla-tarjeta .separador-texto{text-align:center;font-size:13px;margin:4px 0}

/* ---------- presentación al cargar ---------- */
.intro{position:fixed;inset:0;z-index:20;overflow:hidden;background:linear-gradient(#0E142E,#30345C);transition:opacity .45s ease;cursor:pointer}
.intro canvas{position:absolute;left:0;top:0;image-rendering:pixelated}
.intro-saliendo{opacity:0;pointer-events:none}

/* Piso elegido desde la vista del edificio: un toque lo nombra, otro (o tocar la etiqueta) entra. */
.etiqueta-piso small{display:block;font:600 12px/1.3 var(--texto);color:#5B6472;margin-top:2px}

/* ---------- decorar: lugares con dibujo (30/10) ---------- */
.lugares{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ficha-lugar{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:14px;background:var(--superficie-2);border:2px solid transparent;color:var(--tinta);font:600 12.5px/1.2 var(--texto);text-align:center;cursor:pointer}
.ficha-lugar b{font-weight:800}
.ficha-lugar small{color:var(--suave);font-size:11.5px}
.ficha-lugar canvas{image-rendering:pixelated}
.ficha-lugar[aria-expanded="true"]{border-color:var(--acento);background:var(--acento-suave)}
.ficha-lugar:disabled{cursor:default;opacity:.7}
.ficha-lugar .hueco{width:48px;height:48px;border-radius:10px;border:2px dashed var(--linea);display:grid;place-items:center;color:var(--suave);font:800 22px/1 var(--texto)}
.ficha-lugar.vacia:not(:disabled) .hueco{border-color:var(--acento);color:var(--acento-tinta)}
.elegir-lugar:not(:empty){margin-top:10px;padding:12px;border-radius:14px;background:var(--superficie);box-shadow:0 0 0 2px var(--acento) inset;display:flex;flex-direction:column;gap:10px}
.elegir-lugar h4{margin:0;font:800 15px/1.2 var(--titulo)}
.elegir-lugar .ficha-prenda small{color:var(--suave);font-size:11px}
.guardados{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.guardados small{color:var(--suave);margin-right:4px}
.guardados canvas{image-rendering:pixelated}
.pantalla-tarjeta:focus{outline:none}
/* Lo que todavía no se puede comprar (por ejemplo, necesita una obra): atenuado, para que no parezca a la venta. */
.producto.bloqueado canvas{filter:grayscale(1);opacity:.55}
.producto.bloqueado h3{color:var(--suave)}
/* Con teclado, el anillo de foco va adentro de la casilla: la grilla recorta lo que sale (encargo de Argon). */
.grilla-logica .casilla:focus-visible{outline-offset:-3px;z-index:2}

/* ---------- buzón: papeles del edificio (marcos de pixel art dibujados con código, ver src/arte/papeles.ts) ----------
   Son objetos físicos: se ven claros en los dos temas, como los tableros de la lógica. */
.papel{position:relative;border-style:solid;border-color:transparent;border-width:9px;border-image-source:var(--marco-hoja);
  border-image-slice:3 fill;border-image-width:9px;border-image-repeat:stretch;image-rendering:pixelated;color:#2E2738;background:none}
.papel canvas{image-rendering:pixelated}
.circular{border-image-source:var(--marco-circular);padding:6px 8px 4px;transform:rotate(-.5deg)}
.membrete{display:flex;align-items:center;gap:10px;margin:0;padding-bottom:6px;border-bottom:2px dashed #D9CDB3;
  font:700 11px/1 var(--titulo);letter-spacing:.06em;text-transform:uppercase;color:#7A6E78}
.membrete .titulo-pixel{display:inline-block}
.a-maquina{margin:8px 64px 2px 0;font-family:'Courier New',ui-monospace,monospace;font-size:14.5px;line-height:1.45;min-height:3em}
.sello{position:absolute;right:2px;bottom:0;width:50px;height:50px;transform:rotate(-14deg);opacity:.85;mix-blend-mode:multiply}
.papelito-nestor{border-image-source:var(--marco-amarillo);display:flex;gap:8px;align-items:flex-start;padding:10px 6px 4px 2px;transform:rotate(.6deg);margin-top:6px}
.papelito-nestor .cinta{position:absolute;top:-17px;left:50%;width:48px;height:18px;transform:translateX(-50%) rotate(-4deg)}
.papelito-nestor > canvas:not(.cinta){flex:none;width:44px;height:44px}
.papelito-nestor b{font-family:var(--titulo)}
.papelito-nestor p{margin:2px 0 0;line-height:1.4}
.volante{display:block;width:100%;text-align:left;font:inherit;color:#2E2738;padding:0 6px 4px;cursor:pointer}
.volante .toldo{width:calc(100% + 12px);margin:0 -6px 8px;border-radius:0}
.volante-titulo{display:block;font:800 16px/1.2 var(--titulo);margin-bottom:8px}
.volante-cosas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.volante-cosa canvas{display:block;margin:0 auto 2px;width:44px;height:44px}
.volante-cosa small{display:block;font-size:11.5px;line-height:1.2;color:#5B5262}
.volante .chip{display:inline-block;margin-top:10px}
.volante:active{transform:translateY(1px)}
.cartelera{border-style:solid;border-color:transparent;border-width:12px;border-image:var(--marco-corcho) 4 fill / 12px round;image-rendering:pixelated;padding:12px 4px 6px}
.papelitos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.papelito{display:flex;gap:8px;align-items:flex-start;padding:6px 6px 2px 4px;font-size:14px;line-height:1.35}
.papelitos .papelito:nth-child(odd){transform:rotate(-.6deg)}
.papelitos .papelito:nth-child(even){transform:rotate(.5deg)}
.papelito > canvas:not(.chinche){flex:none;width:24px;height:24px;margin-top:1px}
.papelito .chinche{position:absolute;top:-12px;left:50%;width:15px;height:18px;margin-left:-7px}
.papelito .titulo-pixel{display:inline-block;margin-right:6px;vertical-align:0}

/* ---------- Letrero de Néstor: fieltro negro con ranuras, marco de madera y letras de plástico ---------- */
.fieltro{border-style:solid;border-color:transparent;border-width:12px;border-image:var(--marco-corcho) 4 / 12px round;image-rendering:pixelated;
  background:#24212A repeating-linear-gradient(180deg,transparent 0 9px,rgba(0,0,0,.35) 9px 10px,rgba(255,255,255,.05) 10px 11px);
  padding:14px 10px 16px;display:flex;flex-direction:column;align-items:center;gap:14px}
.letras-fieltro{image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.fieltro-renglon{min-height:34px;display:flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden}
.fieltro-cursor{display:block;width:18px;height:4px;background:#F4F1EA;opacity:.7;animation:titila 1s steps(1) infinite}
@keyframes titila{50%{opacity:0}}
.fieltro-renglon.festeja{animation:salta .5s cubic-bezier(.3,1.6,.5,1)}
.fieltro-fichas{display:flex;flex-direction:column;align-items:center;gap:8px}
.fichas-fila{display:flex;gap:10px}
.ficha{position:relative;width:58px;height:58px;border:0;border-radius:8px;background:#2F2B36;cursor:pointer;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px #3C3746,inset 0 -4px 0 rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.4)}
.ficha:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #3C3746,0 0 0 rgba(0,0,0,.4)}
.ficha:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.ficha.pegada{width:70px;height:62px;background:#3A3442;box-shadow:inset 0 0 0 2px #C9A85E,inset 0 -4px 0 rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.4)}
.ficha.pegada .cinta{position:absolute;top:-8px;left:50%;width:40px;height:15px;transform:translateX(-50%) rotate(-6deg);image-rendering:pixelated}
.juego-mensaje.bien{color:#2E7A4C}
.juego-mensaje.mal{color:var(--mal,#B3261E)}
.letrero-botones .boton{min-height:44px}
.letrero-progreso{display:flex;flex-direction:column;gap:6px}
.letrero-nivel{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.letrero-nivel b{font-family:var(--titulo);font-size:17px}
.letrero-nivel span,.letrero-progreso small,.letrero-piso small{color:var(--suave)}
.barra-niveles{position:relative;height:12px;border-radius:6px;background:var(--superficie-2);box-shadow:inset 0 0 0 1px var(--linea);overflow:hidden}
.barra-relleno{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#C9A85E,#E2B53A);border-radius:6px;transition:width .4s}
.muesca{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(20,24,34,.25)}
.muesca.pasada{background:rgba(255,255,255,.6)}
.letrero-piso{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--superficie-2)}
.palabras-letrero{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.palabras-letrero li{padding:3px 9px;border-radius:999px;background:var(--superficie-2);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.palabras-letrero li.llena{background:#F6E3A8;color:#5A4210}
.letrero-anterior .palabras-letrero li{opacity:.55}
.letrero-anterior .palabras-letrero li.encontrada{opacity:1;box-shadow:inset 0 0 0 2px #2E7A4C}
.letrero-mias h3{margin:0}
.suave{color:var(--suave);margin:4px 0 0}
.lista-reglas{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px}
@media (max-width: 380px){ .ficha{width:50px;height:50px} .ficha.pegada{width:60px;height:56px} .fichas-fila{gap:8px} }
.barra-piso .barra-relleno{background:linear-gradient(90deg,#7FB241,#3F905A)}
/* Paso 5: rarezas, kiosco con reloj y lo de mañana, y la vitrina de la colección. */
.serie{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--suave)}
.serie-cuenta{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.serie b{color:var(--tinta)}
.pips{display:inline-flex;gap:2px}
.pips i{width:6px;height:6px;border-radius:1px;background:var(--linea)}
.pips i.lleno{background:var(--acento)}
.chip-rareza{background:color-mix(in srgb,var(--rareza) 16%,transparent);color:color-mix(in srgb,var(--rareza) 70%,var(--tinta))}
.kiosco-reloj{color:var(--suave);font-size:14px;margin:0 0 4px}
.kiosco-manana{background:var(--superficie-2);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.fila-siluetas{display:flex;gap:10px;overflow-x:auto}
.silueta-chica{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;text-align:center}
.silueta-chica canvas{width:40px;height:40px;image-rendering:pixelated}
.silueta-chica small{font-size:11px;color:var(--suave)}
.grupo-coleccion h4{margin:10px 0 6px;font-size:14px}
.grupo-coleccion h4 small{color:var(--suave);font-weight:600}
.vitrina{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.vitrina-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;background:var(--superficie-2);border:2px solid color-mix(in srgb,var(--rareza) 45%,transparent);text-align:center}
.vitrina-item canvas{width:48px;height:48px;image-rendering:pixelated}
.vitrina-item small{font-size:11px;line-height:1.2}
.vitrina-item.falta{opacity:.75;border-style:dashed}
.producto-libro{border:2px solid color-mix(in srgb,#E8A73E 45%,transparent)}

/* ---------- informe de ocupación (ranking de pisos) ---------- */
.medalla-dibujo{image-rendering:pixelated;flex:none}
.ranking-nota{margin:0;color:var(--suave);font-size:14px;line-height:1.4}
.ranking-vacio{margin:0;padding:14px;border-radius:12px;background:var(--superficie-2);text-align:center}
.ranking-tabla{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ranking-fila{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--superficie-2)}
.ranking-fila.mio{box-shadow:inset 0 0 0 2px var(--acento)}
.ranking-puesto{width:32px;text-align:center;font-family:var(--titulo);font-weight:var(--peso-titulo);color:var(--suave);flex:none}
.ranking-piso{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ranking-piso b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-barra{display:block;height:8px;border-radius:4px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea);overflow:hidden}
.ranking-barra span{display:block;height:100%;background:var(--acento);border-radius:4px}
.ranking-numeros{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.2}
.ranking-numeros small{color:var(--suave)}
.ranking-podio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.podio-puesto{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:12px;background:var(--superficie-2);text-align:center;min-width:0}
.podio-puesto b{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.podio-puesto.mio{box-shadow:inset 0 0 0 2px var(--acento)}
.medallero{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.medallero li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:var(--superficie-2)}
.medallero li.mio{box-shadow:inset 0 0 0 2px var(--acento)}
.medallero li b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.medallero-cuenta{display:inline-flex;align-items:center;gap:2px;font-family:var(--titulo);font-weight:var(--peso-titulo)}
.medallero-cuenta.cero{opacity:.35}
.ranking-circular{margin:0;font-size:13px;font-style:italic;color:var(--suave)}
.ranking-resultado{margin:0;font-size:16px;line-height:1.4;text-align:center}
.ranking-resultado.festejo{font-family:var(--titulo);font-weight:var(--peso-titulo)}
.informe-piso{display:flex;align-items:center;gap:10px;justify-content:space-between}
.informe-piso p{margin:0}
.informe-piso .boton{white-space:nowrap;flex:none}

/* ---------- piel de juego (7/11): que la interfaz parezca parte del juego y no una página web ----------
   Papel con marco de madera, esquinas en escalón (se recorta un punto por esquina), botones y pestañas con relieve
   y contorno oscuro sin esquinas, como los menús de Stardew Valley o Animal Crossing, y etiquetas de juego. */
:root{--escalon:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px);
  --contorno:0 -3px 0 0 var(--borde),0 3px 0 0 var(--borde),-3px 0 0 0 var(--borde),3px 0 0 0 var(--borde);
  --contorno-fino:0 -2px 0 0 var(--borde),0 2px 0 0 var(--borde),-2px 0 0 0 var(--borde),2px 0 0 0 var(--borde)}
/* Marcos: papel con dos tablas de madera adentro del contorno. */
.panel,.juego-tarjeta,.pantalla-tarjeta{border-radius:0;backdrop-filter:none;background:var(--superficie);border:3px solid var(--borde);clip-path:var(--escalon);
  box-shadow:inset 0 0 0 3px var(--madera),inset 0 0 0 5px var(--madera-luz),inset 0 0 0 7px color-mix(in srgb,var(--madera) 25%,transparent)}
@media (min-width: 700px){ .juego-tarjeta{border-radius:0} }
.panel-cuerpo{padding-left:18px;padding-right:18px}
.pestanas{margin:0 -8px;padding:5px 8px 12px;gap:10px}
.carta-encabezado{padding:12px 12px 10px}
.carta-barra{border-radius:0;clip-path:var(--escalon);box-shadow:inset 0 3px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.35)}
.carta-cerrar,.juego-cerrar{border-radius:0;clip-path:var(--escalon);box-shadow:inset 0 -3px 0 rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.12)}
/* Botones: contorno oscuro sin esquinas, luz arriba y sombra abajo; al tocarlo se hunde. */
.boton{border-radius:0;box-shadow:var(--contorno),inset 0 -4px 0 0 var(--bisel-sombra),inset 0 3px 0 0 var(--bisel-luz)}
.boton:active{transform:translateY(2px);box-shadow:var(--contorno),inset 0 3px 0 0 var(--bisel-sombra)}
.boton-principal{box-shadow:var(--contorno),inset 0 -4px 0 0 rgba(90,51,0,.35),inset 0 3px 0 0 rgba(255,255,255,.45)}
.boton-principal:active{box-shadow:var(--contorno),inset 0 3px 0 0 rgba(90,51,0,.35)}
.boton-chico{border-radius:0;box-shadow:var(--contorno-fino),inset 0 -3px 0 0 var(--bisel-sombra),inset 0 2px 0 0 var(--bisel-luz)}
.boton-ancho{width:calc(100% - 6px);margin-left:3px;margin-right:3px}
.boton-icono,.pildora,.led{border-radius:0;backdrop-filter:none;box-shadow:var(--contorno-fino),inset 0 -3px 0 0 var(--bisel-sombra),inset 0 2px 0 0 var(--bisel-luz)}
.led{box-shadow:var(--contorno-fino),inset 0 0 0 1px rgba(255,255,255,.06)}
/* Pestañas: fichas con relieve; la elegida, en el color del juego. */
.pestanas button{border-radius:0;background:var(--superficie-2);color:var(--suave);box-shadow:var(--contorno-fino),inset 0 -3px 0 0 var(--bisel-sombra),inset 0 2px 0 0 var(--bisel-luz)}
.pestanas button[aria-selected="true"]{background:var(--acento);color:var(--acento-tinta);box-shadow:var(--contorno-fino),inset 0 3px 0 0 rgba(90,51,0,.3)}
/* Etiquetas: rectángulos con contorno y letras de cartel, como las de los objetos en los juegos. */
.chip,.chip-boton{border-radius:0;margin:2px;padding:2px 7px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--contorno-fino)}
.chip-rareza{background:color-mix(in srgb,var(--rareza) 28%,var(--superficie));color:color-mix(in srgb,var(--rareza) 70%,var(--tinta));
  box-shadow:0 -2px 0 0 color-mix(in srgb,var(--rareza) 65%,var(--borde)),0 2px 0 0 color-mix(in srgb,var(--rareza) 65%,var(--borde)),-2px 0 0 0 color-mix(in srgb,var(--rareza) 65%,var(--borde)),2px 0 0 0 color-mix(in srgb,var(--rareza) 65%,var(--borde)),inset 0 2px 0 0 var(--bisel-luz)}
/* Ranuras: lo que va adentro del papel (tarjetas, filas, fichas) queda hundido, con su borde. */
.tarjeta,.producto,.nota,.opcion,.kiosco-manana,.ranking-fila,.podio-puesto,.medallero li,.letrero-piso,.ranking-vacio,.tarjeta-texto,.ficha-lugar,.ficha,.codigo-grande,.link,.aviso-prueba,.bienvenida-dialogo,.placa-obra{
  border-radius:0;box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
.nota-circular{border-radius:0}
.ranking-fila.mio,.podio-puesto.mio,.medallero li.mio{box-shadow:inset 0 0 0 3px var(--acento),inset 0 5px 0 0 var(--bisel-sombra)}
.vitrina-item,.ficha-prenda,.icono-juego,.icono-mini,.escenita,.editor-personaje,.foto-piso,.vista-cartel,.bienvenida-dibujo,.toldo{border-radius:0}
.muestra-texto,.dock-boton{border-radius:0}
input[type="text"]{border-radius:0;box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
/* Barras de progreso: canaleta con contorno y relleno con brillo. */
.barra-progreso,.barra-niveles,.ranking-barra{border-radius:0;box-shadow:var(--contorno-fino)}
.barra-relleno,.ranking-barra span{border-radius:0}
/* El dock y los avisos, con el mismo contorno. */
.dock{border-radius:0;clip-path:var(--escalon);box-shadow:inset 0 0 0 3px #0E1016,inset 0 4px 0 3px rgba(255,255,255,.08)}
.dock-icono{border-radius:0;clip-path:var(--escalon)}
.aviso{border-radius:0;box-shadow:var(--contorno),inset 0 -3px 0 rgba(0,0,0,.25)}
.globito{border-radius:0;box-shadow:var(--contorno-fino),0 4px 0 2px rgba(0,0,0,.18)}
.globito::after{border-top-color:#FFFFFF}

.seccion-kiosco .producto{border-radius:0}
.lista li{border-radius:0;box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
.fila-aporte input{border-radius:0}
.opcion{border-radius:0}
/* El kiosquero cuenta cómo es el kiosco (7/11). */
.kiosquero-dice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--superficie-2);box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
.kiosquero-dice > canvas{flex:none;width:44px;height:44px;image-rendering:pixelated}
.kiosquero-dice p{margin:2px 0 0;color:var(--suave);font-size:14px}
/* Piel de juego en los juegos (7/11): casillas y teclas como fichas con relieve, tableros con marco cuadrado. */
.casilla-letra{border:0;border-radius:0;box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
.casilla-letra.llena{box-shadow:inset 0 0 0 2px var(--borde),inset 0 -3px 0 0 var(--bisel-sombra),inset 0 3px 0 0 var(--bisel-luz)}
.m-v,.m-a,.m-g{box-shadow:inset 0 0 0 2px var(--borde),inset 0 -3px 0 0 rgba(0,0,0,.25),inset 0 3px 0 0 rgba(255,255,255,.3)!important}
.tecla{border-radius:0;box-shadow:var(--contorno-fino),inset 0 -3px 0 0 var(--bisel-sombra),inset 0 2px 0 0 var(--bisel-luz)}
.tecla:active{transform:translateY(2px);box-shadow:var(--contorno-fino),inset 0 2px 0 0 var(--bisel-sombra)}
.teclado-fila{gap:6px}
.grilla-logica{border-radius:0}
.grilla-logica .pared,.grilla-logica .casilla.dada::after{border-radius:0}
.ficha{border-radius:0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.08)}

/* ---------- arreglos del recorrido del 9/11 ---------- */
/* Los avisos van arriba de todo: con una carta o un juego abiertos quedaban tapados en el celular (no se veía
   "Compraste…" ni los errores). */
.aviso{z-index:30}
/* Letrero de Néstor: las siete letras son teclas claras, con contorno y relieve, sobre el fieltro. En el celular no se
   abre el teclado y no se entendía que se tocaban. Hasta el primer toque laten de a una. */
.fieltro-renglon{min-height:40px;gap:8px}
.fieltro-fichas{gap:12px;padding-bottom:4px}
.fichas-fila{gap:14px}
.ficha{background:#F4E9CC;box-shadow:0 -3px 0 0 #0E0A12,0 3px 0 0 #0E0A12,-3px 0 0 0 #0E0A12,3px 0 0 0 #0E0A12,inset 0 -6px 0 0 rgba(58,36,24,.28),inset 0 3px 0 0 rgba(255,255,255,.7)}
.ficha:active{transform:translateY(3px);box-shadow:0 -3px 0 0 #0E0A12,0 3px 0 0 #0E0A12,-3px 0 0 0 #0E0A12,3px 0 0 0 #0E0A12,inset 0 3px 0 0 rgba(58,36,24,.28)}
.ficha .letras-fieltro{filter:none}
.ficha.pegada{background:#F2A33A;box-shadow:0 -3px 0 0 #0E0A12,0 3px 0 0 #0E0A12,-3px 0 0 0 #0E0A12,3px 0 0 0 #0E0A12,inset 0 -6px 0 0 rgba(90,51,0,.35),inset 0 3px 0 0 rgba(255,255,255,.5)}
.fieltro-fichas.invita .ficha{animation:late 2.1s ease-in-out infinite}
.fieltro-fichas.invita .fichas-fila:nth-child(1) .ficha:nth-child(2){animation-delay:.3s}
.fieltro-fichas.invita .fichas-fila:nth-child(1) .ficha:nth-child(3){animation-delay:.6s}
.fieltro-fichas.invita .fichas-fila:nth-child(2) .ficha{animation-delay:.9s}
.fieltro-fichas.invita .fichas-fila:nth-child(3) .ficha:nth-child(1){animation-delay:1.2s}
.fieltro-fichas.invita .fichas-fila:nth-child(3) .ficha:nth-child(2){animation-delay:1.5s}
.fieltro-fichas.invita .fichas-fila:nth-child(3) .ficha:nth-child(3){animation-delay:1.8s}
@keyframes late{0%,22%,100%{transform:none}10%{transform:translateY(-5px)}}
@media (prefers-reduced-motion: reduce){ .fieltro-fichas.invita .ficha{animation:none} }
.letrero-regla{margin:0;text-align:center;color:var(--suave);font-size:14px;font-weight:700}
/* La colita del globito apunta a tu escritorio aunque el globito se corra para no salirse de la pantalla. */
.globito::after{left:calc(50% + var(--cola, 0px))}
/* La carta "Tu espacio" (9/11): en el celular ocupa media pantalla, así arriba se ve tu espacio de verdad mientras
   elegís (como el modo de decorar de Animal Crossing: Pocket Camp). */
@media (max-width: 899px){
  .panel[data-modo="medio"]{height:clamp(240px, calc(100dvh - 370px), 460px);max-height:none}
  .panel[data-modo="medio"] .carta-encabezado{padding:8px 10px 4px}
  .panel[data-modo="medio"] .carta-barra{padding:6px 8px 6px 12px}
}
.parte-espacio{display:flex;flex-direction:column;gap:12px}
.parte-espacio > p{margin:0;color:var(--suave)}
.ambiente h3{margin:14px 0 6px}
.ambiente h3:first-child{margin-top:0}

/* El muestrario de estilos de "Tu espacio": cada estilo dibujado entero, en una fila que se desliza. */
.muestrario{list-style:none;margin:8px 0 4px;padding:2px 2px 8px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.muestrario::-webkit-scrollbar{display:none}
.estilo-muestra{flex:none;width:108px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 6px 8px;background:var(--superficie-2);
  box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra);text-align:center}
.estilo-muestra canvas{width:92px;height:116px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--borde)}
.estilo-muestra b{font-size:13px;line-height:1.15;margin-top:4px}
.estilo-muestra small{color:var(--suave);font-size:12px}
.estilo-muestra.completo{box-shadow:inset 0 0 0 3px var(--acento),inset 0 5px 0 0 var(--bisel-sombra)}
/* El editor de personaje: el dibujo queda a la vista mientras se baja por las opciones (9/11: en el celular se elegía
   la ropa sin ver cómo quedaba). */
.editor-cabeza{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;margin:-12px -12px 0;padding:8px 12px;
  background:var(--superficie-2);box-shadow:0 3px 0 0 var(--ranura)}
.editor-vista{padding:0}
.editor-filas{display:flex;flex-direction:column;gap:8px}
/* En la carta Tu espacio (10/11): el editor ocupa la carta entera y no se desliza todo junto. El dibujo y los botones
   quedan fijos; se deslizan solo las opciones. */
@media (max-width: 899px){
  .panel[data-lleno]{height:calc(100dvh - var(--sobre-dock) - max(10px, env(safe-area-inset-top)) - 64px)}
}
.editor-en-carta{display:flex;flex-direction:column;gap:10px}
.editor-en-carta .editor-personaje{padding:0;gap:0}
.editor-en-carta .editor-cabeza{position:static;margin:0}
.editor-en-carta .editor-filas{padding:10px 12px 12px}
.editor-en-carta .fila-botones{padding:0 3px 3px}
@media (min-height: 600px){
  .panel[data-lleno] .panel-cuerpo{flex:1 1 0;min-height:0;overflow:hidden;padding-bottom:12px}
  .panel-cuerpo.editor-abierto > .seccion-espacio,.panel-cuerpo.editor-abierto .parte-espacio{flex:1 1 0;min-height:0}
  .editor-en-carta,.editor-en-carta .editor-personaje{flex:1 1 0;min-height:0}
  .editor-en-carta .editor-cabeza,.editor-en-carta .fila-botones{flex:none}
  .editor-en-carta .editor-filas{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
/* Con muy poca altura (el celular acostado) no hay lugar para dejar nada fijo: se desliza todo junto. */
@media (max-height: 599px){ .editor-cabeza{position:static} }
/* Al crear la cuenta, el dibujo se pega al borde de arriba de la tarjeta: lo fijo se pega donde termina el relleno de la
   tarjeta (22 px), y sin esto las opciones que se deslizan asomaban por arriba del dibujo. */
.pantalla-tarjeta .editor-cabeza{top:-22px}
/* En pantallas angostas, las cuatro pestañas del piso entran sin deslizar. */
@media (max-width: 380px){ .pestanas{gap:6px} .pestanas button{padding:8px 9px;font-size:13px} }

/* Cartelitos de la vista del edificio (23/11): en el celular, el número, el nombre, la medalla y cuántos jugaron hoy de
   cada piso, legibles sobre el edificio en miniatura. Tocar uno entra al piso. */
.cartelitos{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.cartelito{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:5px;max-width:min(54vw, 300px);
  padding:2px 7px 2px 4px;border:2px solid var(--borde);background:var(--superficie);color:var(--tinta);
  box-shadow:0 2px 0 0 rgba(0,0,0,.35);font:600 12px/1.15 var(--texto);white-space:nowrap;will-change:transform}
.cartelito b{font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.cartelito small{flex:none;color:var(--suave);font-size:11px;padding-left:5px;border-left:1px solid var(--linea)}
.cartelito-medalla{flex:none;width:12px;height:15px;image-rendering:pixelated}
.cartelito.mio{border-color:var(--acento);box-shadow:0 0 0 2px var(--acento),0 2px 0 2px rgba(0,0,0,.35)}
.papel-tabla{width:100%;text-align:left;font:inherit;color:#2E2738;align-items:center;cursor:pointer;transform:rotate(-.5deg);margin:0 0 6px}
.papel-tabla > span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.papel-tabla-texto{font-size:14px;line-height:1.3}

/* Archivo, el juego de grupos (30/11): cajones de archivo con etiqueta de color y fichas de cartón. */
.archivo-cajones{display:flex;flex-direction:column;gap:6px}
.archivo-cajon{--c:#E9C24A;--c2:#F6E2A0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 10px 8px;background:var(--c2);color:#2E2738;
  border:3px solid var(--borde);box-shadow:inset 0 -4px 0 0 color-mix(in srgb,var(--c) 70%,#000 0%),inset 0 3px 0 0 rgba(255,255,255,.45);text-align:center}
.archivo-cajon.c-verde{--c:#6FAF5A;--c2:#C9E6B6}.archivo-cajon.c-azul{--c:#5B8FD0;--c2:#C3D8F2}.archivo-cajon.c-violeta{--c:#9B6BC4;--c2:#DDCBEE}
.archivo-etiqueta{font:var(--peso-titulo) 14px/1.15 var(--titulo);text-transform:uppercase;letter-spacing:.03em;background:var(--c);color:#FFFDF6;padding:2px 8px;box-shadow:0 2px 0 0 rgba(0,0,0,.25)}
.archivo-palabras{font:700 13px/1.25 var(--texto)}
.archivo-cajon.entra{animation:cajon .45s steps(5) both}
@keyframes cajon{from{transform:translateY(10px) scaleY(.6);opacity:0}to{transform:none;opacity:1}}
.archivo-fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.archivo-ficha{min-height:58px;padding:4px 2px;border:3px solid var(--borde);background:#F4E9CF;color:#2E2738;font:800 13px/1.1 var(--texto);
  box-shadow:inset 0 -4px 0 0 #D9C59A,inset 0 3px 0 0 #FFF8E6;overflow-wrap:normal;word-break:keep-all;cursor:pointer}
/* Las palabras largas, más chicas: nunca se parten en dos renglones. */
.archivo-ficha.larga{font-size:11px;letter-spacing:-.02em}
.archivo-ficha.muy-larga{font-size:9.5px;letter-spacing:-.03em}
.archivo-ficha.elegida{background:#5E5470;color:#FFFDF6;box-shadow:inset 0 -4px 0 0 #3E3650,inset 0 3px 0 0 #7E7490;transform:translateY(2px)}
.archivo-fichas.sacude{animation:sacude .35s}
.archivo-errores{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-weight:700;font-size:13px;color:var(--suave)}
.archivo-errores .clip{width:10px;height:16px;border:2px solid #7C8494;border-radius:5px 5px 4px 4px;background:transparent}
.archivo-errores .clip.gastado{border-color:var(--linea);opacity:.35}
.archivo-acciones .boton{flex:1}
@media (max-width: 380px){ .archivo-ficha{min-height:52px;font-size:12px} .archivo-ficha.larga{font-size:10px} .archivo-ficha.muy-larga{font-size:8.5px} }
.mini-archivo{display:inline-flex;align-items:center;gap:4px}
.mini-archivo .n0{background:#E9C24A}.mini-archivo .n1{background:#6FAF5A}.mini-archivo .n2{background:#5B8FD0}.mini-archivo .n3{background:#9B6BC4}
/* La luz del cartel en la carta de la vaquita (especificación 5.15): como el panel oscuro del cartel de la azotea. */
.cartel-vaquita{background:#1B1F2E;color:#E9E6F2;border:2px solid #3B4050;border-radius:10px;padding:10px 12px;box-shadow:inset 0 0 0 1px rgba(255,95,162,.35),0 0 14px rgba(255,95,162,.18)}
.cartel-vaquita p{margin:0}.cartel-vaquita p+p{margin-top:6px}
.cartel-vaquita b{color:#FF8CC0}
.cartel-vaquita small{color:#B9B5C9}
/* La carta del cartel de la azotea (especificación 5.15). */
.cartel-dibujo{display:flex;justify-content:center;margin:0 -4px 4px}
.cartel-lienzo{width:100%;max-width:402px;height:auto;image-rendering:pixelated;border:2px solid var(--borde);background:#141833}
.cartel-ganador{font-size:15px}
.cartel-ganador b{text-shadow:0 0 6px currentColor;background:#1B1F2E;padding:1px 6px}
.cartel-luces{display:flex;flex-direction:column;gap:6px}
.cartel-luces p{margin:0}
.cartel-barra{position:relative;display:block;height:14px;background:#1B1F2E;box-shadow:var(--contorno-fino,inset 0 0 0 1px var(--linea));overflow:hidden}
.cartel-barra-lleno{display:block;height:100%;background:repeating-linear-gradient(90deg,#FFE28E 0 6px,#F2B544 6px 8px);box-shadow:0 0 8px #FFD36A}
.cartel-barra-marca{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#596075}
.cartel-tramos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:14px}
.cartel-tramos li{padding:4px 8px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea);color:var(--suave)}
.cartel-tramos li.hecho{color:var(--tinta);background:var(--acento-suave)}
.cartel-tramos li.hecho b::after{content:' ✓';color:var(--bien)}
.cartel-tuyo{font-weight:700}
/* El chat del piso (13/11): globitos que salen arriba de cada personaje y se borran, y el renglón para escribir. */
.charla{position:fixed;inset:0;z-index:3;pointer-events:none}
.charla-globo{position:absolute;transform:translate(-50%, calc(-100% - 8px));max-width:min(210px, 60vw);padding:5px 9px;background:#FFFFFF;color:#1B1F27;
  font:700 13px/1.25 var(--texto);text-align:center;overflow-wrap:anywhere;box-shadow:var(--contorno-fino, 0 0 0 2px #2E2738),0 3px 0 1px rgba(0,0,0,.18);animation:globo-sale .18s ease-out}
.charla-globo::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:#FFFFFF;border-bottom:0}
.charla-globo.ajeno{padding:2px 8px;font-weight:800;color:#6F6A7E;letter-spacing:.1em}
.charla-globo[hidden]{display:none}
@keyframes globo-sale{from{opacity:0;translate:0 4px}}
.charla-barra{position:fixed;left:50%;transform:translateX(-50%);z-index:6;width:min(520px, calc(100% - 20px));display:flex;gap:6px;padding:7px;
  background:rgba(26,30,40,.95);box-shadow:inset 0 0 0 3px #0E1016;clip-path:var(--escalon)}
.charla-barra[hidden]{display:none}
.charla-campo{flex:1;min-width:0;font:600 16px/1.2 var(--texto);padding:9px 10px;border:0;background:#F4F1EA;color:#1B1F27}
.charla-decir{flex:none}
.charla-cerrar{flex:none;width:40px;padding:0;font-size:20px}
/* La ficha de un objeto (13/11): al pasar el mouse o al tocarlo. Con el estilo del juego: papel crema, contorno de
   pixel, una franja del color de la rareza arriba y el nombre con la letra del edificio. */
.ficha-objeto{position:fixed;z-index:7;width:max-content;max-width:min(250px, calc(100vw - 16px));padding:9px 10px 7px;background:#F6E9CC;color:#3A2418;
  border-top:4px solid var(--rareza, #8C86A0);box-shadow:0 0 0 2px #2B1A12,0 4px 0 2px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.5);
  pointer-events:none;font:700 12px/1.3 var(--texto)}
.ficha-objeto[hidden]{display:none}
.ficha-objeto[data-modo="toque"]{animation:globo-sale .15s ease-out}
.ficha-rareza{display:inline-block;padding:1px 6px;margin-bottom:5px;background:var(--rareza);color:#FFFFFF;font:800 10px/1.4 var(--titulo);letter-spacing:.08em;
  text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 0 0 1px #2B1A12}
.ficha-nombre{line-height:0}
.ficha-nombre .titulo-pixel{image-rendering:pixelated}
.ficha-nombre-largo{display:block;line-height:1.2;font:800 14px/1.2 var(--titulo)}
.ficha-objeto p{margin:5px 0 0}
.ficha-origen{display:flex;align-items:center;gap:8px;color:#5B3B2F}
.ficha-precio{display:inline-flex;align-items:center;gap:3px;color:#3A2418;font-weight:800}
.ficha-precio .moneda{width:11px;height:11px}
.ficha-detalle{color:#7A5C44}
.ficha-dueno{color:#7A5C44;font-weight:600;border-top:1px dashed rgba(58,36,24,.3);padding-top:4px}
/* El regalo para el piso en el kiosco (13/11): que no se confunda con lo propio. Papel verde, moño y "Para todo el piso". */
.producto-regalo{position:relative;background:linear-gradient(180deg,#E3F0D2,#CFE3B8);box-shadow:inset 0 0 0 2px #3F905A}
.cinta-regalo{display:block;margin:-2px -2px 6px;padding:2px 6px;background:#3F905A;color:#FFFFFF;font:800 10px/1.4 var(--titulo);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.cinta-regalo canvas{width:12px;height:12px;image-rendering:pixelated;vertical-align:-2px;margin-right:4px}
.producto-regalo h3,.producto-regalo small{color:#22341A}
/* Abrir un piso: elegir en cuál (13/11). Los 14, como la botonera del ascensor; los ocupados, apagados. */
.elegir-piso{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.boton-piso{min-height:38px;border:0;background:var(--superficie);color:var(--tinta);font:800 15px/1 var(--titulo);cursor:pointer;box-shadow:var(--contorno-fino, inset 0 0 0 2px var(--linea))}
.boton-piso[aria-checked="true"]{background:var(--acento);color:var(--acento-tinta)}
.boton-piso:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.aviso-prueba-grande{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.aviso-prueba-grande p{margin:0;flex:1 1 220px}
.premio-invitar{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}.premio-invitar .moneda{align-self:center}
/* La ventana de botín (13/11, ejemplo de @asynkimo): cada objeto en su casillero, con el color de su rareza en el borde y
   el fondo; lo épico y lo legendario titilan; lo de hoy aparece de a uno al abrir el kiosco. */
.casillero{position:relative;display:grid;place-items:center;width:78px;height:78px;margin:2px auto 0;
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--rareza) 30%,#3A3046) 0 45%, color-mix(in srgb,var(--rareza) 12%,#241E2C) 75%);
  box-shadow:0 0 0 2px #2B1A12,inset 0 0 0 2px var(--rareza),inset 2px 2px 0 2px color-mix(in srgb,var(--rareza) 55%,#FFFFFF),inset 0 0 0 5px rgba(0,0,0,.28)}
.producto-chico .casillero{width:58px;height:58px}
.casillero canvas{position:relative;z-index:1}
.casillero[data-rareza="legendaria"]{box-shadow:0 0 0 2px #2B1A12,inset 0 0 0 2px var(--rareza),inset 2px 2px 0 2px #FFE28E,inset 0 0 0 5px rgba(0,0,0,.2),0 0 10px 1px color-mix(in srgb,var(--rareza) 55%,transparent)}
.destellos{position:absolute;inset:0;pointer-events:none;z-index:2}
.destellos i{position:absolute;width:2px;height:2px;background:#FFF6C4;box-shadow:0 -2px #FFF6C4,0 2px #FFF6C4,-2px 0 #FFF6C4,2px 0 #FFF6C4;opacity:0;animation:titila 2.4s steps(1) infinite}
[data-rareza="epica"] .destellos i{background:#F2E6FF;box-shadow:0 -2px #D9C2FF,0 2px #D9C2FF,-2px 0 #D9C2FF,2px 0 #D9C2FF}
.destellos i:nth-child(1){left:14%;top:18%}
.destellos i:nth-child(2){right:14%;top:30%;animation-delay:.8s}
.destellos i:nth-child(3){left:58%;bottom:14%;animation-delay:1.6s}
@keyframes titila{0%{opacity:0}8%{opacity:1}20%{opacity:.4}28%{opacity:0}}
.vitrina-item{position:relative}
.vitrina-item[data-rareza="legendaria"]:not(.falta){box-shadow:0 0 8px color-mix(in srgb,var(--rareza) 50%,transparent)}
.grilla-hoy .producto{animation:sale-del-cofre .32s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--orden, 0) * 90ms)}
@keyframes sale-del-cofre{0%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.grilla-hoy .producto{animation:none}.destellos i{animation:none;opacity:0}}
.vitrina-item .casillero{width:54px;height:54px;margin:0 auto 2px}
.vitrina-item:not(.falta){border-color:transparent;background:transparent}
/* Tu locker (14/11): la puerta de chapa verde con rejillas, la plaquita con tu nombre y los stickers; adentro, el personaje
   en el espejo con sus zonas, lo puesto, los lugares contados de lo guardado y la ficha pegada abajo. */
.locker-puerta{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:12px 12px 12px 46px;
  background:linear-gradient(180deg,#6F8F7E 0%,#5E7D6D 100%);box-shadow:0 0 0 2px var(--borde),inset 2px 2px 0 0 #8FB09E,inset -2px -2px 0 0 #46604F}
.locker-rejillas{position:absolute;left:10px;top:10px;bottom:10px;display:flex;flex-direction:column;justify-content:space-evenly;width:24px}
.locker-rejillas i{display:block;height:4px;background:#3B5246;box-shadow:inset 0 -1px 0 #8FB09E}
.locker-placa{padding:3px 10px;background:#F4E6C6;color:#3A2418;font:800 14px/1.2 var(--titulo);box-shadow:0 0 0 2px var(--borde),inset 0 -2px 0 rgba(0,0,0,.15)}
.locker-stickers{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.sticker{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;background:#FFF6DA;color:#3A2418;box-shadow:0 0 0 2px var(--borde);transform:rotate(-2deg)}
.sticker:nth-child(2){transform:rotate(2deg)}
.sticker canvas{width:22px;height:22px;image-rendering:pixelated}
.sticker b{font:800 14px/1 var(--titulo)}
.sticker small{font-size:11px;font-weight:700}
.sticker-retrato{padding:2px;transform:rotate(3deg)}
.sticker-retrato canvas{width:30px;height:40px}
.locker-maniqui{display:flex;justify-content:center;align-items:center;gap:14px;margin:4px 0 12px}
.locker-zonas{display:flex;flex-direction:column;gap:10px}
.locker-zona{display:flex;flex-direction:column;align-items:center;gap:2px}
.locker-zona > small{font-size:11px;font-weight:700;color:var(--suave)}
.locker-espejo{display:flex;flex-direction:column;align-items:center;gap:8px}
.locker-celda{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;background:none;cursor:pointer}
.locker-celda .casillero{width:52px;height:52px;margin:0}
.locker-celda .casillero canvas{width:40px;height:40px;image-rendering:pixelated}
.locker-celda[aria-pressed="true"] .casillero{outline:3px solid var(--acento);outline-offset:2px}
.locker-celda.vacia{cursor:default;width:52px;height:52px;margin:2px;background:color-mix(in srgb,var(--superficie-2) 70%,#000 6%);box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
.locker-celda.vacia small{font-size:10px;font-weight:700;color:var(--suave)}
.locker-celda.de-mas .casillero{outline:2px dashed var(--mal);outline-offset:2px}
.locker-fila-puesto{margin:0 0 10px}
.locker-fila-puesto > b,.locker-recuerdos > b{font-family:var(--titulo)}
.locker-fila{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.locker-guardado{margin:14px 0 10px}
.locker-cuenta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.locker-cuenta b{font-family:var(--titulo)}
.locker-cuenta span{font-weight:700;color:var(--suave)}
.locker-cuenta span.lleno{color:var(--mal)}
.locker-barra{height:10px;margin-bottom:10px}
.locker-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));justify-items:center;gap:4px}
.locker-nota,.locker-aviso{font-size:13px;margin:8px 0 0}
.locker-aviso{color:var(--mal);font-weight:700}
.locker-recuerdos{margin:0 0 12px}
.locker-recuerdos > small{color:var(--suave)}
.locker-ficha{position:sticky;bottom:0;z-index:3;display:flex;gap:12px;align-items:flex-start;margin:12px -4px 0;padding:12px 12px 12px 10px;
  background:var(--superficie);box-shadow:0 0 0 2px var(--borde),inset 0 4px 0 0 color-mix(in srgb,var(--rareza) 60%,transparent),0 -6px 12px rgba(0,0,0,.18)}
.locker-ficha .casillero{flex:none;width:68px;height:68px;margin:0}
.locker-ficha .casillero canvas{width:56px;height:56px;image-rendering:pixelated}
.locker-ficha-texto{flex:1;min-width:0}
.locker-ficha-texto h3{margin:4px 0 2px;font-size:16px}
.locker-ficha-origen,.locker-ficha-desc{margin:0 0 4px;font-size:13px}
.locker-ficha-origen{color:var(--suave)}
.locker-ficha-texto small{display:block;font-size:12px;color:var(--suave)}
.locker-ficha-nota{font-style:italic}
.locker-ficha-botones{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.locker-confirmar{display:inline-flex;gap:6px}
.locker-ficha-cerrar{position:absolute;right:6px;top:6px;border:0;background:none;color:var(--suave);font-size:16px;cursor:pointer;padding:4px}
.vitrina-item.tuviste{opacity:.7}
.vitrina-item.tuviste .casillero{filter:saturate(.55)}
.chip-mal{background:var(--mal)!important;color:#fff!important}
.kiosco-reloj .chip-boton{margin-left:8px;vertical-align:baseline}
@media (max-width: 600px){
  .locker-puerta{padding:8px 8px 8px 38px;gap:6px}
  .locker-rejillas{left:8px;width:20px}
  .locker-stickers{gap:5px}
  .sticker{padding:2px 5px;gap:3px}
  .sticker canvas{width:18px;height:18px}
  .sticker b{font-size:13px}
  .sticker small{font-size:10px}
  .sticker-retrato canvas{width:22px;height:30px}
  .locker-maniqui{gap:10px}
}
/* La caja de Néstor (14/11): la nota, la caja que se sacude al abrirla y lo que salió, en su casillero. */
.caja-nestor{display:flex;gap:12px;align-items:center;margin:0 0 14px;padding:12px;background:var(--superficie-2);box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
.caja-nestor > canvas{flex:none;image-rendering:pixelated}
.caja-texto{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.caja-texto b{font-family:var(--titulo)}
.caja-texto p{margin:0;font-size:14px}
.caja-texto small{font-size:12px;color:var(--suave)}
.caja-nota{font-style:italic}
.caja-texto .boton{margin-top:4px}
.caja-revelada{box-shadow:inset 0 0 0 2px var(--rareza,var(--ranura)),inset 0 4px 0 0 var(--bisel-sombra),0 0 14px color-mix(in srgb,var(--rareza,#000) 35%,transparent)}
.caja-premio{position:relative;flex:none;width:84px;display:flex;flex-direction:column;align-items:center}
.caja-premio > canvas{image-rendering:pixelated;opacity:.85}
.caja-premio .sale-de-la-caja{margin-top:-16px}
.caja-premio .casillero{width:64px;height:64px;margin:0}
.caja-premio .casillero canvas{width:56px;height:56px;image-rendering:pixelated}
.caja-nombre{font-size:16px}
.se-sacude{animation:se-sacude .9s steps(2) both}
@keyframes se-sacude{0%,100%{transform:none}15%{transform:translateX(-3px) rotate(-4deg)}30%{transform:translateX(3px) rotate(4deg)}45%{transform:translateX(-3px) rotate(-3deg)}60%{transform:translateX(3px) rotate(3deg)}75%{transform:translateY(-4px)}}
.sale-de-la-caja{animation:sale-de-la-caja .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes sale-de-la-caja{0%{opacity:0;transform:translateY(24px) scale(.5)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.se-sacude,.sale-de-la-caja{animation:none}}
.boton .punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mal);margin-left:6px;vertical-align:middle}
/* Regalar (14/11): elegir a quién, con su personaje chiquito. */
.locker-elegir-quien{display:flex;flex-direction:column;gap:6px;width:100%}
.locker-companero{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;border:0;background:var(--superficie-2);color:var(--tinta);font:600 12px/1.2 var(--texto);cursor:pointer;box-shadow:inset 0 0 0 2px var(--ranura)}
.locker-companero canvas{image-rendering:pixelated}
.locker-companero:hover,.locker-companero:focus-visible{box-shadow:inset 0 0 0 2px var(--acento)}
/* Mica (14/11): el aviso en el kiosco, con su cara, y el texto con botón en Tu espacio. */
.tarjeta-mica{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tarjeta-mica > canvas{flex:none;image-rendering:pixelated}
.tarjeta-mica p{flex:1 1 200px;margin:0}
.fila-texto-boton{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.fila-texto-boton p{flex:1 1 220px;margin:0}
/* Cambiar dentro del piso (6.8): la propuesta con las dos cosas, una frente a la otra, y el locker de un compañero. */
.cambios-locker{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.cambio-tarjeta{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--superficie-2);box-shadow:inset 0 0 0 2px var(--acento),inset 0 4px 0 0 var(--bisel-sombra)}
.cambio-tarjeta.cambio-mio{box-shadow:inset 0 0 0 2px var(--ranura),inset 0 4px 0 0 var(--bisel-sombra)}
.cambio-tarjeta > small{font-size:12px;color:var(--suave)}
.cambio-cabeza{display:flex;gap:8px;align-items:center}
.cambio-cabeza canvas{flex:none;image-rendering:pixelated}
.cambio-cabeza b{font-family:var(--titulo)}
.cambio-cosas{display:flex;align-items:center;justify-content:center;gap:10px}
.cambio-cosa{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1 1 0;min-width:0;text-align:center}
.cambio-cosa small{font-size:11px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.cambio-cosa .casillero{width:60px;height:60px;margin:0}
.cambio-cosa .casillero canvas{width:48px;height:48px;image-rendering:pixelated}
.cambio-cosa b{font-size:13px;line-height:1.2}
.cambio-flecha{flex:none;font-size:22px;font-weight:700;color:var(--acento)}
.cambio-resultado{margin:0 0 12px;padding:8px 10px;font-size:14px;background:var(--superficie-2);box-shadow:inset 0 0 0 2px var(--ranura)}
.cambio-resultado.bien{box-shadow:inset 0 0 0 2px var(--bien,#3a9a5b)}
.locker-de-intro{display:flex;gap:10px;align-items:center;margin:4px 0 10px}
.locker-de-intro canvas{flex:none;image-rendering:pixelated}
.locker-de-intro p{margin:0;font-size:14px}
.locker-elegir-quien .locker-celda .casillero{width:48px;height:48px}
.locker-elegir-quien .locker-celda .casillero canvas{width:36px;height:36px}
.locker-elegir-quien .locker-fila{max-height:min(40vh,260px);overflow:auto;padding:2px}

/* ---------- el mapa de OfiTown (maqueta, ?mapa) ---------- */
.mapa{position:fixed;inset:0;z-index:15;background:#7DB55C}
.mapa-lienzo{position:absolute;left:0;top:0;image-rendering:pixelated;touch-action:none}
.mapa-encabezado{position:absolute;top:max(8px, env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 6px 6px 16px;background:var(--madera);color:#FFE28E;border:3px solid var(--borde);box-shadow:var(--sombra);z-index:1}
.mapa-encabezado h2{font-size:20px;letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.mapa-ficha{position:absolute;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));max-width:440px;margin:0 auto;padding:14px 16px;
  background:var(--superficie);color:var(--tinta);border:3px solid var(--borde);box-shadow:var(--sombra);display:grid;gap:8px}
/* Entrar con Google o con el mail (15/11): el botón de Google en blanco, con su G, como pide su guía de marca. */
.boton.boton-google{display:flex;align-items:center;justify-content:center;gap:10px;background:#FFFFFF;color:#1F1F1F}
.boton.boton-google svg{flex:none}
.ya-juego{display:grid;gap:8px;margin-top:6px}
.ya-juego h3{margin:4px 0 0;font-size:16px}
.form-mail .formulario{margin:0}
.boton-texto{background:none;border:0;padding:4px 0;color:var(--suave);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;justify-self:center}
/* Mientras se arma el mapa (en el celular tarda un momento), un cartel en el medio. */
.mapa-cargando{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 16px;background:var(--superficie);color:var(--tinta);font-weight:700;box-shadow:var(--contorno-fino)}
/* El botón del mapa en la barra, con su ícono dibujado. */
#botonMapa canvas{width:24px;height:24px;image-rendering:pixelated}
.mapa-ficha h3{font-size:18px}
.mapa-ficha p{margin:0}