:root  {
  --bg:#140805;
  --panel:#261008;
  --panel2:#37180d;
  --rust:#a94323;
  --rust2:#c86134;
  --gold:#d8a45b;
  --sand:#f4d39a;
  --cream:#fff0c9;
  --muted:rgba(255,240,201,.72);
  --green:#a6d66f;
  --line:rgba(255,240,201,.25);
  --marsCopper: #c86438;
  --marsBronze: #7f5231;
  --marsGreen: #efc987;
}

@font-face {
  font-family: 'Mars';
  src: url('../font/Mars.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  color:var(--cream);
  font-family:Inter,system-ui,Segoe  UI,Arial,sans-serif;

    background:#130805;

}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;

    background-image:url("../imgs/mars-main-bg.webp");

    background-size:cover;
  background-position:center;
  filter:brightness(.45)  saturate(1.1)  contrast(1.05);

}

body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;

    background:linear-gradient(180deg,rgba(20,8,5,.48),rgba(20,8,5,.9)),  radial-gradient(circle  at  50%  0%,rgba(200,97,52,.26),transparent  45%);

}

header{
	position:sticky;
	top:0;
	z-index:30;
	background:rgba(20,8,5,.84);
	border-bottom:1px  solid  var(--line);
	backdrop-filter:blur(10px)
}

.nav{
  max-width:1420px;
  margin:auto;
  padding:16px  24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Mars, Georgia;
  font-weight: 900;
  letter-spacing: 2px;
  overflow: hidden;
}

.seal{
  width:38px;
  height:38px;
}

.navlinks{
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap;
}

a,button,input,select{
  font:inherit;
}

a,button,select{
  color:var(--cream);
  text-decoration:none;
  border:1px  solid  var(--line);
  background:rgba(55,24,13,.74);
  border-radius:999px;
  padding:10px  13px;
  cursor:pointer
}

button.primary,.primary{
  background:linear-gradient(135deg,var(--sand),var(--rust2));
  color:#1a0803;
  border:0;
  font-weight:900
}

.wrap{max-width:1420px;
margin:0  auto;
padding:28px  24px  50px}

.card{background:linear-gradient(180deg,rgba(55,24,13,.94),rgba(28,10,5,.94));
border:1px  solid  var(--line);
border-radius:24px;
box-shadow:0  28px  70px  rgba(0,0,0,.42);
overflow:hidden}

.panel{padding:24px}

h1,h2,h3{font-family:Georgia,'Times  New  Roman',serif;
margin:0;
line-height:1.05}

h1{font-size:clamp(38px,5vw,68px);
letter-spacing:-1.2px}

h2{font-size:30px}

.lede{color:var(--muted);
font-size:17px;
line-height:1.6}

.search-top{display:grid;
grid-template-columns:1fr  auto;
gap:14px;
align-items:end;
margin-bottom:24px}

.searchbox{padding:20px;
border-radius:22px;
background:rgba(38,16,8,.92);
border:1px  solid  var(--line)}

.searchbar{display:flex;
gap:10px;
margin-top:12px}

input{width:100%;
border:1px  solid  var(--line);
background:rgba(20,8,5,.72);
color:var(--cream);
border-radius:14px;
padding:14px;
outline:none}

.map-card{min-height:850px;
display:flex;
flex-direction:column;
margin-bottom:28px}

.map-toolbar{display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap;
padding:14px  16px;
border-bottom:1px  solid  var(--line);
background:rgba(20,8,5,.45)}

.map-title  strong{display:block;
font-family:Georgia,serif;
font-size:21px}
  .map-title  span{display:block;
color:var(--muted);
font-size:12px;
margin-top:3px}

.map-shell{
  position:relative;
  flex:1;
  min-height:780px;
  overflow:hidden;
  background:#180b06;
  touch-action:none
}

.map-shell:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle  at  center,rgba(255,211,154,.08),rgba(20,8,5,.18)  62%,rgba(20,8,5,.62));
  pointer-events:none;
  z-index:1
}

.map-stage{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  cursor:grab;
  touch-action:none
}

.map-stage.static{
  cursor:pointer
}

.map-stage.dragging{
  cursor:grabbing
}

#mapSvg{
  width:100%;
  height:100%;
  max-height:1500px;
  transition:transform  .08s  linear;
  filter:drop-shadow(0  25px  35px  rgba(0,0,0,.44));
  transform-origin:center  center
}

#mapSvg text {
  pointer-events: none;
  user-select: none;
}

.map-shell,
.map-stage,
#mapSvg,
#mapSvg * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#mapSvg .parcel-lot.available .parcel {
  fill: var(--marsGreen);
}

