:root {
  color-scheme: dark;
  --bg: #171422;
  --card: #241c35;
  --muted: #b4a8c8;
  --lime: #ccfa67;
  --pink: #ec79b7;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: #f7f2ff;
  font:
    16px "DM Sans",
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  color: inherit;
  border: 1px solid #625472;
  background: #342942;
  border-radius: 12px;
  padding: 11px 15px;
}
button:hover {
  border-color: var(--lime);
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}
a {
  color: var(--lime);
  text-decoration: none;
}
header {
  height: 90px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #21192f;
  border-bottom: 1px solid #483a5c;
  gap: 20px;
}
.brand {
  font-weight: 900;
  font-size: 25px;
  color: #fff;
  letter-spacing: -1px;
}
.brand span {
  color: var(--lime);
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.7px;
  color: var(--muted);
  margin-top: 4px;
}
nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
nav button {
  border: 0;
  background: none;
}
main {
  height: calc(100dvh - 128px);
  min-height: 540px;
  position: relative;
}
#world-map {
  height: 100%;
  background: #181622;
}
#panel {
  position: absolute;
  z-index: 500;
  top: 20px;
  left: 20px;
  width: 370px;
  max-height: calc(100% - 40px);
  overflow: auto;
  background: rgba(34, 26, 49, 0.97);
  border: 1px solid #574665;
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 16px 70px #100b2555;
}
h1,
h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 6px 0 14px;
  font-size: 28px;
  letter-spacing: -0.5px;
}
h3 {
  margin: 0 0 8px;
}
p {
  line-height: 1.5;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--lime);
}
.muted,
small {
  color: var(--muted);
}
.muted {
  font-size: 14px;
}
.country-list {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}
.country-list button {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #30243e;
}
.country-list span {
  color: var(--muted);
  font-size: 12px;
}
.pack {
  background: #332642;
  border: 1px solid #594664;
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
}
.pack p {
  font-size: 14px;
  color: var(--muted);
}
.pack button,
.primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #192113;
  font-weight: 800;
}
.pack button {
  width: 100%;
}
.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0;
}
.row > * {
  flex: 1;
}
.back {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  margin-bottom: 16px;
  font-size: 14px;
}
input,
select,
textarea {
  width: 100%;
  background: #181321;
  border: 1px solid #655573;
  border-radius: 10px;
  color: #fff;
  padding: 12px;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
label {
  display: block;
  margin: 12px 0 6px;
  font-size: 14px;
  color: var(--muted);
}
.big-code {
  font:
    800 110px/0.95 "Barlow Condensed",
    sans-serif;
  color: var(--lime);
  margin: 24px 0;
}
.question-name {
  font-size: 36px;
  overflow-wrap: anywhere;
}
.address {
  font: 17px/1.65 monospace;
  border: 1px dashed #96889d;
  padding: 18px;
  border-radius: 12px;
  background: #181521;
  margin: 18px 0;
}
.hint {
  border-left: 3px solid var(--lime);
  padding: 10px 12px;
  color: var(--lime);
}
.score {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 1px;
  margin: 16px 0;
}
.progress {
  height: 5px;
  background: #554364;
  border-radius: 8px;
  margin: 12px 0;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: 8px;
}
.correct {
  color: var(--lime);
}
.wrong {
  color: var(--pink);
}
.choices {
  display: grid;
  gap: 8px;
}
.choices button {
  text-align: left;
}
.marker {
  display: grid;
  place-items: center;
  background: var(--pink);
  color: #171323;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 2px 8px #0009;
}
.marker.last {
  background: var(--lime);
  box-shadow: 0 0 20px #ccfa6780;
}
footer {
  height: 38px;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
  color: var(--muted);
}
footer button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
}
dialog {
  background: #251c35;
  color: #fff;
  max-width: 650px;
  width: calc(100% - 32px);
  max-height: 85dvh;
  border: 1px solid #705682;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 100px #0009;
}
dialog::backdrop {
  background: #08050bba;
}
.close {
  float: right;
  background: none;
  border: 0;
  font-size: 25px;
  padding: 0 6px;
}
.leaflet-control-attribution {
  background: #211a30 !important;
  color: #b4a8c8 !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a {
  color: #c8bddd;
}
.leaflet-tooltip {
  background: #251b34;
  color: white;
  border: 1px solid #7a6888;
  padding: 9px;
  border-radius: 8px;
  white-space: normal;
  max-width: 260px;
}
.leaflet-bar a {
  background: #342842;
  color: white;
}
.leaflet-top.leaflet-left {
  left: auto;
  right: 12px;
}
.leaflet-container {
  font-family: "DM Sans", sans-serif;
}
.subtle-button {
  background: none;
  color: var(--muted);
  font-size: 14px;
}
details {
  margin-top: 16px;
}
summary {
  cursor: pointer;
  color: var(--muted);
}
.region-list {
  max-height: 280px;
  overflow: auto;
}
.region-list button {
  width: 100%;
  text-align: left;
  margin-top: 5px;
  font-size: 14px;
}
#sync {
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 750px) {
  header {
    height: 78px;
    padding: 12px 14px;
  }
  .brand {
    font-size: 19px;
  }
  .brand small {
    font-size: 7px;
    letter-spacing: 0.6px;
  }
  nav {
    gap: 5px;
  }
  nav a,
  nav button {
    font-size: 11px;
    padding: 6px;
  }
  nav #world-home {
    display: none;
  }
  main {
    height: calc(100dvh - 112px);
    min-height: 600px;
  }
  #panel {
    top: auto;
    bottom: 12px;
    left: 12px;
    width: calc(100% - 24px);
    max-height: 46%;
    padding: 18px;
    border-radius: 18px;
  }
  h1,
  h2 {
    font-size: 24px;
  }
  .big-code {
    font-size: 70px;
    margin: 10px 0;
  }
  .question-name {
    font-size: 28px;
  }
  .score {
    margin: 8px 0;
  }
  footer {
    height: 34px;
    padding: 9px 12px;
  }
  footer > span:last-child {
    display: none;
  }
  .country-list {
    grid-template-columns: 1fr 1fr;
  }
  .country-list button {
    font-size: 13px;
    padding: 10px;
    display: block;
  }
  .country-list span {
    display: block;
  }
  .address {
    margin: 8px 0;
    padding: 10px;
    font-size: 14px;
  }
}

