:root { --fondo: #0a0d12; --panel: #141a22; --texto: #e9f1e6; --tenue: #7d8a80; --verde: #9DB384; --peligro: #E84E49; --amarillo: #ffd23f; --color: #3a86ff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); font: 18px/1.35 "kuhlman-vf", "Courier New", monospace; overscroll-behavior: none; touch-action: manipulation; }
#app { height: 100%; position: relative; transition: background .15s; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.vista { display: none; height: 100%; padding: 16px; overflow-y: auto; }
#app[data-vista="entrar"] #v-entrar, #app[data-vista="juego"] #v-juego, #app[data-vista="aplastado"] #v-aplastado,
#app[data-vista="res"] #v-res, #app[data-vista="final"] #v-final, #app[data-vista="aviso"] #v-aviso { display: flex; flex-direction: column; gap: 12px; }
canvas { image-rendering: pixelated; }
button { font: inherit; color: var(--texto); background: #232c38; border: 2px solid #34404f; border-radius: 10px; min-height: 52px; padding: 8px 16px; }
button.grande { background: var(--verde); color: #08120a; border-color: #08120a; font-size: 24px; min-height: 64px; margin-top: auto; }
button.sel { background: var(--amarillo); color: #111; }
button.pequeno { font-size: 14px; min-height: 40px; }
input[type=text], input[type=email], input:not([type]) { font: inherit; width: 100%; min-height: 52px; padding: 8px 12px; color: var(--texto); background: var(--panel); border: 2px solid #34404f; border-radius: 10px; -webkit-user-select: text; user-select: text; }
.idiomas { display: flex; gap: 6px; } .idiomas button { flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: 16px; }
.avatar-vista { display: flex; justify-content: center; padding: 8px; background: var(--panel); border-radius: 12px; }
#av-previa { width: 128px; height: 128px; }
.fila-sel { display: flex; align-items: center; justify-content: space-between; } .fila-sel div { display: flex; gap: 8px; } .fila-sel button { min-width: 64px; }
/* Joc: una zona gran per moure's i un botó d'acció gran, separats (canvi aprovat per l'Aleix el 21/10/2026) */
#v-juego { padding: 12px; gap: 10px; position: relative; }
#cabecera { display: flex; align-items: center; gap: 12px; min-height: 72px; }
#av-grande { width: 72px; height: 72px; flex: none; background: rgba(0,0,0,.55); border-radius: 12px; padding: 6px; } /* fons fosc: l'avatar no es perd quan el fons és del seu color */
#estado-txt { flex: 1; font-size: 20px; color: #fff; text-shadow: 0 0 6px #000, 0 0 3px #000; } #hud-txt { color: #fff; text-shadow: 0 0 6px #000; } #hud-txt { font-size: 28px; font-variant-numeric: tabular-nums; }
#zona-mover { flex: 1 1 auto; position: relative; border: 3px dashed rgba(255,255,255,.35); border-radius: 18px; background: rgba(0,0,0,.18); touch-action: none; display: flex; align-items: center; justify-content: center; }
#zona-txt { white-space: pre-line; color: #fff; text-shadow: 0 0 6px #000, 0 0 3px #000; font-size: 20px; text-align: center; pointer-events: none; padding: 16px; }
#cursor { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.25); pointer-events: none; }
#boton-accion { flex: 0 0 26%; min-height: 120px; font-size: 56px; background: rgba(0,0,0,.35); border: 4px solid #fff; border-radius: 22px; touch-action: none; }
#boton-accion.pulsado { background: rgba(255,255,255,.6); color: #111; }
#bt-giro { align-self: stretch; } #bt-giro[hidden] { display: none; }
#v-aplastado { align-items: center; justify-content: center; text-align: center; font-size: 30px; padding: 24px; }
#v-res, #v-aviso { align-items: center; justify-content: center; text-align: center; }
#av-res { width: 160px; height: 160px; } #res-titulo { font-size: 32px; } #res-pts { font-size: 40px; color: var(--amarillo); }
#aviso-txt { font-size: 28px; }
#v-final h1 { margin: 0; font-size: 34px; } #v-final h2 { margin: 12px 0 0; font-size: 20px; color: var(--amarillo); }
#estrellas { display: flex; gap: 8px; } #estrellas button { flex: 1; font-size: 28px; padding: 4px; } #estrellas button.on { background: var(--amarillo); color: #111; }
#redes a, #privacidad { color: var(--verde); } .pendiente { opacity: .6; }
label { color: var(--tenue); } label.check { display: flex; gap: 10px; align-items: flex-start; color: var(--texto); font-size: 15px; } label.check input { width: 28px; height: 28px; flex: none; margin: 0; }
#form-mail { display: flex; flex-direction: column; gap: 10px; } #form-mail button.grande { margin-top: 8px; } #privacidad { display: block; }
#mail-msg { min-height: 1.4em; color: var(--amarillo); }
#banner { position: fixed; left: 0; right: 0; top: 0; padding: 6px; text-align: center; background: var(--peligro); color: #fff; font-size: 15px; z-index: 9; }
#depura { position: fixed; left: 4px; bottom: 4px; font: 11px monospace; color: #9fd; background: rgba(0,0,0,.7); padding: 4px; z-index: 9; white-space: pre; }
/* Grip d'un zombi: la vora batega en verd zombi */
#app.agarrado::after { content: ""; position: fixed; inset: 0; border: 10px solid var(--verde); animation: lat .5s infinite alternate; pointer-events: none; }
@keyframes lat { from { opacity: .2 } to { opacity: 1 } }

#bt-sonido { position: fixed; right: 10px; bottom: 10px; z-index: 8; min-height: 32px; padding: 2px 10px; font-size: 13px; opacity: .8; }
#app[data-vista="entrar"] #bt-sonido { display: none; }

#preguntas-ian { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid #34404f; padding-top: 12px; }
#lista-preguntas { display: flex; flex-direction: column; gap: 22px; }
.pregunta label { display: block; color: var(--texto); font-size: 17px; }
.pregunta .porque { margin: 4px 0 8px; color: var(--tenue); font-size: 14px; }
.pregunta textarea { width: 100%; min-height: 96px; font: inherit; font-size: 16px; padding: 8px 12px; color: var(--texto); background: var(--panel); border: 2px solid #34404f; border-radius: 10px; resize: vertical; -webkit-user-select: text; user-select: text; }
.tenue { color: var(--tenue); font-size: 15px; }
#form-preguntas { display: flex; flex-direction: column; gap: 10px; } #p-msg { min-height: 1.4em; color: var(--amarillo); }
#preguntas-ian[hidden] { display: none; }