/* ───────────── fuentes (alojadas: sin llamadas a Google en producción) ─────────────
     Rubik para títulos y cuerpo, Chakra Petch para cifras. Las dos OFL, subset latino
     (cubre ñ, acentos, ¿ y ¡). */
  @font-face{font-family:"Rubik";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/rubik.woff2) format("woff2")}
  @font-face{font-family:"Rubik";font-style:italic;font-weight:800 900;font-display:swap;src:url(fonts/rubik-italic.woff2) format("woff2")}
  @font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/chakra-600.woff2) format("woff2")}
  @font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/chakra-700.woff2) format("woff2")}

  /* ───────────── tokens ─────────────
     "Cabina de nave sobre un mundo": negro con tinte verde-petróleo, luz de instrumento
     ámbar y el color del personaje elegido (--pj) tiñendo la interfaz. Sin morado. */
  :root{
    --vacio:#070D0E; --casco:#0F1B1D; --casco-2:#16292C; --linea:rgba(237,233,224,.14);
    --ceniza:#EDE9E0; --ceniza-2:#A9B3AE; --sol:#F0A63C; --sol-txt:#1A1204;
    --brasa:#E0574F; --hielo:#9AD7E8; --selva:#7FC98A; --gas:#D9B26A;
    --pj:var(--sol);
    --f-titulo:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
    --f-cifra:"Chakra Petch","Rubik",system-ui,sans-serif;
    --e-out:cubic-bezier(.23,1,.32,1);
    /* firma visual: esquinas cortadas en diagonal */
    --corte:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    --corte-s:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  }

  *{box-sizing:border-box}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--vacio);
    font:15px/1.4 var(--f-titulo);color:var(--ceniza);
    -webkit-user-select:none;user-select:none;touch-action:none}
  canvas{display:block}

  .hud{position:fixed;inset:0;pointer-events:none;padding:16px;
    padding-top:calc(16px + env(safe-area-inset-top,0px))}

  /* Vidrio. Solo los tres paneles grandes llevan blur: el resto de botones usa fondo
     sólido semitransparente (cada backdrop-filter es trabajo de GPU, y la GPU es el
     cuello de esta laptop). */
  .panel{position:absolute;background:rgba(15,27,29,.80);padding:10px 14px;
    clip-path:var(--corte-s);
    box-shadow:inset 0 0 0 1px var(--linea),inset 0 1px 0 rgba(255,255,255,.08)}
  .tl{top:16px;left:16px;min-width:150px}
  .mapa{bottom:calc(16px + env(safe-area-inset-bottom,0px));left:16px;width:150px;height:150px;padding:8px}
  @media (max-width:520px){ .mapa{width:104px;height:104px;padding:5px} }
  .tr{top:16px;right:16px;text-align:right}
  .num{font-family:var(--f-cifra);font-variant-numeric:tabular-nums;font-weight:700}
  .big{font-size:34px;line-height:1.02;font-style:normal}
  .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ceniza-2)}
  .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:6px}
  /* la posición es lo que se mira en una carrera: sube de tamaño y toma el color del piloto */
  .tl .row:last-child .num{font-size:22px;color:var(--pj)}

  /* medidor de mini-turbo: lo que hace que el drift se sienta rico */
  .drift{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));
    width:min(260px,52vw);height:8px;border-radius:99px;background:rgba(237,233,224,.14);overflow:hidden;opacity:0;
    transition:opacity .15s}
  .drift.on{opacity:1}
  .drift i{display:block;height:100%;width:0%;background:var(--hielo);transition:width .05s linear}
  .drift.lvl2 i{background:var(--sol)}
  .drift.lvl3 i{background:var(--brasa)}

  .brujula{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:54px;height:54px;
    opacity:.85;transition:opacity .2s}
  .brujula svg{width:100%;height:100%;fill:var(--ceniza);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
    transition:transform .08s linear}
  @media (max-width:520px){ .brujula{width:40px;height:40px;top:10px} }

  .aviso{position:absolute;left:50%;top:76px;transform:translate(-50%,-6px) skewX(-8deg);opacity:0;
    font:900 italic clamp(24px,5.5vw,46px)/1 var(--f-titulo);letter-spacing:.01em;
    text-transform:uppercase;text-shadow:0 3px 14px rgba(0,0,0,.8);white-space:nowrap;
    transition:opacity .18s,transform .18s;color:var(--ceniza)}
  .aviso.on{opacity:1;transform:translate(-50%,0) skewX(-8deg)}
  .aviso.ultima{color:var(--sol)}
  .aviso.malo{color:var(--brasa)}

  .btnPausa{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:52px;height:52px;pointer-events:auto;cursor:pointer;clip-path:var(--corte-s);
    background:rgba(15,27,29,.78);border:0;color:var(--ceniza);
    box-shadow:inset 0 0 0 1px var(--linea);
    font:700 17px/1 var(--f-cifra);letter-spacing:2px;transition:transform .12s var(--e-out)}
  .btnPausa:active{transform:scale(.94)}
  .btnSonido{right:76px}
  .btnSonido svg{width:22px;height:22px;display:block;margin:auto;fill:none;
    stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .btnSonido .tache{display:none}
  .btnSonido[aria-pressed="true"]{color:var(--ceniza-2)}
  .btnSonido[aria-pressed="true"] .ondas{display:none}
  .btnSonido[aria-pressed="true"] .tache{display:block}
  .btnPoder{position:absolute;right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));
    min-width:116px;padding:8px 14px;pointer-events:auto;cursor:pointer;clip-path:var(--corte-s);
    background:rgba(15,27,29,.78);border:0;color:var(--ceniza);
    box-shadow:inset 0 0 0 1px var(--linea);text-align:right;line-height:1.15;
    font-family:var(--f-titulo)}
  .btnPoder b{display:block;font-size:14px}
  .btnPoder i{display:block;font-style:normal;font-size:11px;color:var(--ceniza-2);
    font-family:var(--f-cifra);font-variant-numeric:tabular-nums}
  .btnObjeto{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  .btnObjeto.hay{box-shadow:inset 0 0 0 2px var(--sol),0 0 16px rgba(240,166,60,.3)}
  .btnObjeto.hay b{color:var(--sol)}
  .btnPoder.listo{box-shadow:inset 0 0 0 2px var(--selva),0 0 16px rgba(127,201,138,.28)}
  .btnPoder.listo i{color:var(--selva)}
  @media (max-width:520px){ .btnPoder{min-width:92px;padding:6px 9px} .btnPoder b{font-size:12px} }

  /* pausa y resultados: mismo lenguaje, una tarjeta con esquinas cortadas en el centro */
  .pausa,.fin,.gp{z-index:20;position:absolute;inset:0;display:none;place-content:center;justify-items:center;
    background:rgba(7,13,14,.82);pointer-events:auto;text-align:center;padding:24px}
  .pausa.on,.fin.on,.gp.on{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}   /* flex-start: place-content:center de arriba centraba y desbordaba hacia arriba */
  /* en pausa el HUD detrás del velo se queda (se ve la carrera congelada, a propósito); en
     resultados/copa el velo de .82 deja un 18% de velocidad/mapa/minimapa fantasma encima de la
     tabla final — ahí sí se apaga del todo, no solo se atenúa (EQUIPO-UI.md, "HUD oculto en resultados") */
  .hud:has(.fin.on,.gp.on)>:is(.tl,.tr,.mapa,.btnPausa,.btnPoder,.brujula,.drift){visibility:hidden}
  html:has(.fin.on,.gp.on) .touch{visibility:hidden}
  .pausa.on>:first-child,.fin.on>:first-child,.gp.on>:first-child{margin-top:auto}
  .pausa.on>:last-child,.fin.on>:last-child,.gp.on>:last-child{margin-bottom:auto}
  .pausa h2,.fin h2,.gp h2{margin:0 0 6px;font:900 italic clamp(30px,7vw,56px)/1.05 var(--f-titulo);
    text-transform:uppercase;transform:skewX(-8deg)}
  .fin h2{color:var(--pj)}
  .fin,.gp{overflow-y:auto}
  .gp h2{color:var(--pj);font-size:clamp(34px,8vw,72px)}
  .gp .lbl{margin:0 0 6px}
  .gp #gpNum{margin:0 0 16px}
  .gp .tabla{margin-bottom:16px}
  .fin .trofeo,.fin .trofeoGrande{width:72px;height:72px;margin:0 auto 4px;display:block}
  /* tabla de resultados: filas con esquina cortada que entran escalonadas; tu fila se enciende con --pj */
  .tabla{width:min(520px,92vw);margin:0 0 18px;display:grid;gap:6px;text-align:left}
  .tabla .fila{display:grid;grid-template-columns:34px 38px 1fr auto;align-items:center;gap:10px;
    padding:6px 14px 6px 10px;background:rgba(15,27,29,.78);clip-path:var(--corte-s);
    box-shadow:inset 0 0 0 1px var(--linea);font-weight:600}
  .tabla .pos{font:700 20px/1 var(--f-cifra);color:var(--ceniza-2);text-align:center}
  .tabla .fila:first-child .pos{color:var(--gas)}
  .tabla img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
  .tabla .nom em{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    margin-left:6px;padding:2px 6px;background:var(--pj);color:var(--vacio);clip-path:var(--corte-s)}
  .tabla .fila.pts{grid-template-columns:34px 38px 1fr auto auto}
  .tabla .ganado{font:700 13px/1 var(--f-cifra);color:var(--selva);min-width:38px;text-align:right}
  .tabla .tiempo{font:700 16px/1 var(--f-cifra);font-variant-numeric:tabular-nums;color:var(--ceniza)}
  .tabla .fila.yo{background:rgba(22,41,44,.95);box-shadow:inset 0 0 0 2px var(--pj),0 0 18px -6px var(--pj)}
  .tabla .fila.yo .pos{color:var(--pj)}
  .tabla .fila.elim{opacity:.55}
  .tabla .fila.elim .tiempo{color:var(--brasa);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
  @media (prefers-reduced-motion:no-preference){
    .fin.on .tabla .fila{animation:entra .36s var(--e-out) both;animation-delay:calc(var(--i) * 60ms + .1s)}
    @keyframes entra{from{opacity:0;filter:blur(8px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}
  }
  .pausa p,.fin p,.gp p{margin:0 0 20px;color:var(--ceniza-2);font-size:14px;max-width:46ch}
  /* botón de consola: esquina cortada, letra inclinada, se hunde al pulsar */
  .pausa button,.fin button,.gp button,.help #go{
    min-height:52px;padding:0 30px;margin:0 0 10px;border:0;cursor:pointer;min-width:240px;
    clip-path:var(--corte);background:var(--sol);color:var(--sol-txt);
    font:900 italic 18px/1 var(--f-titulo);letter-spacing:.04em;text-transform:uppercase;
    transition:transform .12s var(--e-out),filter .12s}
  @media (hover:hover){ .pausa button:hover,.fin button:hover,.gp button:hover,.help #go:hover{filter:brightness(1.08)} }
  .pausa button:active,.fin button:active,.gp button:active,.help #go:active{transform:scale(.96)}
  .pausa button.sec,.gp button.sec{background:rgba(237,233,224,.1);color:var(--ceniza);box-shadow:inset 0 0 0 1px var(--linea)}
  /* el aro va por DENTRO de la caja: con clip-path de esquinas cortadas un aro exterior se recortaba
     entero y el foco de teclado era invisible */
  button:focus-visible{outline:3px solid var(--ceniza);outline-offset:-6px;box-shadow:inset 0 0 0 1px var(--vacio)}
  .help #go:focus-visible,.pausa button:focus-visible,.fin button:focus-visible,.gp button:focus-visible{outline-color:var(--vacio)}

  /* Velocidad. Dos capas encima del 3D, las dos gratis para la GPU:
     la viñeta cierra los bordes y las rayas salen disparadas del centro.
     A 140 km/h la imagen estaba igual de quieta que a 40. */
  .vertigo{position:absolute;inset:0;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse 68% 58% at 50% 56%,transparent 46%,rgba(0,0,0,.5) 100%)}
  .rayas{position:absolute;inset:-20%;pointer-events:none;opacity:0;
    background:repeating-conic-gradient(from 0deg at 50% 54%,
      rgba(255,255,255,.34) 0deg .18deg, transparent .18deg 4.2deg);
    -webkit-mask-image:radial-gradient(circle at 50% 54%,transparent 44%,#000 96%);
    mask-image:radial-gradient(circle at 50% 54%,transparent 44%,#000 96%)}
  .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.35),transparent 60%);
    opacity:0;transition:opacity .25s}
  .flash.on{opacity:1;transition:opacity .05s}

  /* ───────────── menú principal ─────────────
     Pantalla completa sobre el escenario 3D vivo (la pista del planeta elegido gira detrás).
     Izquierda: quién eres (tira de personajes + ficha con stats y poder). Derecha: dónde
     corres (planetas) y el botón grande. Abajo, los controles en una sola línea. */
  .help{position:absolute;inset:0;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:clamp(10px,2vh,22px);
    padding:clamp(14px,3vw,40px);pointer-events:auto;text-align:left;
    background:
      radial-gradient(ellipse 120% 90% at 30% 40%,rgba(7,13,14,.45),rgba(7,13,14,.9) 100%),
      linear-gradient(90deg,rgba(7,13,14,.55),rgba(7,13,14,.15) 70%);
    overflow-y:auto;overscroll-behavior:contain}
  .help::-webkit-scrollbar{width:8px}
  .help::-webkit-scrollbar-thumb{background:var(--casco-2);border-radius:8px}
  .tituloFila{display:flex;align-items:center;gap:14px;justify-content:space-between}
  .tituloFila h1{margin:0;font:900 italic clamp(28px,min(5.6vw,9vh),64px)/.95 var(--f-titulo);text-transform:uppercase;
    transform:skewX(-8deg);transform-origin:left bottom;letter-spacing:-.01em;
    text-shadow:0 4px 0 rgba(0,0,0,.35)}
  .tituloFila h1::after{content:"";display:block;width:min(180px,32vw);height:5px;margin-top:8px;
    background:var(--pj);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
  .idioma{width:auto;min-height:38px;margin:0;padding:0 14px;cursor:pointer;
    font:700 12px/1 var(--f-cifra);letter-spacing:.12em;clip-path:var(--corte-s);
    background:rgba(237,233,224,.08);color:var(--ceniza);border:0;box-shadow:inset 0 0 0 1px var(--linea)}
  @media (hover:hover){ .idioma:hover{background:rgba(237,233,224,.18)} }
  .menuCuerpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,3vw,44px);
    align-content:start}
  .col{display:flex;flex-direction:column;min-width:0}
  .col .lbl{margin:0 0 10px}
  .help p.presentacion{margin:0 0 16px;color:var(--ceniza-2);font-size:14px;max-width:54ch}

  .pistas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
  .pistas button{min-height:48px;padding:0 8px;cursor:pointer;border:0;clip-path:var(--corte-s);
    background:var(--casco);color:var(--ceniza);box-shadow:inset 0 0 0 1px var(--linea);
    font:700 14px/1.15 var(--f-titulo);transition:transform .14s var(--e-out),background .14s}
  @media (hover:hover){ .pistas button:hover{background:var(--casco-2);transform:translateY(-2px)} }
  .pistas button[aria-pressed="true"]{background:var(--sol);color:var(--sol-txt);box-shadow:none}
  .pistas i{display:block;font-style:normal;font-size:10px;letter-spacing:.2em;margin-top:3px;opacity:.75}
  /* cartas de personaje: retrato grande, el elegido sube y se enciende con SU color */
  .pistas button.conRetrato{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
    min-height:clamp(96px,15.5vh,140px);padding:10px 4px 8px;position:relative}
  .pistas button.conRetrato img{width:clamp(52px,9vh,78px);height:clamp(52px,9vh,78px);object-fit:contain;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));transition:transform .18s var(--e-out)}
  .pistas button.conRetrato span{display:flex;flex-direction:column;align-items:center;line-height:1.15;font-size:13px}
  .pistas button.conRetrato i{font-size:10px;letter-spacing:.06em;font-style:normal;opacity:.7}
  @media (hover:hover){ .pistas button.conRetrato:hover img{transform:translateY(-3px) scale(1.06)} }
  .pistas button.conRetrato[aria-pressed="true"]{background:var(--casco-2);color:var(--ceniza);
    box-shadow:inset 0 0 0 3px var(--pj),0 0 22px -4px var(--pj);transform:translateY(-6px)}
  .pistas button.conRetrato[aria-pressed="true"] img{transform:scale(1.14)}

  /* ficha del personaje elegido: barras de 5 segmentos y su poder */
  .ficha{background:rgba(15,27,29,.72);clip-path:var(--corte);padding:14px 18px 16px;
    box-shadow:inset 0 0 0 1px var(--linea);backdrop-filter:blur(8px)}
  .ficha h3{margin:0;font:900 italic 24px/1 var(--f-titulo);text-transform:uppercase;color:var(--pj);
    transform:skewX(-8deg);transform-origin:left}
  .ficha .sub{margin:2px 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ceniza-2)}
  .stat{display:grid;grid-template-columns:minmax(74px,.5fr) 1fr;align-items:center;gap:10px;margin:4px 0}
  .stat .n{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ceniza-2)}
  .stat .seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
  .stat .seg b{height:9px;background:rgba(237,233,224,.12);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
  .stat .seg b.on{background:var(--pj)}
  .ficha .poder{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--linea);font-size:13px;color:var(--ceniza);line-height:1.4}
  .ficha .poder strong{font-family:var(--f-cifra);letter-spacing:.06em;text-transform:uppercase;color:var(--pj)}
  .notaPista{min-height:34px;margin:2px 0 14px;font-size:13px;color:var(--ceniza-2)}
  .modos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
  .modos button{min-height:44px;border:0;cursor:pointer;clip-path:var(--corte-s);background:var(--casco);
    color:var(--ceniza-2);box-shadow:inset 0 0 0 1px var(--linea);font:800 12px/1.1 var(--f-titulo);
    letter-spacing:.05em;text-transform:uppercase;padding:0 6px;transition:background .14s,color .14s}
  .modos button[aria-pressed="true"]{background:var(--casco-2);color:var(--ceniza);box-shadow:inset 0 -3px 0 var(--pj)}
  .copas{display:grid;gap:10px;margin-bottom:12px}
  .copas button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;
    align-items:center;text-align:left;min-height:76px;padding:10px 16px;border:0;cursor:pointer;
    clip-path:var(--corte-s);background:var(--casco);color:var(--ceniza);box-shadow:inset 0 0 0 1px var(--linea);
    font-family:var(--f-titulo);transition:transform .14s var(--e-out),background .14s}
  @media (hover:hover){ .copas button:hover:not(:disabled){background:var(--casco-2);transform:translateY(-2px)} }
  .copas button[aria-pressed="true"],.copas button[aria-pressed="true"]:hover:not(:disabled){background:var(--sol);color:var(--sol-txt);box-shadow:none}
  .copas button[aria-pressed="true"] .trofeo{filter:brightness(.4) saturate(1.4)}   /* plata u oro sobre naranja casi no se veía */
  .copas button:disabled{cursor:not-allowed;opacity:.55}
  .copas .trofeo{grid-row:1 / span 2;width:40px;height:40px}
  .copas .cn{font:900 italic 18px/1.1 var(--f-titulo);text-transform:uppercase}
  .copas .cp{font-size:11.5px;line-height:1.35;opacity:.8}
  .help #go{width:100%;min-height:62px;font-size:24px;margin:auto 0 0;position:relative;z-index:3}
  .controles{margin:0;font-size:12px;line-height:1.9;color:var(--ceniza-2);position:relative;z-index:1;
    pointer-events:none}   /* solo texto: durante la animación de entrada tapaba el botón Arrancar ante los clics */
  .help kbd{display:inline-block;min-width:26px;padding:3px 7px;margin:0 2px;border-radius:4px;text-align:center;
    background:var(--casco-2);box-shadow:inset 0 0 0 1px var(--linea),0 2px 0 rgba(0,0,0,.4);
    font:600 11px/1 var(--f-cifra);color:var(--ceniza)}
  /* entrada escalonada: fade + blur + desplazamiento, corta y sin bloquear nada */
  @media (prefers-reduced-motion:no-preference){
    .help>*,.menuCuerpo>.col>*{animation:entra .42s var(--e-out) both}
    .menuCuerpo>.col:nth-child(1)>*:nth-child(1){animation-delay:.06s}
    .menuCuerpo>.col:nth-child(1)>*:nth-child(2){animation-delay:.11s}
    .menuCuerpo>.col:nth-child(1)>*:nth-child(3){animation-delay:.16s}
    .menuCuerpo>.col:nth-child(2)>*:nth-child(1){animation-delay:.12s}
    .menuCuerpo>.col:nth-child(2)>*:nth-child(2){animation-delay:.17s}
    .menuCuerpo>.col:nth-child(2)>*:nth-child(3){animation-delay:.22s}
    .menuCuerpo>.col:nth-child(2)>*:nth-child(4){animation-delay:.27s}
    @keyframes entra{from{opacity:0;filter:blur(8px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}
  }
  /* pantallas angostas: una sola columna, el botón Arrancar pegado abajo */
  /* en pantallas bajas se sacrifica lo que se puede leer después: la presentación y los controles */
  @media (max-height:820px){ .help p.presentacion{display:none} }
  html.tactil .controles{display:none}
  @media (max-width:820px){
    .help #go{position:sticky;bottom:0;box-shadow:0 -22px 22px -10px var(--vacio)}
    .help{padding-bottom:calc(62px + 36px)}
    .menuCuerpo{grid-template-columns:1fr;align-content:start}
    .help p.presentacion{display:none}
  }
  @media (max-height:560px) and (orientation:landscape){
    .help{gap:8px;padding:12px 18px}
    .tituloFila h1{font-size:30px}
    .tituloFila h1::after{margin-top:4px;height:3px}
    .pistas button.conRetrato{min-height:88px}
  }

  /* táctil: CrazyGames puntúa móvil aparte, así que entra desde el prototipo */
  .touch{position:fixed;inset:auto 0 0 0;height:42%;display:none;pointer-events:none}
  .touch.on{display:block}
  .tbtn{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));
    width:78px;height:78px;border-radius:50%;background:rgba(237,233,224,.1);
    border:1px solid rgba(237,233,224,.24);pointer-events:auto;
    display:grid;place-items:center;font:700 12px/1 var(--f-cifra);letter-spacing:.08em;
    transition:transform .1s var(--e-out),background .1s}
  .tbtn.act{background:rgba(240,166,60,.34);transform:scale(.94)}
  #tIzq{left:18px} #tDer{left:110px}
  #tFreno{right:18px} #tDrift{right:110px}
  @media (max-width:520px){ .tl,.tr{padding:7px 10px} .big{font-size:26px} }

  /* Con el menú abierto el HUD y los botones táctiles no pintan nada: se veían
     el velocímetro y el volante detrás del menú, que es cara de demo. */
  html.resultados .hud>*:not(.fin):not(.vertigo):not(.rayas):not(.flash),html.resultados .touch{visibility:hidden}
  html.menu .hud>*:not(.help):not(.gp):not(.vertigo):not(.rayas):not(.flash),html.menu .touch{visibility:hidden}

  /* HUD táctil. Los cuatro botones de manejo ocupan las dos esquinas de abajo,
     así que TODO lo demás del HUD sube: mapa bajo el marcador, pausa/sonido bajo
     el tiempo, poder y objeto encima de los botones de la derecha, y la barra
     de derrape en el hueco central. Medido a 320-844 px: antes había 12 pares
     de elementos encimados. --tb encoge los botones para que quepan a 320. */
  html.tactil{--tb:min(78px,19vw);--m:max(8px,env(safe-area-inset-left,0px))}
  html.tactil .tl{top:8px;left:var(--m);min-width:0;padding:6px 10px}
  html.tactil .big{font-size:21px}
  html.tactil .tl .row:last-child .num{font-size:16px}
  html.tactil .row{margin-top:2px;gap:10px}
  html.tactil .lbl{font-size:10px;letter-spacing:.08em}
  html.tactil .tr{top:8px;right:var(--m)}
  html.tactil .mapa{bottom:auto;top:140px;left:var(--m);width:84px;height:84px;padding:4px}
  html.tactil .aviso{top:150px}   /* si no, 'VUELTA 1 DE 4' se encima a la posición del marcador */
  html.tactil .btnPausa{bottom:auto;top:100px;right:var(--m);width:44px;height:44px}
  html.tactil .btnSonido{right:calc(var(--m) + 52px)}
  /* en horizontal sobra ancho y falta alto: pausa y sonido flanquean la brújula */
  @media (orientation:landscape){
    html.tactil .btnPausa{top:8px;right:auto;left:calc(50% + 30px)}
    html.tactil .btnSonido{right:auto;left:calc(50% - 74px)}
  }
  html.tactil .btnPoder{right:var(--m);bottom:calc(var(--tb) + 26px + env(safe-area-inset-bottom,0px));min-width:84px}
  html.tactil .btnObjeto{bottom:calc(var(--tb) + 26px + 50px + env(safe-area-inset-bottom,0px))}
  html.tactil .drift{bottom:calc(var(--tb) + 26px + env(safe-area-inset-bottom,0px));width:min(200px,30vw)}
  html.tactil .tbtn{width:var(--tb);height:var(--tb);bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  html.tactil #tIzq{left:var(--m)}
  html.tactil #tDer{left:calc(var(--m) + var(--tb) + 8px)}
  html.tactil #tFreno{right:var(--m)}
  html.tactil #tDrift{right:calc(var(--m) + var(--tb) + 8px)}

  /* si el juego 3D no arranca (js/main.js falla), este aviso cubre el menú muerto */
  .falloJuego{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;
    background:var(--vacio);text-align:center;padding:24px}
  .falloJuego h2{margin:0 0 8px;font:900 italic clamp(26px,6vw,44px)/1.05 var(--f-titulo);text-transform:uppercase;
    transform:skewX(-8deg)}
  .falloJuego p{margin:0 0 20px;color:var(--ceniza-2);max-width:46ch}
  .falloJuego button{min-height:52px;padding:0 30px;border:0;cursor:pointer;clip-path:var(--corte);
    background:var(--sol);color:var(--sol-txt);font:900 italic 18px/1 var(--f-titulo);text-transform:uppercase}