@import url('./botones.css');
/* Un mismo lenguaje visual para la casa, sus juegos y BelaKart. */
@font-face{font-family:'Bela Pixel';src:url('./fuentes/bela-pixel.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--letra-bela:'Bela Pixel',monospace;--marco-bela:#e0a05c;--sombra-bela:#100e19}
body{font-family:var(--letra-bela);font-size:20px;line-height:1.4;font-synthesis:none}
button,input,select,textarea{font-family:var(--letra-bela);border-radius:0!important}
button{box-shadow:inset -3px -3px #0003,inset 3px 3px #fff2;font-weight:400}
button:active:not(:disabled){box-shadow:inset 3px 3px #0004}
h1,h2,h3,h4,.hero h1,.hero h1 sup,.hud strong,.hud span,.marca,.etiqueta,.invitacion strong,#codigo,.velocimetro strong,.velocimetro small,#cuenta,.mandos span,.etiquetas-3d span{font-family:var(--letra-bela);font-style:normal;font-weight:400;letter-spacing:0}
.tarjeta,.panel,dialog,#dialogo-general{border-radius:0;border:3px solid var(--marco-bela);box-shadow:0 0 0 3px var(--sombra-bela),6px 6px 0 3px #100e1970}
.tarjeta h1,.tarjeta h2,.panel h1,.panel h2,.general-cabecera h2{color:#e0a05c;text-shadow:2px 2px #100e19}
.tarjeta p,.contenido-dialogo p,#ayuda-pausa,#resultado-consejo,#resultado-humor,.instrucciones p,.hero>p:not(.etiqueta){font-size:20px;line-height:1.4}
.tarjeta button,.panel button,.contenido-dialogo button{font-size:20px}
/* Separación real incluso al apilar botones; deja aire al contorno de foco. */
.acciones-dialogo{display:grid;gap:12px;margin-top:20px}
.acciones-dialogo>button{width:100%;margin:0}
.acciones-resultado,.interruptores,.acciones{gap:12px}
#barra button{font-size:16px}
.general-resumen,.general-meta,.general-tabla-scroll,#lista-marcador li,.fichas article,.invitacion,#clasificacion li,.hud>div,.mandos>div,.mandos>button,.etiquetas-3d span,#minimapa,#aviso,#error,.error-3d,.hero canvas,.hero h1 sup{border-radius:0}
.hero h1{letter-spacing:-2px;font-size:60px}.hero h1 sup{font-size:16px;transform:none}
.cabecera button,.hud button{font-size:16px;backdrop-filter:none}
.hud>div,.mandos>div,.mandos>button{backdrop-filter:none;box-shadow:inset 2px 2px #fff2,inset -2px -2px #0004}
.fichas span,.pie,.separador,.invitacion span,.invitacion button,.entrada label,#participantes small,.contenido-dialogo label{font-size:18px}
.mandos #derrape span,.mandos #pelota span,.mandos #direccion>span:last-child{font-size:16px}
.mandos{height:88px}.mandos .flechas{line-height:1.1}.mandos #pelota span{font-size:14px;line-height:1.15}
.hud{gap:6px}.hud>div{padding:6px}.hud strong{font-size:18px;white-space:nowrap}.hud span{font-size:12px}.hud button{font-size:14px;padding:6px}
.etiquetas-3d span,.etiquetas-3d span.propio{font-size:16px}
@media(max-width:700px){.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 70px}.hud>div{min-width:0}.hud button{width:70px;margin-left:0}}
@media(orientation:landscape) and (max-height:520px){.mandos{height:76px}.mandos #direccion{height:76px}}
@media(max-width:380px){.hero h1{font-size:44px}.tarjeta{padding:20px 16px}}