:root {
  --bg: #f4f1ea;
  --card: #ffffff;
  --ink: #1d2230;
  --muted: #687084;
  --line: #dcd7cc;
  --ocean: #cfe0ec;
  --land: #f3efe4;
  --border: #b9b2a2;
  --grat: rgba(40, 70, 110, 0.10);
  --accent: #d9480f;
  --plane: #f2b705;
  --plane-ink: #1d2230;
  --green: #3e9b4f;
  --yellow: #d4a72c;
  --grey: #8a8f9c;
  --dot: #4b5568;
  --arc: #3b5bdb;
  --arc-old: rgba(59, 91, 219, 0.35);
  --answer: #2f9e44;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11141b;
    --card: #1a1f2a;
    --ink: #eceff4;
    --muted: #9aa3b5;
    --line: #2c3342;
    --ocean: #0b1824;
    --land: #3a4356;
    --border: #5b6479;
    --grat: rgba(160, 190, 230, 0.08);
    --dot: #b8c2d6;
    --arc: #7c9cff;
    --arc-old: rgba(124, 156, 255, 0.35);
    --grey: #4f5666;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11141b; --card: #1a1f2a; --ink: #eceff4; --muted: #9aa3b5; --line: #2c3342;
  --ocean: #0b1824; --land: #3a4356; --border: #5b6479; --grat: rgba(160, 190, 230, 0.08);
  --dot: #b8c2d6; --arc: #7c9cff; --arc-old: rgba(124, 156, 255, 0.35); --grey: #4f5666;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }

.top {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; margin: 0 auto; padding: 12px 16px 4px;
}
.top h1 { font-size: 20px; margin: 0; flex: 1; letter-spacing: -0.01em; }
.modes { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.modes button { border: 0; background: none; padding: 4px 12px; border-radius: 999px; font-size: 14px; color: var(--muted); }
.modes button.on { background: var(--ink); color: var(--bg); }
.icon {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); font-size: 17px; line-height: 1; display: grid; place-items: center; padding: 0;
}

main { max-width: 560px; margin: 0 auto; padding: 8px 16px 48px; }

.clue {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 12px;
}
.clue-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.where { font-size: 22px; font-weight: 650; margin: 2px 0 10px; text-wrap: pretty; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.facts div { display: flex; flex-direction: column; }
.facts .k { font-size: 12px; color: var(--muted); }
.facts .v { white-space: nowrap; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.extra:empty { display: none; }
.extra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 4px; }
.extra div { font-size: 15px; }
.extra b { font-weight: 650; }

.globe-wrap { position: relative; margin-bottom: 12px; }
#globe { display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; cursor: grab; user-select: none; }
#globe:active { cursor: grabbing; }
#globe .ocean { fill: var(--ocean); }
#globe .land { fill: var(--land); stroke: none; }
#globe .borders { fill: none; stroke: var(--border); stroke-width: 0.5; }
#globe .grat { fill: none; stroke: var(--grat); stroke-width: 0.6; }
#globe .rim { fill: none; stroke: var(--line); stroke-width: 1; }
#globe .apt { fill: var(--dot); opacity: 0.55; }
#globe .apt-hit { fill: transparent; cursor: pointer; }
#globe .arc { fill: none; stroke: var(--arc-old); stroke-width: 2; }
#globe .arc.last { stroke: var(--arc); stroke-width: 2.5; }
#globe .arc.answer { stroke: var(--answer); stroke-width: 3; stroke-dasharray: none; }
#globe .mark circle { stroke: var(--card); stroke-width: 1.5; }
#globe .mark text {
  font-size: 11px; font-weight: 700; fill: var(--ink);
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round;
}
#globe .plane path { fill: var(--plane); stroke: var(--plane-ink); stroke-width: 1.2; stroke-linejoin: round; }
#globe .plane .halo { fill: var(--plane); opacity: 0.25; stroke: none; }

.globe-tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center; }
.pill {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 6px 12px; font-size: 13px;
}

