:root{
  --bg:#050910; --text:#eafef9; --muted:#8ab9ac; --neon:#39fcb4;
  --perm:#00ffd5; --temp:#ff3b8d; --border:#17322a;
  --panel:rgba(5,12,18,.64); --panel-strong:rgba(5,12,18,.86);
}

/* Global */
html,body{
  height:100%; margin:0;
  background: radial-gradient(1400px 900px at 20% 10%, #071520 0%, #050910 55%, #02060c 100%);
  color:var(--text);
  font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow:hidden;
}

/* Code rain + scanlines behind everything */
#rain{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.08; mix-blend-mode:screen; }
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px);
}

/* Globe layer */
.globe{ position:fixed; inset:0; z-index:2 }
#globe{ position:absolute; inset:0 }

/* HUD header (legend + controls) */
header.hud{
  position:absolute; left:16px; top:calc(env(safe-area-inset-top, 0px) + 12px); z-index:4;
  padding:10px 12px; border-radius:12px;
  background:var(--panel-strong); border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  text-shadow:0 0 8px rgba(57,252,180,.35);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
header.hud h1{ margin:0; font-size:16px; letter-spacing:.3px; color:var(--neon) }
.legend{ display:inline-flex; gap:12px; align-items:center; color:#c3fff0; flex-wrap:wrap }
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; box-shadow:0 0 8px currentColor }
.perm{ color:var(--perm); background:var(--perm) }
.temp{ color:var(--temp); background:var(--temp) }

/* Controls live INSIDE header.hud */
.controls{ display:flex; gap:8px; flex-wrap:wrap }
.btn{
  background:var(--panel); border:1px solid var(--border); color:#e7fff7;
  padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:900; letter-spacing:.3px;
  min-height:36px; min-width:64px;
  box-shadow:0 0 10px rgba(57,252,180,.15) inset;
}
.btn:hover{ background:rgba(8,18,20,.92) }

/* List panel (desktop right, mobile bottom sheet) */
.list{
  position:absolute; right:16px; top:14px; bottom:16px; width:380px; max-width:44vw; z-index:4;
  display:flex; flex-direction:column; gap:8px;
  background:var(--panel); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.list header{ padding:10px 12px 6px }
.list h2{ margin:0; font-size:13px; font-weight:700; color:#a6ffe7; letter-spacing:.25px }
.tray{ overflow:auto; padding:4px 6px 12px }
.item{
  display:flex; gap:10px; align-items:start;
  padding:9px 11px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.item:hover{ background:rgba(12,24,30,.6); transform: translateZ(0) scale(1.01) }
.item.active{
  background:rgba(12,38,40,.92); border-color:#2aa88f;
  box-shadow: 0 0 0 1px rgba(57,252,180,.28), inset 0 0 30px rgba(57,252,180,.06);
}
.date{ min-width:96px; color:#9ce2ce; font-variant-numeric:tabular-nums }
.site{ display:flex; flex-direction:column }
.name{ font-weight:800; color:#eafff9 }
.meta{ color:#b4f1e2; font-size:12px; display:flex; gap:6px; flex-wrap:wrap }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:1px 7px; border-radius:999px; border:1px solid #2a6a55; font-size:11px; color:#b6ffe7; }
.pill.temp{ color:#ffe0f0; border-color:#ff79bf; background:rgba(255,59,141,.12) }

/* Info card */
.info{
  position:absolute; left:16px; right:auto; bottom:16px; z-index:4;
  max-width:420px; background:var(--panel-strong);
  border:1px solid var(--border); border-radius:14px; padding:14px 14px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 20px rgba(57,252,180,.08) inset; backdrop-filter:blur(8px);
}
.info h3{ margin:0 0 6px 0; font-size:16px; color:#f1fffc }
.info small{ color:var(--muted) }
.status{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; vertical-align:middle; box-shadow:0 0 10px currentColor }
.status.perm{ color:var(--perm); background:var(--perm) }
.status.temp{ color:var(--temp); background:var(--temp) }
.hidden{ display:none }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px){
  /* Header becomes a full-width top bar */
  header.hud{
    left:calc(env(safe-area-inset-left, 0px) + 8px);
    right:calc(env(safe-area-inset-right, 0px) + 8px);
    width:auto; max-width:unset;
  }
  header.hud h1{ font-size:14px }
  #rain{ opacity:.05 } /* softer code-rain on mobile */

  /* List becomes bottom sheet */
  .list{
    left:8px; right:8px; width:auto; top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);
    height:42vh; max-width:none;
  }

  /* Info card moves below header to avoid the bottom sheet */
  .info{
    left:8px; right:8px; bottom:auto;
    top:calc(env(safe-area-inset-top, 0px) + 84px);
    max-width:none;
  }
}