/* Ace Geo — the daily map game. Standalone: these pages do not load style.css,
   so the Ace palette is restated here rather than inherited. */
:root {
  --geo-bg: #0a0e1a;
  --geo-card: #111827;
  --geo-card-2: #0c1220;
  --geo-border: #1e3050;
  --geo-gold: #f0c040;
  --geo-gold-ink: #3a2c00;
  --geo-blue: #1e5af0;
  --geo-blue-light: #5d8bff;
  --geo-green: #4ade80;
  --geo-yellow: #fbbf24;
  --geo-red: #e8503a;
  --geo-text: #ffffff;
  --geo-soft: #c3cddc;
  --geo-muted: #94a3b8;
  --geo-mono: "JetBrains Mono", ui-monospace, "Geist Mono", "Space Mono", Menlo, Consolas, monospace;
  /* Gold target with a dark outline so it reads on bright imagery. */
  --geo-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%230a0e1a' stroke-width='4.5' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f0c040' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.8' fill='%23f0c040'/%3E%3C/svg%3E") 16 16;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
body.geo {
  background: var(--geo-bg); color: var(--geo-text); font-family: var(--geo-mono);
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
body.geo-play { height: 100vh; height: 100dvh; overflow: hidden; }
a { color: var(--geo-blue-light); }
button { font: inherit; }

/* --- top bar --------------------------------------------------------------- */
.geo-top {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--geo-border); flex: none;
}
.geo-menu-btn {
  background: none; border: 0; color: var(--geo-gold); padding: 6px; margin: -6px;
  cursor: pointer; display: flex; border-radius: 6px;
}
.geo-menu-btn:hover, .geo-menu-btn:focus-visible { background: rgba(240, 192, 64, .12); outline: none; }
.geo-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--geo-gold);
  font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.geo-brand img { width: 30px; height: 30px; }
.geo-brand b { color: var(--geo-text); font-weight: 800; }
.geo-date { margin-left: auto; color: var(--geo-gold); font-size: 16px; white-space: nowrap; }

.geo-scrim { position: fixed; inset: 0; background: rgba(4, 7, 14, .6); z-index: 40; }
.geo-menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); z-index: 50;
  background: var(--geo-card-2); border-right: 1px solid var(--geo-border);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.geo-menu h2 { margin: 0 0 12px 8px; font-size: 20px; color: var(--geo-gold); }
.geo-menu a, .geo-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--geo-text); text-decoration: none; font-size: 16px; padding: 12px 10px; border-radius: 8px;
}
.geo-menu a:hover, .geo-menu button:hover, .geo-menu a:focus-visible, .geo-menu button:focus-visible {
  background: rgba(255, 255, 255, .06); outline: none; }
.geo-menu a[aria-current="page"] { color: var(--geo-gold); }
.geo-menu hr { border: 0; border-top: 1px solid var(--geo-border); margin: 8px 0; width: 100%; }
.geo-menu .geo-menu-user { color: var(--geo-muted); font-size: 14px; padding: 6px 10px; }

