:root{
  --glass-bg-dark: rgba(0,0,0,0.62);
  --glass-bg-dark-strong: rgba(0,0,0,0.72);
  --glass-border: rgba(255,255,255,0.14);
  --glass-shadow: 0 0 22px rgba(0,0,0,.55);
  --glass-blur: 10px;
}

html, body {
  margin: 0;
  padding: 0;
  background: #0e0e0e;
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

#app {
  position: relative;
  width: 100%;
  height: 100svh;
  background: #000;
  overflow: hidden;
}

/* ✅ Night Mode (VIOLETT/BLUE NAVI STYLE) */
#app.night{
  background: radial-gradient(1200px 800px at 30% 20%, rgba(120,60,255,0.18), rgba(0,0,0,0) 60%),
              radial-gradient(900px 700px at 80% 70%, rgba(0,210,255,0.10), rgba(0,0,0,0) 55%),
              #02020a;
}
#app.night #controls { background: rgba(5,5,18,.78); }
#app.night .btn { background: rgba(8,8,22,.86); }
#app.night #vignette {
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 48%,
    rgba(0,0,0,0.65) 100%);
}
#app.night #map{
  /* wichtig: kein rosa/rot -> hue Richtung violett/blau */
  filter:
    brightness(0.80)
    contrast(1.12)
    saturate(1.15)
    hue-rotate(235deg);
}

/* extra neon glow overlays in night */
#app.night #noise{ opacity: 1; }
#app.night #dir-card{
  background: rgba(18, 10, 40, 0.55);
  border-color: rgba(160,120,255,0.22);
}
#app.night #dir-sub{
  color: rgba(230,220,255,0.80);
}
#app.night #dir-title{
  color: rgba(255,255,255,0.92);
}

.pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  z-index: 9999 !important;
  background: #000 !important;
}

/* ENTRY OVERLAY */
#entry-overlay {
  position: absolute;
  inset: 0;
  background: #050505;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 650ms ease;
}
#entry-inner {
  text-align: center;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 650ms ease, transform 650ms ease;
  will-change: opacity, transform;
}
#entry-title {
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: clamp(20px, 5vw, 34px);
  text-transform: uppercase;
}
#entry-subtitle {
  margin-top: 10px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.18em;
  font-size: clamp(11px, 2.8vw, 14px);
  text-transform: uppercase;
}
#entry-overlay.show #entry-inner {
  opacity: 1;
  transform: translateY(0);
}

/* MAP */
#map-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

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

#map {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

#map.loading {
  filter: blur(18px);
  transform: translateZ(0) scale(1.02);
  transition: filter 700ms ease, transform 700ms ease;
}
#map.ready {
  filter: blur(0px);
  transform: translateZ(0) scale(1);
  transition: filter 700ms ease, transform 700ms ease;
}

/* OVERLAYS */
#noise {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  z-index: 80;
}
#vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.40) 100%);
  z-index: 85;
}

/* MARKER */
.marker {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ff3b3b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1.8s infinite;
  display: none;
  z-index: 10;
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
@media (max-width: 768px) { .marker { width: 7px; height: 7px; } }
@keyframes pulse {
  0% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%,-50%) scale(1.5); opacity: .4; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
.marker.techno { --c:#5b7cff; }
.marker.house  { --c:#ffbf60; }
.marker.hard   { --c:#ff4b4b; }
.marker.groove { --c:#ff69c8; }
.marker.service{ --c:#ffffff; }
.marker.gps    { background:#3ba9ff; --c:#3ba9ff; }
.marker.aura {
  box-shadow: 0 0 18px var(--c);
  filter: saturate(1.25);
}

/* "Du bist hier" Label */
#here-label{
  position: absolute;
  z-index: 92;
  display: none;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 18px rgba(0,0,0,.55);
  transform: translate(-50%, -120%);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#here-label::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:10px;
  height:10px;
  background: rgba(0,0,0,0.72);
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transform: translateX(-50%) rotate(45deg);
}

/* Path Hint (dashed line) */
#path-hint{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 0px;
  height: 0px;
  z-index: 91;
  display:none;
  pointer-events:none;
}
#path-line{
  position:absolute;
  left:0; top:0;
  height:0;
  border-top: 2px dashed rgba(255,255,255,0.85);
  width: 160px;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.6));
}
#path-line::after{
  content:"";
  position:absolute;
  right:-8px;
  top:-6px;
  width: 0; height: 0;
  border-left: 10px solid rgba(255,255,255,0.85);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ✅ Direction Card (Map + Castle Compass) */
#dir-card{
  position:absolute;
  left: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 124px);
  z-index: 94;
  display:none;
  width: min(420px, calc(100vw - 20px));
  background: rgba(15,15,15,0.62);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 10px 12px;
  color: rgba(255,255,255,0.92);
  font-family: Arial, sans-serif;
}
#dir-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#dir-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
#dir-arrow{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 18px rgba(0,0,0,.35);
  position: relative;
}
#dir-arrow svg{
  width: 28px;
  height: 28px;
  transform: rotate(0deg);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.25));
}
#dir-title{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: .85;
}
#dir-sub{
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dir-meta{
  margin-top: 2px;
  font-size: 11px;
  opacity: .70;
  white-space: nowrap;
}
#dir-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.dir-btn{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.dir-btn.active{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  font-weight: 800;
}

