:root{
    --bg:#050b18;
    --bg-2:#080f1d;
    --panel:#0a1425;
    --panel-2:#0e1b31;
    --line:#18263d;
    --line-strong:#2a3d5f;
    --ink:#f1f5f9;
    --ink-2:#c2cfe0;
    --ink-3:#8fa1bb;
    --indigo:#6e7dff;
    --indigo-2:#98a2ff;
    --indigo-btn:#4f5bd5;
    --indigo-btn-hover:#5a66e0;
    --amber:#f5b93f;
    --green:#4ade80;
    --red:#f87171;
    --sky:#38bdf8;
    --sans:"Archivo", ui-sans-serif, system-ui, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --r-lg:20px;
    --r-md:12px;
    --r-sm:8px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ color-scheme:dark; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  h1,h2,h3,p{ margin:0; }
  button{ font:inherit; color:inherit; }
  b,strong{ font-weight:600; color:var(--ink); }
  ::selection{ background:var(--indigo-btn); color:#fff; }
  :focus-visible{ outline:2px solid var(--indigo-2); outline-offset:3px; border-radius:6px; }
  ::-webkit-scrollbar{ width:12px; height:12px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:#1c2c46; border:3px solid var(--bg); border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover{ background:#2a3d5f; }
  input{ caret-color:var(--indigo-2); }
  [hidden]{ display:none !important; }
  .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;
  }
  .icon{
    width:1em; height:1em; display:block; flex:none;
    fill:none; stroke:currentColor; stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
  .noscript{
    margin:0; padding:.8rem 1.25rem; background:var(--amber); color:#1a1205;
    font-weight:600; font-size:.9rem; text-align:center;
  }

  /* ---------- Stars ---------- */
  .stars{ display:inline-flex; gap:3px; color:var(--amber); line-height:1; }
  .star{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
  .star.is-on{ fill:currentColor; stroke:none; }
  .star:not(.is-on){ color:#4a5f80; }
  .stars--lg .star{ width:clamp(3.2rem,7vw,4.6rem); height:clamp(3.2rem,7vw,4.6rem); stroke-width:1; }
  .stars--lg{ gap:.9rem; filter:drop-shadow(0 12px 26px rgba(245,185,63,.22)); }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    min-height:48px; padding:.7rem 1.15rem; border-radius:var(--r-md);
    border:1px solid transparent; font-weight:600; letter-spacing:-.01em;
    text-decoration:none; cursor:pointer;
    transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  }
  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ cursor:progress; opacity:.62; }
  .btn:disabled:active{ transform:none; }
  .btn .icon{ width:1.05em; height:1.05em; }
  .btn--primary{
    background:var(--indigo-btn); color:#fff;
    box-shadow:0 14px 30px -16px rgba(79,91,213,.95);
  }
  .btn--primary:hover{ background:var(--indigo-btn-hover); }
  .btn--primary:disabled:hover{ background:var(--indigo-btn); }
  .btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink-2); }
  .btn--ghost:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.02); color:var(--ink); }
  .btn--quiet{ background:var(--panel); border-color:var(--line); color:var(--ink-2); }
  .btn--quiet:hover{ border-color:var(--line-strong); color:var(--ink); }
  .link{
    background:none; border:0; padding:.4rem 0; color:var(--ink-3);
    text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-strong);
    cursor:pointer; font-size:.86rem;
  }
  .link:hover{ color:var(--ink-2); text-decoration-color:var(--ink-3); }

  /* ---------- Menu / hero ---------- */
  .menu{ position:relative; min-height:100svh; overflow:hidden; }
  .menu::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    width:76vw; height:76vw; max-width:900px; max-height:900px;
    right:-16vw; top:-24vw;
    background:radial-gradient(circle, rgba(110,125,255,.16), rgba(110,125,255,0) 62%);
  }
  .menu__grid{
    position:relative; z-index:1;
    width:min(1280px, 100% - 2.5rem); margin-inline:auto;
    min-height:100svh; display:grid; align-content:center;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"hero" "atom" "track";
    gap:1.5rem; padding:2.5rem 0 2rem;
  }
  .hero__title{
    font-size:clamp(3.6rem, 14vw, 5.4rem); line-height:.86; font-weight:700;
    letter-spacing:-.038em; text-wrap:balance;
  }
  .hero__title span{ display:block; }
  .hero__outline{
    color:transparent; -webkit-text-stroke:2px var(--ink);
  }
  @supports not (-webkit-text-stroke:1px #000){ .hero__outline{ color:var(--ink); } }
  .hero__copy{
    margin-top:1.35rem; max-width:42ch; color:var(--ink-3);
    font-size:1.02rem; line-height:1.6; text-wrap:pretty;
  }
  .hero__copy b{ color:var(--ink-2); }
  .hero-atom{
    grid-area:atom; position:relative; z-index:0; min-height:min(46svh, 380px);
    border-radius:var(--r-lg);
  }
  .hero-atom canvas{
    position:absolute; inset:0; width:100%; height:100%; display:block;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%);
    mask-image:linear-gradient(90deg, transparent 0, #000 9%);
  }
  .hero, .track{ position:relative; z-index:2; }
  .atom-fallback{ display:none; width:100%; height:100%; }
  .hero-atom.is-fallback{ min-height:min(46svh,380px); display:flex; align-items:center; justify-content:center; }
  .hero-atom.is-fallback canvas{ display:none; }
  .hero-atom.is-fallback .atom-fallback{ display:block; max-width:min(88%, 420px); }

  .track{ grid-area:track; }
  .level{
    display:grid; align-items:center; gap:.9rem;
    grid-template-columns:60px 30px minmax(0,1fr) auto 20px;
    width:100%; padding:1.05rem .35rem; text-align:left;
    background:none; border:0; border-top:1px solid var(--line);
    cursor:pointer; transition:background .2s var(--ease), padding .2s var(--ease);
  }
  .level:hover:not(:disabled), .level:focus-visible{
    background:linear-gradient(90deg, rgba(110,125,255,.16), rgba(110,125,255,0) 78%);
    padding-left:.65rem;
  }
  .level__num{
    font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; white-space:nowrap;
    text-transform:uppercase; color:var(--ink-3); transition:color .2s var(--ease);
  }
  .level:hover:not(:disabled) .level__num{ color:var(--indigo-2); }
  .level__mark{ color:var(--indigo-2); display:grid; place-items:center; }
  .level__mark .icon{ width:28px; height:28px; stroke-width:1.7; }
  .level__name{ display:block; font-size:1.04rem; font-weight:600; letter-spacing:-.012em; }
  .level__formula{
    display:block; margin-top:.12rem; font-family:var(--mono);
    font-size:.71rem; color:var(--ink-3);
  }
  .level__go{ color:var(--ink-3); display:grid; place-items:center; transition:transform .2s var(--ease), color .2s var(--ease); }
  .level:hover:not(:disabled) .level__go{ color:var(--ink); transform:translateX(3px); }
  .level:disabled{ opacity:.42; cursor:not-allowed; }
  .level:disabled .level__mark{ color:var(--ink-3); }
  .track__foot{
    display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.1rem;
    margin-top:1.4rem;
  }
  @media (min-width:900px){
    .menu__grid{
      grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
      grid-template-areas:"hero atom" "track atom";
      grid-template-rows:auto auto; gap:0 2rem;
      align-content:center; padding:8svh 0;
    }
    .hero-atom{
      position:fixed; inset:0 0 0 auto; width:57vw;
      min-height:0; border-radius:0; pointer-events:none;
    }
    .hero__title{ font-size:clamp(4.4rem, 7.2vw, 6rem); }
    .hero__copy{ margin-top:1.5rem; font-size:1.06rem; }
    .track{ margin-top:clamp(2.5rem, 8vh, 4.5rem); }
  }

  /* ---------- Topic screen ---------- */
  .topic{ width:min(1240px, 100% - 2.5rem); margin-inline:auto; padding:1.5rem 0 5rem; }
  .topbar{
    display:flex; align-items:center; gap:1rem;
    padding-bottom:1.15rem; border-bottom:1px solid var(--line);
  }
  .topbar__back{ min-height:44px; padding:.5rem .85rem; margin-left:-.85rem; }
  .topbar__title{
    font-size:1.02rem; font-weight:600; letter-spacing:-.012em;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .topbar__stars{ margin-left:auto; }

  .stage{
    position:relative; aspect-ratio:16/10; overflow:hidden;
    border:1px solid var(--line); border-radius:var(--r-lg);
    background:#060d1b;
  }
  .stage__canvas{ position:absolute; inset:0; }
  .stage__canvas canvas{ width:100%; height:100%; display:block; }
  .stage__note{
    position:absolute; inset:0; display:grid; place-items:center; padding:1.5rem;
    text-align:center; font-size:.92rem; line-height:1.6; color:var(--ink-2); background:#060d1b;
  }
  @media (max-width:600px){ .stage{ aspect-ratio:4/3; } }

  .readout{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
    margin-top:1.15rem; padding-top:1rem; border-top:1px solid var(--line);
  }
  .readout__label{
    display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .readout__value{
    display:block; margin-top:.28rem; font-family:var(--mono); font-size:.94rem;
    font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
    color:var(--ink);
  }
  .stage__caption{
    margin-top:.9rem; min-height:2.7em; max-width:56ch;
    font-size:.88rem; line-height:1.5; color:var(--ink-3);
  }
  .readout:empty, .stage__caption:empty{ display:none; }
  .stage__caption b{ color:var(--ink-2); font-family:var(--mono); font-size:.94em; font-weight:500; }

  .controls{ display:grid; gap:1.15rem; margin-bottom:1.35rem; }
  .control__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
  .control__head label{ font-size:.9rem; color:var(--ink-3); }
  .control__value{
    font-family:var(--mono); font-size:.92rem; color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .control input[type="range"]{
    -webkit-appearance:none; appearance:none; width:100%; height:30px;
    margin:.15rem 0 0; background:transparent; cursor:pointer; display:block;
  }
  .control input[type="range"]::-webkit-slider-runnable-track{
    height:4px; border-radius:99px;
    background:linear-gradient(90deg, var(--indigo) var(--fill,50%), var(--line-strong) var(--fill,50%));
  }
  .control input[type="range"]::-moz-range-track{
    height:4px; border-radius:99px;
    background:linear-gradient(90deg, var(--indigo) var(--fill,50%), var(--line-strong) var(--fill,50%));
  }
  .control input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; margin-top:-7px; border-radius:50%;
    background:var(--ink); border:4px solid var(--indigo-btn);
    box-shadow:0 2px 8px rgba(0,0,0,.5); transition:transform .15s var(--ease);
  }
  .control input[type="range"]::-moz-range-thumb{
    width:14px; height:14px; border-radius:50%;
    background:var(--ink); border:4px solid var(--indigo-btn);
    box-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  .control input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.12); }
  .control input[type="range"]:disabled{ cursor:default; opacity:.55; }

  /* ---------- Quiz ---------- */
  .quiz{ width:min(720px, 100%); margin:1.5rem auto 0; }
  .quiz__meta{
    display:flex; justify-content:space-between; gap:1rem;
    font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
    color:var(--ink-3); text-transform:uppercase;
  }
  .progress{
    height:4px; margin:.75rem 0 2.25rem; border-radius:99px;
    background:var(--line); overflow:hidden;
  }
  .progress__fill{
    height:100%; width:100%; background:var(--indigo);
    transform:scaleX(0); transform-origin:left center;
  }
  .question{
    font-size:clamp(1.24rem, 2.4vw, 1.6rem); line-height:1.35;
    letter-spacing:-.02em; max-width:44ch; text-wrap:pretty;
  }
  .question:focus, .result-slot:focus, .hint__more:focus, #bonus-body:focus{ outline:none; }
  .options{ display:grid; gap:.6rem; margin-top:1.75rem; }
  .option{
    display:flex; align-items:center; gap:1rem; width:100%;
    padding:.85rem 1rem; text-align:left; font-size:.98rem;
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
    cursor:pointer; transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
  }
  .option:hover:not(:disabled){ border-color:var(--line-strong); background:#0b1628; transform:translateX(2px); }
  .option:disabled{ cursor:default; }
  .option:disabled:not(.is-right):not(.is-wrong){ opacity:.55; }
  .option__key{
    flex:none; width:26px; height:26px; display:grid; place-items:center;
    border:1px solid var(--line-strong); border-radius:7px;
    font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
  }
  .option.is-right{ border-color:#22c55e; background:rgba(34,197,94,.09); }
  .option.is-right .option__key{ border-color:#22c55e; color:var(--green); }
  .option.is-wrong{ border-color:#ef4444; background:rgba(239,68,68,.09); }
  .option.is-wrong .option__key{ border-color:#ef4444; color:var(--red); }

  .feedback{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
  .feedback__head{ display:flex; align-items:center; gap:.5rem; font-weight:600; }
  .feedback__head .icon{ width:1.1em; height:1.1em; }
  .feedback__head.is-ok{ color:var(--green); }
  .feedback__head.is-bad{ color:var(--red); }
  .feedback__why{ margin-top:.55rem; color:var(--ink-3); font-size:.94rem; line-height:1.6; max-width:60ch; }
  @media (max-width:899px){
    .menu__grid{ align-content:start; padding:1.9rem 0 1.5rem; gap:1.15rem; }
    .hero__title{ font-size:clamp(3rem, 13.5vw, 4rem); }
    .hero__copy{ margin-top:1rem; font-size:.95rem; max-width:39ch; }
    .hero-atom{ min-height:min(30svh, 280px); }
    .track__foot{ margin-top:.9rem; }
  }
  @media (min-width:600px) and (max-width:899px){
    .menu__grid{ align-content:center; }
    .hero-atom{ min-height:min(32svh, 330px); }
  }
  @media (max-width:640px){
    .level{ grid-template-columns:48px 24px minmax(0,1fr) auto 16px; gap:.7rem; padding:1rem .2rem; }
    .level__num{ font-size:.6rem; letter-spacing:.06em; }
    .level__mark .icon{ width:24px; height:24px; }
    .level__name{ font-size:.98rem; }
    .level__formula{ font-size:.66rem; }
    .topic{ padding-top:.75rem; }
    .topbar__title{ font-size:.94rem; }
    .quiz__meta{ font-size:.68rem; }
  }
  @media (max-width:380px){
    .level{ grid-template-columns:40px 22px minmax(0,1fr) auto 14px; gap:.5rem; padding:.9rem .15rem; }
    .level__num{ font-size:.54rem; letter-spacing:.05em; }
    .level__mark .icon{ width:22px; height:22px; }
    .level__name{ font-size:.95rem; }
    .level__formula{ font-size:.6rem; }
    .star{ width:12px; height:12px; }
    .hero__title{ font-size:clamp(2.7rem, 13.5vw, 3.4rem); }
    .topic{ width:calc(100% - 1.75rem); }
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      transition-duration:.01ms !important; animation-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* ================= JUEGO: MAPA ================= */
  .worlds{ display:grid; gap:1.7rem; }
  .world{ border-top:1px solid var(--line); padding-top:1.15rem; }
  .world__head{ display:flex; align-items:center; gap:.65rem; }
  .world__icon{ color:var(--accent); display:grid; place-items:center; }
  .world__icon .icon{ width:22px; height:22px; }
  .world__name{ font-size:1.06rem; font-weight:600; letter-spacing:-.015em; }
  .world__formula{
    margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
    font-variant-numeric:tabular-nums;
  }
  .world__tag{ margin-top:.25rem; font-size:.82rem; color:var(--ink-3); }
  .world__levels{ display:flex; flex-direction:column; margin-top:.85rem; }
  .world .level{ border-top:1px solid rgba(24,38,61,.75); }
  .world .level:last-child{ border-bottom:1px solid rgba(24,38,61,.75); }
  .level__text{ min-width:0; }

  .bonus{
    display:flex; align-items:center; gap:.6rem; width:100%; min-height:44px;
    margin-top:.95rem; padding:.6rem .85rem; text-align:left;
    background:transparent; border:1px dashed var(--line-strong); border-radius:12px;
    color:var(--ink-3); font-size:.84rem; font-weight:500; cursor:pointer;
    transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  }
  .bonus:hover{ color:var(--ink); border-color:var(--indigo); background:rgba(110,125,255,.07); }
  .bonus .icon{ width:16px; height:16px; }
  .bonus__stars{ margin-left:auto; }
  .bonus__score{ font-family:var(--mono); font-size:.7rem; color:var(--ink-3); }

  .total-stars{ display:flex; align-items:baseline; gap:.45rem; font-size:.8rem; color:var(--ink-3); }
  .total-stars__num{
    font-family:var(--mono); font-size:1.15rem; font-weight:500; color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .track__foot{ justify-content:space-between; }

  @media (min-width:900px){
    .menu__grid{ align-content:start; padding-top:6svh; padding-bottom:4rem; }
  }

  /* ================= JUEGO: NIVEL ================= */
  .topbar__titles{ min-width:0; }
  .topbar__kicker{
    font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .play{ display:grid; gap:2rem; margin-top:2.1rem; }
  @media (min-width:980px){
    .play{
      grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
      grid-template-areas:"brief stage" "controls stage" "empty stage";
      grid-template-rows:auto auto 1fr;
      gap:1.7rem 3rem; align-items:start;
    }
    .play__brief{ grid-area:brief; }
    .play__controls{ grid-area:controls; }
    .play__stage{ grid-area:stage; align-self:stretch; }
  }
  .play__index{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .play__goal{
    margin-top:.55rem; font-size:clamp(1.12rem, 2vw, 1.4rem); font-weight:600;
    letter-spacing:-.02em; line-height:1.36; text-wrap:pretty; max-width:36ch;
  }
  .play__formula{
    margin-top:.65rem; font-family:var(--mono); font-size:1rem; color:var(--indigo-2);
    font-variant-numeric:tabular-nums;
  }
  .play__hint{ margin-top:1.15rem; min-height:44px; font-size:.85rem; }
  .play__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.2rem; }
  .play__run{ flex:1 1 160px; }
  .play__meta{ margin-top:.85rem; font-family:var(--mono); font-size:.68rem; color:var(--ink-3); }

  .hint{
    margin-top:1rem; padding:1rem; background:var(--bg-2);
    border:1px solid var(--line); border-radius:14px;
  }
  .hint__label{
    display:flex; align-items:center; gap:.45rem; font-family:var(--mono);
    font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber);
  }
  .hint__label .icon{ width:15px; height:15px; }
  .hint__q{ margin-top:.6rem; font-size:.96rem; font-weight:600; line-height:1.42; }
  .options--compact{ margin-top:.8rem; gap:.45rem; }
  .options--compact .option{ padding:.6rem .75rem; font-size:.86rem; }
  .hint__more{ margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line); }
  .hint__formula{ margin-top:.55rem; font-family:var(--mono); color:var(--indigo-2); font-size:.92rem; }
  .hint__explain{ margin-top:.45rem; font-size:.87rem; line-height:1.62; color:var(--ink-3); }

  .stage__canvas.is-flat{ display:none; }

  .result-slot{ margin-top:1.4rem; scroll-margin-top:1rem; }
  .result-card{
    padding:1.35rem 1.15rem; background:var(--panel);
    border:1px solid var(--line); border-radius:16px; text-align:center;
  }
  .result-card__stars{ display:flex; justify-content:center; }
  .result-card__value{
    margin-top:.35rem; font-family:var(--mono); font-size:1.85rem; font-weight:600;
    color:var(--result, var(--amber)); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  }
  .result-card__target{
    margin-top:.1rem; font-family:var(--mono); font-size:.68rem; color:var(--ink-3);
  }
  .result-card__msg{ margin-top:.7rem; font-weight:600; font-size:.98rem; }
  .result-card__why{
    margin-top:.6rem; font-size:.85rem; line-height:1.62; color:var(--ink-3);
    text-align:left; max-width:56ch; margin-inline:auto;
  }
  .result-card__actions{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.1rem;
  }

  .bonus__timer{
    margin-left:auto; font-family:var(--mono); font-size:.92rem; color:var(--amber);
    font-variant-numeric:tabular-nums; transition:color .2s var(--ease);
  }
  .bonus__timer.is-low{ color:var(--red); }

  @media (max-width:640px){
    .play__run{ flex:1 1 100%; }
    .result-card__value{ font-size:1.6rem; }
    .world__formula{ display:none; }
  }

  .hint__quiz{ margin-top:.9rem; padding-top:.85rem; border-top:1px solid var(--line); }
  .hint__quiz .hint__q{ margin-top:0; }
  .hint__formula + .hint__explain{ margin-top:.45rem; }