/* Darkeport Universe Hub — LegendKeeper Explorer v1 */
:root {
  --navy: #010643; --dk-blue: #0F3383; --med-blue: #3397F7;
  --ice-blue: #ACF9FF; --white: #FFFFFF; --gold: #D4A843;
  --ember: #E8956A; --pale-gold: #F2C078; --crimson: #C75D5D;
  --teal: #4DB8B8; --jade: #6ECFCF; --verdant: #7ACC7A;
  --amethyst: #B088D0; --lavender: #C8A0E0; --parchment: #C4B896;
  --bg: #020824; --bg-card: rgba(8,16,60,0.65);
  --bg-sidebar: #010A1E; --bg-panel: #030B28;
  --border: rgba(51,151,247,0.12); --border-gold: rgba(212,168,67,0.15);
  --text-p: #F0EDE6; --text-s: #C4B896; --text-m: #8898B8;
  --ff: 'Playfair Display', Georgia, serif;
  --sidebar-w: 280px; --meta-w: 220px; --bc-h: 50px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--ff);background:var(--bg);color:var(--text-p);font-size:16px;line-height:1.75;height:100%;-webkit-font-smoothing:antialiased;overflow:hidden;position:fixed;width:100%;top:0;left:0;overscroll-behavior:none}
a{color:var(--ice-blue);text-decoration:none}a:hover{color:var(--ember)}
button{font-family:var(--ff);cursor:pointer}
img{max-width:100%;height:auto}

/* Shell */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr var(--meta-w);grid-template-rows:var(--bc-h) minmax(0,1fr);height:100vh;height:100dvh;width:100vw;overflow:hidden}