.guess { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.fields { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.arrow { padding-bottom: 10px; color: var(--muted); }
.field { position: relative; min-width: 0; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.field input:focus { outline: 2px solid var(--arc); outline-offset: -1px; }
.field input.locked { background: var(--green); color: #fff; border-color: var(--green); font-weight: 650; }
.suggest {
  position: absolute; z-index: 20; left: 0; top: 100%; margin: 4px 0 0; padding: 4px;
  list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  width: max(100%, 260px); max-height: 280px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.field[data-side="d"] .suggest { left: auto; right: 0; }
.suggest:empty { display: none; }
.suggest li { padding: 7px 8px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.suggest li.hl, .suggest li:hover { background: var(--bg); }
.suggest .code { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; }
.suggest .nm { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go {
  width: 100%; margin-top: 12px; border: 0; border-radius: 12px; padding: 12px;
  background: var(--accent); color: #fff; font-weight: 650; font-size: 16px;
}
.go:disabled { opacity: 0.4; cursor: default; }
.go span { font-weight: 400; opacity: 0.8; margin-left: 6px; font-size: 14px; }
.tip { font-size: 13px; color: var(--muted); margin: 8px 0 0; text-align: center; }

.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.row { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.row .pair { display: flex; gap: 6px; align-items: center; }
.tile {
  display: inline-flex; flex-direction: column; justify-content: center; min-width: 64px;
  padding: 4px 10px; border-radius: 8px; color: #fff; line-height: 1.15;
}
.tile b { font-size: 17px; letter-spacing: 0.02em; }
.tile small { font-size: 11px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.tile.g { background: var(--green); }
.tile.y { background: var(--yellow); }
.tile.x { background: var(--grey); }
.row .n { margin-left: auto; color: var(--muted); font-size: 13px; }
.row .fb { margin-top: 6px; font-size: 14px; display: grid; gap: 2px; }

.result { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.result h2 { margin: 0 0 4px; font-size: 22px; }
.result .route { font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.result .btns { display: flex; gap: 8px; }
.result .btns .go { margin-top: 0; white-space: nowrap; }
.result .btns .ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.stats { display: flex; gap: 16px; margin: 14px 0 8px; }
.stats div { display: flex; flex-direction: column; }
.stats b { font-size: 20px; }
.stats span { font-size: 12px; color: var(--muted); }
.dist { display: grid; gap: 3px; font-size: 13px; }
.dist div { display: flex; align-items: center; gap: 6px; }
.dist i { display: block; height: 16px; background: var(--grey); border-radius: 4px; min-width: 18px; color: #fff; font-style: normal; font-size: 11px; text-align: right; padding-right: 5px; line-height: 16px; }
.dist i.me { background: var(--green); }
.next { font-size: 13px; color: var(--muted); margin-top: 10px; }

.legend { list-style: none; padding: 0; display: grid; gap: 6px; }
.legend li { display: flex; gap: 8px; align-items: center; }
.sq { width: 18px; height: 18px; border-radius: 4px; display: inline-block; }
.sq.g { background: var(--green); } .sq.y { background: var(--yellow); } .sq.x { background: var(--grey); }

dialog {
  border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink);
  max-width: min(480px, calc(100vw - 32px)); padding: 20px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog h2 { margin-top: 0; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px;
  z-index: 50; max-width: calc(100vw - 32px);
}

.stop {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  border: 0; border-radius: 999px; padding: 14px 34px; font-size: 18px; font-weight: 700;
  background: var(--accent); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); white-space: nowrap;
}
.stop:disabled { opacity: 0.85; cursor: default; font-size: 15px; }
.facts[hidden] { display: none; }
.result a, .credit a { color: var(--arc); }
.small { font-size: 13px; color: var(--muted); }
.credit { max-width: 560px; margin: 0 auto; padding: 0 16px 32px; font-size: 12px; color: var(--muted); text-align: center; }
#globe .cross circle, #globe .cross path { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.globe-tools[hidden] { display: none; }
.tile.n { background: none; color: var(--muted); border: 1.5px dashed var(--line); }
#globe .arc.half { stroke-dasharray: 5 5; }
.tile .dir { display: inline-block; font-style: normal; margin-left: 4px; }
.respin { position: absolute; top: 8px; right: 10px; padding: 4px 11px; font-weight: 600; }