/* Where On Earth. Palette checked with /root/bin/contrast before a line of this was written:
   ink on sea 15.12:1, ink on panel 12.91:1, muted on sea 8.90:1, muted on panel 7.59:1,
   accent on sea 12.06:1, good on panel 8.84:1, sea on accent 12.06:1. All AAA. */
:root{
  --sea:#0d1b2a; --panel:#16293b; --ink:#e9f0f6; --muted:#a8bccd;
  --accent:#ffd166; --good:#5ee08a; --line:#2a4258;
  --r:14px; --pad:clamp(.8rem,2.5vw,1.4rem);
  --fast:.18s cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
/* ⛔ Keep this. `hidden` only sets display:none from the UA sheet, so ANY author rule that
   sets display (.over is display:grid) silently beats it and leaves the element laid out.
   That shipped a full-screen overlay that swallowed every click while looking dismissed. */
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--sea); color:var(--ink);
  font:400 clamp(.95rem,.4vw + .85rem,1.05rem)/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100svh; display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%;
}
h1,h2{margin:0; line-height:1.2}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* ---------- top bar ---------- */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.6rem var(--pad); border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{font-weight:700; letter-spacing:-.01em}
.brand em{font-style:normal; color:var(--accent)}
.meters{display:flex; gap:.4rem; flex-wrap:wrap}
.meter{
  background:var(--sea); border:1px solid var(--line); border-radius:999px;
  padding:.3rem .7rem; font-size:.82rem; white-space:nowrap;
}
.meter-k{color:var(--muted); margin-right:.3rem}
.meter-s{color:var(--muted)}
.meter b{font-variant-numeric:tabular-nums}
.best b{color:var(--accent)}

/* ---------- layout ---------- */
#game{
  flex:1; display:grid; gap:var(--pad); padding:var(--pad);
  grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr); align-items:start;
}
@media (max-width:900px){ #game{grid-template-columns:minmax(0,1fr)} }

/* ---------- the photo ---------- */
.shot{margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--panel); border:1px solid var(--line)}
.shot img{
  display:block; width:100%; height:clamp(240px,64vh,760px); object-fit:cover; background:var(--panel);
}
.credit{
  position:absolute; left:0; right:0; bottom:0; padding:.5rem .7rem;
  font-size:.72rem; line-height:1.4; color:var(--muted);
  /* the credit is one long sentence of third-party metadata; cap its measure */
  max-width:72ch;
  background:linear-gradient(to top,rgba(13,27,42,.92),rgba(13,27,42,0));
}
.credit a{color:var(--muted); text-decoration:underline}

/* ---------- map ---------- */
.mapwrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad)}
.maphead{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.6rem}
.maphead h2{font-size:1rem; font-weight:600}
.map{
  position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:var(--sea); aspect-ratio:2/1;
}
.mapimg{display:block; width:100%; height:100%; object-fit:fill}
/* The hit area is a real button so it is keyboard reachable and announced. */
.hit{position:absolute; inset:0; width:100%; height:100%; background:none; border:0; padding:0; cursor:crosshair}
.pin{
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  border:2px solid var(--sea); pointer-events:none; z-index:2;
}
.pin.guess{background:var(--accent)}
.pin.truth{background:var(--good)}
.link{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}
.link line{stroke:var(--accent); stroke-width:4; stroke-dasharray:10 8; opacity:.85; vector-effect:non-scaling-stroke}

/* expanded map: same element, bigger, so there is only ever one map to keep in sync */
.mapwrap.big{position:fixed; inset:var(--pad); z-index:40; overflow:auto; box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.mapwrap.big .map{aspect-ratio:2/1; max-height:70svh; margin-inline:auto}

/* ---------- buttons ---------- */
.primary,.ghost{
  font:inherit; font-weight:600; border-radius:10px; cursor:pointer;
  transition:transform var(--fast), background var(--fast), opacity var(--fast);
}
.primary{
  display:block; width:100%; margin-top:.7rem; padding:.8rem 1rem;
  background:var(--accent); color:var(--sea); border:0;
}
.primary:hover:not(:disabled){transform:translateY(-1px)}
.primary:disabled{
  /* NOT opacity: fading gold on gold measured 1.2:1 and the detector caught it.
     An explicit disabled palette is 9.05:1 (ink on line), verified with /root/bin/contrast. */
  background:var(--line); color:var(--ink); cursor:not-allowed;
}
.ghost{
  background:none; color:var(--muted); border:1px solid var(--line); padding:.35rem .7rem; font-size:.8rem;
}
.ghost:hover{color:var(--ink)}

/* ---------- result ---------- */
.result{margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line)}
.rline{margin:.15rem 0}
.rline b{color:var(--accent)}
.result .rline:first-child b{color:var(--ink)}
.dot{color:var(--muted); margin:0 .45rem}

/* ---------- end card ---------- */
.over{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(13,27,42,.86); padding:var(--pad);
}
.overcard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.2rem,4vw,2rem); text-align:center; max-width:26rem; width:100%;
}
.big{font-size:clamp(2.6rem,9vw,3.6rem); font-weight:800; color:var(--accent); margin:.3rem 0; font-variant-numeric:tabular-nums}
.sub{color:var(--muted); margin:.2rem 0 1rem}

/* ---------- footer ---------- */
.foot{
  padding:var(--pad); border-top:1px solid var(--line);
  color:var(--muted); font-size:.78rem; text-align:center;
}
.foot p{margin:.2rem auto; max-width:58ch}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .primary:hover:not(:disabled){transform:none}
}