/* ✅ 20) NOW PLAYING BAR */
#nowbar{
  position: absolute;
  left: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 64px);
  z-index: 94;
  display: none;
  max-width: min(420px, calc(100vw - 20px));
  background: rgba(15,15,15,0.62);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 8px 10px;
  color: rgba(255,255,255,0.92);
  font-family: Arial, sans-serif;
  cursor: pointer;
  user-select: none;
}
#nowbar .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#nowbar .left{ min-width:0; }
#nowbar .kicker{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
  white-space: nowrap;
}
#nowbar .line{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nowbar .meta{
  margin-top: 3px;
  font-size: 11px;
  opacity: .75;
  white-space: nowrap;
}
#nowbar .pill{
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  text-transform: uppercase;
}
#nowbar .pill.live{ background: rgba(255,59,59,0.20); border-color: rgba(255,59,59,0.35); }
#nowbar .pill.next{ background: rgba(255,191,96,0.22); border-color: rgba(255,191,96,0.35); }
#nowbar .arrow{
  font-size: 16px;
  opacity: .85;
  padding-left: 8px;
}

/* LINEUP PANEL links oben */
#lineup-panel {
  position: absolute;
  left: 10px;
  top: 10px;
  transform: none;
  width: min(340px, calc(100vw - 20px));
  max-height: calc(100svh - 150px);
  overflow: hidden;
  background: rgba(245,240,220,0.82);
  color: #333;
  border: 3px solid #b09a5c;
  border-radius: 12px;
  padding: 10px 10px 12px 10px;
  font-family: 'Papyrus','Comic Sans MS',cursive;
  display: none;
  z-index: 60;
  box-shadow: 0 0 18px rgba(0,0,0,.45);
  touch-action: pan-y;
}

/* Header */
#panel-header{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:6px;
  min-height: 44px;
}
#panel-title{
  font-weight:bold;
  font-size: 16px;
  text-align: center;
  padding: 0 110px;
}
#panel-now{
  position:absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: rgba(0,0,0,0.55);
  white-space: nowrap;
}

/* Buttons */
#panel-close{
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 26px;
  height: 28px;
}
#panel-jump{
  position:absolute;
  left: 44px;
  top: 0;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 0 10px;
  cursor:pointer;
  font-size: 14px;
  height: 28px;
  line-height: 26px;
  font-family: Arial, sans-serif;
}
#panel-alerts-btn{
  position:absolute;
  right: 0;
  top: 0;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 2px 8px;
  cursor:pointer;
  font-size: 12px;
  height: 28px;
  display:flex;
  align-items:center;
  gap:6px;
  font-family: Arial, sans-serif;
}
#panel-alerts-btn span{ font-size: 13px; }

#panel-content{
  max-height: calc(100svh - 220px);
  overflow-y: auto;
  padding-right: 4px;
}
#panel-footer {
  margin-top: 8px;
  font-size: 12px;
  opacity: .85;
}

