/* The Kingdom of Arya — Royal Land Registry
   Night cartography: lapis ground, aged gold instruments. */

:root{
  --ink:      #0A0F24;   /* page / map background        */
  --land:     #151D3F;   /* free land                    */
  --panel:    #101736;   /* plates & panels              */
  --line:     #26305C;   /* hairlines                    */
  --gold:     #C9A227;   /* royal gold                   */
  --gold-hi:  #E7C554;   /* gold highlight               */
  --parch:    #EFE7D2;   /* parchment text               */
  --dim:      #9AA3C7;   /* secondary text               */

  --z-street: #3A415F;
  --z-alley:  #2E3552;
  --z-avenue: #4C5478;
  --z-hwy:    #5E668E;
  --z-park:   #1E5B45;
  --z-gov:    #7A611C;
  --z-water:  #1C4E7A;
  --z-plaza:  #56506E;
  --lot-avail:#1B2450;

  --pending:  #8A5A20;
  --danger:   #C05B4D;

  --f-display:'Cinzel', serif;
  --f-body:'Manrope', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--parch);
  font:15px/1.5 var(--f-body); overflow:hidden;
}
#app{position:fixed; inset:0}

#map{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none}
#map.grabbing{cursor:grabbing}
#map.claiming{cursor:crosshair}

/* ---------- plates -------------------------------------------------- */
.plate{
  position:absolute; z-index:5;
  background:linear-gradient(180deg, #131B3E 0%, #0E1530 100%);
  border:1px solid var(--line);
  border-top-color:#333E73;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  border-radius:10px;
}

.wordmark{
  top:18px; left:18px;
  display:flex; align-items:center; gap:14px;
  padding:12px 20px 12px 16px;
}
.wordmark .crown{color:var(--gold); display:flex}
.wordmark h1{
  margin:0; font:700 19px/1.15 var(--f-display);
  letter-spacing:.06em; color:var(--parch);
}
.wordmark .sub{
  margin:2px 0 0; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold);
}

.account{top:18px; right:18px; padding:10px 12px; display:flex; align-items:center; gap:8px}
.account .citizen{font-weight:700; margin:0 6px 0 4px; color:var(--gold-hi)}

.toolbar{
  top:96px; left:18px; padding:8px;
  display:flex; flex-direction:column; gap:6px;
}
.tool{
  display:flex; align-items:center; gap:9px;
  background:none; border:1px solid transparent; border-radius:7px;
  color:var(--dim); font:600 13px var(--f-body);
  padding:8px 12px; cursor:pointer; text-align:left;
}
.tool svg{flex:none}
.tool:hover{color:var(--parch)}
.tool.active{
  color:var(--ink); background:var(--gold);
  border-color:var(--gold-hi);
}
.price-tag{
  font:500 11px var(--f-mono); color:var(--gold);
  padding:4px 12px 2px; letter-spacing:.03em;
}

