@font-face{font-family:'Pixelify Sans';src:url(fonts/pixelify-sans-latin.woff2) format('woff2');font-weight:400 700;font-display:swap}
/* Ormiga — Web en proceso. Tokens de Ormiga Partner (Ormiga-web/src/styles/tokens.css).
   Dos tintas: azul tinta sobre papel. Sin mayúsculas sostenidas, sin sombras, peso máximo 500. */
:root{
  /* primitivas usadas */
  --blue-50:#f0f1ff;--blue-200:#ccd0ff;--blue-300:#a4a8ff;--blue-400:#7070ff;--blue-700:#2300ff;--blue-900:#1800ac;--blue-950:#0c007a;
  --neutral-0:#ffffff;--neutral-50:#fafafa;
  /* semánticos (superficie crema: todo el texto en azul) */
  --color-bg:var(--neutral-50);--color-surface:var(--neutral-0);
  --color-text:var(--blue-900);--color-text-muted:var(--blue-700);--color-text-subtle:var(--blue-400);
  --color-border:var(--blue-200);--color-border-strong:var(--blue-300);
  --color-brand:var(--blue-900);--color-brand-hover:var(--blue-950);--color-on-brand:var(--neutral-0);
  --color-brand-flood:var(--blue-900);--color-focus-ring:var(--blue-400);
  /* tipografía */
  --font-sans:'Pixelify Sans',ui-monospace,monospace;
  --font-serif:'Pixelify Sans',ui-monospace,monospace;
  --fs-h2:clamp(2rem,1.1236rem + 3.5955vw,4rem);
  --fs-h4:clamp(1.4125rem,1.1551rem + 1.0562vw,2rem);
  --fs-body:1rem;--fs-caption:.75rem;
  /* layout y movimiento */
  --space-gutter:clamp(1rem,.4429rem + 2.2857vw,2.5rem);
  --space-bloque:clamp(1.25rem,2vw,2rem);
  --trazo:1.25px;--rule:2px;
  --duration-fast:.25s;--duration-base:.35s;--ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:100%;font-synthesis:none;-webkit-font-smoothing:antialiased}
body{margin:0;font-size:var(--fs-body);line-height:1.2;letter-spacing:0;font-variant-ligatures:none;font-feature-settings:'liga' 0,'clig' 0;overflow:hidden;height:100svh}
.surface-brand{--color-bg:var(--color-brand-flood);--color-surface:var(--color-brand-flood);--color-text:var(--neutral-0);--color-text-muted:rgb(255 255 255 / .72);--color-text-subtle:rgb(255 255 255 / .52);
  --color-border:rgb(255 255 255 / .22);--color-border-strong:rgb(255 255 255 / .42);--color-brand:var(--neutral-0);--color-brand-hover:#e4e6ff;--color-on-brand:var(--blue-900);
  --color-focus-ring:var(--neutral-0);background:var(--color-bg);color:var(--color-text)}
button{font:inherit;letter-spacing:inherit;cursor:pointer;border:0;background:none;color:inherit;min-height:44px;padding:0;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:var(--rule) solid var(--color-focus-ring);outline-offset:3px}
canvas:focus,canvas:focus-visible{outline:none}
.link{text-decoration:underline;text-decoration-thickness:var(--trazo);text-underline-offset:.25em;transition:color var(--duration-fast) var(--ease-out)}
@media(hover:hover){.link:hover:not(:disabled){color:var(--color-text-muted)}}
.link:focus-visible{color:var(--color-text-muted)}
kbd{font:inherit;font-size:var(--fs-caption);letter-spacing:-.02em;border:var(--trazo) solid var(--color-border-strong);padding:.15em .5em;margin-right:.3em}
.wrap{width:100%;max-width:1600px;margin:0 auto;padding:0 var(--space-gutter)}
.sr{position:absolute;left:-9999px}
.hidden{display:none!important}

/* sonido, en la esquina */
.sound{position:fixed;top:.5rem;right:var(--space-gutter);z-index:10;font-size:var(--fs-caption);display:flex;gap:1.25rem}

/* una sola pantalla: título arriba, juego abajo */
.stage{height:100svh;display:flex;flex-direction:column}
.title{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.8125rem,1.5801rem + 5.0562vw,5.625rem);line-height:1;letter-spacing:-.01em;margin:0;
  padding:clamp(2.5rem,7svh,4.5rem) 0 clamp(.75rem,2svh,1.5rem);
  text-shadow:.06em .06em 0 var(--blue-200)}        /* sombra escalonada de cartel retro */
