/* ==========================================================================
   Radar — cheat-style web radar
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#07080c;
  --panel:#0b0c12;
  --panel-2:#0f111a;
  --line:#1a1d29;
  --line-2:#232739;

  /* text */
  --text:#e8edf7;
  --muted:#7b8499;
  --muted-2:#59617a;

  /* accent */
  --accent:#3b82f6;

  /* entity colors (overridden by JS) */
  --c-enemy:#ff2b2b;
  --c-local:#2ee65a;
  --c-npc:#ff9f1c;
  --c-team:#22d3ee;
  --c-cop:#3b82f6;
  --c-civilian:#ffffff;
  --c-robber:#e11d48;
  --c-team2:#a855f7;

  /* sizing */
  --sidebar-w:298px;
  --marker:1;

  --font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:13px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

button,input,select{font-family:inherit;color:inherit}

#app{
  display:flex;
  height:100vh;
  width:100vw;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar{
  position:relative;
  z-index:30;
  flex:0 0 var(--sidebar-w);
  width:var(--sidebar-w);
  height:100%;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #0d0e15 0%, #090a10 55%, #07080d 100%);
  border-right:1px solid var(--line);
  box-shadow:18px 0 50px rgba(0,0,0,.55);
  transition:margin-left .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}

.sidebar.is-collapsed{
  margin-left:calc(-1 * var(--sidebar-w));
  opacity:0;
  pointer-events:none;
}

/* header ------------------------------------------------------------- */

.panel-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:52px;
  flex:0 0 52px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

.panel-head h1{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.5px;
  color:#fff;
  text-shadow:0 0 18px rgba(120,170,255,.35);
}

.logo{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.15), 0 0 12px var(--accent);
}

.badge{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1.2px;
  color:#5ef0a1;
  background:rgba(52,211,153,.10);
  border:1px solid rgba(52,211,153,.28);
  border-radius:4px;
  padding:2px 6px;
}

/* tabs --------------------------------------------------------------- */

.tabs{
  display:flex;
  flex:0 0 40px;
  height:40px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.22);
}

.tab{
  position:relative;
  flex:1 1 0;
  min-width:0;
  border:0;
  background:none;
  padding:0 2px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.15px;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .16s;
}

.tab:hover{color:#c3cbdb}

.tab.is-active{color:#fff}

.tab.is-active::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:-1px;
  height:2px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent), 0 0 2px var(--accent);
}

/* body --------------------------------------------------------------- */

.panel-body{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px 16px 28px;
  scrollbar-width:thin;
  scrollbar-color:#252a3b transparent;
}

.panel-body::-webkit-scrollbar{width:8px}
.panel-body::-webkit-scrollbar-track{background:transparent}
.panel-body::-webkit-scrollbar-thumb{
  background:#232838;
  border:2px solid transparent;
  background-clip:content-box;
  border-radius:8px;
}
.panel-body::-webkit-scrollbar-thumb:hover{background:#31374d;background-clip:content-box}

.pane{display:none}
.pane.is-active{display:block;animation:fade .18s ease}

@keyframes fade{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* section titles ----------------------------------------------------- */

.section-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:18px 0 10px;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted-2);
}

.section-title:first-child{margin-top:0}

.section-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--line-2), transparent);
}

.section-title .count{
  order:1;
  padding:1px 5px;
  border-radius:4px;
  background:rgba(59,130,246,.14);
  color:#8fb6ff;
  letter-spacing:0;
  font-size:9px;
}

/* rows --------------------------------------------------------------- */

.row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:22px;
  margin:7px 0;
}

.row-check{margin:9px 0}

.lbl{
  flex:1;
  min-width:0;
  font-size:12px;
  color:#c2cadb;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.val{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--muted);
  letter-spacing:.3px;
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */

/* checkbox */
.check{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:22px;
  margin:7px 0;
  cursor:pointer;
  user-select:none;
  color:#c2cadb;
}

.check input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}

.check .box{
  position:relative;
  flex:0 0 auto;
  width:15px;
  height:15px;
  border-radius:3px;
  background:#12141d;
  border:1px solid #2a2f42;
  transition:background .15s, border-color .15s, box-shadow .15s;
}

.check .box::after{
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:7px;
  height:4px;
  border-left:1.8px solid #fff;
  border-bottom:1.8px solid #fff;
  transform:rotate(-45deg) scale(.5);
  opacity:0;
  transition:transform .15s, opacity .15s;
}