/* Quick Floor Tabs (sticky) */
#floor-tabs{
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 6px 4px 8px 4px;
  margin: -2px 0 8px 0;
  background: rgba(245,240,220,0.92);
  border-bottom: 1px dashed rgba(0,0,0,0.18);
}
#floor-tabs .row{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}
.floor-tab{
  border: 1px solid rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.65);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 11px;
  user-select: none;
}
.floor-tab.active{
  background: rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.34);
  font-weight: 800;
}

/* Filter + Suche */
#lineup-tools{
  position: sticky;
  top: 46px;
  z-index: 4;
  padding: 6px 4px 8px 4px;
  margin: 0 0 6px 0;
  background: rgba(245,240,220,0.92);
  border-bottom: 1px dashed rgba(0,0,0,0.18);
}
#dj-search{
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.85);
  font-family: Arial, sans-serif;
  font-size: 12px;
  outline: none;
}
#filter-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.chip{
  border: 1px solid rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.55);
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 11px;
  user-select: none;
}
.chip.active{
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.30);
  font-weight: 700;
}

/* DJ rows */
.dj-row{
  position: relative;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(0,0,0,0.22);
}
.dj-row:last-child{ border-bottom:none; }
.dj-left{ min-width:0; }

.dj-name{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
}
.dj-name.expanded{
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.btb { font-weight: 800; letter-spacing: .06em; opacity: .9; padding: 0 2px; }

.dj-link{
  display:none;
  font-family: Arial, sans-serif;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.20);
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  width: 96px;
  text-align: center;
}
.dj-link.show{ display:block; }

.dj-time{ font-size: 12px; opacity: .85; margin-top: 3px; }
.dj-state{ font-size: 11px; margin-top: 4px; opacity:.85; }
.dj-actions{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.dj-actions select,
.dj-actions input{
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.75);
  width: 96px;
}
.dj-actions input{ width: 84px; display:none; }
.dj-btn{
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.08);
  cursor:pointer;
  width: 96px;
}
.dj-btn.primary{ background: rgba(0,0,0,0.12); }
.dj-badge{
  display:none;
  font-family: Arial, sans-serif;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.65);
}

.dj-row.past{ opacity: .45; }
.dj-row.past .dj-name{ text-decoration: line-through; }
.dj-row.live{
  background: rgba(255, 229, 164, 0.35);
  border-radius: 10px;
}
.dj-row.next{
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}

/* Headliner */
.dj-row.headliner{
  background: rgba(255, 215, 90, 0.30);
  border-radius: 10px;
  border: 1px solid rgba(176, 154, 92, 0.55);
}
.dj-row.headliner .dj-name{ color: #6b3f00; letter-spacing: 0.04em; }
.dj-row.headliner .dj-state{ font-weight: 700; }
.dj-row.headliner::before{
  content: "★";
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 14px;
  opacity: 0.85;
}
.dj-row.headliner .dj-left{ padding-left: 14px; }

/* Alerts */
.alert-row{
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.55);
  border-radius: 12px;
  padding: 8px 8px;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
}
.alert-row .a-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.alert-row .a-title{ font-weight: 800; font-size: 13px; line-height: 1.15; }
.alert-row .a-sub{ margin-top: 3px; font-size: 12px; opacity: .85; }
.alert-row .a-floor{ margin-top: 4px; font-size: 11px; opacity: .75; }
.alert-row button{
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 5px 8px;
  cursor:pointer;
  background: rgba(0,0,0,0.08);
}

/* Toast */
#toast{
  position:absolute;
  left:50%;
  bottom: calc(env(safe-area-inset-bottom) + 64px);
  transform: translateX(-50%);
  background: rgba(0,0,0,0.82);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 90;
  opacity: 0;
  pointer-events:none;
  transition: opacity .25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* CONTROLS */
#controls {
  position: absolute;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  padding: 10px;
  background: var(--glass-bg-dark);
  text-align: center;
  z-index: 70;
  border-top: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
select { padding: 8px; font-size: 16px; border-radius: 12px; }

/* BUTTONS */
.btn {
  position: absolute;
  right: 10px;
  background: var(--glass-bg-dark);
  color: white;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 7px 10px;
  z-index: 75;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
#fullscreen-btn { top: 10px; }
#gps-btn { top: 50px; }
#news-btn { top: 90px; }
#night-btn { top: 130px; }
#share-btn { top: 170px; }

/* News badge */
#news-badge{
  position:absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:#ff3b3b;
  box-shadow: 0 0 10px rgba(255,59,59,.9);
  top: 3px;
  right: 3px;
  display:none;
}

