/* ============================================================ Estilos comunes de retroconsole.win — estética arcade/pixel: fuente bitmap para títulos y botones, bordes duros (sin radios), sombras escalonadas y la paleta de fósforos del propio shader. La única pieza con curvas es el monitor: es "hardware". ============================================================ */ @font-face{ font-family:"Press Start 2P"; src:url("fonts/press-start-2p-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } :root{ --bg:#0b0d11; --bg2:#10131a; --bezel:#1c1e23; --bezel-hi:#2a2d34; --ink:#d7dae0; --dim:#828a94; --line:#2e3138; /* fósforos */ --amber:#ffb454; /* marca */ --green:#54ff9f; /* puntos, éxito */ --cyan:#4de3ff; /* enlaces, info */ --magenta:#ff5ca8; /* error, peligro */ /* sombra escalonada de tarjetas: sin desenfoque (borde duro retro) pero SEMITRANSPARENTE, para que no sea un bloque negro macizo */ --shadow: rgba(0,0,0,.5); --mono: ui-monospace,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace; --px:"Press Start 2P", var(--mono); } *{box-sizing:border-box} /* [hidden] SIEMPRE gana, aunque la clase ponga display propio */ [hidden]{display:none !important} body{ margin:0;color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.5; /* una consola no deja seleccionar texto: rompe la magia */ user-select:none;-webkit-user-select:none; /* scanlines sutiles en toda la página: el fondo también es un tubo */ background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), var(--bg); } ::selection{background:var(--amber);color:#000} :focus-visible{outline:2px solid var(--amber);outline-offset:2px} .wrap{max-width:1500px;margin:0 auto;padding:28px 20px 60px} /* ——— logo: icono grande a la izquierda y el nombre en DOS líneas ——— Línea 1 `RETRO` GRANDE en ámbar (la palabra-marca que destaca), línea 2 `console.win` PEQUEÑA en gris debajo, como un dominio/subtítulo. Es la 3ª forma del wordmark: POLYSTATION/.ONLINE → RETROCONSOLE/.WIN (igualar anchos / alinear a la derecha) → y esta, RETRO / console.win (user decision 2026-07-21). El contraste de TAMAÑO hace la jerarquía, no hace falta igualar anchos: a ~22 px RETRO (5 glifos) y a ~10 px console.win (11 glifos) acaban de ancho parecido de forma natural. La línea 2 va en minúsculas a propósito (la fuente Press Start 2P sí las tiene) para leerse como dominio; el punto de `.win` sigue siendo el piloto verde. */ header{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:10px} h1{display:flex;align-items:center;gap:12px; font-family:var(--px);font-size:15px;letter-spacing:.04em;margin:0;font-weight:400} h1 img{height:36px;margin:0;image-rendering:pixelated} .logo-txt{display:flex;flex-direction:column;gap:4px;line-height:1;text-align:left} .logo-txt .l1{font-size:22px;color:var(--amber);letter-spacing:.02em} .logo-txt .l2{font-size:10px;color:var(--dim);letter-spacing:.02em} /* El PUNTO de "console.win" hace de piloto de conexión: verde con brillo de fósforo, latiendo como el LED de la barbilla (mismo idioma visual: verde = vivo). El resto de la línea 2 se queda gris y quieto. NO se apaga del todo: a opacidad 0 se leería "consolewin" sin punto media vida y parecería que falta un carácter. Atenuado se sigue leyendo como puntuación y aun así se ve latir. El ciclo es asimétrico a propósito —encendido mucho, apagado poco—, que es como se comporta un piloto de red, no un aviso. */ .logo-txt .dot{color:var(--green);text-shadow:0 0 8px var(--green); animation:dot-live 1.8s steps(1) infinite} @keyframes dot-live{0%,82%{opacity:1} 82%,100%{opacity:.22}} /* decorativo puro: si el usuario pide menos movimiento, se queda fijo. (.blink NO lleva esta excepción y es deliberado: el LED de la barbilla parpadea para DECIR algo —conectando, esperando— y pararlo borraría esa información.) */ @media (prefers-reduced-motion: reduce){ .logo-txt .dot{animation:none} } h1.logo-link{cursor:pointer} h1.logo-link:hover{color:var(--amber)} h1 .amber{color:var(--amber)} h1 a{color:inherit;text-decoration:none} h1 a:hover{color:var(--amber)} .blink{animation:blink 1.1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .sub{color:var(--dim);margin:0 0 24px;font-size:12px;letter-spacing:.08em} .layout{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap} /* ——— botones arcade (globales; .account y .touch se redefinen abajo) ——— */ button{ font-family:var(--px);font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--ink);background:var(--bg2);border:2px solid var(--line);border-radius:0; padding:10px 14px 9px;cursor:pointer;box-shadow:0 4px 0 #000; transition:border-color .1s } button:hover{border-color:var(--amber);color:var(--amber)} button:active{transform:translateY(4px);box-shadow:none} button.primary{background:var(--amber);border-color:var(--amber);color:#000} button.primary:hover{background:#ffc87e;color:#000} button:disabled{opacity:.35;cursor:default;transform:none;box-shadow:0 4px 0 #000} /* ——— campos de texto: "pon tus iniciales" ——— */ input[type=text],input[type=password],input[type=email]{ background:#000;border:2px solid var(--line);border-radius:0;color:var(--ink); font-family:var(--px);font-size:11px;letter-spacing:.1em;padding:11px 12px; text-transform:uppercase } input[type=text]:focus,input[type=password]:focus,input[type=email]:focus{ outline:none;border-color:var(--amber) } /* en los campos sí: escribir tu nombre exige poder editar/seleccionar */ input,textarea{user-select:text;-webkit-user-select:text} input::placeholder{color:#4a4f57} /* ——— el monitor (hardware: conserva sus curvas) ——— */ .crt{ background:linear-gradient(160deg,var(--bezel-hi),var(--bezel) 40%, #14161a); border:1px solid #000;border-radius:18px;padding:22px 22px 14px; box-shadow:0 20px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); flex:1 1 700px;min-width:320px; } .screen{ background:#000;border-radius:8px;overflow:hidden; box-shadow:inset 0 0 40px rgba(0,0,0,.9), inset 0 0 4px #000; display:flex;justify-content:center;align-items:center; } canvas{display:block;image-rendering:pixelated} /* ——— el TELEVISOR (páginas de juego online) ——— shared/tv.webp trae el hueco de la pantalla TRANSPARENTE, así que el juego se dibuja DETRÁS y asoma por él; el marco va encima y tapa los bordes. Medidas del hueco sobre el PNG de 1050×909 (medidas píxel a píxel, no a ojo): x 114→719, y 112→717 ⇒ los % de abajo. El hueco es 606×606 —CUADRADO, como el juego—, así que el lienzo lo llena entero: ya no queda tubo asomando arriba y abajo. Antes el arte medía 1050×946 con el hueco en 606×643; el dibujo es el mismo, solo se recortaron 37 filas de DENTRO de la pantalla, y por eso todo lo que hay por debajo del hueco subió esos 37 px (ver .tv-plate). */ .tvwrap{display:flex;flex-direction:column;align-items:stretch} /* container-type: las medidas de dentro se expresan en cqw (% del ancho de la tele), así el texto serigrafiado escala con ella */ .tv{position:relative;width:100%;aspect-ratio:1050/909;container-type:inline-size} .tv-screen{ position:absolute;left:10.86%;right:31.43%;top:12.32%;bottom:21.01%; background:#04060a;overflow:hidden; display:flex;align-items:center;justify-content:center; } .tv-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} /* la info del juego va SERIGRAFIADA sobre el MARCO OSCURO del tubo, no en una barra aparte debajo. Perfil vertical medido sobre el PNG bajo el hueco: brillo del bisel 80.6%-80.8%, marco oscuro 80.9%-84.6%, brillo inferior 84.7%-84.9%, sombra 85.8%-88.2%, carcasa crema 89.1%-93.1% (demasiado fina). El marco llega hasta donde arranca el panel de mandos (68.6% del ancho), que no se movió. Los % verticales son los de antes MENOS 37 px del recorte, para que la placa caiga sobre los mismos píxeles del dibujo que ya ocupaba. */ /* El texto NO va centrado en la banda oscura, y es a propósito. Centrado quedaba clavado en su punto medio (medido: 752.0 contra 752.0) y aun así se veía mal, porque hay un REFLEJO cruzando el bisel en y 755-756 —luminancia 94 y 123 frente a los ~40 del resto— y la parte baja de las letras caía justo encima. La franja realmente limpia es 736-754, así que el texto se sube hasta caber entera dentro de ella. Si algún día se reexporta el arte, vuelve a mirar el perfil de luminancia fila a fila: este 80.24% no es un número redondo, es donde acaba ese brillo. */ .tv-plate{ position:absolute;left:11.5%;right:33%;top:80.24%;height:3.7%; display:flex;flex-direction:column;justify-content:center;gap:.2cqw; font-size:.92cqw;letter-spacing:.09em;color:#a49d8f; white-space:nowrap;overflow:hidden; } /* ——— el ZÓCALO: nombre del jugador y récord ——— Estas dos líneas vivían en la placa del bisel, y la segunda caía justo sobre el BRILLO del borde inferior —una franja reflectante clara— así que el texto peleaba con el reflejo y se leía mal. Aquí abajo hay una banda de 58 px oscura y opaca (y 849-906 del arte), con luminancia media de 29 sobre 255: texto claro encima se lee sin pelear con nada. Y es MÁS ANCHA que la placa, porque el zócalo pasa por debajo del panel de mandos y no tiene que esquivarlo — de ahí que el nombre y el récord quepan holgados en una sola línea. Medidas del zócalo sobre el arte: x 65-986, y 849-906. */ .tv-base{ position:absolute;left:9%;right:9%;top:93.9%;height:5%; display:flex;align-items:center;justify-content:space-between;gap:1.2cqw; font-size:.92cqw;letter-spacing:.09em;color:#a49d8f; white-space:nowrap;overflow:hidden; } .tv-row{display:flex;align-items:center;justify-content:space-between;gap:1.2cqw} .tv-plate b{color:#e7dcc6} .tv-plate .tv-game{display:flex;align-items:center} .tv-plate .led{width:.7cqw;height:.7cqw;margin-right:.7cqw} /* aviso de dúo: cartel SOBRE la pantalla mientras falta el compañero */ .tv-wait{ position:absolute;left:0;right:0;bottom:6%; display:flex;flex-direction:column;align-items:center;gap:1.2cqw; padding:1.4cqw 1cqw;background:rgba(8,10,14,.82); color:var(--ink);font-size:1.2cqw;letter-spacing:.08em;text-align:center; } .tv-wait button{font-size:1.05cqw;padding:.6cqw 1cqw .55cqw} /* la barbilla del monitor: varias filas de info, nunca más ancha que la pantalla (el ancho del .crt lo dicta el canvas, ver .gamewrap) */ .chin{margin-top:12px;color:var(--dim);font-size:11px;letter-spacing:.12em} .chin b{color:var(--amber)} .chin-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:3px 0;white-space:nowrap} .chin-row.duo{border-top:2px dashed var(--line);margin-top:8px;padding-top:10px} .chin button{font-size:8px;padding:7px 9px 6px;box-shadow:0 3px 0 #000;letter-spacing:.04em} .chin button:active{transform:translateY(3px);box-shadow:none} /* LED de encendido con significado real: verde = en partida, ámbar parpadeando = conectando/esperando compañero, magenta = caído */ .led{display:inline-block;width:7px;height:7px;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:8px;vertical-align:middle} .led.wait{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:blink 1.1s steps(1) infinite} .led.err{background:var(--magenta);box-shadow:0 0 8px var(--magenta)} /* ——— tarjetas (paneles de UI) ——— */ .card{ background:var(--bg2);border:2px solid var(--line);border-radius:0; box-shadow:6px 6px 0 var(--shadow);padding:18px 20px;margin-bottom:20px } .card h2{font-family:var(--px);font-size:9px;letter-spacing:.12em;color:var(--dim); font-weight:400;margin:0 0 14px;text-transform:uppercase} /* ——— panel de controles ——— */ .panel{flex:0 1 300px;min-width:260px} .panel h2{font-family:var(--px);font-size:9px;letter-spacing:.12em;color:var(--dim);font-weight:400;margin:0 0 14px;text-transform:uppercase} .ctl{margin-bottom:14px} .ctl label{display:flex;justify-content:space-between;color:var(--ink);margin-bottom:4px;font-size:13px} .ctl label output{color:var(--amber)} input[type=range]{width:100%;appearance:none;height:4px;background:var(--line);border-radius:0;outline:none} input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:0;background:var(--amber);border:2px solid #000;cursor:pointer} input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:0;background:var(--amber);border:2px solid #000;cursor:pointer} .row{display:flex;gap:10px;align-items:center;margin:18px 0 0} .chk{display:flex;gap:8px;align-items:center;color:var(--dim);cursor:pointer;font-size:13px} /* selección con teclado (navegación tipo menú de recreativa) */ input[type=checkbox],input[type=radio]{accent-color:var(--amber)} .chk:focus-within{color:var(--amber)} button:focus-visible{border-color:var(--amber);color:var(--amber);outline:none} /* Los botones de fondo ÁMBAR necesitan su propia regla de foco: la de arriba pinta el texto de ámbar, y sobre fondo ámbar eso es texto invisible. Se marca el foco con un contorno claro en vez de con el color de la letra. .auth-go entró aquí al enfocarlo el aviso de mando: el botón salía como un rectángulo naranja vacío. */ button.primary:focus-visible, .auth-go:focus-visible{color:#000;outline:2px solid var(--ink);outline-offset:2px} .keys{ margin-top:18px;border:2px dashed var(--line);border-radius:0;padding:14px;color:var(--dim); line-height:2;font-size:13px } .keys b{color:var(--amber);font-weight:600} .drop{ margin-top:18px;border:2px dashed var(--line);border-radius:0;padding:14px;color:var(--dim); text-align:center;cursor:pointer;transition:border-color .15s,color .15s } .drop.over,.drop:hover{border-color:var(--amber);color:var(--ink)} .drop input{display:none} /* ——— sesión / cuenta ——— */ .auth-overlay{position:fixed;inset:0;background:rgba(4,5,7,.94);display:flex;align-items:center;justify-content:center;z-index:100} .auth-card{ background:var(--bg2);border:2px solid var(--line);border-radius:0; padding:28px 30px;width:min(360px,92vw);text-align:center; box-shadow:8px 8px 0 var(--shadow) } .auth-card h2{font-family:var(--px);font-size:13px;letter-spacing:.04em;margin:0 0 12px;font-weight:400} .auth-card h2 .amber{color:var(--amber)} .auth-sub{color:var(--dim);font-size:12px;margin:8px 0;line-height:1.7} .auth-card input{width:100%;margin:8px 0 0;text-align:center} .auth-msg{color:var(--magenta);font-size:12px;min-height:16px;margin:10px 0 0} .auth-go{width:100%;margin-top:12px;background:var(--amber);border-color:var(--amber);color:#000} .auth-go:hover{background:#ffc87e;color:#000} .auth-card a{color:var(--dim)} .auth-card a:hover{color:var(--amber)} /* ——— aviso de entrada: "mejor con mando" ——— Hereda .auth-overlay/.auth-card; aquí solo va lo propio. El mando que se enseña es el del logo, no un dibujo nuevo: es el icono de la casa y ya está en caché. Late despacio para señalar que espera algo, sin llegar a parpadear (parpadear aquí sería una alarma, y esto es una sugerencia). */ .pad-art{width:96px;height:auto;margin:6px auto 2px;display:block; image-rendering:pixelated;animation:pad-wait 2.4s ease-in-out infinite} @keyframes pad-wait{0%,100%{opacity:.55;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)}} .pad-ask .auth-sub b{color:var(--amber)} .pad-ask .pad-note{font-size:11px;opacity:.7;margin-bottom:0} @media (prefers-reduced-motion: reduce){ .pad-art{animation:none;opacity:1} } .account{margin-left:auto;display:flex;gap:10px;align-items:baseline;font-size:12px;color:var(--dim)} .account b{color:var(--amber);letter-spacing:.08em} .account button{ font-family:var(--mono);font-size:11px;text-transform:none;letter-spacing:.04em; background:none;border:1px solid var(--line);color:var(--dim); padding:3px 10px;box-shadow:none } .account button:hover{border-color:var(--amber);color:var(--ink)} .account button:active{transform:none} .account .acc-protect{border-color:var(--amber);color:var(--amber)} /* ——— botonera arcade vertical (hub) ——— La opción enfocada se ENCIENDE ENTERA, no se marca con un borde: en un menú de consola la selección es un bloque de color, y con un borde había que buscarla. Ninguna opción nace encendida — al arrancar el mando está en las carátulas, así que ninguna está elegida todavía. Sin :hover ni cursor: en el hub el ratón no pinta nada (ver pointer-events en index.html); mandan las flechas y el gamepad. */ .play{display:flex;flex-direction:column;gap:14px} .pbtn{ display:block;width:100%;text-align:left; font-family:var(--px);font-size:11px;letter-spacing:.04em;text-transform:none; color:var(--ink);background:var(--bg2);border:2px solid var(--line); padding:15px 16px 13px;box-shadow:0 5px 0 #000;outline:none; transition:background .12s, color .12s, border-color .12s } .pbtn small{display:block;font-family:var(--mono);font-size:11px;color:var(--dim); margin-top:6px;font-weight:400;letter-spacing:.02em} /* La marca de "elegida" es la clase .on, que pone el JS, y NO solo :focus: si la ventana todavía no tiene el foco del sistema —justo al cargar la página— el navegador no pinta :focus y el menú aparecía sin ninguna opción encendida aunque una lo estuviera. */ .pbtn.on,.pbtn:focus{background:var(--amber);border-color:var(--amber);color:#000} .pbtn.on small,.pbtn:focus small{color:rgba(0,0,0,.7)} .pbtn:active{transform:translateY(5px);box-shadow:none} /* Un cartucho de PROXIMAMENTE apaga su boton. Sigue pudiendo recibir el foco (si no, la navegacion con flechas se quedaria sin donde posarse al llegar a un hueco), pero se ve claramente muerto: gris, sin el ambar del encendido, y sin la sombra que invita a pulsarlo. */ .pbtn.off,.pbtn.off:focus,.pbtn.off.on{ background:transparent;border-color:#2a3038;color:#555c66; box-shadow:4px 4px 0 #000;cursor:default} .pbtn.off small,.pbtn.off:focus small{color:#454b54} /* ——— chuleta de teclas en una línea ——— */ .hint{color:var(--dim);font-size:11px;letter-spacing:.1em;margin-top:14px;text-align:center} .hint b{color:var(--amber)} /* ——— footer: el espejo del topbar, con los mandos de la pantalla ——— */ footer{ display:flex;justify-content:center;align-items:center;gap:8px; color:var(--dim);font-size:11px;letter-spacing:.1em; padding:16px 0 4px } footer b{color:var(--amber)} /* ——— página de juego: el monitor manda en el layout ——— */ .gamewrap{min-height:100vh;display:flex;flex-direction:column;padding-bottom:14px} .crt-holder{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;margin-top:6px} .gamewrap .crt{flex:none;min-width:0;width:min-content} /* ——— ajustes del tubo: ventana flotante interna (Ctrl+Shift+F), arrastrable por su título para no estorbar el juego ——— */ .tube-float{ position:fixed;top:80px;right:24px;z-index:60;width:280px; max-height:calc(100vh - 110px);overflow:auto; background:var(--bg2);border:2px solid var(--line);box-shadow:8px 8px 0 var(--shadow); padding:14px 16px } .tube-float h2{cursor:move;user-select:none} /* ——— controles táctiles (botonera arcade) ——— */ /* Espectando no hay nada que pulsar: una cruceta en pantalla que no hace nada es peor que no tener ninguna. La clase la pone la página al entrar a mirar, y solo entonces — en el MENÚ el pad sí hace falta. */ body.mirando .touch{ display:none } .touch{ position:fixed;left:0;right:0;bottom:0;z-index:50; display:flex;justify-content:space-between;align-items:flex-end; padding:0 18px 18px;pointer-events:none } .touch button{ pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none; background:rgba(28,30,35,.6);border:2px solid rgba(255,180,84,.4);border-radius:0; color:var(--amber);font-size:20px;box-shadow:none;padding:0; width:56px;height:56px;display:flex;align-items:center;justify-content:center } .touch button.on{background:rgba(255,180,84,.3)} .touch button:active{transform:none} .touch-dpad{ display:grid;gap:6px; grid-template-areas:". u ." "l . r" ". d ."; } .touch-fire{width:76px !important;height:76px !important;font-size:26px !important} /* ——— código (demo) ——— */ details{margin-top:34px;border:2px solid var(--line);border-radius:0;background:var(--bg2);box-shadow:6px 6px 0 var(--shadow)} summary{cursor:pointer;padding:14px 18px;letter-spacing:.08em;color:var(--amber)} details pre{margin:0;padding:0 18px 18px;overflow:auto;font-size:12.5px;line-height:1.55;color:#c9ced6} details .note{padding:0 18px 8px;color:var(--dim)} code{color:var(--amber)} /* ============================================================ MÓVIL (≤720px de ancho O ≤520px de alto) El corte va por TAMAÑO y no por "(pointer: coarse)" a propósito: lo que rompe la maqueta es el espacio, no el dedo. Una ventana estrecha en el escritorio sufre lo mismo y merece el mismo arreglo. Y va por ancho O ALTO porque un teléfono TUMBADO mide 844 px de ancho: con solo el ancho, en horizontal se seguía dibujando el televisor y el juego se quedaba en 221 px. Un viewport bajo tampoco tiene sitio para el marco, venga de un móvil o de una ventana aplastada. ============================================================ */ @media (max-width: 720px), (max-height: 520px){ .wrap{padding:14px 12px 34px} h1{font-size:12px;gap:9px} h1 img{height:26px} .logo-txt{gap:4px} footer{font-size:10px;letter-spacing:.06em;padding:12px 0 2px} /* ——— páginas de juego: FUERA EL TELEVISOR ——— El hueco del televisor es solo el 57.7% de su ancho, así que en un teléfono de 390 px el juego se quedaba en 186 px: la mitad de la pantalla gastada en marco. Sin marco, el lienzo se lleva el ancho entero. La foto del televisor ni siquiera se descarga en balde: es la misma imagen cacheada del hub, pero aquí no se pinta. */ .tv-frame{display:none} .tv{aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;gap:0} /* La pantalla se ajusta AL LIENZO y no al reves. Con width:100% mas aspect-ratio:1 la caja crecia hasta el ancho disponible, empujaba al contenedor y la cuenta del tamano se realimentaba: en horizontal salian 420 px de juego dentro de una pantalla de 390 y se salia por abajo. */ .tv-screen{ position:relative;inset:auto;width:auto;aspect-ratio:auto;align-self:center; border:2px solid var(--line);background:#04060a; } .tv{align-items:stretch} /* la placa y el zócalo dejan de ir clavados sobre el arte y pasan a ser dos barras normales: arriba la línea viva, abajo quién juega */ .tv-plate,.tv-base{ position:relative;inset:auto;left:auto;right:auto;top:auto; width:100%;height:auto;padding:7px 2px;gap:0; font-size:10px;letter-spacing:.07em; } .tv-plate{order:-1;flex-direction:row} .tv-plate .tv-row{width:100%} .tv-plate .led{width:7px;height:7px;margin-right:7px} /* el cartel de espera del dúo usaba cqw, que sin container-type no vale */ .tv-wait{font-size:12px;padding:12px 10px;gap:10px;bottom:8%} .tv-wait button{font-size:11px;padding:9px 12px 8px} /* centrado en el hueco libre: pegado arriba dejaba un vacio enorme entre el zocalo y la cruceta */ .crt-holder{margin-top:2px;align-items:center} /* con mandos táctiles el pie sobra: la propia cruceta enseña los controles, y esos 200 px de hueco valen más para el juego */ @media (pointer: coarse){ .gamewrap footer{display:none} } /* (lo del hub vive en index.html: su