:root{--ink:#2E2A3A;--paper:#F7F0E8;--coral:#E4695A;--sage:#5E9E8A;--amber:#D9992F;--gold:#C0982A;--green:#6F9E4E;--blue:#6377B0;--char:#AE2F78;--red:#E23B58;
    --disp:'Space Grotesk','Inter',system-ui,sans-serif;}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{height:100%;height:-webkit-fill-available;}
  html,body{margin:0;}
  body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--ink);
    background:radial-gradient(760px 420px at 88% -8%,#FBE7CF 0,transparent 55%),radial-gradient(680px 400px at -5% 108%,#F6DCC6 0,transparent 52%),var(--paper);
    display:flex;align-items:center;justify-content:center;
    padding:10px;
    height:100vh;height:-webkit-fill-available;height:100dvh;
    overflow:hidden;}
  .app{width:100%;max-width:460px;height:100%;}
  .card{background:#FFFDFA;border:2px solid #2E2A3A;border-radius:16px;box-shadow:6px 6px 0 #E9D8C3;
    height:100%;max-height:860px;display:flex;flex-direction:column;overflow:hidden;padding:12px 14px;position:relative;}

  @keyframes correct-pop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.82);}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
    35%{transform:translate(-50%,-50%) scale(1);}
    78%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.04);}
  }
  .correct-flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.82);
    width:min(88%,320px);
    background:linear-gradient(160deg,#EAF6DC 0%,#CCE9A8 100%);
    border:2.5px solid #7DC455;border-radius:22px;box-shadow:0 8px 32px rgba(0,0,0,.18);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:28px 24px;
    z-index:99;animation:correct-pop 1.5s ease forwards;pointer-events:none;}
  .correct-flash .cf-star{font-size:56px;line-height:1;}
  .correct-flash .cf-main{font-family:var(--disp);font-weight:700;font-size:28px;color:#3A7A1E;line-height:1.1;text-align:center;}
  .correct-flash .cf-sub{font-size:16px;font-weight:700;color:#5A9A30;}
  .top{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-bottom:7px;border-bottom:1px solid #F0E9F6;min-height:34px;}
  .home{border:2px solid #2E2A3A;background:#F6C445;color:#2E2A3A;border-radius:999px;padding:5px 11px 5px 9px;font-size:12px;font-weight:700;font-family:var(--disp);cursor:pointer;box-shadow:2px 2px 0 #2E2A3A;flex:0 0 auto;}
  .home span{letter-spacing:.3px;}
  .home:active{transform:translate(2px,2px);box-shadow:0 0 0 #2E2A3A;}
  .topctrl{margin-left:auto;display:flex;gap:7px;align-items:center;flex:0 0 auto;}
  .pz{border:2px solid #2E2A3A;background:#fff;color:#2E2A3A;border-radius:999px;width:34px;height:34px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:2px 2px 0 #2E2A3A;line-height:1;}
  .pz:active{transform:translate(2px,2px);box-shadow:0 0 0 #2E2A3A;}
  .body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding-top:8px;}
  .body.center{justify-content:center;}
  .foot{flex:0 0 auto;padding-top:8px;padding-bottom:max(0px,env(safe-area-inset-bottom));}
  .mute{border:2px solid #2E2A3A;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;color:#2E2A3A;flex:0 0 auto;box-shadow:2px 2px 0 #2E2A3A;}
  .mute:active{transform:translate(2px,2px);box-shadow:0 0 0 #2E2A3A;}
  .paws{display:flex;justify-content:space-evenly;width:100%;flex-wrap:nowrap;font-size:11px;}.paws span{opacity:.2;}.paws span.on{opacity:1;}
  .score{font-weight:800;color:var(--gold);font-size:14px;flex:0 0 auto;}
  .bar{flex:1;height:9px;background:#EDE4F5;border-radius:99px;overflow:hidden;}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--gold));transition:.35s;}

  /* screen title row — sits between .top and .body */
  .screen-title{padding:7px 0 5px;border-bottom:1px solid #F0E9F6;flex:0 0 auto;}
  .ttl{display:flex;flex-direction:column;line-height:1.02;}
  .ttl .a{font-family:var(--disp);font-weight:600;font-size:17px;}
  .ttl .b{font-size:11px;font-weight:700;color:#8a76a0;margin-top:1px;}
  h1{font-family:var(--disp);font-weight:600;font-size:clamp(26px,7vw,34px);margin:0;line-height:1.05;text-align:center;}
  .subEs{font-size:13px;font-weight:700;color:#8a76a0;text-align:center;margin:3px 0 0;}

  .bookcover{position:relative;background:linear-gradient(180deg,#8ECAE6 0%,#A9D6E5 55%,#CDE7F0 100%);border-radius:12px;padding:16px 14px 18px;text-align:center;overflow:hidden;border:3px solid #2E2A3A;box-shadow:5px 5px 0 #2E2A3A;}
  .bookcover .swirl{position:absolute;font-size:14px;opacity:.7;}
  .titleblob{background:radial-gradient(circle at 50% 40%,#F0576F,#D62F4E);display:inline-block;padding:11px 24px;border-radius:60px/48px;box-shadow:0 6px 0 #B02742, inset 0 0 0 3px rgba(255,255,255,.25);transform:rotate(-2deg);}
  .titleblob .l1{font-family:var(--disp);font-weight:700;color:#FFD23E;font-size:34px;line-height:.95;letter-spacing:1px;text-shadow:2px 2px 0 #9c2038;}
  .titleblob .l2{font-family:var(--disp);font-weight:600;color:#fff;font-size:14px;margin:1px 0;}
  .titleblob .l3{font-family:var(--disp);font-weight:700;color:#FFD23E;font-size:34px;line-height:.95;letter-spacing:2px;text-shadow:2px 2px 0 #9c2038;}
  .cgirl{font-size:30px;}.ccat{font-size:30px;display:inline-block;transform:scaleY(-1);}
  .author{font-family:var(--disp);font-weight:600;color:var(--red);font-size:19px;margin:8px 0 0;letter-spacing:1px;}
  .illus{font-family:var(--disp);color:var(--ink);font-size:13px;margin:1px 0 0;}

  .scene-emoji{font-size:clamp(40px,11vw,58px);text-align:center;line-height:1;margin:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));}
  .tag{font-family:var(--disp);font-weight:600;font-size:clamp(17px,5vw,23px);text-align:center;margin:0;color:var(--coral);}
  .tagEs{font-size:11px;font-weight:700;color:#8a76a0;text-align:center;margin:1px 0 4px;}
  .en{font-size:clamp(15px,4.2vw,21px);font-weight:800;line-height:1.45;text-align:center;margin:0 0 2px;}
  .kw{display:inline-block;border-radius:7px;padding:0 2px;transition:background .1s,transform .1s;}
  .kw.char{color:var(--char);}.kw.now{background:#FFE08A;transform:translateY(-1px) scale(1.06);}
  .es{font-size:15px;font-weight:700;line-height:1.4;text-align:center;color:#6E5C7E;background:#F4EEFA;border:1.5px dashed #D8C9E8;border-radius:12px;padding:10px 13px;margin:10px 0 0;display:none;}.es.show{display:block;}
  .scene-play{display:block;width:100%;border:2px solid #2E2A3A;cursor:pointer;font-family:var(--disp);font-weight:700;font-size:clamp(18px,5vw,22px);background:var(--sage);color:#fff;padding:clamp(9px,2.5vw,13px);border-radius:13px;box-shadow:4px 4px 0 #2E2A3A;transition:transform .08s,box-shadow .08s;margin:6px 0 0;text-align:center;}
  .scene-play:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #2E2A3A;}
  .scene-sec{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
  .mini{border:2px solid #2E2A3A;cursor:pointer;font-family:'Space Grotesk';font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;color:#fff;box-shadow:2px 2px 0 #2E2A3A;}
  .mini.es-btn{background:var(--blue);}
  .words{margin-top:12px;padding-top:0;}
  .words h4{font-family:var(--disp);font-weight:500;font-size:15px;margin:0 0 7px;color:#8a76a0;text-align:center;}
  .chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
  .chip{display:flex;align-items:center;gap:5px;background:#FFF;border:1.6px solid #E4DAEE;border-radius:12px;padding:5px 8px 5px 10px;font-size:13px;font-weight:700;}
  .chip .a{color:var(--coral);}.chip .b{color:#8a76a0;}
  .chip-play{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;opacity:.65;transition:opacity .1s;}
  .chip-play:active{opacity:1;}

  .nav{display:flex;gap:10px;}
  .nav button{flex:1;border:2px solid #2E2A3A;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:17px;padding:10px 12px;border-radius:12px;color:#fff;box-shadow:3px 3px 0 #2E2A3A;transition:transform .08s,box-shadow .08s;}
  .nav button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #2E2A3A;}
  button.back{background:#C9BBD8;flex:0 0 auto;font-size:15px;padding:8px 14px;}.next{background:var(--coral);}.next.finish{background:var(--gold);}
  button:disabled{opacity:.45;cursor:default;}

  .sub{font-size:14px;font-weight:700;color:#6E5C7E;margin:8px 6px 0;line-height:1.4;text-align:center;}
  .big-start{margin:14px auto 0;display:block;border:2px solid #2E2A3A;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:25px;background:var(--coral);color:#fff;padding:11px 30px;border-radius:13px;box-shadow:4px 4px 0 #2E2A3A;transition:transform .08s,box-shadow .08s;}
  .big-start:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #2E2A3A;}
  .voicebox{margin:12px 2px 0;background:#F4EEFA;border:1.5px dashed #D8C9E8;border-radius:12px;padding:10px;}
  .voicebox label{font-weight:800;font-size:12.5px;color:#6E5C7E;}
  .voicebox .mini{margin-top:7px;}
  .speedrow{margin-top:9px;font-size:12px;font-weight:800;color:#6E5C7E;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
  .speedrow button{border:1.6px solid #D8C9E8;background:#fff;border-radius:999px;padding:6px 10px;font-size:12.5px;font-weight:800;cursor:pointer;color:#6E5C7E;font-family:'Space Grotesk';}
  .speedrow button.on{background:var(--sage);color:#fff;border-color:var(--sage);}
  .mini.spd{background:var(--amber);}

  .menuwrap{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
  .orderhint{text-align:center;font-size:11px;font-weight:700;color:#8a76a0;margin:2px 0 2px;line-height:1.3;}
  .orderhint span{font-size:10px;color:#B0A6C0;}
  .seclbl{font-family:var(--disp);font-weight:600;font-size:12px;color:#5A4C67;margin:6px 2px 2px;display:flex;align-items:center;gap:6px;}
  .seclbl .sn{font-size:14px;color:var(--coral);}
  .seclbl .en{color:#9a90ad;font-weight:600;}
  .num{flex:0 0 auto;width:22px;height:22px;border-radius:999px;background:#2E2A3A;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);}
  .num.soon{background:#C9BBD8;}
  .mtx{flex:1;min-width:0;}
  .qtag{display:inline-block;font-size:10px;font-weight:800;background:#F6C445;color:#2E2A3A;border:1.5px solid #2E2A3A;border-radius:999px;padding:0 6px;vertical-align:middle;margin-left:4px;font-family:var(--disp);}
  .menubtn{display:flex;align-items:center;gap:9px;border:2px solid #2E2A3A;background:#fff;border-radius:11px;padding:8px 10px;cursor:pointer;text-align:left;box-shadow:3px 3px 0 #E3D6F0;transition:transform .08s,box-shadow .08s;}
  .menubtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #E3D6F0;}
  .menubtn .mi{font-size:22px;}
  .menubtn h3{font-family:var(--disp);font-weight:600;font-size:16px;margin:0;color:var(--coral);}
  .menubtn p{margin:0;font-size:11px;font-weight:700;color:#8a76a0;}
  .menubtn.soon{border-style:dashed;border-color:#C9BBD8;background:#F7F3FB;opacity:.9;box-shadow:none;}
  .menubtn.soon h3{color:#B7A9C7;}.menubtn.soon .mi{filter:grayscale(.4);opacity:.8;}
  .menubtn.soon .lock{font-size:12px;}

  .cintro{font-size:13px;font-weight:700;color:#8a76a0;text-align:center;margin:0 0 9px;}
  .crow{display:flex;gap:10px;align-items:center;background:#fff;border:1.6px solid #E7DEF0;border-radius:11px;padding:8px 10px;margin-bottom:7px;transition:.12s;}
  .crow.open{border-color:var(--char);background:#FCF3F8;align-items:flex-start;}
  .crow.playing{box-shadow:0 0 0 3px #FFE08A;}
  .crow .ce{font-size:26px;line-height:1;flex:0 0 auto;}
  .cmeta{flex:1;min-width:0;}
  .crow h3{font-family:var(--disp);font-weight:600;font-size:15px;margin:0;color:var(--char);}
  .cen{font-size:13px;line-height:1.45;color:#5A4C67;font-weight:600;margin:3px 0 0;display:none;}
  .crow.open .cen{display:block;}
  .ces{font-size:12px;line-height:1.35;color:#8a76a0;font-weight:600;margin:3px 0 0;display:none;}
  .crow.open .ces{display:block;}
  .cplay{flex:0 0 auto;border:2px solid #2E2A3A;background:#F6C445;color:#2E2A3A;border-radius:999px;width:36px;height:36px;font-size:13px;font-weight:800;cursor:pointer;box-shadow:2px 2px 0 #2E2A3A;display:flex;align-items:center;justify-content:center;font-family:var(--disp);transition:transform .08s,box-shadow .08s;}
  .cplay:active{transform:translate(2px,2px);box-shadow:0 0 0 #2E2A3A;}

  .grow{background:#fff;border:1.6px solid #E7DEF0;border-radius:13px;padding:9px 11px;margin-bottom:8px;cursor:pointer;transition:.12s;}
  .grow:active{transform:scale(.99);}
  .grow.playing{box-shadow:0 0 0 3px #FFE08A;border-color:var(--blue);}
  .grow .gw{font-weight:800;font-size:16px;color:var(--ink);}
  .grow .gw b{color:var(--coral);}.grow .geq{color:var(--blue);}.grow .gtr{color:var(--char);}
  .grow .gex{display:block;margin-top:2px;font-size:12.5px;font-style:italic;color:#6E5C7E;font-weight:700;}
  .grow .spk{float:right;font-size:13px;color:#8a76a0;}

  .q{font-family:var(--disp);font-weight:600;font-size:21px;text-align:center;margin:4px 6px 2px;line-height:1.2;}
  .qes{font-size:13px;font-weight:700;color:#8a76a0;text-align:center;margin:4px 0 12px;}
  .lives{color:var(--coral);font-weight:800;letter-spacing:2px;}
  .opts{display:flex;flex-direction:column;gap:9px;}
  .opt{border:2px solid #2E2A3A;background:#fff;cursor:pointer;font-family:'Space Grotesk';font-weight:600;font-size:18px;padding:12px;border-radius:11px;text-align:center;box-shadow:3px 3px 0 #E3D6F0;transition:.12s;}
  .opt:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #E3D6F0;}
  .opt.right{background:#E4F0D8;border-color:var(--green);}.opt.wrong{background:#FBDDD1;border-color:var(--coral);opacity:.85;}
  .qhint{text-align:center;font-weight:700;color:#5A4C67;margin-top:11px;min-height:20px;line-height:1.4;}
  .qhint .small{font-size:12.5px;color:#8a76a0;}
  .seguir{margin-top:11px;border:2px solid #2E2A3A;cursor:pointer;width:100%;font-family:var(--disp);font-weight:600;font-size:21px;background:var(--sage);color:#fff;padding:10px;border-radius:12px;box-shadow:3px 3px 0 #2E2A3A;}
  .badge{display:inline-block;background:#F4EEFA;border:1.5px dashed #D8C9E8;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:800;color:#8a76a0;margin:0 auto 6px;}
  .grade{font-family:var(--disp);font-weight:700;font-size:56px;text-align:center;margin:4px 0 0;line-height:1;}
  .review{background:#FFF4F0;border:1.5px solid #F3D5CB;border-radius:12px;padding:11px 13px;margin:12px 0 0;font-size:13.5px;font-weight:700;color:#8a4a37;line-height:1.4;}

  /* ---- RESPONSIVE ---- */

  /* cover layout helpers (mobile: stack, desktop: row) */
  .cover-lr{display:flex;flex-direction:column;gap:12px;}
  .cover-r{display:flex;flex-direction:column;gap:0;}

  @media (min-width:620px){
    .app{max-width:min(92vw,580px);}
    .card{max-height:min(96vh,860px);}
  }

  @media (min-width:880px){
    body{padding:16px;}
    .app{max-width:min(88vw,820px);}
    .card{max-height:min(96vh,900px);padding:14px 20px;}

    /* Cover: book art left, controls right */
    .cover-lr{flex-direction:row;align-items:center;gap:28px;}
    .cover-lr .bookcover{flex:0 0 260px;}
    .cover-r{flex:1;gap:14px;justify-content:center;align-items:stretch;}
    .big-start{margin:0;}

    /* Menu: 2-column grid */
    .menuwrap{display:grid;grid-template-columns:1fr 1fr;}
    .seclbl{grid-column:1/-1;}

    /* Story: slightly bigger text */
    .en{font-size:23px;}
    .es{font-size:16px;}
    .scene-emoji{font-size:68px;}

    /* Quiz: 2-col options when 4 answers */
    .opts[data-n="4"]{display:grid;grid-template-columns:1fr 1fr;}
    .q{font-size:24px;}

  }