/* NEWS PANEL */
#news-panel{
  position:absolute;
  left: 10px;
  top: 10px;
  width: min(340px, calc(100vw - 20px));
  max-height: 60vh;
  overflow: hidden;
  display:none;
  z-index: 95;
  background: rgba(15,15,15,0.58);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
#news-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#news-title{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:700;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: 12px;
}
#news-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#ff3b3b;
  box-shadow: 0 0 12px rgba(255,59,59,.8);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.35}
  100%{transform:scale(1);opacity:1}
}
#news-close{
  background: rgba(255,255,255,0.08);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 4px 10px;
  cursor:pointer;
}
#news-meta{
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  margin-left: 2px;
}
#news-body{
  padding: 10px 12px 12px 12px;
  overflow:auto;
  max-height: calc(60vh - 54px);
}
.news-item{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  margin-bottom: 10px;
}
.news-item:last-child{ margin-bottom:0; }
.news-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.news-time{
  color: rgba(255,255,255,0.70);
  font-size: 11px;
  letter-spacing: .08em;
}
.news-tag{
  color:#000;
  background: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.news-h{
  margin-top: 6px;
  color:#fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
}
.news-p{
  margin-top: 6px;
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  line-height: 1.25;
  white-space: pre-wrap;
}
.news-item.pinned{
  border-color: rgba(255, 215, 90, 0.45);
  background: rgba(255, 215, 90, 0.08);
}
.news-item.pinned .news-tag{
  background: rgba(255, 215, 90, 0.95);
}
.news-item.pinned .news-h{ letter-spacing: .02em; }


/* ✅ Red X buttons */
.close-x{ position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background: rgba(255,35,35,0.95); color:#fff; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 18px rgba(255,35,35,0.35); }

/* 👥 Friends button */
#friends-btn{ top: 210px; }

/* 👥 Friends Panel */
#friends-panel{
  position:absolute;
  left: 10px;
  top: 10px;
  width: min(360px, calc(100vw - 20px));
  max-height: calc(100svh - 140px);
  overflow: hidden;
  display:none;
  z-index: 96;
  background: rgba(12,12,18,0.62);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: rgba(255,255,255,0.92);
  font-family: Arial, sans-serif;
}
#friends-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#friends-head .fh-title{
  font-weight:900;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
}
#friends-close{
  border-radius: 10px;
  padding: 4px 10px;
  cursor:pointer;
}
.friends-body{
  padding: 10px 12px 12px 12px;
  overflow:auto;
  max-height: calc(100svh - 200px);
}
.friends-section{ margin-bottom: 12px; }
.friends-label{
  font-size: 11px;
  opacity: .78;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.friends-row{ display:flex; gap:8px; align-items:center; }
.friends-input{
  flex:1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  outline:none;
}
.friends-input::placeholder{ color: rgba(255,255,255,0.45); }
.friends-btn{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  white-space: nowrap;
}
.friends-btn:hover{ background: rgba(255,255,255,0.14); }
.friends-btn.wide{ flex:1; }
.friends-code{
  flex:1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.friends-hint{
  margin-top: 6px;
  font-size: 11px;
  opacity: .75;
  line-height: 1.25;
}
.friends-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity:.9; }
.friends-list{ display:flex; flex-direction: column; gap:8px; }
.friend-card{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 8px 8px;
}
.friend-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.friend-name{
  font-weight: 900;
  font-size: 13px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-meta{ font-size: 11px; opacity:.75; margin-top: 3px; }
.friend-actions{ display:flex; gap:6px; margin-top: 7px; }
.friend-pill{
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  cursor:pointer;
  font-size: 11px;
}
.friend-pill.danger{
  background: rgba(255,59,59,0.16);
  border-color: rgba(255,59,59,0.35);
}
.friends-radar{
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(circle at center, rgba(120,60,255,0.16), rgba(0,0,0,0.20) 58%, rgba(0,0,0,0.35));
  overflow:hidden;
}
.friends-radar .radar-center{
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 16px rgba(255,255,255,0.22);
}
.radar-ring{
  position:absolute; left:50%; top:50%;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.radar-ring.r1{ width: 60px; height: 60px; }
.radar-ring.r2{ width: 110px; height: 110px; }
.radar-ring.r3{ width: 160px; height: 160px; }
.radar-dot{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,210,255,0.95);
  box-shadow: 0 0 16px rgba(0,210,255,0.22);
}


/* ---------- Friends on Map Layer ---------- */
#friends-layer{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index: 12;
}
.friend-dot{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0, 210, 255, 0.95);
  box-shadow: 0 0 18px rgba(0,210,255,0.55);
  border: 1px solid rgba(255,255,255,0.35);
}
.friend-dot.me{
  background: rgba(255, 215, 90, 0.95);
  box-shadow: 0 0 22px rgba(255,215,90,0.55);
}
.friend-label{
  position:absolute;
  transform: translate(-50%,-160%);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.70);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  max-width: 180px;
  overflow:hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 18px rgba(0,0,0,.45);
}

