:root{
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f8fafc;
  --green:#16a34a;
  --amber:#d97706;
  --red:#dc2626;
  --shadow:0 6px 24px rgba(15,23,42,.12);
  font-family:Arial,Helvetica,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink)}
#map{position:absolute;inset:0}
.hidden{display:none !important}
.sub{color:var(--muted);font-size:14px;line-height:1.55}
.kicker{color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}

/* ============ Full-screen cards ============ */
.screen{
  position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,42,.45);
}
.card{
  width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:28px;box-shadow:var(--shadow);
}
.card.center{text-align:center}
.card h1{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:4px 0 8px}
.card h2.kicker{margin-bottom:6px}
.lbl{display:block;font-size:13px;font-weight:700;color:#374151;margin:18px 0 8px}

select{
  width:100%;padding:12px;font-size:15px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);cursor:pointer;outline:none;font-family:inherit;
}
select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}

/* buttons */
.primary,.secondary,.ghost{
  width:100%;padding:12px 16px;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;border:1px solid transparent;transition:.12s;
}
.primary{background:var(--blue);color:#fff;margin-top:20px}
.primary:hover{background:var(--blue-dark)}
.secondary{background:#fff;color:var(--ink);border-color:var(--line);margin-top:12px}
.secondary:hover{border-color:#cbd5e1}
.secondary.active{border-color:var(--blue);color:var(--blue);background:#eff6ff}
.ghost{background:#f1f5f9;color:#334155;margin-top:20px}
.ghost:hover{background:#e2e8f0}
.row{display:flex;gap:12px}
.row .primary,.row .ghost{margin-top:22px}

.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.count-grid button{
  padding:14px 0;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
  font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s;
}
.count-grid button:hover{border-color:#cbd5e1}
.count-grid button.active{border-color:var(--blue);color:var(--blue);background:#eff6ff}

.readout{margin:18px 0;padding:22px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}
.readout .lbl-in{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.readout .big{font-size:42px;font-weight:800;color:var(--blue);line-height:1.15;margin-top:4px}
.readout .sub2{font-size:13px;color:var(--muted);margin-top:4px}

/* ============ In-game top bar ============ */
#bar{
  position:absolute;top:0;left:0;right:0;z-index:40;height:46px;
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:14px;
  background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);
  box-shadow:0 1px 6px rgba(15,23,42,.07);backdrop-filter:blur(6px);
}
.bar-left{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#6b7280;white-space:nowrap}
.bar-left .sep{width:1px;height:16px;background:var(--line)}
#score-text{color:var(--blue)}

/* center: the address being asked, inline (no floating card) */
.bar-center{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.find-tag{font-size:11px;font-weight:700;color:#fff;background:var(--blue);padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em;flex:none}
#addr-main{font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#addr-sub{font-size:13px;color:var(--muted);white-space:nowrap;flex:none}
.bar-action{display:flex;align-items:center;gap:10px;flex:none;margin-left:4px}
.bar-action .hint{color:var(--muted);font-size:13px}
.bar-action .result{font-size:14px;font-weight:800;white-space:nowrap}
.bar-action button{
  padding:6px 14px;border:none;border-radius:7px;background:var(--blue);color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.bar-action button:hover{background:var(--blue-dark)}

.bar-right{display:flex;align-items:center;gap:7px;flex:none}
@media(max-width:820px){ #addr-sub,.find-tag{display:none} .bar-btn{padding:7px 9px} }
.bar-btn{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#374151;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s;white-space:nowrap;
}
.bar-btn:hover{border-color:#cbd5e1;background:#f8fafc}
.bar-btn.active{border-color:var(--blue);color:var(--blue);background:#eff6ff}
.bar-btn.danger:hover{border-color:var(--red);color:var(--red);background:#fef2f2}

/* popovers */
.menu{position:relative}
.pop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:50;min-width:210px;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:10px;
}
.pop-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px 8px}
.pop label{display:flex;align-items:center;gap:10px;padding:8px 6px;font-size:14px;cursor:pointer;border-radius:6px}
.pop label:hover{background:#f8fafc}
.pop input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.pop-divider{height:1px;background:var(--line);margin:6px 4px}
.pop-opt{
  display:block;width:100%;text-align:left;padding:9px 10px;border:none;border-radius:6px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;
}
.pop-opt:hover{background:#f8fafc}
.pop-opt.active{background:#eff6ff;color:var(--blue)}

/* ============ Leaderboard ============ */
.linkbtn{display:block;width:100%;margin-top:14px;background:none;border:none;color:var(--muted);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.linkbtn:hover{color:var(--ink);text-decoration:underline}
#lb-entry{margin-top:8px}
.lb-entry-row{display:flex;gap:8px}
.lb-entry-row input{
  flex:1;padding:11px 12px;font-size:15px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;outline:none;color:var(--ink);
}
.lb-entry-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.lb-entry-row .primary{width:auto;margin-top:0;padding-left:18px;padding-right:18px}
.saved{color:var(--green);font-weight:700;font-size:14px;margin-top:10px}
.lb-filter{margin-bottom:4px}
.lb-list{max-height:48vh;overflow-y:auto;margin:8px 0 4px;border:1px solid var(--line);border-radius:10px}
.lb-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.lb-row:last-child{border-bottom:none}
.lb-row .rankno{width:26px;font-weight:800;color:var(--muted);text-align:right;flex:none}
.lb-row.me{background:#eff6ff}
.lb-row .who{flex:1;min-width:0;font-weight:700;white-space:normal;overflow-wrap:anywhere}
.lb-row .meta{color:var(--muted);font-size:12px;flex:none}
.lb-row .pts{font-weight:800;color:var(--blue);flex:none;min-width:56px;text-align:right}
.lb-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:14px}
.lb-row .rankno.gold{color:#d4a017}.lb-row .rankno.silver{color:#9aa3af}.lb-row .rankno.bronze{color:#b06b3a}

/* ============ Map markers ============ */
/* visuals live on a child so the CSS animation never overrides MapLibre's
   position transform on the root marker element. */
.mk{width:0;height:0}
.mk .dot{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.mk.guess .dot{width:18px;height:18px;background:var(--blue)}
.mk.guess .ring{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;border:2px solid var(--blue);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.mk.target .dot{width:24px;height:24px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
@keyframes ping{0%{opacity:.85;width:18px;height:18px}100%{opacity:0;width:52px;height:52px}}

.maplibregl-ctrl-attrib{font-size:10px}

/* auto-assigned leaderboard call sign */
.lb-entry-row .callsign{
  flex:1;display:flex;align-items:center;padding:11px 12px;font-size:15px;font-weight:700;
  border:1px dashed var(--line);border-radius:9px;background:#f8fafc;color:var(--ink);white-space:normal;
}
.lb-entry-row .ghost{width:auto;margin-top:0;padding:11px 14px}

/* ============ Mobile / phones ============ */
/* The in-game bar can't fit status + address + action + 5 controls in one row on
   a phone, so it reflows: status and controls stay pinned at the top, and the
   address-to-find plus the primary action move to a fixed, thumb-reachable
   bottom bar. Everything stays visible and tappable. */
@media (max-width:640px){
  /* no backdrop-filter here: a filter would make #bar the containing block for
     the fixed bottom bar below, pinning it to the bar instead of the viewport */
  #bar{height:auto;flex-wrap:wrap;padding:6px 8px;gap:6px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .bar-left{font-size:12px;gap:8px}
  .bar-right{order:2;flex-basis:100%;justify-content:center;flex-wrap:wrap;gap:6px}
  .bar-btn{padding:8px 10px;font-size:13px}

  /* Detail/Map popovers become full-width sheets anchored under the whole bar
     (with .menu made static, .pop resolves to the positioned #bar). */
  .menu{position:static}
  .pop{left:8px;right:8px;top:calc(100% + 6px);min-width:0;max-width:none;width:auto}

  /* address being asked + the action button -> fixed bottom bar */
  .bar-center{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;overflow:visible;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(15,23,42,.12);backdrop-filter:blur(6px);
    flex-wrap:wrap;justify-content:center;row-gap:6px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .find-tag{display:inline-block}
  #addr-main{white-space:normal;overflow:visible;text-overflow:clip;min-width:0;
    text-align:center;font-size:18px;line-height:1.2}
  #addr-sub{display:inline;white-space:normal;text-align:center}
  .bar-action{flex-basis:100%;justify-content:center;margin:0;gap:8px}
  .bar-action .hint{font-size:14px}
  .bar-action button{flex:1;min-height:46px;font-size:15px;padding:12px 16px;border-radius:9px}

  /* keep the required MapLibre/CARTO/OSM attribution above the bottom bar */
  .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{bottom:114px}

  /* let tall overlay cards (results/leaderboard) scroll on short screens */
  .screen{align-items:safe center;overflow-y:auto}
}