/* Fans Of · Base común a todos los juegos: los mismos colores, letras y contornos que css/estilos.css del original,
   el marco de la pantalla y la capa de interfaz de 540 x 960. Cada juego añade encima su propio CSS. */
:root {
  color-scheme: dark;
  --bg: #150b21;
  --bg-2: #2b1446;
  --tray: #26143c;
  --tray-hi: #3e2363;
  --ink: #fff6ea;
  --ink-dim: #cdb9ea;
  --player: #ff7a1a;
  --player-lite: #ffb347;
  --enemy: #2e8bff;
  --gold: #ffcb3d;
  --danger: #ff4b5c;
  --outline: #20102c;
  --panel: rgba(38, 20, 60, 0.94);
  --modal: rgba(12, 6, 20, 0.82);
  /* los mismos nombres que usa css/estilos.css del original: sin ellos, las reglas copiadas en menus.css se quedan sin color */
  --chaos: #d43cff; --chaos-lite: #f3a6ff; --chaos-deep: #7b22ff; --enemy-deep: #173d8f; --scrim: rgba(16, 8, 26, 0.9); --panel-2: rgba(20, 10, 34, 0.8); --off: #3a2b52;
  --font-display: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --font-ui: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #150b21; } }
:root[data-theme="dark"] { --bg: #150b21; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: radial-gradient(120% 80% at 50% 0%, var(--bg-2) 0%, var(--bg) 62%); background-color: var(--bg); color: var(--ink); font-family: var(--font-ui);
  overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#stage { position: relative; overflow: hidden; background: var(--tray); flex: none; }
@media (min-width: 600px) { #stage { border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--tray-hi), 0 0 0 7px var(--outline); } }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: absolute; left: 0; top: 0; width: 540px; height: 960px; transform-origin: 0 0; pointer-events: none; }
#ui button, #ui .screen, #ui .modal, #panel { pointer-events: auto; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ol { text-shadow: 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 2px 0 var(--outline), 0 -2px 0 var(--outline), 1.5px 1.5px 0 var(--outline), -1.5px -1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline); }
.ol-big { font-family: var(--font-display); text-shadow: 4px 0 0 var(--outline), -4px 0 0 var(--outline), 0 4px 0 var(--outline), 0 -4px 0 var(--outline), 3px 3px 0 var(--outline), -3px -3px 0 var(--outline), 3px -3px 0 var(--outline), -3px 3px 0 var(--outline), 0 7px 0 var(--outline); }