/* Look and motion taken from the reference map page (tokens, backdrop, hero, gate, buttons, panel, icon buttons);
   the town panel's tabs, chips and request form are ours, in the same system. */
:root{
  --bg:#07090d; --ink:#effcff; --muted:#a3b3c2; --faint:#76869a; --title-dim:#7d8ea0;
  --neon:#8fb8d8; --neon-hi:#e6eef5; --neon-lo:#3d5a73; --gold:#d9c08a;
  --glass:rgba(12,15,22,.88); --panel:rgba(12,15,22,.92); --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.08);
  --ok:#8fe0a8; --warn:#f0c674; --err:#ff9db0;
  --ring:0 0 0 3px rgba(143,184,216,.18);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.3,1.6,.5,1);
  --disp:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
/* One screen, never scrolls: the gate, then the map. */
html, body{ height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
html{ background:var(--bg); }
body{ color:var(--ink); font-family:var(--sans); background:transparent; -webkit-font-smoothing:antialiased; }

/* ---------- Backdrop: gradient, haze, the map canvas, vignette ---------- */
.sky{ position:fixed; inset:0; z-index:-4; background:
  radial-gradient(80% 60% at 50% 60%, #111823 0%, rgba(17,24,35,0) 70%),
  linear-gradient(180deg,#06080c 0%,#0a0d13 100%); }
.haze{ position:fixed; inset:-20%; z-index:-3; filter:blur(70px); opacity:.12; pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%, rgba(127,216,240,0), rgba(127,216,240,.22) 70deg, rgba(157,123,255,.2) 150deg, rgba(224,138,208,.18) 230deg, rgba(127,216,240,0) 320deg);
  animation:haze 30s ease-in-out infinite alternate; }
@keyframes haze{ to{ transform:rotate(40deg) scale(1.1); } }
#map{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.veil{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4,5,8,.8) 100%); }

/* ---------- Hero + password gate ---------- */
.hero{ position:fixed; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; padding:max(72px,13svh) 16px 40px; text-align:center;
  pointer-events:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.hero > *{ pointer-events:auto; }
.hero.out{ opacity:0; transform:translateY(-28px); }
.hero.out > *{ pointer-events:none; }
.eyebrow{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--neon); margin:0 0 18px;
  opacity:0; animation:rise 1.2s .2s var(--ease) forwards; }
h1{ font-family:var(--disp); font-weight:700; font-size:clamp(36px,7vw,84px); line-height:1; margin:0; letter-spacing:-.035em; }
h1 .ch{ display:inline-block; color:var(--neon-hi); opacity:0; transform:translateY(.25em);
  animation:letter .9s var(--ease) forwards; animation-delay:calc(.2s + var(--i) * .03s); }
h1 .ch.p{ color:var(--title-dim); font-weight:500; }
h1 .w{ display:inline-block; white-space:nowrap; }
@keyframes letter{ to{ opacity:1; transform:none; filter:none; } }
.tag{ margin:16px auto 0; max-width:34ch; color:var(--muted); font-size:clamp(14px,2vw,16px); line-height:1.7; opacity:0; animation:rise 1.2s 1.2s var(--ease) forwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.gate{ position:relative; margin-top:30px; width:min(460px,100%); display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; text-align:left;
  padding:18px; border-radius:18px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; animation:rise 1.2s 1.5s var(--ease) forwards; }
/* while the page checks for a live session the gate stays out of sight */
.checking .gate{ visibility:hidden; }
.gate .msg{ grid-column:1 / -1; min-height:0; font-size:13px; color:var(--err); }
.gate .msg:empty{ display:none; }
.gate.bad{ animation:shake .5s; opacity:1; }
@keyframes shake{ 20%,60%{ transform:translateX(-5px); } 40%,80%{ transform:translateX(5px); } }

/* ---------- Form bits ---------- */
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field span{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.field input{ width:100%; min-width:0; font:inherit; font-size:16px; color:var(--ink); background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:12px; padding:14px 15px; font-variant-numeric:tabular-nums; transition:border-color .25s, box-shadow .25s, background .25s; }
.field input:focus{ outline:none; border-color:var(--neon); background:rgba(255,255,255,.06); box-shadow:var(--ring); }
.go{ height:50px; padding:0 24px; border:0; border-radius:12px; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:0; color:#0b0f14;
  background:var(--neon-hi); transition:transform .2s, filter .2s; position:relative; overflow:hidden; }
.go:hover{ background:#fff; }
.go:active{ transform:translateY(0) scale(.98); }
.go:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(143,184,216,.45); }
.go[disabled]{ cursor:wait; }
.go .spin{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; gap:7px; }
.go .spin i{ width:7px; height:7px; border:1.5px solid #0b0f14; transform:rotate(45deg); animation:hop 1s cubic-bezier(.5,0,.5,1) infinite; }
.go .spin i:nth-child(2){ animation-delay:.15s; } .go .spin i:nth-child(3){ animation-delay:.3s; }
@keyframes hop{ 0%,60%,100%{ transform:translateY(0) rotate(45deg); background:transparent; } 30%{ transform:translateY(-6px) rotate(45deg); background:#0b0f14; } }
.go.busy .lbl{ visibility:hidden; } .go.busy .spin{ display:flex; }
/* a light runs along the bottom edge of the box while it works */
.gate.busy::after, .panel-in.busy::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--neon-hi),transparent) 0 0/40% 100% no-repeat; animation:sweep 1.1s ease-in-out infinite; }
@keyframes sweep{ from{ background-position:-60% 0; } to{ background-position:160% 0; } }
.gate.busy input{ color:var(--muted); }

/* ---------- Icon button ---------- */
.rb{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); background:rgba(12,15,22,.85); color:var(--neon-hi); cursor:pointer; padding:0; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .2s, opacity .2s; flex-shrink:0; }
.rb:hover{ border-color:var(--neon); }
.rb:focus-visible{ outline:none; border-color:var(--neon); box-shadow:var(--ring); }
.rb svg{ width:18px; height:18px; }
.rb[disabled]{ opacity:.35; cursor:default; border-color:var(--line); }

/* ---------- The map layer (after login) ---------- */
.layer{ position:fixed; inset:0; z-index:1; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.layer.hot{ cursor:pointer; } .layer.dragging{ cursor:grabbing; }
.farm-buttons{ position:absolute; inset:0; pointer-events:none; }
.farm-btn{ position:absolute; left:0; top:0; width:56px; height:64px; padding:0; margin:0; border:1px solid transparent; border-radius:12px; background:transparent; color:transparent;
  cursor:pointer; pointer-events:auto; transition:border-color .25s, box-shadow .25s; }
.farm-btn:focus{ outline:none; }
.farm-btn:focus-visible{ border-color:var(--neon); box-shadow:var(--ring); }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ui{ position:fixed; inset:0; z-index:2; pointer-events:none; }
.brand{ position:absolute; left:16px; bottom:18px; margin:0; color:var(--faint); font-size:12px; letter-spacing:.08em; font-variant-numeric:tabular-nums; animation:fadeIn .8s .4s var(--ease) both; }
.rz{ position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; pointer-events:auto; animation:fadeIn .8s .4s var(--ease) both; }
@keyframes fadeIn{ from{ opacity:0; } }
.map-msg{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; max-width:calc(100% - 32px); padding:14px 18px; border-radius:12px;
  background:var(--glass); border:1px solid var(--line); color:var(--muted); font-size:14px; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.map-msg:empty{ display:none; }

/* ---------- Panel (the town view) ---------- */
.panel{ position:relative; width:min(560px,100%); border-radius:14px; padding:1px;
  background:var(--line); box-shadow:0 24px 60px -24px rgba(0,0,0,.7); }
.panel-in{ position:relative; border-radius:13px; background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:26px; overflow:hidden; }
.ph{ position:relative; display:flex; align-items:center; gap:12px; margin:0 0 6px; min-width:0; }
.ph h2{ font-family:var(--disp); font-weight:600; font-size:clamp(19px,2.6vw,22px); margin:0; letter-spacing:-.01em; color:var(--neon-hi); min-width:0; overflow-wrap:anywhere; line-height:1.25; }
.ph .pin{ width:8px; height:8px; border-radius:50%; background:var(--neon); flex-shrink:0; }
.ph .rb{ margin-left:auto; }

.town{ position:fixed; z-index:5; right:32px; top:32px; bottom:32px; margin:auto 0; width:min(560px, calc(100% - 64px)); height:min(620px, calc(100% - 64px));
  display:flex; animation:sheetIn .3s var(--ease); }
@keyframes sheetIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.town .panel-in{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.meta{ display:flex; flex-wrap:wrap; gap:2px 16px; margin:0 0 0 20px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; flex:none; min-width:0; }
.meta span{ overflow-wrap:anywhere; }
.meta span:empty{ display:none; }
.tabs{ display:flex; gap:4px; margin:18px 0 14px; padding:3px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line); flex:none; }
.tab{ flex:1; min-width:0; height:36px; padding:0 6px; border:0; border-radius:9px; background:none; color:var(--muted); font:600 13px/1 var(--sans); cursor:pointer; transition:color .2s, background .2s; }
.tab:hover{ color:var(--neon-hi); }
.tab:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px var(--neon), var(--ring); }
.tab.sel{ background:var(--neon-hi); color:#0b0f14; }
.tabbody{ flex:1; min-height:0; display:flex; flex-direction:column; }
.pane{ flex:1; min-height:0; display:flex; flex-direction:column; }
.chips{ list-style:none; margin:0; padding:0; flex:1; min-height:0; overflow:hidden; display:grid; gap:6px; align-content:start; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
.chips li{ font-size:12.5px; line-height:1.2; padding:7px 10px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chips li.none{ color:var(--faint); border-style:dashed; }
.pager{ flex:none; height:48px; display:flex; align-items:flex-end; justify-content:center; gap:14px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.pager.off{ visibility:hidden; }
.pager .pgn{ min-width:44px; text-align:center; line-height:40px; }
.reqform{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; align-content:start; }
.reqform .go{ grid-column:1 / -1; }
.msg{ font-size:13px; color:var(--err); }
.reqform .msg{ grid-column:1 / -1; }
.msg:empty{ display:none; }
.msg.ok{ color:var(--ok); }

/* ---------- Phone: panel in the lower half, the map above it ---------- */
@media (max-width:700px){
  .hero{ padding:max(56px,9svh) 16px 40px; }
  .panel-in{ padding:20px 16px; }
  .town{ left:16px; right:16px; top:auto; bottom:16px; margin:0; width:auto; height:min(56svh, 520px); }
  .town .ph h2{ font-size:19px; }
  .meta{ margin-left:20px; font-size:12.5px; }
  .tabs{ margin:12px 0 10px; }
  .chips{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
  .chips li{ font-size:12px; padding:6px 8px; }
  .reqform{ gap:10px; }
  .reqform .field input{ padding:11px 12px; }
  .reqform .go{ height:46px; }
  .town-open .rz, .town-open .brand{ display:none; }
}
/* ---------- Short screens (landscape phones) ---------- */
@media (max-height:480px){
  .hero{ padding-top:24px; }
  .tag{ display:none; }
  .gate{ margin-top:16px; }
  .town{ top:12px; bottom:12px; right:12px; left:auto; margin:0; height:auto; width:min(460px, calc(100% - 24px)); }
  .panel-in{ padding:12px 14px; }
  .ph{ gap:10px; margin-bottom:2px; }
  .ph h2, .town .ph h2{ font-size:17px; }
  .ph .rb{ width:36px; height:36px; }
  .meta{ font-size:12px; }
  .tabs{ margin:8px 0; padding:2px; }
  .tab{ height:30px; font-size:12px; }
  .chips li{ padding:4px 8px; }
  .pager{ height:40px; }
  .pager .rb{ width:36px; height:36px; }
  .reqform{ gap:6px 10px; }
  .reqform .field{ gap:3px; }
  .reqform .field span{ font-size:9px; }
  .reqform .field input{ padding:6px 10px; }
  .reqform .go{ height:38px; }
  .rz{ gap:6px; bottom:12px; }
  .rz .rb{ width:36px; height:36px; }
  .town-open .rz, .town-open .brand{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; }
  h1 .ch,.eyebrow,.tag,.gate{ opacity:1; transform:none; filter:none; }
}