/* Cubiomes Atlas — styles
 * Extracted from the original single-file build. Kept 1:1 with the previous
 * inline <style> block, just organized into its own file.
 */

:root{
  --bg: #12161b;
  --panel: #1b2129;
  --panel-2: #212831;
  --line: #2b3038;
  --ink: #e9e6dc;
  --ink-dim: #8d96a1;
  --gold: #c9a24b;
  --gold-bright: #e2bd6d;
  --mark: #e2574c;
  --radius: 3px;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

#app{
  position:relative;
  display:grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
  height:92vh;
  width:100vw;
  transition: grid-template-columns .18s ease;
}
#app.rail-hidden{
  grid-template-columns: 0 1fr;
}
#app.rail-hidden #rail{
  padding-left:0;
  padding-right:0;
  overflow:hidden;
  border-right:none;
}

.rail-toggle{
  position:absolute;
  top:14px;
  left:14px;
  z-index:50;
  width:34px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
  border-radius:var(--radius);
  background:rgba(18,22,27,.85);
  backdrop-filter: blur(3px);
}
#app.rail-hidden .rail-toggle{
  left:14px;
}

.rail-header{
  padding-bottom:14px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rail-header h1{
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  margin:0 0 0 44px;
}
.rail-header .status{
  font-size:12px;
  color:var(--ink-dim);
  font-family:'IBM Plex Mono', monospace;
}
.rail-header .status.ready{ color:var(--gold); }
.rail-header .status.err{ color:var(--mark); }
.rail-header .repo-link{
  font-size:11px;
  font-family:'IBM Plex Mono', monospace;
  color:var(--ink-dim);
  text-decoration:none;
}
.rail-header .repo-link:hover{
  color:var(--gold-bright);
  text-decoration:underline;
}

#rail{
  border-right:1px solid var(--line);
  background:var(--panel);
  overflow-y:auto;
  padding:18px 16px 24px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.field label{
  display:block;
  font-size:12px;
  color:var(--ink-dim);
  margin-bottom:6px;
}
.field .row{ display:flex; gap:8px; }
input[type=text], select{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  padding:8px 9px;
  border-radius:var(--radius);
  outline:none;
}
input[type=text]:focus, select:focus{
  border-color: var(--gold);
}
button{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  font-weight:600;
  background:var(--panel-2);
  color:var(--ink);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:var(--radius);
  cursor:pointer;
}
button:hover{ border-color:var(--gold); color:var(--gold-bright); }
button:active{ transform: translateY(1px); }
button.primary{
  background:var(--gold);
  border-color:var(--gold);
  color:#1b1408;
}
button.primary:hover{ background:var(--gold-bright); color:#1b1408; }
button.wide{ width:100%; }

.seed-row{ display:flex; gap:8px; }
.seed-row input{ flex:1; min-width:0; }
.coord-row input{ flex:1; min-width:0; }
.seed-row button{ flex:0 0 auto; padding:8px 10px; }

.dim-toggle{ display:flex; gap:6px; }
.dim-toggle button{ flex:1; padding:7px 4px; font-size:12px; }
.dim-toggle button.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#1b1408;
}

.check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink);
  cursor:pointer;
  user-select:none;
}
.check input{ accent-color: var(--gold); width:15px; height:15px; }

hr.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

.legend-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.legend-header label{ margin-bottom:0; }
.legend-actions{ display:flex; gap:6px; flex:0 0 auto; }
.legend-actions button{
  padding:3px 7px;
  font-size:11px;
}

#legend{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
}
#legend .item{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--ink-dim);
  cursor:pointer;
  user-select:none;
}
#legend .item input[type=checkbox]{
  flex:0 0 auto;
  width:13px; height:13px;
  accent-color: var(--gold);
  cursor:pointer;
}
#legend .sw{
  width:11px; height:11px;
  border-radius:2px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.15);
}
#legend .name{ flex:1; }
#legend .pct{ font-family:'IBM Plex Mono', monospace; color:var(--ink-dim); }
#legend .item.is-hidden{ color:#565c64; }
#legend .item.is-hidden .sw{ opacity:.35; }
#legend .item.is-hidden .pct{ color:#565c64; }

.tabs{
  display:flex;
  gap:6px;
}
.tabs .tab{
  flex:1;
  padding:8px 4px;
  font-size:12px;
  background:var(--panel-2);
}
.tabs .tab.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#1b1408;
}
.tab-panel{ display:flex; flex-direction:column; gap:20px; }

#structTypes{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  max-height:260px;
  overflow-y:auto;
}
#structTypes .item{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  cursor:pointer;
  user-select:none;
}
#structTypes .item input[type=checkbox]{
  flex:0 0 auto;
  width:13px; height:13px;
  accent-color: var(--gold);
  cursor:pointer;
}
#structTypes .sw{
  width:11px; height:11px;
  border-radius:50%;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.4);
}
#structTypes .name{ flex:1; }

.struct-status{
  margin-top:8px;
  font-size:11px;
  color:var(--ink-dim);
  min-height:14px;
}