.major-reference-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.major-reference-grid > div {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: #352743;
  border-radius: 10px;
}
.major-reference-grid b {
  font-size: 28px;
  color: var(--lime);
}
.major-reference-grid small {
  display: block;
  font-size: 12px;
}

.city-label {
  color: #c7bfd2;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 1px 3px #151120,
    1px 0 3px #151120;
  pointer-events: none;
}

.plate-photo {
  margin: 12px 0;
}
.plate-photo img {
  width: 100%;
  height: auto;
  max-height: 175px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.plate-photo figcaption {
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 10px;
  overflow-wrap: anywhere;
}
.plate-photo figcaption button {
  font-size: 10px;
  padding: 0;
  border: 0;
}
#plate-blur {
  padding: 0;
  accent-color: var(--lime);
  margin-bottom: 12px;
}

#map-overview {
  position: absolute;
  top: 100px;
  right: 12px;
  z-index: 500;
  font-size: 12px;
  padding: 8px;
  background: #30253d;
}

.plate-question .choices {
  grid-template-columns: 1fr 1fr;
}
.plate-question .plate-photo img {
  height: 130px;
  width: 100%;
  object-fit: contain;
}
.plate-question .row {
  margin: 8px 0;
}
.plate-question .score {
  margin: 8px 0;
}
@media (max-width: 750px) {
  #panel.plate-question {
    max-height: 68%;
  }
  .plate-question .plate-photo img {
    height: 110px;
  }
  .plate-question .back {
    margin-bottom: 8px;
  }
  .plate-question h2 {
    font-size: 22px;
  }
}

/* Hidden answer assistance must stay hidden despite the grid layout. */
.choices[hidden] { display: none; }