/* ---------- Modal (generic) ---------- */
.modal{
  position: absolute;
  pointer-events:none;
  inset: 0;
  z-index: 10050;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal .box{
  pointer-events:auto;
  width: min(520px, calc(100vw - 24px));
  max-height: min(82svh, 780px);
  overflow:auto;
  background: rgba(15,15,15,0.70);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  box-shadow: 0 0 26px rgba(0,0,0,.55);
  padding: 14px 14px;
  color: rgba(255,255,255,0.92);
}
.modal h3{
  margin: 0 0 8px 0;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .9;
}
.modal p{
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.25;
  opacity: .9;
}
.modal .row{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  align-items:center;
}
.modal input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  outline:none;
  font-size: 13px;
}
.modal .hint{
  font-size: 12px;
  opacity: .75;
}
.modal .btn2{
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.modal .btn2.primary{
  background: rgba(0,210,255,0.20);
  border-color: rgba(0,210,255,0.35);
}
.modal .btn2.danger{
  background: rgba(255,35,35,0.20);
  border-color: rgba(255,35,35,0.35);
}

/* ---------- AR View ---------- */
#ar-view{
  position: fixed;
  inset: 0;
  z-index: 10080;
  display:none;
  background: #000;
}
#ar-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  background:#000;
}
#ar-hud{
  position:absolute;
  inset:0;
  pointer-events:none;
}
#ar-topbar{
  position:absolute;
  left: 10px;
  right: 10px;
  top: calc(env(safe-area-inset-top) + 10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  pointer-events:auto;
}
#ar-title{
  max-width: 70vw;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  letter-spacing: .06em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#ar-close{
  pointer-events:auto;
}
#ar-arrow-wrap{
  position:absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 120px);
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  pointer-events:none;
  filter: drop-shadow(0 0 22px rgba(0,0,0,0.55));
}
#ar-arrow{
  position:absolute;
  left:50%;
  top:50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%,-50%) rotate(0deg);
  transform-origin: 50% 60%;
  will-change: transform;
}
#ar-arrow svg{ width:100%; height:100%; }
#ar-bubble{
  position:absolute;
  left:50%;
  bottom: calc(env(safe-area-inset-bottom) + 260px);
  transform: translateX(-50%);
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.62);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(0,0,0,0.45);
  pointer-events:none;
  white-space: nowrap;
}
#ar-wrong{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,35,35,0.22);
  border: 1px solid rgba(255,35,35,0.45);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  display:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 26px rgba(255,35,35,0.18);
}


/* ✅ WC ICON + WC-AMPEL (Crowd-based) */
.marker { position: absolute; } /* ensure relative children can anchor */
.marker.wc { background: rgba(30,140,255,0.95); box-shadow: 0 0 14px rgba(30,140,255,0.75); }
.marker.wc::after{ content:""; position:absolute; inset:-8px; border-radius:999px; border:1px solid rgba(30,140,255,0.35); }

.wc-icon{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  filter: drop-shadow(0 0 10px rgba(30,140,255,0.55));
  pointer-events:none;
}

.wc-ampel{
  position:absolute;
  left: 14px;
  top: -6px;
  transform: translateY(-100%);
  display:flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 16px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}