/* --- question strip -------------------------------------------------------- */
.geo-playarea { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.geo-q { display: flex; gap: 12px; padding: 10px 12px 12px; flex: none; }
.geo-score {
  border: 2px solid var(--geo-gold); border-radius: 8px; padding: 8px 14px; min-width: 92px;
  text-align: center; display: flex; flex-direction: column; justify-content: center;
}
.geo-score small { color: var(--geo-gold); font-size: 13px; letter-spacing: 1.5px; }
.geo-score span { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.geo-clue { flex: 1; min-width: 0; }
.geo-clue-bar {
  background: var(--geo-gold); color: var(--geo-gold-ink); font-size: 14px; font-weight: 700;
  text-align: center; border-radius: 4px; padding: 4px 8px;
}
.geo-clue p { margin: 10px 4px 0; font-size: 20px; line-height: 1.35; font-weight: 600; }

/* --- map ------------------------------------------------------------------- */
.geo-mapwrap { flex: 1; min-height: 0; position: relative; background: var(--geo-bg); }
#geoMap { position: absolute; inset: 0; }
/* Aiming is a different action from moving: a target while choosing, the
   closed hand only while a drag is under way, the open hand once locked in. */
#geoMap .maplibregl-canvas-container.maplibregl-interactive { cursor: var(--geo-target), crosshair; }
#geoMap.geo-locked .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
#geoMap.geo-dragging .maplibregl-canvas-container.maplibregl-interactive { cursor: grabbing; }
#geoMap .maplibregl-ctrl-attrib { font-family: system-ui, sans-serif; }

.geo-chip {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 5;
  background: rgba(10, 14, 26, .9); border: 1px solid var(--geo-border); border-radius: 10px;
  padding: 8px 18px; font-size: 20px; font-weight: 700; text-align: center;
  max-width: calc(100% - 24px); pointer-events: none;
}
/* The map credit, done the way GeoSports does it: no box, just a faint "i" in
   the corner that shows the credits when tapped. The imagery and border data
   are licensed on condition their owners are credited on the map, so it can be
   made quiet but not taken away. */
.geo-credit-btn {
  position: absolute; right: 6px; bottom: 6px; z-index: 4; width: 26px; height: 26px; padding: 0;
  border: 0; background: none; color: #fff; opacity: .3; cursor: pointer;
  font: italic 700 14px/1 Georgia, "Times New Roman", serif;
}
.geo-credit-btn:hover, .geo-credit-btn:focus-visible, .geo-credit-btn[aria-expanded="true"] { opacity: .85; outline: none; }
.geo-credit {
  position: absolute; right: 8px; bottom: 38px; z-index: 6; max-width: min(300px, calc(100% - 16px));
  background: rgba(10, 14, 26, .94); border: 1px solid var(--geo-border); border-radius: 8px;
  padding: 8px 10px; color: var(--geo-soft); font: 400 11px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.geo-credit a { color: var(--geo-soft); }
.geo-notice {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6;
  background: rgba(10, 14, 26, .94); border: 1px solid var(--geo-red); color: var(--geo-text);
  border-radius: 10px; padding: 10px 16px; font-size: 15px; text-align: center;
  max-width: calc(100% - 24px);
}

.geo-target { width: 30px; height: 30px; position: relative; pointer-events: none; }
.geo-target i {
  position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid #fff;
  background: rgba(30, 90, 240, .35); box-shadow: 0 0 0 2px var(--geo-blue) inset;
  animation: geo-land .35s ease-out;
}
.geo-target i::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--geo-blue);
}
.geo-target i::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--geo-blue);
  animation: geo-pulse 1.4s ease-out infinite;
}
.geo-pin { width: 22px; height: 30px; pointer-events: none; }
.geo-pin i {
  display: block; width: 20px; height: 20px; margin: 2px 1px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--geo-green); border: 2.5px solid #fff;
  animation: geo-drop .45s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes geo-land  { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes geo-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
@keyframes geo-drop  { from { transform: translateY(-26px) rotate(-45deg); opacity: 0; }
                       to   { transform: translateY(0) rotate(-45deg); opacity: 1; } }

/* --- footer ---------------------------------------------------------------- */
.geo-foot { flex: none; padding: 14px 16px; border-top: 1px solid var(--geo-border); }
.geo-hint { margin: 0; font-size: 16px; color: var(--geo-muted); text-align: center; }
.geo-confirm { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; font-size: 14px; color: var(--geo-muted); cursor: pointer; }
.geo-confirm input { width: 17px; height: 17px; accent-color: var(--geo-gold); }
/* Holds the footer at roughly the reveal panel's height, so the map has
   finished resizing before the camera frames the two pins. */
.geo-revealing { min-height: 168px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--geo-muted); }
.geo-reveal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 10px; font-size: 20px; }
.geo-reveal-row #geoDist { font-size: 16px; color: var(--geo-muted); white-space: nowrap; }
.geo-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px;
  vertical-align: -1px; background: var(--geo-muted); }
.geo-card { background: var(--geo-card); border-radius: 8px; padding: 12px 14px; }
.geo-card b { font-size: 18px; }
.geo-card p { margin: 4px 0 0; color: var(--geo-soft); font-size: 15px; line-height: 1.45; }

