/* ------------------------------------------------------------------
     One hue per deck. Everything on screen is derived from it: the card
     is that hue at a tenth strength, the shadow is that hue rather than
     a brown one, the progress fill and the live tab are it at full
     strength. Ink stays near-black so the words are always readable.
     app.js sets --accent / --tint / --shadow / --deep per deck.
  ------------------------------------------------------------------- */
  :root{
    --page:#FFFFFF; --ink:#1F2430; --ink-soft:#6B7280;
    --accent:#2FBF87; --tint:#EAF9F3; --shadow:rgba(47,191,135,.26); --deep:#1B7A57;
    --yes:#FFC93C; --card:#FFFFFF;
    --display:"Bricolage Grotesque",system-ui,sans-serif;
    --hand:"Caveat",cursive; --ui:"Chivo",system-ui,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{min-height:100svh}
  body{
    margin:0; font-family:var(--ui); color:var(--ink); background:var(--page);
    display:flex; flex-direction:column;
    padding:max(10px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
    overscroll-behavior:none;
  }

  /* ---- header ---- */
  header{flex:none}
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px}
  .home{font-family:var(--hand); font-size:21px; color:var(--ink-soft); text-decoration:none;
    display:inline-flex; align-items:center; gap:5px}
  .home:active{color:var(--ink)}
  .sound{border:0; background:none; cursor:pointer; padding:6px; color:var(--deep);
    display:grid; place-items:center; border-radius:50%}
  .sound[aria-pressed="false"]{opacity:.35; color:var(--ink-soft)}
  .sound:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--deep); margin:0 0 2px; font-weight:700}
  .deck-title{font-family:var(--display); font-weight:800; font-size:23px; margin:0 0 12px; letter-spacing:-.015em}

  /* ---- deck chips ---- */
  .tabs{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:none; border:0; cursor:pointer; font-family:var(--ui); font-size:13px; font-weight:700;
    padding:9px 14px; border-radius:99px; color:var(--tab-deep,#333);
    background:var(--tab-tint,#eee); transition:transform .12s, box-shadow .12s;
  }
  .tab[aria-selected="true"]{
    color:#fff; background:var(--tab-color,#999);
    box-shadow:0 6px 14px var(--tab-shadow,rgba(0,0,0,.2));
  }
  .tab:active{transform:translateY(1px)}
  .tab:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
  .tab .n{display:inline-block; margin-left:6px; font-size:11px; opacity:.85;
    font-variant-numeric:tabular-nums}

  /* ---- the card ---- */
  main{flex:1; display:flex; flex-direction:column; min-height:0}
  .board-wrap{perspective:1400px; flex:1; min-height:0; display:flex}
  .board{
    position:relative; flex:1; border:0; padding:0; cursor:pointer;
    transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.25,1);
    background:none; font:inherit; color:inherit;
  }
  .board.flipped{transform:rotateY(180deg)}
  .board:focus-visible{outline:3px solid var(--accent); outline-offset:4px; border-radius:24px}
  .face{
    position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:22px 22px 50px; background:var(--tint); color:var(--ink);
    box-shadow:0 14px 30px var(--shadow);
  }
  .face.back{transform:rotateY(180deg)}

  .prompt{
    position:absolute; left:0; right:0; bottom:16px; text-align:center;
    font-family:var(--hand); font-size:20px; color:var(--ink-soft)
  }
  .word{
    font-family:var(--display); font-weight:800; font-size:clamp(30px,9vw,52px);
    line-height:1.05; text-align:center; letter-spacing:-.02em; text-wrap:balance;
  }
  .word .art{display:block; font-size:.5em; font-weight:700; color:var(--accent); letter-spacing:.02em}
  .note{font-family:var(--hand); font-size:23px; color:var(--ink-soft); margin-top:8px}

  /* ---- hear it ---- */
  .listen{display:flex; gap:8px; align-items:center; justify-content:center; margin-top:18px; flex-wrap:wrap}
  .say{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    font-family:var(--ui); font-size:13px; font-weight:700;
    color:#fff; background:var(--accent); border:0; border-radius:99px;
    padding:11px 17px 11px 14px; box-shadow:0 6px 14px var(--shadow);
  }
  .say.slow{background:#fff; color:var(--deep); font-family:var(--hand);
    font-size:20px; font-weight:600; padding:7px 17px; box-shadow:0 4px 10px var(--shadow)}
  .say:active{transform:translateY(2px); box-shadow:none}
  .say:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
  .say.speaking{animation:pulse .5s ease}
  @keyframes pulse{50%{transform:scale(1.06)}}
  .no-voice .listen::after{
    content:"este aparato no tiene voz"; flex-basis:100%; text-align:center;
    font-family:var(--hand); font-size:17px; color:var(--ink-soft);
  }

  /* ---- the two answers ---- */
  .tray{flex:none; display:flex; gap:10px; padding:12px 0 0}
  .act{
    flex:1; border:0; border-radius:18px; padding:15px 8px; cursor:pointer;
    font-family:var(--ui); font-weight:700; font-size:16px; color:var(--ink);
    background:#fff; box-shadow:0 6px 16px var(--shadow);
    transition:transform .1s, opacity .15s, box-shadow .12s;
    display:flex; flex-direction:column; align-items:center; gap:4px; line-height:1.1;
  }
  .act svg{display:block; color:var(--ink-soft)}
  .act.si{background:var(--yes); box-shadow:0 8px 18px rgba(255,201,60,.42)}
  .act.si svg{color:var(--ink)}
  .act:active{transform:translateY(2px); box-shadow:none}
  .act:disabled{opacity:.45; cursor:default; box-shadow:none}
  .act:focus-visible{outline:3px solid var(--ink); outline-offset:2px}


  /* ---- step through the pile without answering ---- */
  .nav{
    flex:none; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
    display:grid; place-items:center; color:var(--deep); background:var(--tint);
    transition:transform .1s, opacity .15s;
  }
  .nav:active{transform:translateY(1px)}
  .nav:disabled{opacity:.35; cursor:default}
  .nav:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
  .extras{
    flex:none; display:flex; align-items:center; justify-content:flex-end; gap:18px;
    padding:8px 4px 0;
  }
  .extras button, .extras a{
    border:0; background:none; padding:2px; cursor:pointer;
    font-family:var(--ui); font-size:13px; font-weight:700; color:var(--ink-soft);
    text-decoration:none;
  }
  .extras button:hover, .extras a:hover{color:var(--ink)}
  .extras .armed{color:#E0453C}
  .extras .done{color:var(--deep)}

  /* ---- progress ---- */
  .meter{flex:none; display:flex; align-items:center; gap:12px; padding:12px 4px 0}
  .bar{flex:1; height:8px; border-radius:99px; background:var(--tint); overflow:hidden}
  .bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .3s}
  .count{font-size:13px; font-weight:700; color:var(--deep); font-variant-numeric:tabular-nums}


  /* ---- done ---- */
  .done{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:12px; text-align:center; padding:24px}
  .done h2{font-family:var(--display); font-weight:800; font-size:38px; margin:0; color:var(--deep)}
  .done p{font-family:var(--hand); font-size:25px; margin:0; color:var(--ink-soft)}

  /* ---------- pieces the different topics need ---------- */

  /* a little picture over a word (de compras) */
  .pic{font-size:clamp(44px,12vw,72px); line-height:1; margin-bottom:8px}

  /* a color swatch (los colores) */
  .swatch-wrap{display:grid; place-items:center; width:100%; height:100%; container-type:size}
  .swatch{width:min(74%, 62cqh); aspect-ratio:1; border-radius:26px; background:var(--swatch,#ccc);
    box-shadow:0 12px 28px rgba(31,36,48,.18), inset 0 0 0 1.5px rgba(31,36,48,.10)}
  .chip{width:56px; height:56px; border-radius:16px; background:var(--swatch,#ccc);
    box-shadow:0 6px 14px rgba(31,36,48,.18), inset 0 0 0 1.5px rgba(31,36,48,.10); margin-bottom:16px}
  .chip.big{width:min(38vw,120px); height:min(38vw,120px); border-radius:24px}

  /* a flag and the world map (las nacionalidades) */
  .flagmap{display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; width:100%; height:100%; min-height:0}
  .flag-emoji{font-size:clamp(56px,17vw,104px); line-height:1;
    filter:drop-shadow(0 6px 12px rgba(31,36,48,.22))}
  .mapa{width:100%; flex:1; min-height:0; display:grid; place-items:center}
  .mapa svg{width:100%; height:100%; max-height:100%}
  .mapa .landxx{fill:#DCE3EA; stroke:#fff; stroke-width:.5}
  .mapa .oceanxx, .mapa .antxx{fill:#F3F7FA}
  .mapa .on{fill:var(--accent)}
  .mapa .ring{fill:none; stroke:var(--accent); opacity:.85}

  /* the big word on the front of a card (English prompts, question words) */
  .cue{
    font-family:var(--display); font-weight:800; font-size:clamp(34px,11vw,64px);
    line-height:1.05; text-align:center; letter-spacing:-.02em; text-wrap:balance;
    color:var(--deep);
  }
  .cue-small{font-family:var(--ui); font-weight:700; font-size:15px; color:var(--ink-soft);
    letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}

  /* all four forms, singular over plural, masculine beside feminine */
  .forms{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:18px;
    width:100%; max-width:420px}
  .form{display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; min-width:0;
    border-radius:16px; padding:12px 8px; box-shadow:0 6px 14px var(--shadow)}
  .form b{font-family:var(--ui); font-weight:700; font-size:clamp(15px,4.4vw,20px); color:var(--ink);
    min-width:0; overflow-wrap:anywhere}
  .form span{font-family:var(--hand); font-size:17px; color:var(--ink-soft); line-height:1}

  /* a sentence with a hole in it (ser o estar) */
  .sentence{font-family:var(--ui); font-weight:700; font-size:clamp(22px,6.4vw,34px);
    line-height:1.4; text-align:center; text-wrap:balance; color:var(--ink)}
  .blank{display:inline-block; min-width:2.6em; border-bottom:4px dotted var(--accent);
    margin:0 .12em; vertical-align:-.1em}
  .answer-word{color:var(--accent)}
  .en{font-family:var(--hand); font-size:clamp(19px,5.4vw,26px); color:var(--ink-soft);
    margin-top:14px; text-align:center; text-wrap:balance}
  .why{font-family:var(--ui); font-size:14px; color:var(--deep); font-weight:700; margin-top:12px;
    text-align:center; text-wrap:balance}

  /* an example question, and its translation (las preguntas) */
  .example{font-family:var(--ui); font-weight:700; font-size:clamp(20px,5.6vw,28px);
    text-align:center; text-wrap:balance; margin-top:14px; color:var(--ink)}
  .alt{font-family:var(--ui); font-size:16px; font-weight:700; color:var(--deep);
    margin-top:8px; letter-spacing:.01em}
  .alt em{font-style:italic; color:var(--ink); font-weight:700}
  .tagline{font-family:var(--hand); font-size:20px; color:var(--ink-soft); margin-top:10px}


  /* the country's name under the map (las nacionalidades) — the flag alone
     is a geography quiz, and Honduras and Nicaragua fly nearly the same one */
  .pais-label{font-family:var(--display); font-weight:800; font-size:clamp(19px,5vw,27px);
    color:var(--deep); letter-spacing:-.02em; line-height:1; margin-top:-4px}

  /* a listen button on the front, for the things that arrive by ear */
  .listen.on-front{margin-top:14px}

  /* the word the card is really about (antes o después) */
  .mark{color:var(--accent)}

  /* two forms rather than four, when the word is the same for él and ella */
  .forms.two{max-width:340px}

  .done .stat{font-family:var(--ui); font-weight:700; font-size:15px; color:var(--deep);
    letter-spacing:.02em}

  /* ---- the extras row grows a left side: which way round, and the cheat sheet ---- */
  .extras{justify-content:space-between; flex-wrap:wrap; row-gap:6px}
  .extras-left{display:flex; align-items:center; gap:14px; margin-right:auto}
  @media (max-width:479px){
    .extras-left{width:100%; margin-right:0}
    .extras{row-gap:4px}
  }
  .extras .dir, .extras .help-btn{color:var(--deep)}
  .extras .dir span{font-size:15px; line-height:0; vertical-align:-1px; margin-right:1px}
  .extras .help-btn::before{content:"✦ "; opacity:.7}

  /* the cheat sheet: a sheet that slides over the card, never into the layout */
  .sheet-wrap[hidden]{display:none}
  .sheet-wrap{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end;
    justify-content:center; background:rgba(31,36,48,.28); -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px); padding:0}
  .sheet{position:relative; width:100%; max-width:660px; max-height:min(82svh, 640px);
    overflow:auto; background:#fff; color:var(--ink); border-radius:26px 26px 0 0;
    padding:26px 22px max(26px,env(safe-area-inset-bottom)); box-shadow:0 -16px 44px var(--shadow);
    font-size:15px; line-height:1.5; animation:rise .22s ease}
  @keyframes rise{from{transform:translateY(24px); opacity:0}}
  .sheet-close{position:absolute; top:12px; right:14px; width:36px; height:36px; border:0;
    border-radius:50%; background:var(--tint); color:var(--deep); font-size:24px; line-height:1;
    cursor:pointer; display:grid; place-items:center}
  .sheet h3{font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.02em;
    margin:0 0 8px; color:var(--deep); padding-right:40px}
  .sheet h3 + h3, .sheet p + h3, .sheet table + h3, .sheet .nums + h3{margin-top:20px}
  .sheet p{margin:0 0 8px; text-wrap:pretty}
  .sheet p i{font-style:normal; font-weight:700; color:var(--deep)}
  .sheet p b, .sheet td b{color:var(--accent)}
  .sheet table{border-collapse:separate; border-spacing:0; width:100%; margin:4px 0 10px;
    font-size:15px}
  .sheet th{font-family:var(--hand); font-weight:600; font-size:19px; color:var(--ink-soft);
    text-align:left; padding:5px 10px 5px 0; line-height:1.15}
  .sheet thead th{font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--deep); padding-bottom:6px}
  .sheet td{padding:6px 10px; background:var(--tint); font-weight:700; text-wrap:pretty}
  .sheet td:first-of-type{border-radius:10px 0 0 10px}
  .sheet td:last-of-type{border-radius:0 10px 10px 0}
  .sheet tbody tr + tr td{border-top:3px solid #fff}
  .sheet td + td{border-left:3px solid #fff}
  .sheet .nums{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:5px;
    margin:4px 0 10px}
  .sheet .nums span{background:var(--tint); border-radius:9px; padding:5px 8px; font-size:13.5px;
    display:flex; gap:6px; align-items:baseline}
  .sheet .nums b{font-family:var(--display); color:var(--accent); font-size:15px; min-width:1.6em}
  /* a table wider than a phone scrolls inside the sheet rather than pushing it */
  .sheet .wide{overflow-x:auto; margin:4px 0 10px}
  .sheet .wide table{margin:0; min-width:420px}
  body.sheet-open{overflow:hidden}

  @media (min-width:700px){
    body{align-items:center; padding-left:24px; padding-right:24px}
    header,main{width:100%; max-width:660px}
    .eyebrow{font-size:12px}
    .deck-title{font-size:31px; margin-bottom:16px}
    .tab{font-size:14px; padding:10px 17px}
    .prompt{font-size:24px; bottom:20px}
    .face{padding-bottom:56px}
    .act{font-size:19px; padding:18px 8px; gap:6px}
    .say{font-size:15px; padding:13px 21px 13px 17px}
    .say.slow{font-size:23px; padding:9px 21px}
    .count{font-size:14px}
    .extras button, .extras a{font-size:14px}
    .sheet-wrap{align-items:center; padding:24px}
    .sheet{border-radius:26px; padding:30px 30px 30px}
  }

  @media (orientation:landscape) and (max-height:560px){
    body{padding-top:8px; padding-bottom:8px}
    .eyebrow{display:none}
    .deck-title{font-size:18px; margin-bottom:8px}
    .tabs{padding-bottom:8px}
    .tab{font-size:12px; padding:6px 11px}
    main{display:grid; grid-template-columns:1fr minmax(180px,26%);
         grid-template-rows:1fr auto auto; gap:0 14px}
    .board-wrap{grid-column:1; grid-row:1 / span 3}
    .tray{grid-column:2; grid-row:1; flex-direction:column; justify-content:center;
          padding:0; align-self:stretch}
    .act{flex:0 0 auto}
    .meter{grid-column:2; grid-row:2; padding:12px 2px 0}
    .bar{display:none}
    .extras{grid-column:2; grid-row:3; padding:5px 2px 0; gap:10px;
            justify-content:center; flex-wrap:wrap}
    .extras button, .extras a{font-size:11px; line-height:1.2}
    /* grid children default to min-height:auto, which lets the card push the
       page past the bottom of a short screen */
    .board-wrap, .tray, .meter, .extras{min-height:0}
    .act{padding:10px 6px; font-size:13px; gap:2px}
    .act svg{width:19px; height:19px}
    .meter{padding:8px 2px 0}
    .nav{width:34px; height:34px}
    .nav svg{width:19px; height:19px}
    .face{padding:14px 18px}
    .face.front{padding-bottom:42px}
    .word{font-size:clamp(20px,8vh,30px)}
    .note{font-size:15px; margin-top:3px}
    .listen{margin-top:4px}
    .say{padding:7px 12px 7px 10px; font-size:12px}
    .say.slow{font-size:16px; padding:4px 12px}
    .say{padding:8px 14px 8px 12px; font-size:12px}
    .say.slow{font-size:18px; padding:6px 14px}
    .face.back .prompt{display:none}
    /* the inline --cap is sized for a tall card; on a short one the photo
       would sit on top of the hint (an inline custom property needs the
       !important to be overridden here) */
    
    .no-voice .listen::after{font-size:14px}
    /* the newer pieces — a phone on its side gives the card ~250px */
    .cue{font-size:clamp(26px,12vh,44px)}
    .cue-small{font-size:12px; margin-bottom:6px}
    .forms{grid-template-columns:1fr 1fr; gap:5px 8px; margin-top:6px; max-width:none}
    /* sideways, each form box becomes one line — word and label side by side */
    .form{flex-direction:row; align-items:baseline; justify-content:center; gap:5px;
          padding:5px 4px; border-radius:12px}
    .form b{font-size:clamp(12px,2.2vw,15px)}
    .form span{font-size:12px}
    .tagline{font-size:13px; margin-top:4px}
    .sentence{font-size:clamp(17px,4.2vh,24px); line-height:1.3}
    .example{font-size:clamp(15px,3.4vh,19px); margin-top:5px}
    .en{font-size:13px; margin-top:3px}
    .why{font-size:12px; margin-top:6px}
    .alt{font-size:13px; margin-top:4px}
    .chip{width:34px; height:34px; border-radius:10px; margin-bottom:6px}
    .chip.big{width:52px; height:52px; border-radius:14px}
    .pic{font-size:clamp(28px,9vh,44px); margin-bottom:4px}
    .flag-emoji{font-size:clamp(36px,12vh,64px)}
    .flagmap{gap:6px}
    .swatch{width:min(74%, 52cqh)}
    .pais-label{font-size:clamp(15px,3.6vh,20px)}
    .listen.on-front{margin-top:4px}
    .done .stat{font-size:13px}
    .extras-left{gap:8px; margin-right:0; justify-content:center; width:100%}
    .sheet{max-height:100svh; border-radius:0; padding:18px 18px}
  }

  /* ---- a small phone held upright: the card is barely taller than it is
     sideways, and the 2x2 grid plus a note line is what tips it over ---- */
  @media (orientation:portrait) and (max-height:640px){
    .face{padding:14px}
    .face.front{padding-bottom:34px}
    .cue{font-size:clamp(28px,10vw,44px)}
    .word{font-size:clamp(20px,7vw,26px)}
    .forms{gap:5px 8px; margin-top:6px}
    .form{padding:5px 4px; border-radius:12px}
    .form b{font-size:clamp(12px,4.2vw,14px)}
    .form span{font-size:12px}
    .tagline{font-size:13px; margin-top:4px; line-height:1.2}
    .note{font-size:16px; margin-top:4px}
    .alt{font-size:13px; margin-top:4px}
    .chip{width:36px; height:36px; border-radius:11px; margin-bottom:8px}
    .chip.big{width:64px; height:64px; border-radius:16px}
    .example{font-size:clamp(16px,5vw,22px); margin-top:8px}
    .en{font-size:15px; margin-top:6px}
    .why{font-size:12px; margin-top:6px}
    .sentence{font-size:clamp(18px,5.6vw,26px)}
    .listen{margin-top:5px}
    .say{padding:7px 12px 7px 10px; font-size:12px}
    .say.slow{font-size:17px; padding:5px 13px}
    .prompt{font-size:16px; bottom:10px}
    /* the back of a card with four forms and the listen buttons has no
       room left for a hint under them */
    .face.back .prompt{display:none}
    .pais-label{font-size:clamp(16px,4.6vw,22px)}
    .listen.on-front{margin-top:6px}
    .forms.two{max-width:300px}
  }

  @media (prefers-reduced-motion:reduce){
    .board{transition:none}
    .board.flipped{transform:none}
    .face{backface-visibility:visible}
    .face.front{visibility:visible}
    .board.flipped .face.front{visibility:hidden}
    .face.back{transform:none; visibility:hidden}
    .board.flipped .face.back{visibility:visible}
  }