:root {
  --rust: #c0392b; --rust-dim: #8b1a12; --orange: #e67e22;
  --steel: #2c3e50; --smoke: #95a5a6; --paper: #f5f0e8;
  --dark: #0d0f0e; --darker: #080a09;
  --sound-color: #e74c3c; --photo-color: #3498db;
  --video-color: #9b59b6; --text-color: #f39c12; --route-color: #2ecc71;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overscroll-behavior:none; }
body { background:var(--darker); color:var(--paper); font-family:'PT Mono',monospace; overflow:hidden; }

/* HEADER */
#header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(8,10,9,0.97); border-bottom:1px solid rgba(192,57,43,0.4);
  padding:0 16px; height:52px; display:flex; align-items:center; gap:14px;
}
#logo {
  font-family:'Unbounded',sans-serif; font-weight:900; font-size:20px;
  color:var(--rust); letter-spacing:-1px; line-height:1; white-space:nowrap;
}
#logo span { display:block; font-size:7px; font-family:'PT Mono',monospace; color:var(--smoke); letter-spacing:3px; margin-top:1px; }
.vsep { width:1px; height:28px; background:rgba(192,57,43,0.25); flex-shrink:0; }
#project-title { font-family:'Unbounded',sans-serif; font-weight:700; font-size:13px; letter-spacing:4px; }
#project-sub { font-size:8px; color:var(--smoke); letter-spacing:1.5px; margin-top:2px; white-space:nowrap; }

/* TOOLBAR */
#toolbar { margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.tb-group { display:flex; gap:4px; align-items:center; }
.tb-sep { width:1px; height:22px; background:rgba(255,255,255,0.1); margin:0 4px; }

.layer-btn {
  display:flex; align-items:center; gap:5px; padding:4px 10px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.4); font-family:'PT Mono',monospace; font-size:9px;
  letter-spacing:1px; cursor:pointer; transition:all 0.2s; white-space:nowrap; --dc: #fff;
}
.layer-btn.active { color:#fff; border-color:var(--dc) !important; background:rgba(255,255,255,0.08); box-shadow:0 0 8px color-mix(in srgb, var(--dc) 30%, transparent) !important; }
.layer-btn[data-layer="sound"] { --dc: var(--sound-color); }
.layer-btn[data-layer="photo"] { --dc: var(--photo-color); }
.layer-btn[data-layer="video"] { --dc: var(--video-color); }
.layer-btn[data-layer="text"]  { --dc: var(--text-color); }
.ldot { width:7px; height:7px; border-radius:50%; background:var(--dc); }

.icon-btn {
  width:32px; height:32px; border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.6);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all 0.2s; font-family:'PT Mono',monospace; flex-shrink:0;
}
.icon-btn:hover, .icon-btn.active { background:rgba(192,57,43,0.2); border-color:var(--rust); color:#fff; }
#mobile-menu-btn { display:none; }

/* ERA SWITCHER */
#era-switcher { display:flex; align-items:center; gap:0; }
.era-btn {
  padding:4px 8px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.35); font-family:'PT Mono',monospace; font-size:8px;
  letter-spacing:1px; cursor:pointer; transition:all 0.2s; margin-left:-1px;
}
.era-btn.active { background:rgba(192,57,43,0.25); border-color:var(--rust); color:#fff; z-index:1; position:relative; }

/* SEARCH */
#search-wrap {
  position:fixed; top:62px; left:50%; transform:translateX(-50%);
  z-index:900; width:320px; max-width:calc(100vw - 24px); display:none;
}
#search-wrap.open { display:block; }
#search-input {
  width:100%; padding:8px 14px; background:rgba(8,10,9,0.97);
  border:1px solid rgba(192,57,43,0.5); color:var(--paper);
  font-family:'PT Mono',monospace; font-size:12px; letter-spacing:1px; outline:none;
}
#search-input::placeholder { color:rgba(255,255,255,0.25); }
#search-results { background:rgba(8,10,9,0.97); border:1px solid rgba(192,57,43,0.3); border-top:none; max-height:280px; overflow-y:auto; }
.search-item { padding:8px 14px; cursor:pointer; font-size:11px; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:8px; transition:background 0.15s; }
.search-item:hover { background:rgba(192,57,43,0.15); }
.si-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ROUTES LIST PANEL */
#routes-list-panel {
  position:fixed; left:0; top:52px; bottom:0; width:300px;
  background:rgba(8,10,9,0.98); border-right:1px solid rgba(46,204,113,0.25);
  transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.23,1,0.32,1);
  z-index:850; overflow-y:auto;
}
#routes-list-panel.open { transform:translateX(0); }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
.panel-title { font-family:'Unbounded',sans-serif; font-size:11px; letter-spacing:3px; color:var(--route-color); }
.panel-close { background:none; border:none; color:var(--smoke); font-size:16px; cursor:pointer; }
.route-item { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer; transition:background 0.15s; }
.route-item:hover { background:rgba(46,204,113,0.08); }
.route-item-name { font-family:'Unbounded',sans-serif; font-size:11px; letter-spacing:1px; margin-bottom:4px; }
.route-item-meta { font-size:9px; color:var(--smoke); letter-spacing:1px; }
.route-item-desc { font-size:10px; color:rgba(245,240,232,0.6); margin-top:6px; line-height:1.5; }
.routes-empty { padding:20px 16px; font-size:10px; color:var(--smoke); letter-spacing:1px; line-height:1.6; }