.game{position:relative;width:100%;flex:1;min-height:360px}
canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 70%,transparent)}
.hud{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;align-items:baseline;pointer-events:none}
.hud button{pointer-events:auto}
.brandline{font-size:var(--fs-caption);color:var(--color-text-subtle)}
.hi{font-size:var(--fs-h4);color:var(--color-text-subtle)}
.hi b{font-weight:400;margin-left:.3em;font-variant-numeric:tabular-nums}
.scores{display:flex;align-items:baseline;gap:1.5rem}
.points{font-weight:400;font-size:var(--fs-h4);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#pause{font-size:var(--fs-caption);min-height:32px}
#pause:disabled{visibility:hidden}   /* en el inicio y en las pantallas finales no hay nada que pausar */

/* tarjetas: papel al empezar, en pausa y en el aviso de controles; azul liso al terminar */
.overlay{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:3;width:min(380px,calc(100% - 2*var(--space-gutter)));
  padding:1.5rem 1.5rem 1.25rem;background:var(--color-surface);border:var(--trazo) solid var(--color-border)}
.overlay.surface-brand{border-color:var(--color-brand-flood)}
.howto{width:min(440px,calc(100% - 2*var(--space-gutter)))}
.overline{font-size:var(--fs-caption);color:var(--color-text-subtle)}
.overlay.record .overline{color:var(--color-text);animation:blink .8s steps(2,end) 4}
h2{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-h4);line-height:1.1;letter-spacing:-.01em;margin:.35rem 0 1.25rem}
.stats{display:grid;grid-template-columns:repeat(2,1fr);margin:0 0 1.5rem;border-top:var(--trazo) solid var(--color-border)}
.stats[hidden]{display:none}
.stats div{padding:.75rem 0 0}
.stats dt{font-size:var(--fs-caption);color:var(--color-text-subtle)}
.stats dd{margin:.3rem 0 0;font-size:1.5rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.keys{list-style:none;margin:0 0 1rem;padding:0;border-top:var(--trazo) solid var(--color-border)}
.keys li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:var(--trazo) solid var(--color-border)}
.keys li span{white-space:nowrap;color:var(--color-text-muted)}
.only-touch,.touch .only-keys{display:none}
.touch .only-touch{display:block}
.legend{margin:0 0 1.25rem;font-size:var(--fs-caption);color:var(--color-text-muted)}
.legend b{font-weight:400;color:var(--color-text)}
.start{width:100%;height:52px;background:var(--color-brand);color:var(--color-on-brand);font-size:var(--fs-body);transition:background-color var(--duration-fast) var(--ease-out)}
@media(hover:hover){.start:hover{background:var(--color-brand-hover)}}
.start:focus-visible{background:var(--color-brand-hover)}
.hint{margin:.9rem 0 0;font-size:var(--fs-caption);color:var(--color-text-muted)}

@keyframes blink{50%{opacity:0}}
/* botón de lanzar (sólo táctil, durante la partida) */
.throw{display:none;position:absolute;right:var(--space-gutter);bottom:clamp(1rem,4svh,2rem);z-index:4;width:76px;height:76px;border-radius:50%;
  background:var(--color-brand);color:var(--color-on-brand);font-size:var(--fs-caption);touch-action:none;user-select:none;-webkit-user-select:none}
.touch .game.playing .throw{display:block}
.throw:active{transform:scale(.94)}
html.night .throw{background:var(--neutral-0);color:var(--blue-900)}

/* ---- noche: el fondo se invierte cada 700 puntos, como en el Dino ---- */
html,body{transition:background-color 1s linear,color 1s linear}
html.night{--color-bg:var(--blue-950);--color-text:var(--neutral-0);--color-text-muted:rgb(255 255 255 / .75);--color-text-subtle:rgb(255 255 255 / .55);
  --color-border:rgb(255 255 255 / .25);--color-border-strong:rgb(255 255 255 / .45);--color-focus-ring:var(--neutral-0)}
html.night body{background:var(--color-bg)}
html.night .title{text-shadow:.06em .06em 0 var(--blue-700)}
/* las tarjetas de papel conservan su tinta azul también de noche */
.overlay:not(.surface-brand){--color-text:var(--blue-900);--color-text-muted:var(--blue-700);--color-text-subtle:var(--blue-400);
  --color-border:var(--blue-200);--color-border-strong:var(--blue-300);--color-focus-ring:var(--blue-400);color:var(--color-text)}

/* ---- look retro ---- */
/* borde de pixel art: esquinas escalonadas, como las ventanas de los juegos de 8 bits */
.overlay{border:0;--px:4px;box-shadow:0 calc(-1*var(--px)) 0 0 var(--color-brand-flood),0 var(--px) 0 0 var(--color-brand-flood),
  calc(-1*var(--px)) 0 0 0 var(--color-brand-flood),var(--px) 0 0 0 var(--color-brand-flood)}
.overlay.surface-brand{box-shadow:0 calc(-1*var(--px)) 0 0 var(--blue-900),0 var(--px) 0 0 var(--blue-900),calc(-1*var(--px)) 0 0 0 var(--blue-900),var(--px) 0 0 0 var(--blue-900)}
.start{--px:4px;box-shadow:0 calc(-1*var(--px)) 0 0 var(--color-brand),0 var(--px) 0 0 var(--color-brand),calc(-1*var(--px)) 0 0 0 var(--color-brand),var(--px) 0 0 0 var(--color-brand);
  margin:var(--px) 0;width:calc(100% - 2*var(--px));margin-left:var(--px)}
.start:active{transform:translateY(2px)}
.blink{animation:blink 1.1s steps(1,end) infinite}
/* líneas de escaneo muy suaves sobre el juego */
.game::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgb(24 0 172 / .035) 2px 3px)}

@keyframes flash{0%,40%,80%{opacity:0}20%,60%,100%{opacity:1}}
@media(max-width:760px){
  .title{padding-top:clamp(3.5rem,14svh,6rem)}
  .game{height:min(64svh,520px)}
  .overlay{top:36px;padding:1.25rem 1.25rem 1rem}
  .keys li{grid-template-columns:6rem 1fr}
  .brandline{display:none}
  .hud{justify-content:flex-end}
  .hi{font-size:1.1rem}
  .points{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}