#structResults{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  max-height:280px;
  overflow-y:auto;
}
#structResults .row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 6px;
  border-radius:var(--radius);
  cursor:pointer;
  color:var(--ink-dim);
}
#structResults .row:hover{
  background:var(--panel-2);
  color:var(--ink);
}
#structResults .row.is-summary{
  color:var(--ink-dim);
  font-style:italic;
  cursor:default;
}
#structResults .row.is-summary:hover{ background:none; color:var(--ink-dim); }
#structResults .sw{
  width:9px; height:9px;
  border-radius:50%;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.4);
}
#structResults .coord{
  font-family:'IBM Plex Mono', monospace;
  flex:1;
}
#structResults .rname{
  color:var(--ink-dim);
  font-size:11px;
}
#structResults .empty{
  color:var(--ink-dim);
  font-size:12px;
  padding:4px 0;
}

.hint{
  font-size:11px;
  color:var(--ink-dim);
  margin-top:6px;
  line-height:1.4;
}

#multiTypes{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  max-height:220px;
  overflow-y:auto;
}
#multiTypes .item{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  user-select:none;
}
#multiTypes .item input[type=checkbox]{
  flex:0 0 auto;
  width:13px; height:13px;
  accent-color: var(--gold);
  cursor:pointer;
}
#multiTypes .sw{
  width:11px; height:11px;
  border-radius:50%;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.4);
}
#multiTypes .name{ flex:1; cursor:default; }
#multiTypes .count-input{
  width:48px;
  flex:0 0 auto;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:12px;
  padding:4px 5px;
  border-radius:var(--radius);
  text-align:center;
  outline:none;
}
#multiTypes .count-input:focus{ border-color:var(--gold); }
#multiTypes .count-input:disabled{ opacity:.35; cursor:not-allowed; }

#multiResults{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  max-height:320px;
  overflow-y:auto;
}
#multiResults .row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 7px;
  border-radius:var(--radius);
  cursor:pointer;
  color:var(--ink-dim);
  border:1px solid transparent;
}
#multiResults .row:hover{
  background:var(--panel-2);
  color:var(--ink);
  border-color:var(--line);
}
#multiResults .coord{
  font-family:'IBM Plex Mono', monospace;
  color:var(--ink);
}
#multiResults .counts{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
#multiResults .badge{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--panel-2);
  padding:2px 6px;
  border-radius:10px;
  font-size:11px;
}
#multiResults .badge .sw{
  width:8px; height:8px;
  border-radius:50%;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.4);
}
#multiResults .empty{
  color:var(--ink-dim);
  font-size:12px;
  padding:4px 0;
}

#structLayer{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  overflow:hidden;
}
.struct-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
.struct-marker .dot{
  width:10px; height:10px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.struct-marker .lbl{
  margin-top:2px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:#fff;
  background:rgba(0,0,0,.55);
  padding:1px 4px;
  border-radius:2px;
  white-space:nowrap;
}

#stage{
  position:relative;
  background:#05070a;
  overflow:hidden;
}
#mapCanvas{
  position:absolute;
  top:0; left:0;
  image-rendering: pixelated;
  cursor: grab;
  will-change: transform;
}
#mapCanvas.dragging{ cursor: grabbing; }
#overlayCanvas{
  position:absolute;
  top:0; left:0;
  pointer-events:none;
  will-change: transform;
}

.hud{
  position:absolute;
  background:rgba(18,22,27,.85);
  backdrop-filter: blur(3px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 11px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-dim);
  pointer-events:none;
  line-height:1.6;
}
#hudCoords{ left:14px; bottom:14px; }
#hudBiome{
  right:14px; bottom:14px;
  text-align:right;
  max-width:260px;
}
#hudBiome .b-name{
  color:var(--ink);
  font-size:13px;
  font-weight:500;
}
#hudZoom{
  right:14px; top:14px;
  display:flex;
  gap:6px;
  background:none;
  border:none;
  padding:0;
  backdrop-filter:none;
  pointer-events:auto;
}
#hudZoom button{
  width:30px; height:30px;
  padding:0;
  font-size:15px;
  line-height:1;
  background:rgba(18,22,27,.85);
  border:1px solid var(--line);
}
#crosshair{
  position:absolute;
  width:13px; height:13px;
  border:2px solid var(--mark);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  display:none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}

#loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:10px;
  background:#05070a;
  color:var(--ink-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  z-index:5;
}
#loading .spinner{
  width:22px; height:22px;
  border-radius:50%;
  border:2px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--panel); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px; }

@media (max-width: 720px){
  #app{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #app.rail-hidden{ grid-template-columns: 1fr; grid-template-rows: 0 1fr; }
  #app.rail-hidden #rail{ padding-top:0; padding-bottom:0; }
  #rail{ border-right:none; border-bottom:1px solid var(--line); max-height:38vh; }
}


.tp-here{
  margin-left:auto;
  padding:4px 8px;
  border:1px solid #555;
  border-radius:5px;
  background:#222;
  color:#ddd;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}

.tp-here:hover{
  background:#333;
  color:#fff;
}

.tp-here:active{
  transform:translateY(1px);
}

#stage{
  position:relative;
  overflow:hidden;
}

#playerRadiusCircle{
  position:absolute;
  left:0;
  top:0;
  width:256px;
  height:256px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  box-sizing:border-box;
  pointer-events:none;
  display:none;
  z-index:30;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.04);
}