/* MAP */
#map { position:fixed; top:52px; left:0; right:0; bottom:0; }
.leaflet-tile-pane { filter:grayscale(0.75) brightness(0.42) sepia(0.25); }

/* MARKERS */
.cm { width:30px; height:30px; border-radius:50%; border:2px solid; display:flex;
  align-items:center; justify-content:center; font-size:12px; cursor:pointer;
  transition:transform 0.2s; position:relative; }
.cm:hover { transform:scale(1.2); }
.cm::after { content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid; border-color:inherit; opacity:0; animation:pulse 2.5s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:0.4} 50%{transform:scale(1.6);opacity:0} }
.cm-sound { background:rgba(231,76,60,0.2); border-color:var(--sound-color); }
.cm-photo { background:rgba(52,152,219,0.2); border-color:var(--photo-color); }
.cm-video { background:rgba(155,89,182,0.2); border-color:var(--video-color); }
.cm-text  { background:rgba(243,156,18,0.2);  border-color:var(--text-color); }
.cm-in-route { box-shadow: 0 0 0 2px rgba(46,204,113,0.5); }

/* POINT CARD */
#card {
  position:fixed; right:0; top:52px; bottom:0; width:360px; max-width:100vw;
  background:rgba(8,10,9,0.98); border-left:1px solid rgba(192,57,43,0.25);
  transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.23,1,0.32,1);
  z-index:800; overflow-y:auto; overflow-x:hidden;
}
#card.open { transform:translateX(0); }
#card-bar { height:3px; width:100%; }
#card-in { padding:16px; }
#card-close {
  float:right; margin:-4px -4px 8px 8px; width:28px; height:28px;
  background:rgba(192,57,43,0.15); border:1px solid rgba(192,57,43,0.3);
  color:var(--rust); cursor:pointer; font-size:14px; display:flex;
  align-items:center; justify-content:center;
}
#card-close:hover { background:rgba(192,57,43,0.35); }
#card-type-lbl { font-size:8px; letter-spacing:3px; opacity:0.55; margin-bottom:6px; }
#card-title { font-family:'Unbounded',sans-serif; font-size:16px; font-weight:700; line-height:1.25; margin-bottom:4px; }
#card-era { font-size:8px; letter-spacing:2px; opacity:0.4; margin-bottom:12px; }
#card-media { margin-bottom:12px; }
#card-media img { width:100%; max-height:280px; object-fit:cover; filter:grayscale(0.3) contrast(1.1); border:1px solid rgba(255,255,255,0.08); }
#card-media video { width:100%; border:1px solid rgba(255,255,255,0.08); }
.photo-placeholder { width:100%; height:140px; background:linear-gradient(135deg,#111 0%,#1e1e1e 100%);
  border:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; }

#audio-player { background:rgba(231,76,60,0.08); border:1px solid rgba(231,76,60,0.25); padding:10px 12px; }
#audio-player audio { width:100%; }

#card-text { font-size:12px; line-height:1.75; color:rgba(245,240,232,0.82); margin-bottom:12px; white-space:pre-wrap; }
#card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.tag { padding:2px 7px; border:1px solid rgba(255,255,255,0.12); font-size:8px; letter-spacing:2px; color:var(--smoke); }
#card-routes { margin-top:8px; }
.card-route-chip {
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px; margin:0 6px 6px 0;
  border:1px solid rgba(46,204,113,0.35); background:rgba(46,204,113,0.08);
  color:var(--route-color); font-size:9px; letter-spacing:1px; cursor:pointer;
}
.card-route-chip:hover { background:rgba(46,204,113,0.2); }

/* WALK PANEL */
#walk-panel {
  position:fixed; bottom:0; left:0; right:0; z-index:820;
  background:rgba(8,10,9,0.97); border-top:1px solid rgba(46,204,113,0.3);
  transform:translateY(100%); transition:transform 0.3s ease;
}
#walk-panel.open { transform:translateY(0); }
#walk-header { display:flex; align-items:center; padding:10px 16px; gap:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
#walk-title { font-family:'Unbounded',sans-serif; font-size:11px; color:var(--route-color); letter-spacing:3px; }
#walk-desc { font-size:9px; color:var(--smoke); letter-spacing:1px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#walk-close { background:none; border:none; color:var(--smoke); cursor:pointer; font-size:16px; }
#walk-stops { flex:1; display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:10px 16px; }
.ws { display:flex; align-items:center; gap:0; flex-shrink:0; }
.ws-dot {
  width:34px; height:34px; border-radius:50%; border:2px solid rgba(46,204,113,0.4);
  background:rgba(46,204,113,0.08); display:flex; align-items:center; justify-content:center;
  font-family:'Unbounded',sans-serif; font-size:10px; cursor:pointer; transition:all 0.2s;
  position:relative; flex-shrink:0;
}
.ws-dot.current { border-color:var(--route-color); background:rgba(46,204,113,0.25); color:#fff; }
.ws-dot.done { border-color:rgba(46,204,113,0.25); background:rgba(46,204,113,0.05); color:rgba(255,255,255,0.3); }
.ws-line { width:28px; height:1px; background:linear-gradient(90deg,rgba(46,204,113,0.5),rgba(46,204,113,0.1)); align-self:center; }
.ws-label { font-size:8px; color:var(--smoke); margin-top:3px; text-align:center; max-width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
#walk-nav { display:flex; gap:8px; margin-left:auto; flex-shrink:0; padding:10px 16px 10px 0; }
.walk-nav-btn { padding:6px 14px; font-family:'PT Mono',monospace; font-size:9px; letter-spacing:2px;
  border:1px solid rgba(46,204,113,0.4); background:rgba(46,204,113,0.1); color:var(--route-color); cursor:pointer; }
.walk-nav-btn:hover { background:rgba(46,204,113,0.25); }
.walk-nav-btn:disabled { opacity:0.3; cursor:default; }

/* RANDOM TOAST */
#random-toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(80px);
  z-index:1000; background:rgba(8,10,9,0.97); border:1px solid rgba(192,57,43,0.4);
  padding:8px 20px; font-size:10px; letter-spacing:2px; color:var(--rust);
  transition:transform 0.3s ease; white-space:nowrap;
}
#random-toast.show { transform:translateX(-50%) translateY(0); }

/* COUNTER */
#counter { position:fixed; bottom:12px; left:12px; z-index:700; display:flex; gap:10px; }
.ci { font-size:9px; letter-spacing:1px; color:var(--smoke); opacity:0.55; display:flex; align-items:center; gap:5px; }
.ci-dot { width:5px; height:5px; border-radius:50%; }

/* ADMIN LINK */
#admin-link {
  position:fixed; bottom:12px; left:12px; z-index:900;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--paper); text-decoration:none; font-size:16px;
  background:rgba(192,57,43,0.25); border:1px solid var(--rust);
  box-shadow:0 0 10px rgba(0,0,0,0.4);
}
#admin-link:hover { background:rgba(192,57,43,0.5); color:#fff; }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--rust-dim); }
.leaflet-popup-content-wrapper { background:rgba(8,10,9,0.95)!important; border:1px solid rgba(192,57,43,0.35)!important; border-radius:0!important; color:var(--paper)!important; font-family:'PT Mono',monospace!important; }
.leaflet-popup-tip { background:rgba(8,10,9,0.95)!important; }