.geo-btn {
  display: block; width: 100%; border: 0; border-radius: 999px; padding: 13px 18px; margin-top: 10px;
  font-size: 17px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.geo-btn:hover { filter: brightness(1.08); }
.geo-btn:active { transform: scale(.99); }
.geo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.geo-btn-gold { background: var(--geo-gold); color: var(--geo-gold-ink); }
.geo-btn-blue { background: var(--geo-blue); color: #fff; }
.geo-btn-outline { background: transparent; color: var(--geo-gold); box-shadow: 0 0 0 1.5px var(--geo-gold) inset; }
.geo-btn-idle { background: transparent; color: var(--geo-muted); box-shadow: 0 0 0 1.5px var(--geo-border) inset; cursor: default; }
.geo-btn-idle:hover { filter: none; }

.geo-t-perfect { color: var(--geo-gold); }
.geo-t-great { color: var(--geo-green); }
.geo-t-ballpark { color: var(--geo-yellow); }
.geo-t-miles_off { color: var(--geo-red); }
.geo-bg-perfect { background: var(--geo-gold); }
.geo-bg-great { background: var(--geo-green); }
.geo-bg-ballpark { background: var(--geo-yellow); }
.geo-bg-miles_off { background: var(--geo-red); }

/* --- results, leaderboard, empty state ------------------------------------- */
.geo-page { flex: 1; overflow-y: auto; padding: 22px 16px 40px; display: flex; flex-direction: column;
  align-items: center; }
.geo-panel {
  width: 100%; max-width: 460px; background: linear-gradient(180deg, #131c2e, var(--geo-card));
  border: 1px solid var(--geo-border); border-radius: 18px; padding: 22px 20px;
}
.geo-res-meta { margin: 0; text-align: center; color: var(--geo-muted); font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; }
.geo-res-total { margin: 8px 0 4px; text-align: center; font-size: 46px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.geo-res-total small { font-size: 20px; color: var(--geo-muted); font-weight: 600; }
.geo-res-markers { margin: 0 0 16px; text-align: center; font-size: 24px; letter-spacing: 6px; }
.geo-bar { background: #1e2a3f; border-radius: 5px; margin-bottom: 7px; overflow: hidden; position: relative;
  height: 30px; }
.geo-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; min-width: 6px; }
.geo-bar span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.geo-bar .geo-bar-q { left: 10px; }
.geo-bar .geo-bar-p { right: 10px; }
.geo-res-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.geo-res-actions .geo-btn { margin-top: 0; }
.geo-res-note { margin: 14px 0 0; text-align: center; color: var(--geo-muted); font-size: 14px; line-height: 1.5; }
.geo-more { margin: 22px 0 0; text-align: center; font-size: 15px; line-height: 1.9; color: var(--geo-muted); }
.geo-more a { color: var(--geo-gold); text-decoration: none; }
.geo-more a:hover { text-decoration: underline; }

.geo-h1 { margin: 0 0 4px; font-size: 24px; text-align: center; }
.geo-daynav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 16px;
  color: var(--geo-gold); font-size: 16px; }
.geo-daynav a, .geo-daynav span.off { width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; text-decoration: none; font-size: 20px;
  color: var(--geo-gold); border: 1px solid var(--geo-border); }
.geo-daynav span.off { opacity: .3; }
.geo-board { width: 100%; border-collapse: collapse; font-size: 16px; }
.geo-board td { padding: 10px 6px; border-top: 1px solid var(--geo-border); }
.geo-board tr:first-child td { border-top: 0; }
.geo-board .r { width: 38px; color: var(--geo-muted); font-variant-numeric: tabular-nums; }
.geo-board .m { letter-spacing: 2px; font-size: 14px; white-space: nowrap; }
.geo-board .t { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.geo-board tr.me td { background: rgba(240, 192, 64, .1); color: var(--geo-gold); }
.geo-board tr.me td:first-child { border-radius: 8px 0 0 8px; }
.geo-board tr.me td:last-child { border-radius: 0 8px 8px 0; }
.geo-pinned { margin-bottom: 12px; border: 1px solid var(--geo-gold); border-radius: 10px; padding: 2px 8px; }
.geo-empty-msg { text-align: center; color: var(--geo-muted); font-size: 16px; line-height: 1.6; margin: 8px 0; }

/* --- how scoring works ----------------------------------------------------- */
dialog.geo-dialog {
  background: var(--geo-card-2); color: var(--geo-text); border: 1px solid var(--geo-border);
  border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  font-family: var(--geo-mono);
}
dialog.geo-dialog::backdrop { background: rgba(4, 7, 14, .7); }
.geo-dialog-body { padding: 20px 20px 22px; overflow-y: auto; }
.geo-dialog h2 { margin: 0 0 12px; font-size: 22px; color: var(--geo-gold); }
.geo-dialog h3 { margin: 18px 0 6px; font-size: 16px; color: var(--geo-gold); }
.geo-dialog p, .geo-dialog li { font-size: 15px; line-height: 1.55; color: var(--geo-soft); }
.geo-dialog ul { margin: 0; padding-left: 20px; }
.geo-dialog table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 6px; }
.geo-dialog td, .geo-dialog th { text-align: left; padding: 6px 8px; border-top: 1px solid var(--geo-border);
  color: var(--geo-soft); font-weight: 400; }
.geo-dialog th { color: var(--geo-muted); border-top: 0; }

/* --- phones ---------------------------------------------------------------- */
@media (max-width: 520px) {
  .geo-top { padding: 8px 12px; }
  .geo-brand { font-size: 17px; }
  .geo-brand img { width: 26px; height: 26px; }
  .geo-date { font-size: 14px; }
  .geo-q { gap: 8px; padding: 8px 10px 10px; }
  .geo-score { min-width: 74px; padding: 6px 8px; }
  .geo-score small { font-size: 12px; }
  .geo-score span { font-size: 28px; }
  .geo-clue-bar { font-size: 13px; }
  .geo-clue p { font-size: 17px; margin-top: 8px; }
  .geo-answered .geo-clue p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .geo-foot { padding: 10px 12px; }
  .geo-hint { font-size: 15px; }
  .geo-revealing { min-height: 176px; }
  .geo-reveal-row { font-size: 17px; margin-bottom: 8px; }
  .geo-reveal-row #geoDist { font-size: 15px; }
  .geo-card { padding: 10px 12px; max-height: 24vh; overflow-y: auto; }
  .geo-card b { font-size: 16px; }
  .geo-card p { font-size: 14px; }
  .geo-chip { font-size: 17px; bottom: 44px; }
  .geo-btn { font-size: 16px; padding: 12px 16px; }
  .geo-res-total { font-size: 40px; }
  .geo-res-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-target i, .geo-target i::after, .geo-pin i { animation: none; }
}