/* ------------------------------------------------------------------
     The map games. Same color story as the cards: one hue per country,
     everything on screen derived from it, shadows in that hue, never gray.
  ------------------------------------------------------------------- */
  :root{
    --page:#FFFFFF; --ink:#1F2430; --ink-soft:#6B7280;
    --accent:#3BA3E8; --tint:#EAF5FD; --shadow:rgba(59,163,232,.26); --deep:#1F5E8A;
    --yes:#FFC93C; --no:#E0453C; --ok:#33A852;
    --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}
  [hidden]{display:none !important}
  html,body{height:100%}
  body{
    margin:0; min-height:100svh; 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{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}
  .eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--deep); margin:0 0 2px; font-weight:700}
  h1{font-family:var(--display); font-weight:800; font-size:23px; margin:0 0 10px; letter-spacing:-.015em}
  .modes{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none}
  .modes::-webkit-scrollbar{display:none}
  .mode{
    flex:none; border:0; cursor:pointer; font-family:var(--ui); font-size:13px; font-weight:700;
    padding:9px 14px; border-radius:99px; color:var(--deep); background:var(--tint);
    transition:transform .12s, box-shadow .12s;
  }
  .mode[aria-selected="true"]{color:#fff; background:var(--accent); box-shadow:0 6px 14px var(--shadow)}
  .mode:active{transform:translateY(1px)}

  main{flex:1; display:flex; flex-direction:column; min-height:0; gap:10px}
  .game{flex:1; display:flex; flex-direction:column; min-height:0; gap:10px}

  /* ---- pick how to practice, before the map appears ---- */
  .choose{display:flex; flex-direction:column; gap:14px; padding:6px 0 10px; max-width:520px; width:100%}
  .choose-lead{font-family:var(--hand); font-size:24px; color:var(--ink-soft); margin:0 0 2px}
  .choice{
    display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:16px;
    align-items:center; text-align:left; cursor:pointer; border:0; border-radius:22px;
    padding:18px 20px; background:#fff; color:var(--ink); box-shadow:0 10px 24px var(--shadow);
    font-family:var(--ui); transition:transform .14s, box-shadow .14s;
  }
  .choice .ico{grid-row:1 / span 2; font-size:34px; line-height:1; width:48px; text-align:center}
  .choice .t{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--deep)}
  .choice .d{font-size:14px; line-height:1.4; color:var(--ink-soft); margin-top:3px}
  .choice:active{transform:translateY(2px); box-shadow:0 5px 12px var(--shadow)}
  @media (hover:hover){ .choice:hover{transform:translateY(-2px); box-shadow:0 14px 30px var(--shadow)} }
  .choice:focus-visible{outline:3px solid var(--ink); outline-offset:3px}

  /* ---- the map ---- */
  /* the stage is as tall as the map needs at this width and no taller, so on
     a phone the words sit right under the map; when there is less room than
     that it shrinks (min-height:0) and the map shrinks with it */
  .stage{
    position:relative; flex:0 1 auto; min-height:0; aspect-ratio:var(--map-ar, 1.3);
    border-radius:24px; background:var(--tint);
    box-shadow:0 14px 30px var(--shadow); padding:10px; display:grid; place-items:center;
    touch-action:none; overflow:hidden;
  }
  /* the stage's height comes from flex, so the map is pinned to it rather than sized by it */
  .stage svg{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); display:block}
  .region{fill:#fff; stroke:#C9D3DE; stroke-width:.8; stroke-linejoin:round; cursor:pointer;
    transition:fill .18s}
  /* zoomed in, the borders stay hairlines rather than growing with the map */
  .zoomed .region{vector-effect:non-scaling-stroke; stroke-width:.6px}
  .zoomed .inset-box{vector-effect:non-scaling-stroke}

  /* ---- zoom: pinch, or these ---- */
  .zoom{position:absolute; right:10px; top:10px; z-index:5; display:flex; flex-direction:column; gap:6px}
  .zoom button{width:38px; height:38px; border:0; border-radius:50%; cursor:pointer; padding:0;
    font-family:var(--ui); font-size:22px; font-weight:700; line-height:1; color:var(--deep);
    background:#fff; box-shadow:0 4px 10px var(--shadow)}
  .zoom button:disabled{opacity:.4; cursor:default}
  .zoom button[data-z="fit"]{font-size:18px}
  .region.extra{fill:#E6ECF2; cursor:default}
  .region.placed{fill:var(--ok); stroke:#fff}
  .region.hot{fill:var(--hot,#FFE08A)}
  .region.wrong{fill:var(--no) !important; stroke:#fff}
  .region.hint{animation:hint .8s ease-in-out infinite alternate}
  @keyframes hint{from{fill:#fff}to{fill:var(--yes)}}
  .region.study-on{fill:var(--accent)}
  .inset-box{fill:#fff; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:4 3; opacity:.9}
  .inset .region{stroke-width:.6}
  .lbl{font-family:var(--ui); font-weight:700; fill:var(--deep); text-anchor:middle;
    pointer-events:none; paint-order:stroke; stroke:#fff; stroke-width:2.5px; stroke-linejoin:round;
    opacity:0; transition:opacity .2s}
  .lbl.on{opacity:1}
  .show-labels .lbl{opacity:1}
  .lbl.tiny{font-size:7px}
  .region.placed + .lbl{fill:#fff}
  .pin{fill:var(--deep); stroke:#fff; stroke-width:1; pointer-events:none}

  /* ---- the word she is dragging ---- */
  .tray{flex:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-height:44px;
    padding:2px 0}
  .chip{
    border:0; cursor:grab; font-family:var(--ui); font-size:14px; font-weight:700; color:var(--ink);
    background:#fff; border-radius:99px; padding:10px 15px; box-shadow:0 6px 14px var(--shadow);
    touch-action:none; user-select:none; -webkit-user-select:none; position:relative;
    transition:transform .12s, box-shadow .12s, opacity .2s;
  }
  .chip.picked{background:var(--accent); color:#fff; box-shadow:0 8px 18px var(--shadow)}
  .chip.dragging{position:fixed; left:0; top:0; z-index:20; pointer-events:none; cursor:grabbing;
    transform:translate(-50%,-50%) scale(1.08); box-shadow:0 16px 30px var(--shadow); transition:none}
  .chip.missed::after{content:""; position:absolute; top:4px; right:4px; width:7px; height:7px;
    border-radius:50%; background:var(--no)}
  .chip.back{animation:back .3s ease}
  @keyframes back{from{transform:scale(.9); opacity:.4}}

  /* ---- what to find / what she tapped ---- */
  .ask{flex:none; text-align:center; min-height:52px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px}
  .ask .lead{font-family:var(--hand); font-size:20px; color:var(--ink-soft); line-height:1}
  .ask .big{font-family:var(--display); font-weight:800; font-size:clamp(24px,7vw,36px);
    letter-spacing:-.02em; color:var(--deep); line-height:1.05; text-wrap:balance}
  .ask .sub{font-family:var(--ui); font-size:14px; color:var(--ink-soft); font-weight:700}
  .ask.oops .big{color:var(--no)}

  /* ---- progress + extras ---- */
  .meter{flex:none; display:flex; align-items:center; gap:12px; padding:2px 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}
  .extras{flex:none; display:flex; align-items:center; justify-content:flex-end; gap:18px; padding:4px 4px 0; flex-wrap:wrap}
  .extras button{border:0; background:none; padding:2px; cursor:pointer; font-family:var(--ui);
    font-size:13px; font-weight:700; color:var(--ink-soft)}
  .extras button:hover{color:var(--ink)}
  .extras button .n{display:inline-block; margin-left:5px; padding:1px 7px; border-radius:99px;
    background:var(--tint); color:var(--deep); font-size:11px}
  .extras .armed{color:var(--no)}
  .extras .done{color:var(--deep)}
  .extras button[hidden]{display:none}

  /* ---- the end of a round ---- */
  .finish{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:10px; text-align:center; padding:24px; border-radius:24px;
    background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
  .finish[hidden]{display:none}
  .finish h2{font-family:var(--display); font-weight:800; font-size:clamp(34px,9vw,52px); margin:0; color:var(--deep)}
  .finish .stat{font-weight:700; color:var(--deep); font-size:15px}
  .finish p{font-family:var(--hand); font-size:24px; margin:0; color:var(--ink-soft)}
  .finish .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px}
  .finish button{border:0; cursor:pointer; font-family:var(--ui); font-size:15px; font-weight:700;
    padding:12px 20px; border-radius:99px; color:#fff; background:var(--accent); box-shadow:0 8px 18px var(--shadow)}
  .finish button.alt{background:#fff; color:var(--deep)}

  @media (min-width:700px){
    body{align-items:center; padding-left:24px; padding-right:24px}
    header,main{width:100%; max-width:900px}
    .choose{max-width:560px; align-self:center; gap:16px}
    .choice .t{font-size:24px}
    .choice .d{font-size:15px}
    h1{font-size:31px; margin-bottom:14px}
    .mode{font-size:14px; padding:10px 17px}
    .chip{font-size:15px; padding:11px 17px}
    .ask .lead{font-size:23px}
    .extras button{font-size:14px}
  }
  /* a phone on its side, or any wide short screen: map left, words right */
  @media (orientation:landscape) and (max-height:620px){
    body{padding-top:8px; padding-bottom:8px}
    .eyebrow{display:none}
    h1{font-size:18px; margin-bottom:6px}
    .modes{padding-bottom:6px}
    .mode{font-size:12px; padding:6px 11px}
    .game{display:grid; grid-template-columns:1fr minmax(170px,30%); grid-template-rows:1fr auto auto; gap:0 12px}
    .choose{flex-direction:row; max-width:none; gap:10px; align-items:stretch}
    .choice{flex:1; grid-template-columns:1fr; text-align:center; padding:12px 14px; row-gap:4px}
    .choice .ico{grid-row:auto; width:auto; font-size:26px}
    .choice .t{font-size:17px}
    .choice .d{font-size:12px}
    .choose-lead{display:none}
    .stage{grid-column:1; grid-row:1 / span 3; aspect-ratio:auto; height:100%}
    .tray, .ask{grid-column:2; grid-row:1; align-content:center; justify-content:center; overflow:auto; min-height:0}
    .ask{flex-direction:column}
    .meter{grid-column:2; grid-row:2}
    .extras{grid-column:2; grid-row:3; justify-content:center; gap:10px}
    .extras button{font-size:11px}
    .chip{font-size:12px; padding:7px 11px}
    .stage, .tray, .ask, .meter, .extras{min-height:0}
  }