/* mq-adventure.css — estilos del motor de aventura (extraído de math-quest).
   Los colores por-mundo se aplican inline desde el config (world.barColor). */
:root{
    --bg:#fafaf8; --ink:#16161a; --muted:#6f6f7a; --line:#e8e8ee; --card:#fff;
    --accent:#5b5bd6; --gold:#e8b93c; --bad:#d6608a; --ok:#4aa06a;
    --radius:16px; --font:'Inter',system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; height:100%;}
  body{font-family:var(--font); color:var(--ink); background:var(--bg);
    min-height:100%; overflow-x:hidden; user-select:none;}

  .wrap{position:relative; max-width:820px; margin:0 auto; padding:28px 20px 60px;}
  .topbar{display:flex; align-items:center; gap:10px; margin-bottom:26px; flex-wrap:wrap;}
  .logo{font-weight:800; font-size:1.15rem; letter-spacing:-.01em; display:flex; align-items:center; gap:8px;}
  .logo small{font-weight:600; color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;}
  .spacer{flex:1;}
  .pill{display:inline-flex; align-items:center; gap:6px; background:var(--card);
    padding:7px 13px; border-radius:999px; font-weight:600; font-size:.88rem;
    border:1px solid var(--line);}
  .pill.who{cursor:pointer;}
  .pill.who:hover{border-color:var(--accent);}

  .panel{background:var(--card); border-radius:var(--radius); border:1px solid var(--line); padding:26px; margin-bottom:16px;}
  h2{margin:.1em 0 .4em; font-size:1.3rem; font-weight:700; letter-spacing:-.02em;}
  p.sub{color:var(--muted); margin:.2em 0 1.2em; font-size:.94rem; line-height:1.5;}
  .btn{border:none; cursor:pointer; font-family:var(--font); font-weight:600; font-size:.98rem;
    padding:12px 22px; border-radius:12px; color:#fff; background:var(--accent);
    transition:transform .08s, filter .15s;}
  .btn:hover{filter:brightness(1.07);} .btn:active{transform:translateY(2px);}
  .btn:disabled{filter:grayscale(.6) opacity(.5); cursor:default;}
  .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  .btn.ghost:hover{border-color:var(--ink); filter:none;}
  .btn.big{font-size:1.08rem; padding:14px 30px;}
  .btn.gold{background:var(--gold);}
  .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;} .center{justify-content:center;}
  .spread{justify-content:space-between;}

  .avatars{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:8px 0 20px;}
  .av{font-size:1.9rem; width:58px; height:58px; display:grid; place-items:center; border-radius:14px;
    background:var(--bg); cursor:pointer; border:2px solid transparent; transition:transform .1s, border-color .1s;}
  .av:hover{transform:scale(1.06);} .av.sel{border-color:var(--accent); background:#fff;}
  input.name{font-family:var(--font); font-weight:600; font-size:1.05rem; padding:12px 16px;
    border-radius:12px; border:1px solid var(--line); width:100%; max-width:320px; text-align:center;
    outline:none; background:#fff; color:var(--ink);}
  input.name:focus{border-color:var(--accent);}

  .worlds{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;}
  .world{border:1px solid var(--line); border-radius:14px; padding:20px 16px; cursor:pointer;
    background:#fff; transition:transform .12s, border-color .12s; text-align:center;}
  .world:hover{transform:translateY(-3px); border-color:var(--accent);}
  .world .emoji{font-size:2rem; display:block; margin-bottom:8px;}
  .world .wname{font-weight:700; font-size:1.02rem;}
  .world .wstars{font-size:.82rem; margin-top:6px; font-weight:500; color:var(--muted);}
  .world .bar{height:4px; border-radius:2px; background:var(--line); margin-top:12px; overflow:hidden;}
  .world .bar i{display:block; height:100%; border-radius:2px;}
  .world.add .bar i{background:#8fbfe8;} .world.sub .bar i{background:#e8a3bd;}
  .world.mul .bar i{background:#e0c068;} .world.div .bar i{background:#84c795;}

  .levels{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px;}
  .lvl{aspect-ratio:1; border-radius:14px; display:grid; place-items:center; cursor:pointer;
    background:#fff; border:1px solid var(--line); position:relative; transition:transform .1s, border-color .1s; font-weight:700;}
  .lvl:hover{transform:scale(1.04); border-color:var(--accent);} .lvl .num{font-size:1.3rem;}
  .lvl .stars{position:absolute; bottom:8px; font-size:.62rem; letter-spacing:1px; color:var(--gold);}
  .lvl.locked{cursor:default;} .lvl.locked:hover{transform:none; border-color:var(--line);}
  .lvl.locked .num,.lvl.locked .lock{opacity:.35;}

  /* ===== Zona de entrenamiento (🎓 por nivel) ===== */
  .learnbtn{position:absolute; top:5px; right:5px; width:27px; height:27px; border-radius:9px;
    display:grid; place-items:center; font-size:.95rem; background:#fff; border:1px solid var(--line);
    cursor:pointer; transition:transform .1s, border-color .1s; z-index:2;}
  .learnbtn:hover{transform:scale(1.12); border-color:var(--accent);}
  .learnbtn.done{background:#e8f7ee; border-color:#4aa06a;}
  #btnLearnGame.pulse{animation:learnpulse 1.1s infinite; border-color:var(--gold);}
  @keyframes learnpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.14); box-shadow:0 0 0 6px rgba(232,185,60,.25);}}

  #learnOverlay{position:fixed; inset:0; z-index:90; background:rgba(22,22,26,.45);
    display:grid; place-items:center; padding:16px;}
  .learn-card{background:var(--card); border-radius:var(--radius); max-width:560px; width:100%;
    max-height:92dvh; overflow:auto; padding:24px 26px; animation:fade .25s;}
  .learn-card h3{margin:0; font-size:1.15rem; display:flex; align-items:center; gap:8px;}
  .learn-kicker{font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px;}
  .learn-step{font-size:1.05rem; line-height:1.65; margin:14px 0;}
  .learn-step b{color:var(--accent);}
  .learn-tip{background:#fdf6e3; border:1px solid #eadfa8; border-radius:12px; padding:10px 14px;
    font-size:.92rem; font-weight:600; margin:12px 0;}
  .learn-q{font-size:2rem; font-weight:800; text-align:center; margin:18px 0 14px; letter-spacing:.02em;}
  .learn-choices{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .learn-choices .btn{min-width:86px; font-size:1.15rem; font-weight:800; background:#fff; color:var(--ink); border:2px solid var(--line);}
  .learn-choices .btn:hover{border-color:var(--accent); filter:none;}
  .learn-choices .btn.ok{background:#e8f7ee; border-color:#4aa06a; color:#2c7a4b;}
  .learn-choices .btn.bad{background:#fdecef; border-color:var(--bad); color:var(--bad);}
  .learn-fb{text-align:center; font-weight:700; min-height:26px; margin:12px 0 2px;}
  .learn-prog{display:flex; gap:6px; justify-content:center; margin-top:10px;}
  .learn-prog i{width:34px; height:7px; border-radius:99px; background:var(--line);}
  .learn-prog i.on{background:var(--ok);}

  /* ===== Escenario ===== */
  .stage{position:relative; width:100%; max-width:760px; margin:0 auto;}
  #game-canvas{width:100%; height:auto; display:block; border-radius:14px;
    border:1px solid var(--line); background:#dcecfa; touch-action:none;}
  .gtop{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  /* Controles en barra propia BAJO el canvas — nunca tapan al personaje. */
  .controls{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; padding:0 2px;}
  .pad{display:flex; gap:10px;}
  .cbtn{width:64px; height:64px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
    background:#fff; color:var(--ink); font-size:1.6rem; font-weight:700;
    display:grid; place-items:center; touch-action:none; transition:transform .08s;}
  .cbtn.jump{width:118px; height:64px; border-radius:18px; background:var(--ink); color:#fff; font-size:1rem; letter-spacing:.04em;}
  .cbtn:active{transform:translateY(2px);}
  .hint{text-align:center; color:var(--muted); font-weight:500; font-size:.82rem; margin-top:12px;}

  /* ===== Pantalla de juego GRANDE por defecto =====
     El panel del juego rompe el ancho del menú (820px) y se centra en el viewport. */
  #screen-game{ width:min(1180px,95vw); max-width:none; margin-left:50%; transform:translateX(-50%); }
  #screen-game .stage{ max-width:none; }
  #screen-game .controls{ max-width:720px; margin:14px auto 0; }
  #screen-game .hint{ max-width:720px; margin-left:auto; margin-right:auto; }

  /* ===== Móvil: juego a pantalla completa con controles SOBRE el canvas ===== */
  .rotate-tip{display:none;}
  body.mobilefs{overflow:hidden;}
  body.mobilefs #screen-game{position:fixed; inset:0; z-index:70; margin:0; transform:none;
    width:100vw; max-width:none; border-radius:0; border:none; padding:0;
    background:#dcecfa; display:flex; flex-direction:column;}
  /* barra superior FLOTANDO sobre el juego (no le quita altura) */
  body.mobilefs #screen-game .gtop{position:fixed; top:8px; left:10px; right:10px; z-index:76;
    margin:0; pointer-events:none;}
  body.mobilefs #screen-game .gtop .btn{pointer-events:auto; opacity:.85;}
  body.mobilefs #gameHint{display:none;}
  body.mobilefs #gameTitle{display:none;}   /* el HUD del canvas ya dice todo */
  body.mobilefs #screen-game .stage{flex:1; display:flex; align-items:center; justify-content:center;
    max-width:none; min-height:0;}
  body.mobilefs #game-canvas{width:auto; height:auto; max-width:100vw;
    max-height:100dvh; aspect-ratio:760/400; border:none; border-radius:0;}
  /* controles flotando sobre el juego, grandes y semitransparentes */
  body.mobilefs .controls{position:fixed; left:0; right:0;
    bottom:max(14px, env(safe-area-inset-bottom)); margin:0; padding:0 20px;
    pointer-events:none; z-index:75;}
  body.mobilefs .cbtn{pointer-events:auto; width:74px; height:74px; font-size:1.9rem;
    opacity:.62; background:rgba(255,255,255,.9); border:none; box-shadow:0 3px 14px rgba(0,0,0,.18);}
  body.mobilefs .cbtn.jump{width:132px; height:74px; background:rgba(22,22,26,.82); color:#fff;}
  body.mobilefs .cbtn:active{opacity:.95;}
  body.mobilefs .hint{display:none;}
  /* aviso si el teléfono está vertical */
  body.mobilefs .rotate-tip{display:none; position:fixed; inset:0; z-index:80;
    background:rgba(22,22,26,.86); color:#fff; place-items:center; text-align:center;
    font-weight:700; font-size:1.25rem; padding:30px;}
  @media (orientation:portrait){ body.mobilefs .rotate-tip{display:grid;} }

  /* ===== Pantalla completa del juego ===== */
  #screen-game:fullscreen, #screen-game:-webkit-full-screen{
    display:flex; flex-direction:column; justify-content:center;
    max-width:none; width:100vw; height:100vh; margin:0; border-radius:0;
    background:var(--bg); padding:12px clamp(12px,4vw,60px);}
  #screen-game:fullscreen .stage, #screen-game:-webkit-full-screen .stage{
    max-width:none; width:min(94vw, calc(72vh * 1.9)); margin:0 auto;}
  #screen-game:fullscreen .controls, #screen-game:-webkit-full-screen .controls{
    max-width:min(94vw, calc(72vh * 1.9)); margin:12px auto 0; width:100%;}

  .bigstars{font-size:3rem; letter-spacing:10px; margin:8px 0 4px; min-height:56px; text-align:center; color:var(--gold);}
  .bigstars .s{opacity:.15;}
  .bigstars .s.on{opacity:1; animation:starpop .5s backwards;}
  .bigstars .s.on:nth-child(2){animation-delay:.18s;} .bigstars .s.on:nth-child(3){animation-delay:.36s;}
  @keyframes starpop{0%{transform:scale(0) rotate(-40deg);}70%{transform:scale(1.3) rotate(8deg);}100%{transform:scale(1);}}
  .result{text-align:center;}
  .scoreline{font-size:1rem; font-weight:500; color:var(--muted);}
  .reward-coins{font-size:1.3rem; font-weight:700; color:var(--gold); margin:12px 0;}

  .badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px;}
  .badge{text-align:center; padding:16px 8px; border-radius:14px; background:#fff; border:1px solid var(--line);}
  .badge .ico{font-size:1.9rem; display:block;} .badge .bn{font-weight:700; font-size:.8rem; margin-top:6px;}
  .badge .bd{font-size:.68rem; color:var(--muted); font-weight:500; margin-top:2px; line-height:1.35;}
  .badge.locked{opacity:.35; filter:grayscale(1);}

  /* ===== Récords ===== */
  table.lb{width:100%; border-collapse:collapse; font-size:.94rem;}
  .lb th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line);}
  .lb td{padding:11px 10px; border-bottom:1px solid var(--line); font-weight:500;}
  .lb td.rank{width:44px; font-weight:700; color:var(--muted);}
  .lb td.total{text-align:right; font-weight:700;}
  .lb th.total{text-align:right;}
  .lb tr.me td{background:#f4f4fd; font-weight:700;}
  .lb tr:last-child td{border-bottom:none;}
  .muted{color:var(--muted);}

  .hidden{display:none !important;}
  .fade{animation:fade .35s;} @keyframes fade{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
  #confetti{position:fixed; inset:0; pointer-events:none; z-index:50;}
  .footnote{text-align:center; color:var(--muted); font-size:.8rem; font-weight:500; margin-top:10px;}
  a.reset{color:var(--muted); font-size:.78rem; cursor:pointer; text-decoration:underline;}
  .backlink{color:var(--muted); text-decoration:none; font-size:.82rem; font-weight:500;}
  .backlink:hover{color:var(--ink);}