/* ---------- surveyor instrument ------------------------------------- */
.instrument{
  position:absolute; z-index:5; left:18px; bottom:18px;
  min-width:230px;
  background:linear-gradient(180deg,#141C40,#0D1430);
  border:1px solid var(--line); border-radius:10px;
  padding:12px 16px 10px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.instrument::before{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(201,162,39,.35); border-radius:7px;
  pointer-events:none;
}
.instrument .row{display:flex; justify-content:space-between; gap:18px; padding:1.5px 0}
.instrument .lbl{
  font:700 10px var(--f-body); letter-spacing:.18em; color:var(--gold);
}
.instrument .val{font:500 12.5px var(--f-mono); color:var(--parch)}
.instrument .zoomrow{border-top:1px solid var(--line); margin-top:5px; padding-top:5px}
.legend{
  margin-top:9px; padding-top:8px; border-top:1px solid var(--line);
  font-size:10.5px; color:var(--dim);
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center;
}
.legend i{
  width:9px; height:9px; border-radius:2px; display:inline-block;
  background:var(--c); margin-right:4px; vertical-align:-1px;
}

/* ---------- minimap -------------------------------------------------- */
#minimap{
  position:absolute; z-index:5; right:18px; bottom:44px;
  border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  cursor:pointer;
}

/* ---------- stats ribbon --------------------------------------------- */
.ribbon{
  position:absolute; z-index:5; right:18px; bottom:14px;
  font:500 11px var(--f-mono); color:var(--dim);
  letter-spacing:.02em;
}
.ribbon span{color:var(--gold)}

/* ---------- side panel ----------------------------------------------- */
.panel{
  position:absolute; z-index:8; top:76px; right:0; bottom:0;
  width:min(380px, 100%);
  background:linear-gradient(180deg,#121A3C,#0C1229);
  border-left:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(0,0,0,.5);
  padding:26px 24px; overflow-y:auto;
  animation:slideIn .22s ease-out;
}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){
  .panel{animation:none}
}
.panel-close{
  position:absolute; top:12px; right:14px;
  background:none; border:none; color:var(--dim);
  font-size:22px; cursor:pointer; line-height:1;
}
.panel-close:hover{color:var(--parch)}

.panel h2, .modal h2{
  font:700 17px/1.3 var(--f-display); letter-spacing:.05em;
  color:var(--gold-hi); margin:0 0 4px;
}
.panel .kicker, .modal .kicker{
  font:700 10px var(--f-body); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px;
}
.deed{
  border:1px solid var(--line); border-radius:8px;
  background:#0D142E; margin:14px 0; padding:12px 14px;
  font:500 12px/1.9 var(--f-mono); color:var(--parch);
}
.deed b{color:var(--gold)}
.deed .big{font-size:15px; color:var(--gold-hi)}
.owner-img{
  width:100%; border-radius:8px; border:1px solid var(--line); margin:10px 0;
  image-rendering:pixelated;
}
.note{font-size:12.5px; color:var(--dim); line-height:1.6}

/* ---------- buttons & forms ------------------------------------------ */
.btn{
  font:700 13px var(--f-body); letter-spacing:.02em;
  border-radius:7px; padding:9px 15px; cursor:pointer;
  border:1px solid var(--line); background:none; color:var(--parch);
}
.btn:hover{border-color:var(--gold)}
.btn.gold{
  background:var(--gold); border-color:var(--gold-hi); color:var(--ink);
}
.btn.gold:hover{background:var(--gold-hi)}
.btn.wide{width:100%; margin-top:10px; padding:11px}
.btn.ghost{background:none}
.btn:disabled{opacity:.5; cursor:default}

label.field{display:block; margin:12px 0 0; font:700 11px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
input[type=text], input[type=email], input[type=password], input[type=url]{
  width:100%; margin-top:5px; padding:10px 12px;
  background:#0B112A; border:1px solid var(--line); border-radius:7px;
  color:var(--parch); font:14px var(--f-body);
}
input:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:transparent}
.btn:focus-visible, .tool:focus-visible{outline:2px solid var(--gold-hi); outline-offset:2px}
input[type=file]{margin-top:6px; color:var(--dim); font-size:13px}
.form-error{color:var(--danger); font-size:13px; margin:10px 0 0; min-height:1em}

/* ---------- modal ---------------------------------------------------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:20;
  background:rgba(4,7,18,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  position:relative; width:min(420px,100%);
  background:linear-gradient(180deg,#141C40,#0D1430);
  border:1px solid var(--line); border-radius:12px;
  padding:26px 26px 24px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.tabs{display:flex; gap:6px; margin-bottom:16px}
.tabs button{
  flex:1; padding:8px; background:none; cursor:pointer;
  border:none; border-bottom:2px solid var(--line);
  color:var(--dim); font:700 13px var(--f-body);
}
.tabs button.active{color:var(--gold-hi); border-bottom-color:var(--gold)}

/* ---------- toast ----------------------------------------------------- */
.toast{
  position:fixed; z-index:30; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--gold); color:var(--ink);
  font:700 13px var(--f-body); padding:10px 18px; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast.err{background:var(--danger); color:#fff}

/* ---------- mine list -------------------------------------------------- */
.mine-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; margin:8px 0; cursor:pointer;
}
.mine-item:hover{border-color:var(--gold)}
.mine-item .mono{font:500 11.5px var(--f-mono); color:var(--dim)}
.badge{
  font:700 10px var(--f-body); letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px;
}
.badge.owned{background:#1E5B45; color:#CDEBDD}
.badge.pending{background:var(--pending); color:#F5E2C0}
.badge.rejected{background:#5A2B24; color:#F0CFC8}

/* ---------- small screens --------------------------------------------- */
@media (max-width:720px){
  .wordmark{padding:10px 14px}
  .wordmark h1{font-size:15px}
  .wordmark .sub{display:none}
  .toolbar{top:84px}
  .instrument{min-width:0; left:12px; bottom:12px; padding:10px 12px 8px}
  .legend{display:none}
  #minimap{display:none}
  .ribbon{display:none}
}

/* ---------- v2 additions ---------------------------------------------- */
.tool-sep{
  font:700 9.5px var(--f-body); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); padding:8px 12px 2px; border-top:1px solid var(--line);
  margin-top:4px;
}
.btn-row{display:flex; gap:8px; margin-top:10px}
.btn-row .btn{flex:1; padding:9px 6px}
.rule{border:none; border-top:1px solid var(--line); margin:18px 0 10px}
#btn-do-merge{margin:6px 8px 4px}
.fatal{
  position:fixed; z-index:60; left:50%; top:24px; transform:translateX(-50%);
  max-width:640px; width:calc(100% - 40px);
  background:#3A1418; color:#F5D9D4; border:1px solid #7A2E32; border-radius:10px;
  padding:14px 18px; font:500 14px/1.55 var(--f-body);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.fatal b{color:#FFD9A8}
.postal-chip{
  display:inline-block; vertical-align:middle; margin-left:8px;
  background:var(--ink); border:1px solid var(--gold); color:var(--gold-hi);
  border-radius:6px; padding:2px 8px; font-size:11.5px; letter-spacing:.08em;
}
.badge.review{background:#4A3413; color:#F0C060; border:1px solid #8A5A20}
.review-img{outline:2px dashed var(--gold); outline-offset:2px}
.pagelink{display:block; text-align:center; text-decoration:none; margin:10px 0 4px}

/* ======================================================================
   Map-view palette (Google-Maps-like) + Google-style controls
   body.gmap = light cartography; without it = the Royal night atlas.
   ====================================================================== */
body.gmap{
  --map-bg:   #E9E7E2;
  --land:     #F2EFE9;

  --z-street: #FFFFFF;  --z-street-c:#D8D5CE;
  --z-alley:  #F4F1EB;  --z-alley-c: #DEDAD2;
  --z-avenue: #FDF2C6;  --z-avenue-c:#E8C15A;
  --z-hwy:    #F6C863;  --z-hwy-c:   #D9A13B;
  --z-park:   #B9DFB2;
  --z-gov:    #EADFC4;
  --z-water:  #9CC9F0;
  --z-plaza:  #E4DFD2;
  --lot-avail:#F2EFE9;

  --lot-line:        rgba(110,110,110,.34);
  --lot-line-taken:  #B58A1C;
  --hover-stroke:    #C88719;
  --pending-fill:    rgba(214,150,50,.45);
  --select-fill:     rgba(255,190,60,.45);
  --label-fill:      #5F6368;
  --label-halo:      rgba(255,255,255,.92);
  --label-water:     #4A80B5;
  --label-park:      #3C7A4E;
  --label-gov:       #8A6D3B;
  --map-frame:       #C9C4B8;
}
body:not(.gmap){
  --map-bg:   var(--ink);
  --z-street-c:#2A3153; --z-alley-c:#242B49; --z-avenue-c:#3B4266; --z-hwy-c:#4A527A;
  --lot-line:        rgba(154,163,199,.28);
  --lot-line-taken:  rgba(201,162,39,.55);
  --hover-stroke:    var(--gold-hi);
  --pending-fill:    rgba(138,90,32,.5);
  --select-fill:     rgba(231,197,84,.35);
  --label-fill:      rgba(239,231,210,.85);
  --label-halo:      rgba(8,12,30,.8);
  --label-water:     rgba(160,205,235,.9);
  --label-park:      rgba(190,230,200,.85);
  --label-gov:       rgba(240,220,160,.9);
  --map-frame:       var(--gold);
}

/* ---------- Google-style search box -------------------------------- */
.searchbox{
  position:absolute; z-index:9; top:86px; left:18px; width:340px;
  max-width:calc(100vw - 36px);
}
.searchbox .pill{
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:24px; padding:11px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.searchbox .pill svg{flex:none; color:#5F6368}
.searchbox input{
  border:none; outline:none; background:none; width:100%;
  font:500 14.5px var(--f-body); color:#202124;
}
.searchbox input::placeholder{color:#80868B}
.search-results{
  margin-top:8px; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.30);
}
.search-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; cursor:pointer; border-top:1px solid #F1F3F4;
}
.search-item:first-child{border-top:none}
.search-item:hover, .search-item.active{background:#F1F3F4}
.search-item .si-ic{flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#E8EAED; color:#5F6368; font-size:13px}
.search-item .si-main{font:600 13.5px var(--f-body); color:#202124}
.search-item .si-sub{font:500 11.5px var(--f-body); color:#70757A}

/* ---------- zoom controls & scale bar -------------------------------- */
.map-controls{
  position:absolute; z-index:9; right:20px; bottom:208px;
  display:flex; flex-direction:column; border-radius:10px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.3); background:#fff;
}
.map-controls button{
  width:40px; height:40px; border:none; background:#fff; cursor:pointer;
  font:600 20px/1 var(--f-body); color:#444; display:flex;
  align-items:center; justify-content:center;
}
.map-controls button + button{border-top:1px solid #E8EAED}
.map-controls button:hover{background:#F1F3F4}
.map-controls button svg{display:block}

.scalebar{
  position:absolute; z-index:9; right:74px; bottom:214px;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  pointer-events:none;
}
.scalebar .bar{height:0; border-bottom:2px solid #444; border-left:2px solid #444;
  border-right:2px solid #444; height:6px; border-top:none}
.scalebar .lbl{font:600 11px var(--f-body); color:#333;
  text-shadow:0 0 3px rgba(255,255,255,.9), 0 0 3px rgba(255,255,255,.9)}
body:not(.gmap) .scalebar .bar{border-color:var(--parch)}
body:not(.gmap) .scalebar .lbl{color:var(--parch); text-shadow:0 0 4px rgba(0,0,0,.8)}