.check input:checked + .box{
  background:linear-gradient(180deg,#4a8bff,#2563eb);
  border-color:#5b96ff;
  box-shadow:0 0 0 3px rgba(59,130,246,.13), 0 0 10px rgba(59,130,246,.45);
}

.check input:checked + .box::after{
  opacity:1;
  transform:rotate(-45deg) scale(1);
}

.check input:focus-visible + .box{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.check:hover .box{border-color:#3a4159}

.check .text{
  font-size:12px;
  line-height:1;
  transition:color .15s;
}

.check:hover .text{color:#e6ecf8}

/* range slider */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:16px;
  margin:4px 0 10px;
  background:transparent;
  cursor:pointer;
}

input[type="range"]::-webkit-slider-runnable-track{
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,
    var(--accent) 0,
    #5b96ff var(--p,50%),
    #222635 var(--p,50%),
    #222635 100%);
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:11px;
  height:11px;
  margin-top:-4px;
  border-radius:50%;
  background:#8ebbff;
  border:0;
  box-shadow:0 0 0 3px rgba(59,130,246,.20), 0 0 9px rgba(80,140,255,.75);
  transition:box-shadow .15s, transform .1s;
}

input[type="range"]:hover::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(59,130,246,.26), 0 0 12px rgba(80,140,255,.9);
}

input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15)}

input[type="range"]::-moz-range-track{
  height:3px;border-radius:3px;background:#222635;
}
input[type="range"]::-moz-range-progress{
  height:3px;border-radius:3px;background:var(--accent);
}
input[type="range"]::-moz-range-thumb{
  width:11px;height:11px;border:0;border-radius:50%;
  background:#8ebbff;
  box-shadow:0 0 0 3px rgba(59,130,246,.2), 0 0 9px rgba(80,140,255,.75);
}

/* select */
.select{
  appearance:none;
  -webkit-appearance:none;
  height:24px;
  min-width:96px;
  max-width:132px;
  padding:0 24px 0 9px;
  border-radius:5px;
  border:1px solid #262b3d;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8499' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 6px center / 10px 10px,
    linear-gradient(180deg,#141722,#10121a);
  color:#c8d2e6;
  font-size:10.5px;
  letter-spacing:.1px;
  cursor:pointer;
  text-align:left;
  text-overflow:ellipsis;
  transition:border-color .15s, background-color .15s;
}

.select:hover{border-color:#333a52;color:#e6ecf8}
.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.15)}

.select-sm{min-width:82px;max-width:112px;height:22px;font-size:10px}

.select option{background:#12141d;color:#e8edf7}

/* color swatch */
.color-row{margin:6px 0}

.swatch{
  position:relative;
  flex:0 0 auto;
  width:13px;
  height:13px;
  cursor:pointer;
}

.swatch input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
  padding:0;
}

.swatch::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--c);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 8px color-mix(in srgb, var(--c) 70%, transparent);
  transition:transform .12s, box-shadow .12s;
}

.swatch:hover::before{
  transform:scale(1.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4),
    0 0 12px var(--c);
}