.script-sample { font-size: clamp(25px, 3vw, 36px); line-height: 1.9; padding: 24px 12px; background: #fff; color:#252238; border-radius:12px; text-align:center; font-family: "Nirmala UI", sans-serif; overflow-wrap:anywhere; }
.pole-diagram { margin:12px 0; background:#201b37; border-radius:12px; text-align:center; }
.pole-diagram svg { width:100%; max-height:210px; display:block; }
.pole-diagram figcaption { font-size:12px; padding:4px 8px 12px; color:#bdb5df; }
.result-panel .pole-diagram svg { max-height:120px; }
.result-panel .script-sample { padding:8px; font-size:26px; }

.trail-popup .leaflet-popup-content-wrapper { background:#211b46;color:#f5f1ff;border:1px solid #514574;border-radius:16px; }
.trail-popup .leaflet-popup-tip { background:#211b46; }
.trail-editor { width:250px;max-width:65vw;white-space:normal; }
.trail-editor label { display:block;margin:10px 0 6px;font:500 12px/1.4 "DM Sans",sans-serif; }
.trail-editor textarea,.trail-editor input { box-sizing:border-box;display:block;width:100%;margin-top:5px;background:#15112c;color:#fff;border:1px solid #72628e;border-radius:8px;padding:8px;font:14px/1.4 "DM Sans",sans-serif;resize:vertical; }
.trail-editor button { margin-top:8px;background:#c9f75d;color:#171422;border:0;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer; }
.trail-editor [role=status] { margin-left:10px;font-size:12px;color:#c9f75d; }

/* Fixed-size photo examples keep the question panel compact. */
.clue-gallery { margin: 12px 0; }
.clue-gallery-main { height: 164px; background: #121023; border-radius: 12px; overflow: hidden; }
.clue-gallery-main img, .clue-gallery-main svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.clue-gallery-thumbs { display: flex; gap: 6px; margin: 7px 0; overflow-x: auto; }
.clue-gallery-thumbs button { flex: 0 0 62px; height: 46px; padding: 2px; border: 2px solid transparent; border-radius: 7px; background: #121023; }
.clue-gallery-thumbs button[aria-pressed="true"] { border-color: #c8ff59; }
.clue-gallery-thumbs img, .clue-gallery-thumbs svg { width: 100%; height: 100%; object-fit: contain; }
.clue-gallery > small { display: block; font-size: 10px; line-height: 1.3; }

.clue-evidence{font-size:11px;color:#d8c49d;line-height:1.35;margin:6px 0}.clue-experimental{font-size:12px;display:flex;align-items:center;gap:7px;margin:8px 0 15px}.clue-experimental input{width:auto}.choices button{font-size:13px;line-height:1.3}

.clue-reference{margin:12px 0;font-size:13px}.clue-reference img{width:100%;height:auto;margin-top:8px;border-radius:8px}

.mnemonic-actions{display:flex;align-items:center;gap:6px;margin:8px 0}.mnemonic-hint,.mnemonic-edit{height:32px;min-height:32px;border:0;background:transparent;color:#bdb5ef;padding:5px 8px;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:7px}.mnemonic-edit{width:32px;padding:6px;flex:none}.mnemonic-edit svg{display:block}.mnemonic-hint:hover,.mnemonic-edit:hover{background:#ffffff0d;color:#fff}.mnemonic-hint kbd{font-size:10px;border:1px solid #ffffff30;border-radius:3px;padding:2px 4px}@media(pointer:coarse){.mnemonic-hint,.mnemonic-edit{height:40px;min-height:40px}.mnemonic-edit{width:40px}}

.clue-gallery-main{padding:0;border:0;display:block;width:100%;cursor:zoom-in}.clue-gallery-main:focus-visible{outline:2px solid #c9f75d;outline-offset:3px}#photo-modal{width:96vw;max-width:1600px;height:94vh;max-height:94vh;padding:42px 16px 16px;border:1px solid #ffffff20;border-radius:14px;background:#121023}#photo-modal::backdrop{background:#080611e8}#photo-fullscreen{width:100%;height:100%;display:flex;align-items:center;justify-content:center}#photo-fullscreen img,#photo-fullscreen svg{display:block;width:100%;height:100%;object-fit:contain}#close-photo{z-index:1;cursor:pointer}

.clue-topics{padding:0;border:0;margin:12px 0 16px}.clue-topics legend{font-size:12px;color:#bdb5ef;margin-bottom:8px}.clue-topics label{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;line-height:1.35;cursor:pointer}.clue-topics input{width:14px;height:14px;margin:0;flex:none;accent-color:#c9f75d}.clue-topic-all{padding-bottom:9px}.clue-topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 8px}button:disabled{opacity:.4;cursor:default}

.clue-reference-photo{padding:0;background:none;border:0;width:100%;cursor:zoom-in}

#photo-fullscreen img{width:auto;height:auto;max-width:100%;max-height:100%}#photo-fullscreen svg{width:auto;height:100%;max-width:100%}

.clue-gallery-thumbs:has(button:only-child){display:none}.result-scroll .clue-gallery-main{height:112px}

/* Checkboxes share the game's colors while retaining native keyboard semantics. */
input[type="checkbox"] {
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  width:20px;
  height:20px;
  flex:0 0 20px;
  padding:0;
  margin:0;
  border:1.5px solid #786b9b;
  border-radius:6px;
  background:#19132e;
  background-position:center;
  background-repeat:no-repeat;
  background-size:15px 15px;
  cursor:pointer;
  transition:background-color .15s,border-color .15s,box-shadow .15s;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  border-color:#c9f75d;
  background-color:#c9f75d;
  box-shadow:0 2px 0 #8daf3d;
}
input[type="checkbox"]:checked {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='%2319132e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%2319132e' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible {outline:2px solid #fff;outline-offset:3px;}
input[type="checkbox"]:disabled {opacity:.4;cursor:default;box-shadow:none;}
label:has(> input[type="checkbox"]) {display:flex;align-items:center;gap:10px;cursor:pointer;}
.clue-topic-grid label {padding:9px 10px;border:1px solid #45396b;border-radius:10px;background:#21193c;transition:border-color .15s,background-color .15s;}
.clue-topic-grid label:has(input:checked) {border-color:#789647;background:#2c2e35;color:#f4f5ec;}
.clue-topic-grid label:hover {border-color:#a799cd;}
#settings-form label:has(> input[type="checkbox"]),
#countries-form label:has(> input[type="checkbox"]) {min-height:34px;margin:12px 0;}
@media (prefers-reduced-motion:reduce) {input[type="checkbox"],.clue-topic-grid label {transition:none;}}
/* First visit: one clear account choice, over the same learning map. */
.welcome-screen #world-map {pointer-events:none;opacity:.45;}
.welcome-screen #confidence-toggle,.welcome-screen #map-overview {display:none;}
.welcome-screen #panel {left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 32px));max-height:calc(100% - 32px);padding:28px;}
.welcome-screen h1 {font-size:32px;line-height:1.12;margin:16px 0;}
.welcome-badge {display:inline-block;background:#c9f75d1b;color:var(--lime);padding:6px 11px;border-radius:100px;font-size:12px;font-weight:700;}
.welcome-account {margin:24px 0 18px;border:1px solid #6d8051;border-radius:16px;padding:18px;background:#c9f75d08;}
.welcome-account h2 {font-size:20px;margin:0 0 8px;}
.welcome-account p {font-size:14px;line-height:1.5;}
.welcome-account .primary,.welcome-guest {width:100%;}
.welcome-login {display:block;border:0;background:none;margin:8px auto 0;padding:8px;color:var(--muted);font-size:14px;}
.welcome-storage-note {font-size:12px!important;line-height:1.5;color:var(--muted);margin:12px 0 0;}
#account-login small {display:block;font-size:12px;color:var(--muted);margin:7px 0 14px;}
@media(max-width:600px){.welcome-screen #panel{padding:22px;}.welcome-screen h1{font-size:28px;}.welcome-account{margin-top:20px;}}

.clue-gallery-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0}.clue-gallery-nav button{width:32px;height:28px;padding:0;border-radius:8px;font-size:18px;background:#ffffff09;border:1px solid #ffffff20}.clue-gallery-nav span{font-size:11px;color:var(--muted);min-width:40px;text-align:center}.clue-gallery-nav button:hover{background:#ffffff18}.clue-gallery-thumbs button:focus-visible,.clue-gallery-nav button:focus-visible{outline:2px solid #b9a6ff;outline-offset:2px}

.clue-panoramas {display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;}
.clue-panoramas button {font-size:12px;padding:6px 10px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff25;}
.clue-panoramas button:hover,.clue-panoramas button[aria-pressed="true"] {border-color:var(--lime);color:var(--lime);}
.clue-panorama-frame {width:100%;height:min(55vh,420px);min-height:200px;border:0;border-radius:12px;margin:8px 0;}

/* A single offscreen embed stays alive between preview and full-screen view. */
dialog.panorama-preloading {display:block;position:fixed;left:-10000px;top:0;width:650px;height:520px;max-height:none;visibility:hidden;pointer-events:none;}
dialog.panorama-dialog:not(.panorama-preloading) {width:calc(100% - 32px);max-width:1100px;}
.panorama-dialog .clue-panorama-frame {height:65dvh;max-height:650px;}

.clue-panorama-slot{height:230px;position:relative;background:#121023;border-radius:12px;overflow:hidden;margin:12px 0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
.clue-panorama-slot>button{position:absolute;right:8px;top:8px;z-index:720;padding:7px 12px;background:#251c35;color:white;border:1px solid #ffffff50;border-radius:8px}
dialog.panorama-inline{display:block;position:fixed;z-index:710;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:12px;box-shadow:none;background:#121023;overflow:hidden}
.panorama-inline> :not(iframe){display:none!important}
.panorama-inline .clue-panorama-frame{width:100%;height:100%;min-height:0;max-height:none;margin:0;border-radius:0}
.clue-detail-photos>summary{font-size:12px;color:var(--muted);cursor:pointer;margin:8px 0}
.fullscreen-gallery-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin:12px 0}
.fullscreen-gallery-nav button{background:#251c35;color:white;border:1px solid #ffffff40;border-radius:10px;min-width:48px;height:42px;font-size:24px;padding:0 12px}
.fullscreen-gallery-nav button:disabled{opacity:.3}
#photo-modal .fullscreen-gallery-nav{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#121023e8;border-radius:14px;padding:8px;margin:0}
#photo-fullscreen{height:calc(100% - 62px)}

.panorama-dialog>.inline-expand{display:none}
.panorama-inline>.inline-expand{display:block!important;position:absolute;right:8px;top:8px;z-index:2;background:#251c35;color:white;border:1px solid #ffffff60;border-radius:8px;padding:7px 12px}