#mapSvg .parcel-lot.registered .parcel {
  fill: var(--marsCopper);
}

#mapSvg .parcel-lot.reserved .parcel {
  fill: var(--marsBronze);
}

.map-controls{
  position:absolute;
  right:16px;
  top:16px;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:8px
}

.map-controls  button{width:42px;
height:42px;
border-radius:12px;
padding:0;
font-size:22px;
font-weight:900;
background:rgba(20,8,5,.76)}

.legend{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:4;
  max-width:360px;
  background:rgba(20,8,5,.72);
  border:1px  solid  var(--line);
  border-radius:18px;
  padding:12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  backdrop-filter:blur(8px)
}

.legend strong {
  display: block;
  margin-bottom: 8px;
  color: var(--cream);
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 240, 201, .55);
}

.legend-swatch.available {
  background: var(--marsGreen);
}

.legend-swatch.registered {
  background: var(--marsCopper);
}

.legend-swatch.reserved {
  background: var(--marsBronze);
}

.legend-line {
  width: 24px;
  height: 0;
  border-top: 3px solid #fff0c9;
}

.listings{
  margin-top:28px
}

.listing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:16px;
}

.listing{
  border:1px  solid  rgba(255,240,201,.18);
  border-radius:20px;
  overflow:hidden;
  background:rgba(35,16,9,.9);
  text-decoration:none;
  color:var(--cream);
}

.listing-art{
  height:170px;
  background:#1a0a05;
  position:relative;
  overflow:hidden;
}

.listing-art  svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.listing-body{
  padding:14px;
}

.listing-body  strong{
  display:block;
  font-size:17px;
}

.listing-body  span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
}

.listing-toggle {
  width: 100%;
  justify-content: space-between;
  display: flex;
  border-radius: 14px;
  font-weight: 900;
}

.left-list.collapsed #listingPanel {
  display: none;
}

.sector-badge{display:inline-flex;
margin-top:10px;
padding:6px  9px;
border-radius:999px;
background:rgba(216,164,91,.18);
border:1px  solid  rgba(255,240,201,.22);
color:var(--cream);
font-size:12px;
font-weight:800}

.detail-grid{display:grid;
grid-template-columns:360px  1fr;
gap:0;
height:calc(100vh  -  70px);
min-height:850px}

.left-list{border-right:1px  solid  var(--line);
background:rgba(24,9,4,.88);
overflow:auto;
padding:18px}

.left-list  .listing-grid{grid-template-columns:1fr;
margin-top:14px}

.left-list  .listing-art{height:120px}

.map-detail-card{height:100%;
min-height:850px;
border-radius:0;
margin:0;
border-left:0;
border-right:0}

.row{display:grid;
grid-template-columns:125px  1fr;
gap:12px;
padding:12px  0;
border-bottom:1px  solid  rgba(255,240,201,.12)}

.k{color:var(--muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:.8px}
  .v{font-weight:850}

.status{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px  12px;
  border-radius:999px;
  background:rgba(166,214,111,.14);
  border:1px  solid  rgba(166,214,111,.45);
  color:#eaffdd;
  font-weight:850;
  font-size:13px;
  letter-spacing:.6px;
  margin-top:14px
}

.status.available {
  background: rgba(239, 201, 135, 0.18);
  border: 1px solid rgba(239, 201, 135, 0.5);
  color: var(--marsGreen);
}

.status.available .dot {
  background: #efc987;
  box-shadow: 0 0 12px #efc987;
}

.status.registered {
  background: rgba(200, 100, 56, 0.18);
  border: 1px solid rgba(200, 100, 56, 0.5);
  color:  var(--marsCopper);
}

.status.registered .dot {
  background: #c86438;
  box-shadow: 0 0 12px #c86438;
}

.status.reserved {
  background: rgba(127, 82, 49, 0.18);
  border: 1px solid rgba(127, 82, 49, 0.5);
  color: var(--marsBronze);
}

.status.reserved .dot {
  background: #7f5231;
  box-shadow: 0 0 12px #7f5231;
}


.dot{width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0  0  12px  var(--green)}

.notice{margin-top:18px;
padding:14px;
border-radius:16px;
background:rgba(169,67,35,.20);
border:1px  solid  rgba(216,164,91,.24);
color:var(--muted);
font-size:13px;
line-height:1.5}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(5,2,1,.68);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.modal-backdrop.open{
  display:flex;
}

.parcel-modal{
  width:min(560px,96vw);
  background:linear-gradient(180deg,rgba(55,24,13,.98),rgba(23,8,4,.98));
  border:1px  solid  rgba(255,240,201,.35);
  border-radius:26px;
  box-shadow:0  35px  100px  rgba(0,0,0,.7);
  padding:24px;
}

.modal-close{
  float:right;
  border-radius:12px;
  padding:6px  10px;
}

.parcel-preview {
  max-height: 8.5rem;
  margin: 14px 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,240,201,.25);
  background: #1a0a05;
}

