/* «¡A rodar, Ruedino!» · generado por herramientas/juego.py: no editar a mano */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/fredoka-latin.woff2) format('woff2'); }
/* Juego a pantalla completa, aspecto 16:9; look único (no cambia con el tema) */
  :root {
    --ink: #0B2550; --navy: #0E1626; --blue: #0A55AD; --blue-2: #4D93E6; --yellow: #FFD400;
    --white: #FFFFFF; --panel: rgba(11, 37, 80, 0.86); --font: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
    color-scheme: dark;
  }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--navy); color: var(--white); font-family: var(--font); overflow: hidden; -webkit-user-select: none; user-select: none; }
  .app { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; max-width: 100%; background: #8FD0FF; overflow: hidden; touch-action: none; }
  canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  .hud-btns { position: absolute; top: 2.2%; right: 1.6%; display: flex; gap: 8px; z-index: 3; }
  .hud-btns button { width: clamp(30px, 4.6vw, 44px); height: clamp(30px, 4.6vw, 44px); border-radius: 12px; border: 0; background: rgba(11,37,80,0.72); color: var(--white); display: grid; place-items: center; cursor: pointer; }
  .hud-btns button:focus-visible, .overlay button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
  .hud-btns button.off svg .wave { display: none; }

  .overlay { position: fixed; inset: 0; overflow-y: auto; display: grid; place-items: center; z-index: 5; background: radial-gradient(ellipse at center, rgba(11,37,80,0.35), rgba(11,37,80,0.7)); padding: 16px; }
  #win { background: transparent; place-items: start start; padding: 9% 0 0 2.5%; }
  #win .card { max-width: min(420px, 46%); }
  .card { background: var(--panel); border: 3px solid var(--blue-2); border-radius: 22px; padding: clamp(14px, 3vw, 28px) clamp(18px, 4vw, 40px); text-align: center; max-width: min(640px, 92%); box-shadow: 0 18px 40px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: clamp(8px, 1.6vw, 14px); align-items: center; }
  .card h1, .card h2 { margin: 0; font-weight: 600; line-height: 1.05; text-wrap: balance; }
  .card h1 { font-size: clamp(30px, 6vw, 60px); color: var(--yellow); text-shadow: 0 4px 0 var(--ink); }
  .card h2 { font-size: clamp(24px, 4.4vw, 44px); color: var(--yellow); text-shadow: 0 3px 0 var(--ink); }
  .card p { margin: 0; font-size: clamp(14px, 2vw, 19px); color: #DCE8F7; max-width: 46ch; }
  .card .win-msg { font-size: clamp(18px, 3.2vw, 30px); color: var(--white); font-weight: 600; line-height: 1.2; }
  .card .win-msg em { font-style: normal; color: var(--yellow); }
  .btn { font: inherit; font-weight: 600; font-size: clamp(18px, 2.6vw, 24px); padding: 12px 34px; min-height: 48px; border-radius: 999px; border: 0; background: var(--yellow); color: var(--ink); cursor: pointer; box-shadow: 0 5px 0 #B98A00; }
  .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #B98A00; }
  .btn.ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--blue-2); }
  .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .keys { display: grid; grid-template-columns: max-content max-content; gap: 4px 14px; font-size: clamp(13px, 1.8vw, 16px); color: #DCE8F7; text-align: left; }
  .keys b { color: var(--yellow); font-weight: 600; }
  kbd { font: inherit; font-size: 0.9em; padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); }
  .stats { display: flex; gap: 10px 18px; flex-wrap: wrap; justify-content: center; font-size: clamp(14px, 2vw, 18px); color: #DCE8F7; }
  .stats b { color: var(--yellow); font-weight: 600; font-variant-numeric: tabular-nums; }
  .best { font-size: 14px; color: #A9C1DE; min-height: 1em; }
  .touch-only { display: none; }
  body.is-touch .touch-only { display: block; }
  body.is-touch .desk-only { display: none; }

  /* controles táctiles */
  .touch { position: absolute; inset: auto 0 0 0; height: 0; z-index: 4; display: none; }
  body.is-touch .touch { display: block; }
  .tbtn { position: absolute; bottom: 14px; width: clamp(84px, 13vw, 120px); height: clamp(84px, 13vw, 120px); border-radius: 50%; border: 4px solid rgba(255,255,255,0.9); color: var(--white); font: 600 clamp(15px, 2.2vw, 20px) var(--font); letter-spacing: 0.04em; touch-action: none; -webkit-tap-highlight-color: transparent; opacity: 0.88; }
  .tbtn.on { transform: scale(0.94); opacity: 1; }
  #btn-turbo { left: 14px; background: radial-gradient(circle at 35% 30%, #FFB347, #F07A1A); box-shadow: 0 6px 0 #A64F0C; }
  #btn-jump { right: 14px; background: radial-gradient(circle at 35% 30%, #6FAAF0, #0A55AD); box-shadow: 0 6px 0 #073F86; }
  @media (orientation: portrait) {
    body.is-touch .app { justify-content: flex-start; padding-top: max(8px, env(safe-area-inset-top)); }
    body.is-touch .touch { position: relative; height: 190px; width: 100%; max-width: 520px; }
    body.is-touch .tbtn { bottom: auto; top: 30px; width: 120px; height: 120px; }
    body.is-touch .rotate-hint { display: block; }
  }
  .rotate-hint { display: none; text-align: center; color: #A9C1DE; font-size: 14px; padding: 6px 16px; }
  @media (max-height: 520px) {
    .card { gap: 6px; padding: 10px 20px; border-radius: 16px; }
    .card h1 { font-size: 30px; } .card h2 { font-size: 26px; }
    .card p { font-size: 14px; } .card .win-msg { font-size: 18px; }
    .btn { padding: 8px 26px; min-height: 44px; font-size: 18px; }
    .keys { font-size: 13px; }
  }
  @media (prefers-reduced-motion: reduce) { .btn:active, .tbtn.on { transform: none; } }

/* Añadidos para la web */
/* Móvil (sobre todo Safari del iPhone en horizontal): 100vh cuenta también lo que tapan las barras del navegador y el
   juego se cortaba por abajo; se usa la altura que de verdad se ve (dvh cambia al mostrarse u ocultarse las barras) */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
  .stage { width: min(100vw, calc(100dvh * 16 / 9)); }
}
/* En horizontal, los botones táctiles quedan fuera de la muesca y de la barra de inicio del iPhone */
#btn-turbo { left: max(14px, env(safe-area-inset-left)); }
#btn-jump { right: max(14px, env(safe-area-inset-right)); }
.tbtn { bottom: max(14px, env(safe-area-inset-bottom)); }
.hud-btns button.is-full .ico-full, .hud-btns button:not(.is-full) .ico-exit { display: none; }
/* La pestaña «Cookies» de la esquina taparía el botón TURBO (la configuración sigue en la web) */
#cookie-law-info-again { display: none !important; }

/* Aviso de cookies (mismo aspecto que en la web) */
/* ------------------------------------------------------------ aviso de cookies (CookieYes, modo clásico) */
#cookie-law-info-bar { left: 16px !important; right: auto !important; bottom: 16px !important; top: auto !important; width: calc(100% - 32px) !important; max-width: 460px !important; padding: 18px 20px !important; border-radius: 22px !important; background: var(--e-global-color-rtnavy, #0C1A48) !important; color: #CFDBEE !important; border: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: 0 30px 60px -20px rgba(3, 8, 28, .75) !important; font: 400 14px/1.55 'Ubuntu', sans-serif !important; z-index: 99990 !important; }
#cookie-law-info-bar > span { display: block; }
#cookie-law-info-bar .cli-bar-container { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px; }
#cookie-law-info-bar .cli-bar-message { width: 100% !important; margin: 0 !important; text-align: left !important; color: #CFDBEE !important; }
#cookie-law-info-bar .rtc-policy { color: var(--e-global-color-accent, #2DAAE2) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#cookie-law-info-bar .cli-bar-btn_container { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; justify-content: flex-end; align-items: center; }
#cookie-law-info-bar .cli-plugin-button { margin: 0 !important; border-radius: 999px !important; padding: 11px 18px !important; font: 700 13.5px/1 'Montserrat', sans-serif !important; letter-spacing: .01em; border: 1.5px solid transparent !important; transition: background-color .2s, color .2s, border-color .2s; }
#cookie-law-info-bar #wt-cli-accept-all-btn { background: var(--e-global-color-accent, #2DAAE2) !important; color: #0B1533 !important; }
#cookie-law-info-bar #wt-cli-accept-all-btn:hover { background: #fff !important; }
#cookie-law-info-bar .wt-cli-reject-btn { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .32) !important; }
#cookie-law-info-bar .wt-cli-reject-btn:hover { border-color: #fff !important; }
#cookie-law-info-bar .cli_settings_button { background: transparent !important; color: #CFDBEE !important; padding-left: 0 !important; border-left-width: 0 !important; padding-right: 8px !important; text-decoration: underline; text-underline-offset: 4px; margin-right: auto !important; }
#cookie-law-info-again { left: 16px !important; right: auto !important; bottom: 16px !important; top: auto !important; border-radius: 999px !important; padding: 9px 16px !important; background: var(--e-global-color-rtnavy, #0C1A48) !important; color: #fff !important; font: 700 12.5px/1 'Montserrat', sans-serif !important; box-shadow: 0 12px 30px -12px rgba(3, 8, 28, .7) !important; border: 1px solid rgba(255, 255, 255, .15) !important; }
.cli-modal .cli-modal-dialog { max-width: 560px !important; }
.cli-modal .cli-modal-content { border-radius: 22px !important; overflow: hidden; font-family: 'Ubuntu', sans-serif !important; }
.cli-modal .cli-privacy-overview h4 { font: 700 20px/1.2 'Montserrat', sans-serif !important; color: #0B1533 !important; }
.cli-modal .cli-privacy-content-text, .cli-modal .cli-tab-content { font-size: 14px !important; line-height: 1.55 !important; color: #3E4A5E !important; }
.cli-modal .cli-privacy-readmore { color: var(--e-global-color-primary, #2C3B8E) !important; }
.cli-modal .cli-tab-section { border-radius: 14px !important; overflow: hidden; margin-bottom: 8px !important; }
.cli-modal .cli-tab-header { background: #F3F8FD !important; border-radius: 14px !important; }
.cli-modal .cli-tab-header a.cli-nav-link { font: 700 14px/1.3 'Montserrat', sans-serif !important; color: #0B1533 !important; }
.cli-modal .cli-switch input:checked + .cli-slider { background-color: var(--e-global-color-primary, #2C3B8E) !important; }
.cli-modal .cli-necessary-caption { color: var(--e-global-color-primary, #2C3B8E) !important; font-weight: 700; }
.cli-modal .cli-modal-footer .wt-cli-privacy-accept-btn, .cli-modal #wt-cli-privacy-save-btn { border-radius: 999px !important; background: var(--e-global-color-primary, #2C3B8E) !important; color: #fff !important; font: 700 13.5px/1 'Montserrat', sans-serif !important; padding: 12px 20px !important; }
.cli-modal .wt-cli-ckyes-footer-section { display: none !important; }
@media (max-width: 767px) {
	#cookie-law-info-bar { left: 10px !important; bottom: 10px !important; width: calc(100% - 20px) !important; padding: 16px !important; }
	#cookie-law-info-bar .cli-bar-btn_container { justify-content: stretch; }
	#cookie-law-info-bar .cli-bar-btn_container { flex-direction: row !important; }
	#cookie-law-info-bar #wt-cli-accept-all-btn, #cookie-law-info-bar .wt-cli-reject-btn { flex: 1 1 40% !important; width: auto !important; display: inline-block !important; text-align: center; }
	#cookie-law-info-bar .cli-bar-message { font-size: 13.5px; }
	#cookie-law-info-bar .cli_settings_button { flex: 1 1 100%; text-align: left; }
}

/* La descripción del panel de ajustes se ve entera (el plugin la corta a 60 px y solo muestra «Mostrar más» con textos largos) */
.cli-privacy-overview:not(.cli-collapsed) .cli-privacy-content { max-height: none; }