/* Breadcrumb */
.bc{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:10px;padding:0 14px;background:rgba(1,6,67,0.97);border-bottom:1px solid var(--border-gold);z-index:50;backdrop-filter:blur(12px)}
.bc-logo{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;padding-right:14px;border-right:1px solid var(--border);margin-right:4px}
.bc-logo img{width:26px}
.bc-logo span{font-size:13px;color:var(--gold);letter-spacing:3px;font-weight:700}
.bc-trail{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.bc-trail::-webkit-scrollbar{display:none}
.bc-sep{color:var(--text-m);font-size:10px;margin:0 2px;opacity:0.3}
.bc-btn{font-size:11px;color:var(--text-m);letter-spacing:1px;text-transform:uppercase;padding:5px 8px;border-radius:4px;background:none;border:none;cursor:pointer;transition:all 0.2s;white-space:nowrap;display:flex;align-items:center;gap:5px}
.bc-btn:hover{color:var(--gold);background:rgba(212,168,67,0.06)}
.bc-btn.cur{color:var(--text-p)}
.bc-icon{font-size:13px;opacity:0.6}
.bc-search{margin-left:auto;background:rgba(1,6,67,0.5);border:1px solid var(--border-gold);color:var(--white);font-size:13px;padding:5px 12px;border-radius:5px;width:170px;outline:none;min-height:32px;flex-shrink:0}
.bc-search:focus{border-color:rgba(212,168,67,0.4)}
.bc-ham{display:none;background:none;border:1px solid var(--border);border-radius:4px;padding:5px;width:32px;height:32px;flex-direction:column;justify-content:center;align-items:center;gap:3px;cursor:pointer;flex-shrink:0}
.bc-ham span{display:block;width:14px;height:1.5px;background:var(--ice-blue);border-radius:1px}

/* Sidebar */
.side{grid-column:1;grid-row:2;background:var(--bg-sidebar);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;min-height:0;padding:10px 0;scrollbar-width:thin;scrollbar-color:rgba(212,168,67,0.12) transparent;-webkit-overflow-scrolling:touch}
.side::-webkit-scrollbar{width:5px}
.side::-webkit-scrollbar-thumb{background:rgba(212,168,67,0.1);border-radius:3px}

/* Tree */
.tn{}
.tr{display:flex;align-items:center;gap:3px;padding:4px 6px 4px 0;cursor:pointer;transition:background 0.12s;border-radius:0 4px 4px 0;margin-right:4px;min-height:30px}
.tr:hover{background:rgba(212,168,67,0.05)}
.tr.sel{background:rgba(212,168,67,0.1);border-left:3px solid var(--gold)}
.tt{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-m);flex-shrink:0;transition:transform 0.2s;border-radius:3px}
.tt:hover{color:var(--gold);background:rgba(212,168,67,0.1)}
.tt.op{transform:rotate(90deg)}
.tt.em{visibility:hidden}
.ti{font-size:13px;flex-shrink:0;width:18px;text-align:center;opacity:0.7}
.tl{font-size:12px;color:var(--text-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr.sel .tl{color:var(--text-p);font-weight:600}
.tr:hover .tl{color:var(--text-p)}
.tc{padding-left:14px}
.tc.hide{display:none}
.tcnt{font-size:9px;color:var(--text-m);opacity:0.4;margin-left:auto;padding-right:6px}

/* Content */
.cp{grid-column:2;grid-row:2;overflow-y:auto;overflow-x:hidden;min-height:0;background:var(--bg-panel);scrollbar-width:thin;scrollbar-color:rgba(212,168,67,0.12) transparent;-webkit-overflow-scrolling:touch}
.cp::-webkit-scrollbar{width:7px}
.cp::-webkit-scrollbar-thumb{background:rgba(212,168,67,0.1);border-radius:4px}
.ci{max-width:800px;margin:0 auto;padding:28px 36px 70px}
.ci h1{font-size:32px;color:var(--text-p);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.ci h1 .ic{font-size:24px;opacity:0.6}
.ci h2{font-size:20px;color:var(--text-p);font-weight:600;margin-top:28px;margin-bottom:4px}
.ci .sl{width:28px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:14px}
.ci .desc{font-size:16px;color:var(--parchment);line-height:1.85;margin-bottom:16px}
.ci .quote{border-left:3px solid var(--amethyst);padding:14px 20px;margin:16px 0;background:rgba(176,136,208,0.04);border-radius:0 6px 6px 0}
.ci .quote p{font-size:17px;color:var(--lavender);font-style:italic;line-height:1.7;margin:0}
.ci .quote cite{display:block;font-size:12px;color:var(--text-m);font-style:normal;margin-top:6px}

/* Entry grids */
.eg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
.ec{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:14px;cursor:pointer;transition:all 0.3s cubic-bezier(0.22,1,0.36,1)}
.ec:hover{border-color:rgba(212,168,67,0.2);transform:translateY(-2px);box-shadow:0 6px 18px rgba(212,168,67,0.06)}
.ec-t{font-size:14px;color:var(--text-p);font-weight:600;margin-bottom:3px}
.ec-s{font-size:11px;color:var(--text-m);margin-bottom:5px}
.ec-d{font-size:12px;color:var(--text-s);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Episode row */
.epr{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03);align-items:start;cursor:pointer;transition:background 0.12s;border-radius:4px;padding-left:6px}
.epr:hover{background:rgba(212,168,67,0.03)}
.epn{font-size:12px;color:var(--text-m);letter-spacing:1px;font-weight:600;min-width:44px;flex-shrink:0}
.ept{font-size:15px;color:var(--text-p);font-weight:600}
.epa{font-size:11px;color:var(--med-blue);margin-left:auto;flex-shrink:0}

/* Journal */
.jt{font-size:16px;color:var(--parchment);line-height:1.85}

/* Badges */
.bg{font-size:10px;padding:3px 8px;border-radius:3px;letter-spacing:0.3px}
.bg-bk{background:rgba(51,151,247,0.12);color:rgba(51,151,247,0.8)}
.bg-ac{background:rgba(172,249,255,0.08);color:#90C8D0}
.bg-de{background:rgba(180,60,60,0.12);color:#CC6666}
.bg-dp{background:rgba(15,51,131,0.25);color:#78B0B8}

/* Meta panel */
.mp{grid-column:3;grid-row:2;background:var(--bg-sidebar);border-left:1px solid var(--border);overflow-y:auto;padding:18px 14px;scrollbar-width:thin;scrollbar-color:rgba(212,168,67,0.1) transparent}
.mp::-webkit-scrollbar{width:4px}
.mp::-webkit-scrollbar-thumb{background:rgba(212,168,67,0.08);border-radius:2px}
.mh{font-size:10px;color:var(--text-m);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;margin-top:16px}
.mh:first-child{margin-top:0}
.mt{display:flex;flex-wrap:wrap;gap:5px}
.mtg{font-size:10px;padding:3px 8px;background:rgba(212,168,67,0.07);border:1px solid var(--border-gold);border-radius:3px;color:var(--gold);cursor:pointer;transition:all 0.2s}
.mtg:hover{background:rgba(212,168,67,0.14)}
.mf{padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.mfl{font-size:10px;color:var(--text-m);text-transform:uppercase;letter-spacing:1px}
.mfv{font-size:13px;color:var(--text-p)}
.ml{display:block;font-size:12px;color:var(--ice-blue);padding:3px 0;cursor:pointer;transition:color 0.2s}
.ml:hover{color:var(--gold)}

/* Home */
.hh{text-align:center;padding:50px 20px}
.hh img{max-width:260px;margin-bottom:12px}
.hh .hq{font-size:19px;color:var(--parchment);font-style:italic;max-width:440px;margin:0 auto 20px;line-height:1.65}
.hs{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.sn{font-size:26px;color:var(--gold);font-weight:700}
.sl2{font-size:9px;color:var(--text-m);letter-spacing:2px;text-transform:uppercase}

/* Map */
.cm{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border-gold);margin:14px 0}
.cm img{width:100%;display:block}

/* Buttons */
.bp{font-size:11px;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(135deg,var(--ember),#C07048);border:1px solid rgba(232,149,106,0.3);color:var(--white);padding:10px 24px;border-radius:5px;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-block}
.bp:hover{box-shadow:0 0 16px rgba(232,149,106,0.2);color:var(--white)}
.bs{font-size:11px;letter-spacing:3px;text-transform:uppercase;background:transparent;border:1px solid rgba(212,168,67,0.3);color:var(--gold);padding:10px 24px;border-radius:5px;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-block}
.bs:hover{background:rgba(212,168,67,0.06);border-color:var(--gold)}

/* Portrait */
.ptrt{width:90px;height:90px;border-radius:50%;object-fit:cover;border:2px solid rgba(212,168,67,0.3);flex-shrink:0}
.ptic{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700;flex-shrink:0}

/* Filter */
.fb{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.fbtn{background:transparent;border:1px solid var(--border);color:var(--text-s);font-size:11px;padding:4px 12px;border-radius:5px;cursor:pointer;transition:all 0.2s}
.fbtn.ac{background:rgba(212,168,67,0.08);border-color:rgba(212,168,67,0.3);color:var(--gold)}

/* Pin pulse */
@keyframes pp{0%,100%{box-shadow:0 0 8px rgba(212,168,67,0.3)}50%{box-shadow:0 0 16px rgba(212,168,67,0.6)}}
.mp-pin.active span{width:18px!important;height:18px!important;animation:none!important;box-shadow:0 0 16px rgba(172,249,255,0.6)!important;background:var(--ice-blue)!important}

/* Responsive */
@media(max-width:1024px){
  :root{--meta-w:0px}
  .shell{grid-template-columns:var(--sidebar-w) 1fr}
  .mp{display:none}
}
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .shell{grid-template-columns:1fr;height:100vh;height:100dvh;overflow:hidden}
  /* Content takes full width on mobile */
  .bc{grid-column:1}
  .cp{grid-column:1;grid-row:2;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-width:100vw;width:100%}
  /* Force all content to stay within bounds */
  .ci{padding:18px 14px calc(50px + env(safe-area-inset-bottom));max-width:100%;width:100%;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}
  .ci *{max-width:100%;box-sizing:border-box}
  .ci h1{font-size:20px;flex-wrap:wrap}
  .ci h2{font-size:18px}
  .ci .desc{font-size:14px}
  .ci img{max-width:100%;height:auto}
  /* Flex layouts that might overflow */
  .ci div[style*="display:flex"]{flex-wrap:wrap}
  /* YouTube embeds */
  .ci div[style*="padding-bottom:56.25"]{max-width:100%}
  /* Drawer sidebar */
  .side{display:none;position:fixed;top:var(--bc-h);left:0;bottom:0;width:280px;z-index:100;border-right:1px solid var(--border-gold);background:var(--bg-sidebar);overflow-y:auto}
  .side.open{display:block}
  /* Overlay behind drawer */
  .drawer-overlay{display:none;position:fixed;top:var(--bc-h);left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:90;backdrop-filter:blur(2px)}
  .drawer-overlay.show{display:block}
  /* Hamburger visible */
  .bc-ham{display:flex}
  .bc-search{width:100px}
  /* Meta panel hidden (rendered inline in content instead) */
  .mp{display:none}
  /* Mobile meta section at bottom of content */
  .mobile-meta{display:block;margin-top:28px;padding:14px;background:rgba(1,10,30,0.6);border:1px solid var(--border);border-radius:8px}
  .mobile-meta .mh{margin-top:12px}
  .mobile-meta .mh:first-child{margin-top:0}
  /* Cards single column */
  .eg{grid-template-columns:1fr}
  .ec{overflow:hidden}
  .ec-t,.ec-s,.ec-d{overflow:hidden;text-overflow:ellipsis}
  /* Portrait smaller */
  .ptrt{width:70px;height:70px}
  /* Breadcrumb compact */
  .bc{gap:6px;padding:0 10px;overflow:hidden}
  .bc-trail{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bc-btn{font-size:10px;padding:4px 6px;flex-shrink:0}
  .bc-sep{margin:0 1px;flex-shrink:0}
  /* Episode rows stack */
  .epr{flex-direction:column;gap:4px;overflow:hidden}
  .ept{font-size:14px;overflow:hidden;text-overflow:ellipsis}
  .epn{min-width:auto}
  /* Touch-friendly tree rows */
  .tr{min-height:40px;padding:6px 8px 6px 0}
  .tl{font-size:13px}
  .tt{width:28px;height:28px;font-size:16px}
  .ti{font-size:14px}
  /* Buttons full width */
  .bp,.bs{width:100%;text-align:center;padding:12px 20px}
  /* Quote blocks */
  .ci .quote{padding:12px 14px;overflow:hidden}
  .ci .quote p{font-size:14px}
  /* Map containers */
  .cm{max-width:100%;overflow:hidden}
  /* Journal text */
  .jt{font-size:14px;overflow-wrap:break-word}
  /* Stats grid */
  .hs{gap:16px}
  .sn{font-size:22px}
}
@media(max-width:480px){
  .bc-logo span{display:none}
  .bc-search{width:80px;font-size:12px;padding:4px 8px}
  .ci{padding:14px 10px 40px}
  .ci h1{font-size:20px;gap:6px}
  .ci h1 .ic{font-size:18px}
  .bc-btn{font-size:9px;padding:3px 5px}
  .bc-sep{font-size:8px}
}
/* Hide mobile meta on desktop */
@media(min-width:769px){
  .mobile-meta{display:none}
  .drawer-overlay{display:none!important}
}
@keyframes pp{0%,100%{box-shadow:0 0 8px rgba(212,168,67,0.3)}50%{box-shadow:0 0 16px rgba(212,168,67,0.6)}}
.mp-pin.active span{width:18px!important;height:18px!important;animation:none!important;box-shadow:0 0 16px rgba(172,249,255,0.6)!important}