.parcel-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}

#mapSvg  .mars-bg{opacity:1;}

#mapSvg  .ring-line{fill:none;
stroke:rgba(255,240,201,.42);
stroke-width:2.4;
stroke-dasharray:11  12}

#mapSvg  .corridor-wide{stroke:rgba(255,224,160,.24);
stroke-width:22;
stroke-linecap:round}

#mapSvg  .corridor-line{stroke:rgba(255,240,201,.72);
stroke-width:3;
stroke-dasharray:14  12;
stroke-linecap:round}

#mapSvg  .sector{stroke:rgba(255,240,201,.92);
stroke-width:4;
cursor:pointer}

#mapSvg  .sector:hover{stroke:#fff0c9;
stroke-width:6}

#mapSvg  .sector.active{
  stroke:#fff0c9;
  stroke-width:7;
  filter:url(#glow)
}

#mapSvg  .sector.FND{
  fill:rgba(222,162,71,.36)
}

#mapSvg  .sector.CUR{
  fill:rgba(199,92,82,.34)
}

#mapSvg  .sector.HRZ{
  fill:rgba(91,173,183,.32)
}

#mapSvg  .sector.PRV{
  fill:rgba(76,134,190,.32)
}

#mapSvg  .sector.SMT{
  fill:rgba(132,177,103,.34)
}

#mapSvg  .spaceport{
  fill:rgba(70,42,28,.52);
  stroke:rgba(255,240,201,.54);
  stroke-width:2
}

#mapSvg  .parcel-hit{
  fill:transparent;
  stroke:transparent;
  pointer-events:all;
  cursor:pointer
}

#mapSvg  .parcel{
  fill: var(--marsGreen);
  stroke: #321409;
  stroke-width: .72;
  pointer-events: none
}

#mapSvg  .parcel-lot:hover  .parcel{
  fill:#ffe3a6
}

#mapSvg  .parcel-lot.selected  .parcel{
  fill:#a6d66f;
  stroke:#fff0c9;
  stroke-width:3;
  filter:url(#glow)
}

#mapSvg  .parcel-label{
  fill:#1b0903;
  font-family:Arial,sans-serif;
  font-weight:900;
  font-size:10.5px;
  pointer-events:none
}

#mapSvg  .dome{
  fill:#e0b36d;
  stroke:#fff0c9;
  stroke-width:3.5
}

#mapSvg  .core-link{
  stroke:#fff0c9;
  stroke-width:2;
  opacity:.65
}

#mapSvg  .core-mid{
  fill:#562717;
  stroke:#fff0c9;
  stroke-width:2
}

#mapSvg  .plaza{
  fill:#6d301a;
  stroke:#fff0c9;
  stroke-width:2
}

#mapSvg  .svg-label{
  fill:#fff0c9;
  font-family:Mars,Georgia;
  letter-spacing:1px;
  pointer-events:none;
  font-size: 3rem;
}

.map-stage.static  #mapSvg,
.map-stage.static  #mapSvg  *{pointer-events:none}

@media(max-width:1100px){
  .listing-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .detail-grid{
    grid-template-columns:1fr;
    height:auto;
  }
  .left-list{
    border-right:0;
    border-bottom:1px  solid  var(--line);
    border-radius: 20px;
    margin-bottom: 0.5rem;
  }
  .left-list  .listing-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .map-detail-card{
    height:900px;
    border-radius:24px;
  }
}

@media(max-width:650px){
  .listing-grid,.left-list  .listing-grid{
    grid-template-columns:1fr
  }
  .searchbar,.search-top{
    grid-template-columns:1fr;
    flex-direction:column
  }
}

@media (max-width: 700px) {
  .detail-grid {
    display: block;
    padding: 12px;
    width: 100%;
  }

  .map-detail-card {
    width: 100%;
    height: 70vh;
    min-height: 560px;
    border-radius: 20px;
    border: 1px solid var(--line);
    overflow: hidden;
  }

  .map-shell {
    margin: 0.5rem;
    max-height: 56vh;
    min-height: 20vh;
  }
  
  .legend {
    display: none;
  }
  
  .brand span {
    font-size: clamp(1rem, 3rem, 0.75rem);
  }
}