/* button */
.btn{
  width:100%;
  height:28px;
  margin-top:18px;
  border-radius:6px;
  border:1px solid #262b3d;
  background:linear-gradient(180deg,#151824,#10121b);
  color:#c2cadb;
  font-size:11px;
  letter-spacing:.3px;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}

.btn:hover{
  border-color:#3b4767;
  color:#fff;
  background:linear-gradient(180deg,#1b1f2e,#13161f);
}

.hint{
  margin-top:14px;
  font-size:10px;
  line-height:1.9;
  color:var(--muted-2);
}

kbd{
  display:inline-block;
  min-width:16px;
  padding:1px 5px;
  border-radius:4px;
  border:1px solid #2a3048;
  background:#12151f;
  color:#9aa6c0;
  font-family:var(--mono);
  font-size:9px;
  text-align:center;
}

/* ==========================================================================
   PLAYER LIST
   ========================================================================== */

.search-wrap{
  position:relative;
  margin-bottom:12px;
}

.search-ico{
  position:absolute;
  left:9px;
  top:50%;
  width:12px;
  height:12px;
  transform:translateY(-50%);
  fill:none;
  stroke:#5b6478;
  stroke-width:2;
  stroke-linecap:round;
}

#search{
  width:100%;
  height:27px;
  padding:0 10px 0 27px;
  border-radius:6px;
  border:1px solid #222738;
  background:#0f1119;
  font-size:11px;
  color:#dfe6f3;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}

#search::placeholder{color:#4f576c}
#search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.13)}

.list-head{
  display:grid;
  grid-template-columns:1fr 46px 34px;
  gap:6px;
  padding:0 8px 6px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--muted-2);
  border-bottom:1px solid var(--line);
}

.list-head span:not(:first-child){text-align:right}

.rows{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:6px;
}

.prow{
  display:grid;
  grid-template-columns:1fr 46px 34px;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .13s, border-color .13s;
}

.prow:hover{background:#12151f;border-color:#1d2232}
.prow.is-selected{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35)}

.prow-name{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:11.5px;
  color:#d7deeb;
}

.prow-name .dot{
  flex:0 0 auto;
  width:6px;height:6px;border-radius:50%;
  background:var(--t,#ff2b2b);
  box-shadow:0 0 7px var(--t,#ff2b2b);
}

.prow-name .nm{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.prow-name .avatar{
  flex:0 0 auto;
  width:17px;height:17px;
  border-radius:4px;
  background:linear-gradient(135deg,#2a3350,#161b2a);
  border:1px solid #2b3247;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:8px;
  color:#8fa6d4;
  text-transform:uppercase;
}

.prow-dist,.prow-hp{
  font-family:var(--mono);
  font-size:10px;
  text-align:right;
  color:#8b95ac;
}

.prow-hp.low{color:#ff6b6b}
.prow-hp.mid{color:#ffc14d}

.prow.is-self{opacity:.95}
.prow.is-self .prow-name{color:#7ef0a3}

/* ==========================================================================
   STAGE / MAP
   ========================================================================== */

#stage{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  height:100%;
  overflow:hidden;
  background:#08131b;
}

#viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  background:radial-gradient(circle at 50% 45%, #0d2530 0%, #061017 70%, #040a0e 100%);
}

#viewport.dragging{cursor:grabbing}

#layer{
  position:absolute;
  top:0;left:0;
  transform-origin:0 0;
  will-change:transform;
}

#map{
  display:block;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  image-rendering:auto;
}

#overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

/* world layers ------------------------------------------------------- */

.world-layer{position:absolute;inset:0;pointer-events:none}

#gridLayer{
  opacity:0;
  background-image:
    linear-gradient(rgba(90,200,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,200,255,.09) 1px, transparent 1px);
  background-size:64px 64px;
  transition:opacity .2s;
}

#gridLayer.on{opacity:1}

/* radar sweep -------------------------------------------------------- */

#ringLayer{position:absolute;inset:0}

.ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(80,200,255,.13);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.ring.major{border-color:rgba(80,200,255,.22)}

.sweep{
  position:absolute;
  border-radius:50%;
  transform:translate(-50%,-50%);
  overflow:hidden;
  mix-blend-mode:screen;
  transition:opacity .25s;
  pointer-events:none;
}

.sweep i{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(64,214,255,.42) 0deg,
    rgba(64,214,255,.14) 26deg,
    rgba(64,214,255,.03) 62deg,
    transparent 92deg,
    transparent 360deg);
  animation:sweepSpin var(--sweep,4s) linear infinite;
}

.sweep::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(90,205,255,.20);
  box-shadow:inset 0 0 40px rgba(60,190,255,.06);
}

@keyframes sweepSpin{to{transform:rotate(360deg)}}

/* player marker ------------------------------------------------------ */

.me{
  position:absolute;
  left:0;top:0;
  width:0;height:0;
  z-index:5;
}

.me .core{
  position:absolute;
  left:0;top:0;
  width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:var(--c-local);
  box-shadow:
    0 0 0 2px rgba(10,20,15,.85),
    0 0 0 3px color-mix(in srgb, var(--c-local) 55%, transparent),
    0 0 14px var(--c-local);
}

.me .halo{
  position:absolute;
  left:0;top:0;
  width:34px;height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--c-local) 40%, transparent);
  animation:haloPulse 2.4s ease-out infinite;
}

@keyframes haloPulse{
  0%{transform:scale(.5);opacity:.9}
  100%{transform:scale(1.6);opacity:0}
}

.me .cone{
  position:absolute;
  left:0;top:0;
  width:70px;height:70px;
  margin:-35px 0 0 -35px;
  border-radius:50%;
  background:conic-gradient(from -26deg,
    color-mix(in srgb, var(--c-local) 26%, transparent) 0deg,
    transparent 52deg,
    transparent 360deg);
  transform-origin:50% 50%;
}

