/* ==========================================================================
   Entrada (idioma + pantalla completa) y secuencia del estudio "Cousins Studios":
   sobre negro, "Cousins" se enciende con el primer golpe, "studios" con el segundo y una luz calida recorre el metal
   ========================================================================== */
#boot { position: fixed; inset: 0; z-index: 100; background: #000; color: var(--paper); display: grid; place-items: center; overflow: hidden; }
#boot.out { animation: boot-out .8s ease forwards; } @keyframes boot-out { to { opacity: 0; visibility: hidden; } }

/* ---- pantalla de entrada: mismo verde que la pantalla de carga, solo logo + "pulsa para entrar" (pantalla completa automatica al pulsar) ---- */
.gate { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(26px, calc(5 * var(--vh)), 46px); padding: 24px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 45%, #173d2c, #0a140f 70%); }
.gate-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(248, 180, 73, .18), transparent 58%); animation: st-fade 1.4s ease both; }
.gate-logo { position: relative; width: clamp(240px, calc(38 * var(--vw)), 460px); animation: st-fade 1.2s ease both; }
.gate-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 34px rgba(248, 180, 73, .25)); }   /* la imagen fija de antes de cargar */
.gate-logo .geo-logo { width: 100%; height: auto; will-change: transform; animation: gate-float 5s ease-in-out infinite; }   /* el logo vivo no lleva filtro: se mueve solo por la GPU */
@keyframes gate-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
.langgrid button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px 8px; border: 1.5px solid rgba(242, 233, 214, .32); font-family: var(--mono); font-weight: 500; font-size: 15.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(242, 233, 214, .78);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: background .18s, color .18s, transform .14s var(--spring); }
.lang-flag { width: 22px; height: auto; flex: none; image-rendering: pixelated; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.langgrid button:hover { background: rgba(242, 233, 214, .12); color: var(--paper); transform: translateY(-2px); }
.langgrid button.on { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.gate-enter { position: relative; font-family: var(--mono); font-size: 15.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(242, 233, 214, .85); padding: 14px 24px; animation: st-fade 1.2s ease .3s both, breathe 2.4s ease-in-out 1s infinite; }
@keyframes breathe { 50% { opacity: .35; } }
/* aviso de fotosensibilidad (v0.52): solo la primera vez, entre el logo y "pulsa para entrar". Placa de fieltro con marco dorado, quieta a proposito
   (sin bombillas que corran ni brillos: es el aviso de los destellos). Crece con la pantalla como los menus (--k); el logo se encoge para dejarle sitio */
.gate.warn { gap: clamp(14px, calc(2.6 * var(--vh)), 30px); }
.gate.warn .gate-logo { width: clamp(200px, calc(24 * var(--vw)), 300px); }
.gate-warn { position: relative; width: min(660px, calc(100 * var(--vw) - 32px)); box-sizing: border-box; padding: 16px 22px 16px; border-radius: 16px; cursor: default; color: var(--paper); zoom: var(--k, 1);
  background: radial-gradient(130% 100% at 50% 0%, #245a41 0%, #173d2c 52%, #0e271c 100%);
  box-shadow: 0 0 0 3px #0a140f, inset 0 0 0 3px #f8b449, inset 0 0 0 5px #7a4e17, inset 0 0 0 7px #0a140f, 0 10px 0 rgba(0, 0, 0, .5), 0 26px 60px rgba(0, 0, 0, .6);
  animation: st-fade .9s ease .2s both; }
.gate-warn.hidden { display: none; }
.gw-top { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-lt); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.gw-ic .ic, .gw-ic img { display: block; width: 28px; height: 28px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.gw-p { margin: 10px 0 12px; font-size: 17px; line-height: 1.32; color: rgba(242, 233, 214, .88); }
.gw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px 9px 14px; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1.5px rgba(248, 180, 73, .4); }
.gw-row label { font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 700; font-size: 21px; }
.gw-row small { display: block; font-size: 15px; line-height: 1.25; color: rgba(242, 233, 214, .62); margin-top: 2px; }
.gw-row .sw { cursor: pointer; }
.row-sw.lock .sw, .gw-row .sw[aria-disabled="true"] { opacity: .55; cursor: default; }
.set-card .set-note + .row-sw { margin-top: 12px; border-top: 1px dashed rgba(242, 233, 214, .1); }   /* Destellos suaves, debajo de la nota de Graficos */   /* Destellos suaves con "reducir movimiento": encendido y quieto */
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- secuencia del estudio (~3,5 s, fondo negro). Las letras de "Cousins" (oro) salen de la oscuridad en penumbra ambar y se encienden
   con el primer golpe grave (0,62 s); "studios" (perla) igual con el segundo (1,26 s) mientras sus filetes se abren hacia fuera; una luz calida
   cruza el metal (1,85 s) y la camara avanza despacio todo el rato. Cada letra es una capa propia (js/logo.js) y solo se animan
   transform/opacity de esas capas y un filtro de color por palabra (dos capas): la tarjeta grafica lo mueve todo, sin repintar ---- */
.studio { position: absolute; inset: 0; overflow: hidden; background: #000; }
.st-bg { position: absolute; inset: 0; opacity: 0; animation: st-bg 3.5s linear both;
  background: radial-gradient(ellipse 46% 34% at 50% 50%, rgba(150, 104, 44, .04), rgba(150, 104, 44, .028) 30%, rgba(150, 104, 44, .012) 58%, rgba(150, 104, 44, .004) 82%, rgba(150, 104, 44, 0)); }
@keyframes st-bg { 0%, 16% { opacity: 0; } 19% { opacity: 1; } 34% { opacity: .75; } 37% { opacity: 1; } 100% { opacity: .85; } }

.st-logo { position: absolute; left: 50%; top: 50%; width: min(calc(52 * var(--vw)), calc(120 * var(--vh)), 960px); transform: translate(-50%, -50%); animation: st-push 3.6s linear both; }
/* la camara avanza despacio y da un pequeno empujon con cada golpe grave (0,62 y 1,26 s) */
@keyframes st-push { 0% { transform: translate(-50%, -50%) scale(.95); }
  17.2% { transform: translate(-50%, -50%) scale(.957); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 20% { transform: translate(-50%, -50%) scale(.966); animation-timing-function: linear; }
  35% { transform: translate(-50%, -50%) scale(.975); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 37.8% { transform: translate(-50%, -50%) scale(.983); animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
  100% { transform: translate(-50%, -50%) scale(1); } }
.cs-anim { position: relative; width: 100%; }
.cs-defs, .cs-glow, .cs-w, .cs-shine { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-defs { visibility: hidden; pointer-events: none; }
/* halo con forma de letra (ambar el oro, gris calido la perla), uno por palabra (lienzo fijo, js/logo.js): estalla con su golpe y se queda en un rastro que no tine las contraformas */
.cs-glow { display: block; opacity: 0; }
.cs-gb { animation: cs-glow-b 3.5s linear both; }
.cs-gs { animation: cs-glow-s 3.5s linear both; }
@keyframes cs-glow-b { 0% { opacity: 0; } 17.6% { opacity: .2; } 17.8% { opacity: 1; } 22% { opacity: .56; } 27% { opacity: .36; } 34% { opacity: .26; } 36.2% { opacity: .34; } 64% { opacity: .2; } 100% { opacity: .15; } }
@keyframes cs-glow-s { 0%, 29% { opacity: 0; } 35.8% { opacity: .2; } 36% { opacity: 1; } 40% { opacity: .56; } 46% { opacity: .36; } 55% { opacity: .26; } 68% { opacity: .2; } 100% { opacity: .15; } }
/* cada letra sube, se acerca y se cierra hacia el centro de su palabra (escalonadas); "studios" algo mas deprisa */
.cs-l { position: absolute; display: block; overflow: visible; opacity: 0; transform-origin: 50% 80%; will-change: transform, opacity;
  animation: cs-rise 1.1s cubic-bezier(.22, .75, .25, 1) both; animation-delay: calc(.1s + var(--i) * 45ms); }
@keyframes cs-rise { 0% { opacity: 0; transform: translate(var(--dx, 0), 12%) scale(.95); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.cs-ws .cs-l { animation-duration: .95s; animation-delay: calc(.86s + var(--i) * 40ms); }
.cs-ws .cs-rule { animation: cs-draw 1.3s cubic-bezier(.16, 1, .3, 1) 1.26s both; }
.cs-rl { transform-origin: 100% 50%; } .cs-rr { transform-origin: 0 50%; }
/* la cola de "Cousins" se traza de izquierda a derecha mientras la palabra se enciende */
.cs-wb .cs-tail { transform-origin: 0 50%; animation: cs-draw 1.2s cubic-bezier(.16, 1, .3, 1) .45s both; }
@keyframes cs-draw { 0% { opacity: 0; transform: scaleX(0); } 20% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* el encendido (un filtro de color por palabra): la palabra llega en penumbra (el oro, oscurecido y
   calentado hacia el ambar; la perla, gris neutro) y en el golpe salta de una vez casi al blanco (steps: sin pasar por otros tonos) y se enfria hasta quedar sin filtro */
.cs-wb { animation: cs-lit-b 2.4s linear backwards; }   /* sin "forwards": al acabar la palabra se queda sin filtro (none), no con uno neutro que seguiria costando una capa */
.cs-ws { animation: cs-lit-s 3s linear backwards; }
@keyframes cs-lit-b { 0% { filter: brightness(.14) sepia(.7) hue-rotate(-8deg) saturate(1.6); }
  25.8% { filter: brightness(.27) sepia(.7) hue-rotate(-8deg) saturate(1.6); animation-timing-function: steps(1, end); }
  25.9% { filter: brightness(1.55) sepia(0) hue-rotate(0deg) saturate(1); animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { filter: none; } }
@keyframes cs-lit-s { 0% { filter: brightness(.14) sepia(0) hue-rotate(0deg) saturate(.5); }
  41.9% { filter: brightness(.27) sepia(0) hue-rotate(0deg) saturate(.5); animation-timing-function: steps(1, end); }
  42% { filter: brightness(1.55) sepia(0) hue-rotate(0deg) saturate(1); animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { filter: none; } }
/* la luz: una franja calida que cruza una vez, recortada con la silueta del logo (mascara fija; solo se desplaza la franja) */
.cs-shine { pointer-events: none; overflow: hidden; -webkit-mask: var(--cs-mask) 0 0 / 100% 100% no-repeat; mask: var(--cs-mask) 0 0 / 100% 100% no-repeat;
  animation: cs-wake 1ms .3s both; }   /* la mascara se pinta a los 0,3 s y no en el primer fotograma, que ya carga con las letras (alli costaba un fotograma) */
@keyframes cs-wake { from { visibility: hidden; } to { visibility: visible; } }
.cs-band { position: absolute; top: 0; bottom: 0; left: 0; width: 36%; transform: translateX(-100%); animation: cs-sweep 1.35s cubic-bezier(.4, 0, .22, 1) 1.85s both;
  background: linear-gradient(102deg, rgba(255, 206, 150, 0), rgba(255, 214, 170, .14) 28%, rgba(255, 228, 196, .5) 43%, rgba(255, 253, 246, 1) 50%, rgba(255, 228, 196, .5) 57%, rgba(255, 214, 170, .14) 72%, rgba(255, 206, 150, 0)); }
@keyframes cs-sweep { from { transform: translateX(-100%); } to { transform: translateX(285%); } }

.st-skip { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: rgba(242, 233, 214, .38); opacity: 0; animation: st-fade 1s ease 1.2s both; z-index: 7; }
.studio.leave { animation: boot-out .6s ease forwards; }

/* selector de idioma y ajustes de pantalla */
/* selector de idioma: tarjetas identicas (bandera arriba, nombre debajo). La columna minima cabe la palabra mas larga
   ("Português") para no partir palabras; como mucho 6 por fila y todas las filas igual de altas. */
.langgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(124px, calc((100% - 40px) / 6)), 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.langgrid button { flex-direction: column; gap: 7px; padding: 12px 6px 10px; font-size: 14px; letter-spacing: .02em; text-transform: none; font-weight: 500; white-space: normal; line-height: 1.15; text-align: center; }
.langgrid .lang-flag { width: 30px; }
@media (max-width: 480px) { .langgrid { grid-template-columns: repeat(2, 1fr); } }
/* Silkscreen no tiene CJK: cada nombre usa su fuente pixel propia (subconjunto de Fusion Pixel), a 18 px para igualar el alto visual de las mayusculas latinas */
.langgrid button[lang="zh"] > span { font-family: "Lang Name ZH", system-ui, sans-serif; font-size: 18px; letter-spacing: .06em; }
.langgrid button[lang="ja"] > span { font-family: "Lang Name JA", system-ui, sans-serif; font-size: 18px; letter-spacing: .06em; }
.langgrid button[lang="ko"] > span { font-family: "Lang Name KO", system-ui, sans-serif; font-size: 18px; letter-spacing: .06em; }
.row-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 12px 10px; margin-bottom: 8px; border: 1.5px solid rgba(242, 233, 214, .3); font-family: var(--mono); font-size: 15.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--paper); transition: background .18s, border-color .18s;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.row-btn:hover { background: rgba(242, 233, 214, .1); border-color: var(--brass); } .row-btn kbd { background: rgba(242, 233, 214, .14); padding: 1px 7px; }
.row-sw { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; } .row-sw label { font-family: var(--serif); font-variation-settings: var(--disp); font-weight: 700; font-size: 18px; }
.langpop { position: fixed; z-index: 60; width: min(320px, calc(calc(100 * var(--vw)) - 24px)); padding: 12px; background: var(--ink); border: 1px solid rgba(242, 233, 214, .28); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); color: var(--paper); animation: pop-up .25s var(--spring) both;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.menu-tools { display: flex; gap: 8px; }
.menu-gear.txt { width: auto; padding: 0 12px; font-family: var(--mono); font-weight: 500; font-size: 15.5px; letter-spacing: .05em; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }   /* una sola vuelta: las infinitas a .01ms parpadeaban; los retos que son animacion se rescatan en challenges.css. Las transiciones a 0 s y no a .01ms: con .01ms TODO cambio de estilo (letra, ancho...) tardaba un fotograma en aplicarse y lo que se mide nada mas escribir (la pista de la Adivinanza, A.squeeze) leia el valor viejo */
@media (max-width: 480px) { .st-logo { width: calc(88 * var(--vw)); } }