/* Pasapaloma — sistema visual (docs/spec/changes/pasapaloma-v1/design-spec.md). Fuentes locales (OFL). */
@font-face{font-family:"Baloo 2";src:url("../fonts/baloo2-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin.woff2") format("woff2");font-weight:200 1000;font-display:swap}
  /* ── Sistema visual (design-spec.md) ── */
  :root{
    --color-primary:oklch(84% 0.17 88); --color-primary-press:oklch(72% 0.15 85); --color-on-primary:oklch(30% 0.07 257);
    --color-brand-magenta:oklch(56% 0.21 358); --color-brand-blue:oklch(55% 0.17 256);
    --color-background:oklch(20% 0.04 260 / 0.78); --color-surface:oklch(27% 0.05 260); --color-surface-2:oklch(33% 0.05 260);
    --color-border:oklch(42% 0.05 260); --color-text-primary:oklch(99% 0 0); --color-text-secondary:oklch(82% 0.03 255);
    --color-semantic-success:oklch(62% 0.17 145); --color-semantic-error:oklch(55% 0.22 25); --color-semantic-warning:oklch(75% 0.18 80);
    --font-display:"Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    --font-body:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-hero:2.5rem;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
    --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:22px; --radius-full:9999px;
    --duration-fast:100ms; --duration-base:200ms; --duration-slow:300ms;
    --ease-standard:cubic-bezier(0.4,0,0.2,1); --ease-enter:cubic-bezier(0,0,0.2,1); --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
    --outline-title:0 3px 0 var(--color-on-primary), 2px 0 0 var(--color-on-primary), -2px 0 0 var(--color-on-primary), 0 -2px 0 var(--color-on-primary);
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:#0d1320;color:var(--color-text-primary);font-family:var(--font-body);overflow:hidden}
    /* Contenedor del juego: pantalla completa en el celular, columna centrada en escritorio */
  #app{position:fixed;inset:0;margin:0 auto;max-width:560px;overflow:hidden;background:#a9dcf2;
    touch-action:none;user-select:none;-webkit-user-select:none;padding-top:env(safe-area-inset-top)}
  #gl{position:absolute;inset:0;width:100%;height:100%;display:block}
  .layer{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
    padding:var(--space-6) var(--space-4);text-align:center}
  .layer.on{display:flex;animation:fade var(--duration-slow) var(--ease-enter)}
  .layer.on .card{animation:cardIn var(--duration-slow) var(--ease-bounce)}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes cardIn{from{transform:translateY(12px) scale(.97);opacity:0}to{transform:none;opacity:1}}
  .dim{background:var(--color-background)}
  .card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);
    padding:var(--space-4);width:100%;max-width:340px;box-shadow:0 12px 32px rgb(0 0 0 / .35)}
  h1{margin:0 0 var(--space-1);font:800 var(--text-hero)/1.1 var(--font-display);letter-spacing:1px;color:#fff;text-shadow:var(--outline-title)}
  h2{margin:0 0 var(--space-2);font:700 var(--text-2xl)/1.2 var(--font-display)}
  p{margin:6px 0;color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.35}
  .btn{display:block;width:100%;margin:var(--space-2) 0;padding:13px var(--space-4);min-height:48px;border:0;border-radius:var(--radius-xl);cursor:pointer;
    background:var(--color-primary);color:var(--color-on-primary);font:800 var(--text-lg)/1.2 var(--font-body);
    box-shadow:0 4px 0 var(--color-primary-press);transition:transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
  .btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--color-primary-press)}
  .btn:focus-visible,.hbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
  .btn:disabled{opacity:.5;box-shadow:none;cursor:default;transform:none}
  .btn{white-space:nowrap}
  .btn.sec{background:transparent;color:var(--color-text-primary);border:2px solid var(--color-border);box-shadow:none;font-weight:700}
  .btn.sec:hover{background:var(--color-surface-2)}
  .btn.sec:active{transform:translateY(1px)}
  .chip{display:inline-flex;gap:6px;align-items:center;background:oklch(20% 0.04 260 / .8);border-radius:var(--radius-full);
    padding:6px 12px;font-size:var(--text-sm);font-weight:700;color:#fff}
  .chip-btn{border:0;color:inherit;font:inherit;cursor:pointer;min-height:44px}
  .chip-btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}
  .notice{margin:var(--space-2) 0;padding:var(--space-2) 10px;border-radius:var(--radius-md);font-size:var(--text-sm);text-align:left;
    background:oklch(33% 0.05 260 / .6);border:1px solid var(--color-border)}
  .notice.warn{background:oklch(75% 0.18 80 / .15);border-color:var(--color-semantic-warning);color:oklch(88% 0.1 85)}
  .notice.bad{background:oklch(55% 0.22 25 / .15);border-color:var(--color-semantic-error);color:oklch(85% 0.08 25)}
  /* BUG-01: un aviso fuera de tarjeta va directo sobre la escena 3D y necesita fondo sólido para leerse */
  .notice.on-scene{background:var(--color-surface);box-shadow:0 4px 12px rgb(0 0 0 / .3);max-width:340px}
  .notice.ok{background:oklch(62% 0.17 145 / .15);border-color:var(--color-semantic-success);color:oklch(88% 0.1 145)}
  /* HUD: barra sólida (design-spec: el mundo nunca queda bajo el texto) */
  #hud{position:absolute;left:0;right:0;top:env(safe-area-inset-top);display:none;min-height:64px;padding:8px 10px;gap:6px;pointer-events:none;
    background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 4px 12px rgb(0 0 0 / .25);
    justify-content:space-between;align-items:center}
  #hud.on{display:flex}
  .hbox{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:4px 10px;min-width:60px;text-align:center;pointer-events:auto}
  .hbox .k{font:800 10px/1.2 var(--font-body);color:var(--color-text-secondary);letter-spacing:1px}
  .hbox .v{font:800 var(--text-2xl)/1.05 var(--font-display);font-variant-numeric:tabular-nums;color:var(--color-primary)}
  .hbox .v.bump{animation:bump var(--duration-base) var(--ease-bounce)}
  @keyframes bump{from{transform:scale(1.15)}to{transform:none}}
  #hudLives .v{display:flex;gap:2px;justify-content:center;align-items:center;height:26px}
  #hudLives svg{width:20px;height:20px}#hudLives svg.lost{opacity:.3;filter:grayscale(1)}
  .hbtn{width:44px;height:44px;border-radius:var(--radius-lg);border:0;background:var(--color-surface-2);
    color:#fff;font-size:18px;cursor:pointer;pointer-events:auto}
  .hbtn:active{background:var(--color-border)}
  #raceBox{position:absolute;left:10px;top:74px;display:none;background:oklch(20% 0.04 260 / .82);border-radius:var(--radius-lg);
    padding:6px 10px;font-size:var(--text-xs);font-weight:700;text-align:left;min-width:130px;max-width:150px}
  #raceBox.on{display:block}
  #raceBox div{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
  #raceBox div:first-child{color:var(--color-primary)}
  #raceBox .off{opacity:.45;text-decoration:line-through}
  #timer.low{color:var(--color-semantic-warning)}
  .pop{position:absolute;font:800 var(--text-2xl) var(--font-display);color:var(--color-primary);text-shadow:var(--outline-title);pointer-events:none;
    animation:pop .8s ease-out forwards}
  @keyframes pop{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-50px)}}
  #toast{pointer-events:none;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:var(--color-surface);color:#fff;
    border:1px solid var(--color-border);padding:var(--space-2) 14px;border-radius:var(--radius-lg);font-size:var(--text-sm);display:none;max-width:88%;text-align:center}
  #big{position:absolute;left:0;right:0;top:36%;text-align:center;font:800 var(--text-3xl)/1.15 var(--font-display);color:#fff;
    text-shadow:var(--outline-title);pointer-events:none;display:none;padding:0 var(--space-4);animation:cardIn var(--duration-slow) var(--ease-bounce)}
  #big.huge{font-size:5rem}
  .tutArt{font-size:64px;margin:6px 0 4px}
  .dots{display:flex;gap:6px;justify-content:center;margin:var(--space-2) 0}
  .dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--color-border)}.dots i.on{background:#fff;border-color:#fff}
  table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
  td{padding:7px 4px;border-bottom:1px solid var(--color-border);text-align:left}
  td.r{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
  tr.me td{background:var(--color-surface-2);color:var(--color-primary);font-weight:800}
  .diff{display:flex;gap:12px;align-items:center;width:100%;margin:8px 0;padding:12px;border-radius:var(--radius-xl);cursor:pointer;
    background:var(--color-surface-2);border:2px solid var(--color-border);color:#fff;text-align:left;font-family:var(--font-body);
    transition:transform var(--duration-fast) var(--ease-standard)}
  .diff:active{transform:translateY(2px)} .diff.sel{border-color:var(--color-primary)}
  .diff .e{font-size:36px} .diff b{font:800 var(--text-xl)/1.1 var(--font-display);display:block} .diff small{color:var(--color-text-secondary);font-size:var(--text-sm)}
  .dchip{border:2px solid var(--color-border);background:transparent;color:#fff;border-radius:var(--radius-full);padding:6px 10px;font:700 var(--text-sm) var(--font-body);cursor:pointer}
  .dchip.sel{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary)}
  #bell.low{color:var(--color-semantic-error)}
  .bar{width:220px;height:14px;border-radius:var(--radius-full);background:var(--color-surface-2);overflow:hidden;margin-top:14px}
  .bar i{display:block;height:100%;width:0;background:var(--color-primary);transition:width var(--duration-base) var(--ease-standard)}
  .hopper{animation:hopper .6s var(--ease-standard) infinite}
  @keyframes hopper{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  @media (prefers-reduced-motion: reduce){
    .layer.on,.layer.on .card,#big,.hbox .v.bump,.hopper{animation:none}
    .pop{animation:popStill .6s linear forwards}
    @keyframes popStill{0%,80%{opacity:1}100%{opacity:0}}
  }
  .input{width:100%;padding:12px;border-radius:var(--radius-xl);border:2px solid var(--color-border);background:var(--color-surface-2);
    color:#fff;font:800 var(--text-2xl)/1 var(--font-display);text-align:center;letter-spacing:6px;text-transform:uppercase}
  .code{font:800 var(--text-hero)/1 var(--font-display);letter-spacing:8px;color:var(--color-primary)}
  .row{display:flex;gap:8px;align-items:center}
  .mini{border:0;border-radius:var(--radius-lg);padding:6px 10px;font:800 var(--text-sm) var(--font-body);cursor:pointer;background:var(--color-primary);color:var(--color-on-primary)}
  .mini.sec{background:var(--color-surface-2);color:#fff}
  /* 8.2 panel de sonido: controles de tamaño dedo (≥ 48 px) */
  .vol{display:flex;align-items:center;gap:10px;min-height:48px;margin:6px 0;font-weight:800;text-align:left}
  .vol span{flex:0 0 110px}.vol b{flex:0 0 48px;text-align:right;font-variant-numeric:tabular-nums}
  .vol input[type=range]{flex:1;height:32px;accent-color:var(--color-primary)}
  .vol input[type=checkbox]{width:28px;height:28px;accent-color:var(--color-primary)}
  /* Relojito de «Conectando con KitchHero Games…» */
  .clock{display:inline-block;animation:clock 1.6s steps(8) infinite}
  @keyframes clock{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){.clock{animation:none}}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tutArt img{width:100%;max-width:240px;height:auto;display:block;margin:0 auto}
  /* update-sdk-menu: el ⏸ del SDK va en la esquina del HUD, donde estaba el propio (que queda como hueco para no mover el 🔊) */
  #pauseSlot{position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:10px;z-index:20}
  body.sdk-menu #btnPause{visibility:hidden;pointer-events:none}