/* entity blips ------------------------------------------------------- */

.blip{
  position:absolute;
  left:0;top:0;
  z-index:4;
  will-change:transform;
  pointer-events:none;
}

.blip .dot{
  position:absolute;
  left:0;top:0;
  width:calc(9px * var(--marker));
  height:calc(9px * var(--marker));
  margin:calc(-4.5px * var(--marker)) 0 0 calc(-4.5px * var(--marker));
  border-radius:50%;
  background:var(--t);
  box-shadow:
    0 0 0 1.5px rgba(8,10,14,.9),
    0 0 0 2.5px color-mix(in srgb, var(--t) 45%, transparent),
    0 0 11px var(--t);
}

.blip .dot .dir{
  position:absolute;
  left:50%;top:50%;
  width:0;height:0;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-bottom:7px solid color-mix(in srgb, var(--t) 85%, #fff);
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(var(--dir,0deg));
  filter:drop-shadow(0 0 4px var(--t));
}

.blip .tag{
  position:absolute;
  left:0;
  bottom:calc(9px * var(--marker));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:2px 6px 3px;
  border-radius:5px;
  background:rgba(6,8,13,.78);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(3px);
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}

.blip[data-pos="below"] .tag{
  bottom:auto;
  top:calc(9px * var(--marker));
}

.blip .tag-name{
  font-size:10px;
  font-weight:600;
  letter-spacing:.15px;
  color:#eef3ff;
  line-height:1.15;
}

.blip .tag-meta{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2px;
  color:#9fabc4;
  line-height:1.1;
}

.blip .tag-meta:empty{display:none}

.blip .hp{
  display:block;
  width:calc(38px * var(--mh,1));
  height:3px;
  margin-top:1px;
  border-radius:2px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}

.blip .hp i{
  display:block;
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg,#39d98a,#7ef0a3);
  box-shadow:0 0 6px rgba(57,217,138,.7);
}

.blip.no-hp .hp{display:none}
.blip.no-name .tag-name{display:none}
.blip.no-meta .tag-meta{display:none}

.blip.is-selected .dot{
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 3px color-mix(in srgb, var(--t) 60%, transparent),
    0 0 18px var(--t);
}

.blip.is-self .tag{display:none}

/* team colors */
.blip[data-team="enemy"]{--t:var(--c-enemy)}
.blip[data-team="team"]{--t:var(--c-team)}
.blip[data-team="npc"]{--t:var(--c-npc)}
.blip[data-team="cop"]{--t:var(--c-cop)}
.blip[data-team="civilian"]{--t:var(--c-civilian)}
.blip[data-team="robber"]{--t:var(--c-robber)}
.blip[data-team="team2"]{--t:var(--c-team2)}
.blip[data-team="sleeper"]{--t:#6b7280}

/* loot markers */
.loot{
  position:absolute;
  left:0;top:0;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:#ffd166;
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(255,209,102,.85);
  border-radius:1px;
  z-index:3;
}

.loot[data-r="rare"]{background:#63b3ff;box-shadow:0 0 9px rgba(99,179,255,.9)}
.loot[data-r="epic"]{background:#c084fc;box-shadow:0 0 9px rgba(192,132,252,.9)}
.loot[data-r="legendary"]{background:#ff9f43;box-shadow:0 0 10px rgba(255,159,67,.95)}

/* ==========================================================================
   OVERLAYS / HUD
   ========================================================================== */

#timeTint{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:#0a1a3a;
  opacity:0;
  mix-blend-mode:multiply;
  transition:opacity .3s, background .3s;
}

#stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
  background:
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  opacity:1;
  transition:opacity .25s;
}

#stage.no-scan::after{opacity:0}


/* collapse rail ------------------------------------------------------ */

.rail{
  position:absolute;
  z-index:40;
  left:calc(var(--sidebar-w) - 1px);
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:52px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-left:0;
  border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,#14172a,#0c0e17);
  color:#6d7793;
  cursor:pointer;
  transition:left .28s cubic-bezier(.4,0,.2,1), color .15s, background .15s, opacity .2s;
}

.rail:hover{color:#dbe4f7;background:linear-gradient(180deg,#1a1f36,#0f1220)}

.rail svg{
  width:11px;height:11px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s;
}

.rail.is-collapsed{left:0}
.rail.is-collapsed svg{transform:rotate(180deg)}

/* responsive --------------------------------------------------------- */

@media (max-width: 760px){
  :root{--sidebar-w:250px}
}

/* ==========================================================================
   WEATHER
   ========================================================================== */

.rain{
  position:absolute;
  inset:-15%;
  z-index:18;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s;
  background-image:repeating-linear-gradient(108deg,
    rgba(205,232,255,0)    0 7px,
    rgba(205,232,255,.32)  7px 8px,
    rgba(205,232,255,0)    8px 15px);
  background-size:170px 170px;
  animation:rainFall .55s linear infinite;
}

.rain.on{opacity:.55}

@keyframes rainFall{
  from{background-position:0 0}
  to{background-position:-46px 170px}
}

.fog{
  position:absolute;
  inset:0;
  z-index:19;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s;
  background:
    radial-gradient(circle at 50% 50%, rgba(206,224,238,.25), rgba(198,216,232,.5) 65%, rgba(190,208,226,.68)),
    linear-gradient(180deg, rgba(210,226,240,.35), transparent 40%);
  backdrop-filter:blur(1.5px);
}

.fog.on{opacity:1}

/* ==========================================================================
   OBJECT ROWS (World tab)
   ========================================================================== */

.obj{margin:0 0 9px}

.obj-head{
  display:flex;
  align-items:center;
  gap:8px;
}

.obj-head .check{flex:1;margin:0}

.bar{
  flex:0 0 auto;
  width:42px;
  height:10px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow:0 0 9px color-mix(in srgb, var(--c) 45%, transparent);
}

/* ==========================================================================
   MULTI-SELECT DROPDOWN
   ========================================================================== */

.ms{position:relative;margin-top:5px}

.ms-btn{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  height:26px;
  padding:0 9px;
  border-radius:6px;
  border:1px solid #262b3d;
  background:linear-gradient(180deg,#141722,#0f111a);
  color:#c8d2e6;
  font-size:10.5px;
  letter-spacing:.1px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s, color .15s;
}

.ms-btn:hover{border-color:#39425c;color:#eef3ff;background:linear-gradient(180deg,#181c2a,#12151f)}

.ms.open .ms-btn{
  border-color:var(--accent);
  color:#eaf1ff;
  box-shadow:0 0 0 3px rgba(59,130,246,.15), 0 0 12px rgba(59,130,246,.22);
}

.ms-value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ms-value.is-empty{color:#5f6880}

.ms-caret{
  flex:0 0 auto;
  width:10px;
  height:10px;
  fill:none;
  stroke:#7b8499;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s, stroke .15s;
}

.ms.open .ms-caret{transform:rotate(180deg);stroke:#9fb6da}

.ms-menu{
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  right:0;
  z-index:60;
  padding:5px;
  border-radius:9px;
  border:1px solid #2b3248;
  background:rgba(12,14,21,.97);
  box-shadow:
    0 18px 40px rgba(0,0,0,.68),
    0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(12px);
  max-height:196px;
  overflow-y:auto;
  opacity:0;
  transform:translateY(-5px) scale(.985);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
  scrollbar-width:thin;
  scrollbar-color:#252a3b transparent;
}

.ms.open .ms-menu{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.ms-menu::-webkit-scrollbar{width:7px}
.ms-menu::-webkit-scrollbar-thumb{
  background:#252a3b;
  border:2px solid transparent;
  background-clip:content-box;
  border-radius:8px;
}

.ms-opt{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  height:25px;
  padding:0 7px;
  border-radius:5px;
  font-size:11px;
  color:#b9c4d8;
  cursor:pointer;
  user-select:none;
  transition:background .12s, color .12s;
}

.ms-opt:hover{background:#1a1f2e;color:#fff}

.ms-opt input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}

.ms-box{
  position:relative;
  flex:0 0 auto;
  width:13px;
  height:13px;
  border-radius:3px;
  border:1px solid #343b55;
  background:#12141d;
  transition:background .14s, border-color .14s, box-shadow .14s;
}

.ms-box::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:6px;
  height:3px;
  border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) scale(.5);
  opacity:0;
  transition:transform .14s, opacity .14s;
}

.ms-opt input:checked + .ms-box{
  background:linear-gradient(180deg,#4a8bff,#2563eb);
  border-color:#5b96ff;
  box-shadow:0 0 8px rgba(59,130,246,.5);
}

.ms-opt input:checked + .ms-box::after{opacity:1;transform:rotate(-45deg) scale(1)}