/* ═══════════════ MOBILE ═══════════════ */
@media (max-width: 720px) {
  #project-sub { display:none; }
  #project-title { font-size:11px; }

  #toolbar { gap:4px; }
  #layer-group, #era-switcher, .tb-sep:nth-of-type(1) { display:none; }
  #toolbar.expanded #layer-group,
  #toolbar.expanded #era-switcher,
  #toolbar.expanded .tb-sep:nth-of-type(1) { display:flex; }
  #mobile-menu-btn { display:flex; }

  #toolbar.expanded {
    position:fixed; top:52px; left:0; right:0; background:rgba(8,10,9,0.98);
    flex-wrap:wrap; padding:10px; gap:8px; border-bottom:1px solid rgba(192,57,43,0.3);
    margin-left:0; z-index:999;
  }

  #card { width:100vw; top:auto; bottom:0; height:70vh; transform:translateY(100%); border-left:none; border-top:1px solid rgba(192,57,43,0.25); }
  #card.open { transform:translateY(0); }

  #routes-list-panel { width:85vw; }

  #walk-panel { padding-bottom:env(safe-area-inset-bottom); }
  #walk-nav { padding-right:10px; }
  .walk-nav-btn { padding:6px 10px; }

  #counter { flex-wrap:wrap; max-width:120px; }
}