.wc-ampel .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,0.20);
}
.wc-ampel.green .dot{ background: #27d17a; box-shadow: 0 0 14px rgba(39,209,122,.65); }
.wc-ampel.yellow .dot{ background: #ffd34d; box-shadow: 0 0 14px rgba(255,211,77,.65); }
.wc-ampel.red .dot{ background: #ff3b3b; box-shadow: 0 0 14px rgba(255,59,59,.75); }
.wc-ampel.unknown .dot{ background: rgba(255,255,255,0.25); }

#wc-legend{
  position:absolute;
  left: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  z-index: 96;
  display:none;
  width: min(420px, calc(100vw - 20px));
  background: rgba(15,15,15,0.60);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 10px 12px;
  color: rgba(255,255,255,0.92);
  font-family: Arial, sans-serif;
}
#wc-legend .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#wc-legend .title{ font-weight: 900; letter-spacing:.10em; text-transform: uppercase; font-size: 11px; opacity:.9; }
#wc-legend .sub{ margin-top:4px; font-size: 12px; opacity:.85; line-height:1.25; }
#wc-legend .mini{ display:flex; gap:10px; margin-top:8px; font-size: 11px; opacity:.90; }
#wc-legend .pill{ display:flex; align-items:center; gap:6px; padding: 4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08);}
#wc-legend .pill .dot{ width:10px; height:10px; border-radius:50%; }
#wc-legend .pill.g .dot{ background:#27d17a; }
#wc-legend .pill.y .dot{ background:#ffd34d; }
#wc-legend .pill.r .dot{ background:#ff3b3b; }

/* ✅ Staff panel (hidden, unlocked) */
#staff-panel{
  position:absolute;
  right: 10px;
  top: 210px;
  z-index: 97;
  display:none;
  width: min(320px, calc(100vw - 20px));
  background: rgba(15,15,15,0.62);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 10px 12px;
  color: rgba(255,255,255,0.92);
  font-family: Arial, sans-serif;
}
#staff-panel .h{
  font-weight: 900;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 11px;
  opacity:.9;
}
#staff-panel .p{
  margin-top:6px;
  font-size: 12px;
  opacity:.85;
  line-height: 1.25;
}
#staff-panel .btnrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.staff-btn{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.staff-btn.danger{ background: rgba(255,59,59,0.18); border-color: rgba(255,59,59,0.30); }


#ar-btn{
  /* place it directly under the Friends button */
  top: 250px;
  /* inherits the rest from .btn */
}

#ar-btn:hover{ background:rgba(0,0,0,.5); }
#ar-btn[hidden]{ display:none; }


/* ---------- Always-on floor markers (click/tap without opening via menu) ---------- */
/* Your base CSS hides markers by default (.marker{display:none;}). 
   We override for the 4 floors so they are always visible + tappable. */
#marker-techno,
#marker-house,
#marker-hard,
#marker-groove{
  display: block !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}


/* ---------- Floor markers: invisible but tappable + bigger hit area ---------- */
/* Hide the visible "dot" but keep click/tap working. */
#marker-techno,
#marker-house,
#marker-hard,
#marker-groove{
  opacity: 0 !important;          /* invisible */
  background: transparent !important;
  filter: none !important;
}

/* Big invisible hit area (only for floor markers) */
#marker-techno::after,
#marker-house::after,
#marker-hard::after,
#marker-groove::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(0,0,0,0);     /* invisible */
}


/* ---------- WC markers: invisible + big tap area ---------- */
#marker-wc1,
#marker-wc2{
  opacity: 0 !important;
  background: transparent !important;
  filter: none !important;
}

#marker-wc1::after,
#marker-wc2::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(0,0,0,0);
}

/* ---------- Groove floor: HUGE tap zone ---------- */
#marker-groove{
  opacity: 0 !important;
}

#marker-groove::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 200px;   /* very large tap area */
  height: 200px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(0,0,0,0);
}


/* ---------- WC markers: force clickable even if base CSS hides markers ---------- */
#marker-wc1,
#marker-wc2{
  display: block !important;
  pointer-events: auto !important;
}

/* PERFORMANCE OPTIMIZATION */
#map-wrap, #map, .map-container {
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

#map {
  image-rendering: optimizeQuality;
}

canvas#heatmap-canvas {
  will-change: opacity, transform;
}