/*! Helloween — © 2026 Jugomaiz. Todos los derechos reservados. */

/* Fuentes locales (licencia SIL Open Font License, ver fonts/OFL-*.txt) */
@font-face{font-family:"Creepster";src:url("../fonts/creepster-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IM Fell English SC";src:url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

/* Layout: one full-height stage, canvas letterboxed at 16:9, slim control bar below. Single dark look on purpose (a night graveyard). */
:root{
  --night:#0b0614;
  --ink:#e9dcc4;
  --pumpkin:#f08a24;
  --ember:#ffd76a;
  --dusk:#3a2356;
  --muted:#9c8fb3;
  --display:"Creepster","Chiller","Papyrus",fantasy;
  --text:"IM Fell English SC","Palatino Linotype",Georgia,serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
body{
  background:var(--night);color:var(--ink);font-family:var(--text);
  display:flex;flex-direction:column;box-sizing:border-box;
  padding-inline:16px;padding-block:12px;gap:10px;overflow:hidden;
}
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
canvas{display:block;border-radius:6px;box-shadow:0 0 60px rgba(240,138,36,.12);touch-action:none;cursor:pointer;max-width:100%}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;font-size:14px;color:var(--muted)}
.bar kbd{font-family:var(--text);color:var(--ink);border:1px solid var(--dusk);border-radius:4px;padding:1px 6px;background:rgba(58,35,86,.4)}
.bar button{font-family:var(--text);font-size:14px;color:var(--ink);background:var(--dusk);border:1px solid #5b3a80;border-radius:5px;padding:5px 12px;cursor:pointer}
.bar button:hover{background:#4b2d6e}
.bar button:focus-visible{outline:2px solid var(--pumpkin);outline-offset:2px}
:fullscreen body,:fullscreen{background:var(--night)}

/* Pantalla completa: sin márgenes ni barra de controles, el juego ocupa toda la pantalla */
html:fullscreen body{padding:0;gap:0}
html:fullscreen .bar{display:none}
html:fullscreen canvas{border-radius:0;box-shadow:none}

/* Celular: evita selección de texto, menú de "mantener presionado" y el destello azul al tocar */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* En pantallas táctiles no tiene caso mostrar las teclas */
@media (pointer:coarse){ .bar .keys{display:none} }