/* Shared by the map games: the map, the question panel and its buttons.
   Edit here, then run scripts/sync-shared.sh to copy it into each game folder. */
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin:0; height:100%; overflow:hidden; font-family: system-ui, sans-serif; color:var(--text); background:var(--bg); }
  #map { position:fixed; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }
  .country { fill:var(--land); stroke:var(--stroke); stroke-width:.4; vector-effect:non-scaling-stroke; }
  circle.country { stroke-width:1; }
  @media (hover:hover) { .country:hover { fill:#d6cfb8; } }
  .country.known { fill:var(--known); }
  /* Known entries in a region where everything (in the current mode) is known */
  .country.complete:not(.ok):not(.bad) { fill:var(--complete); }
  .country.ok { fill:var(--ok); }
  .country.bad { fill:var(--bad); }
  /* Not part of the current mode (e.g. territories in countries-only mode) */
  .country.inactive { fill:#f3f0e6; stroke:#c4bfb0; pointer-events:none; }
  circle.country.inactive { display:none; }
  /* Hard mode: land is one uniform mass with no borders; land-coloured strokes hide seams between shapes.
     Dots keep their outline so enclaves like Vatican stay visible and clickable */
  body.hard path.country:not(.ok):not(.bad) { fill:var(--land); stroke:var(--land); }
  body.hard path.country.known:not(.ok):not(.bad) { fill:var(--known); stroke:var(--known); }
  body.hard path.country.complete:not(.ok):not(.bad) { fill:var(--complete); stroke:var(--complete); }
  .ring { fill:none; stroke:var(--ok); stroke-width:3; vector-effect:non-scaling-stroke; pointer-events:none;
          animation: pulse 1.2s ease-in-out infinite; }
  .ring.bad { stroke:var(--bad); }
  @keyframes pulse { 50% { opacity:.25; } }

  /* Desktop: floating card at the top */
  #panel { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:var(--panel);
           padding:14px 24px 10px; border-radius:20px; box-shadow:0 1px 0 var(--shadow), 0 10px 30px var(--shadow);
           text-align:center; width:max-content; max-width:calc(100% - 32px); }
  #prompt { font-size:14px; color:var(--muted); }
  #target-row { display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:center; align-items:center; margin:2px 0 8px; }
  /* Fixed line height so the panel (which the map is fitted around) keeps its size when the web font arrives */
  #target { font-family:var(--serif); font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
  #result { font-size:16px; font-weight:600; margin:6px 0 10px; }
  #result.ok { color:var(--ok); } #result.bad { color:var(--bad); }
  #actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  button { font:inherit; font-weight:600; padding:9px 20px; border-radius:12px; border:0; background:var(--accent); color:#fff;
           cursor:pointer; touch-action:manipulation; box-shadow:0 2px 0 rgba(31,41,51,.18);
           transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
  button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  button:active { transform:translateY(1px); box-shadow:0 1px 0 rgba(31,41,51,.18); }
  @media (hover:hover) { #actions button:hover { transform:translateY(-2px); box-shadow:0 5px 12px var(--shadow); } }
  button.secondary { background:#ece6d6; color:var(--text); }
  button.link { background:none; box-shadow:none; color:var(--accent); padding:4px 2px; font-size:13px; text-decoration:none; }
  @media (hover:hover) { button.link:hover { text-decoration:underline; text-underline-offset:3px; } }
  button.link.icon-button { width:28px; height:28px; padding:4px; display:inline-flex; align-items:center; justify-content:center; }
  .icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  button.language-button { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
                           background:none; color:inherit; padding:0; font-size:20px; line-height:1; }
  button.language-button svg { display:block; width:22px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.16); }
  button.language-button { box-shadow:none; }
  #footer { font-size:13px; margin-top:6px; padding-top:6px; border-top:1px solid #ece6d6; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
  #stats-line { font-size:13px; margin-top:10px; display:flex; gap:14px; justify-content:center; color:var(--muted); }
  .hidden { display:none !important; }
  #tooltip { position:fixed; pointer-events:none; background:rgba(31,41,51,.92); color:#fff; font-size:13px; font-weight:600;
             padding:5px 10px; border-radius:10px; box-shadow:0 4px 14px var(--shadow); white-space:nowrap; z-index:1; }

  @media (prefers-reduced-motion: reduce) { button { transition:none; } }

  /* Phones: full-width bottom sheet, within thumb reach */
  @media (max-width: 640px) {
    #panel { top:auto; bottom:0; left:0; transform:none; width:100%; max-width:none;
             border-radius:20px 20px 0 0; box-shadow:0 -1px 0 var(--shadow), 0 -10px 30px var(--shadow);
             padding:14px 16px calc(10px + env(safe-area-inset-bottom)); }
    #target { font-size:26px; }
    #actions button { flex:1; min-height:48px; font-size:17px; border-radius:14px; }
    #skip { flex:1; }
    button.link { padding:10px 2px; font-size:13px; }
    button.link.icon-button { padding:4px; }
    #footer { gap:4px; }
  }