:root{ --ink:#1b1b18; --paper:#f6f1e4; --yellow:#ffd200; --black:#141414;
       --field:#4f9a3a; --field-dark:#2f6b22;
       --path:#7a5a2e; --shadow:0 6px 22px rgba(20,20,16,.22); }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:var(--ink);}
#map{position:fixed;inset:0;background:#e8eef0;}

header{position:fixed;top:0;left:0;right:0;padding:env(safe-area-inset-top) 14px 0;z-index:5;pointer-events:none;}
.brand{margin-top:12px;display:inline-block;background:var(--black);border-radius:14px;
  padding:9px 14px 10px;box-shadow:var(--shadow);border-left:6px solid var(--yellow);pointer-events:auto;}
.brand h1{font-family:"Archivo Expanded",Archivo,sans-serif;font-weight:900;color:#fff;
  font-size:clamp(15px,4.6vw,22px);line-height:1;letter-spacing:-.01em;margin:0;text-transform:uppercase;}
.brand h1 b{color:var(--yellow);}
.brand p{margin:4px 0 0;font-size:11px;font-weight:500;color:#cdc7b4;}

.legend{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom));
  background:var(--paper);border-radius:14px;box-shadow:var(--shadow);max-width:46vw;overflow:hidden;z-index:5;}
.legend summary{list-style:none;cursor:pointer;padding:11px 14px;font-family:Archivo,sans-serif;
  font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px;}
.legend summary::-webkit-details-marker{display:none;}
.legend summary .chev{margin-left:auto;font-size:11px;color:#88937c;transition:transform .2s;}
.legend[open] summary .chev{transform:rotate(180deg);}
.legend ul{margin:0;padding:0 14px 12px;list-style:none;display:grid;gap:7px;}
.legend li{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;}
.legend .sw{width:16px;height:16px;border-radius:5px;flex:0 0 auto;}

/* Field number badge */
.num{height:28px;padding:0 12px;border-radius:999px;display:grid;place-items:center;
  background:var(--black);color:var(--yellow);font:800 14px Archivo,sans-serif;letter-spacing:.01em;
  white-space:nowrap;border:2px solid var(--yellow);box-shadow:0 2px 9px rgba(20,20,16,.5);cursor:default;}

/* Stand / amenity labels (HTML markers — stay upright when the map rotates) */
.lbl{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.93);
  border-radius:999px;padding:3px 10px 3px 4px;box-shadow:0 2px 8px rgba(20,36,15,.25);
  font:500 12px Inter,sans-serif;white-space:nowrap;cursor:default;}
.lbl.strong{font-weight:600;font-size:13px;}
.lbl .ic{font-size:14px;line-height:1;padding-left:5px;}
.lbl .chip{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:12px;flex:0 0 auto;}

.maplibregl-ctrl-group{box-shadow:var(--shadow)!important;}

/* Search */
.search{position:fixed;top:calc(env(safe-area-inset-top) + 80px);left:50%;transform:translateX(-50%);
  width:min(360px, calc(100% - 24px));z-index:6;}
.search .bar{display:flex;align-items:center;gap:9px;background:var(--paper);border-radius:13px;
  padding:10px 13px;box-shadow:var(--shadow);}
.search .bar svg{flex:0 0 auto;}
.search input{border:none;background:transparent;outline:none;width:100%;font:500 14px Inter,sans-serif;color:var(--ink);}
.search input::placeholder{color:#8a937c;}
.search ul{display:none;list-style:none;margin:6px 0 0;padding:6px;background:var(--paper);
  border-radius:13px;box-shadow:var(--shadow);max-height:46vh;overflow:auto;}
.search.open ul{display:block;}
.search li{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;}
.search li:hover{background:rgba(20,36,15,.06);}
.search li.no-res{color:#8a937c;font-size:13px;cursor:default;justify-content:center;}
.search .r-ic{font-size:17px;width:24px;text-align:center;flex:0 0 auto;}
.search .r-tx{display:flex;flex-direction:column;line-height:1.25;}
.search .r-tx b{font:600 13.5px Inter,sans-serif;}
.search .r-tx span{font-size:11px;color:#6b7560;}

/* Search ping */
.ping{width:18px;height:18px;border-radius:50%;background:rgba(255,210,0,.55);
  animation:ping 1.5s ease-out forwards;}
@keyframes ping{0%{transform:scale(.4);opacity:.9;}
  100%{transform:scale(3.2);opacity:0;box-shadow:0 0 0 26px rgba(255,210,0,0);}}
@media (prefers-reduced-motion: reduce){ .ping{animation-duration:.01s;} }

/* Geolocation "you are here" dot — club yellow with a black ring */
.maplibregl-user-location-dot,
.maplibregl-user-location-dot::before{background-color:var(--yellow);}
.maplibregl-user-location-dot::after{border:2px solid var(--black);}

/* Toast */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 150px);transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;font:500 13px/1.45 Inter,sans-serif;
  box-shadow:var(--shadow);z-index:9;max-width:min(420px, calc(100% - 24px));text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.toast.show{opacity:1;}