@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#16241F;
  --panel:#1F332C;
  --panel-light:#2A4335;
  --parchment:#ECE6D4;
  --parchment-dim:#DFD6B8;
  --gold:#D4A017;
  --mint:#5FBF8B;
  --coral:#E2694B;
  --lavender:#9B8FD9;
  --text-light:#F3EFE0;
  --text-dark:#1B241E;
  --font-display:'Fraunces', serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'Space Mono', monospace;
  --radius:14px;
  --shadow:0 10px 30px rgba(10,20,15,0.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink);
  background-image:
    linear-gradient(var(--panel-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-light) 1px, transparent 1px);
  background-size:48px 48px;
  background-attachment:fixed;
  color:var(--text-light);
  min-height:100vh;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

/* Plumbob signature element */
.diamond{
  display:inline-block;
  width:9px; height:9px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(22,36,31,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(212,160,23,0.25);
}
.nav-wrap{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700; font-size:1.4rem; letter-spacing:0.01em;
  color:var(--text-light);
}
.brand .diamond{width:14px;height:14px; background:var(--mint);}

.nav-list{
  list-style:none; display:flex; gap:4px; margin:0; padding:0;
  align-items:center;
}
.nav-item{position:relative;}
.nav-link{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:8px;
  font-size:0.95rem; font-weight:600;
  color:var(--text-light); opacity:0.85;
  cursor:pointer; border:none; background:none;
}
.nav-link:hover, .nav-item.active > .nav-link{
  opacity:1; background:rgba(212,160,23,0.12); color:var(--gold);
}
.nav-caret{
  width:0; height:0; margin-left:2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:0.7;
}
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:210px;
  background:var(--panel); border:1px solid rgba(212,160,23,0.2);
  border-radius:10px; box-shadow:var(--shadow);
  padding:8px; display:none; flex-direction:column; gap:2px;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{display:flex;}
.dropdown a{
  padding:9px 12px; border-radius:6px; font-size:0.9rem;
  display:flex; align-items:center; gap:8px;
  color:var(--text-light); opacity:0.9;
}
.dropdown a:hover{background:rgba(95,191,139,0.15); color:var(--mint); opacity:1;}
.dropdown .empty{padding:9px 12px; font-size:0.85rem; opacity:0.5; font-style:italic;}

.nav-search{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(243,239,224,0.25);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-light); background:transparent; cursor:pointer;
}
.nav-search:hover{border-color:var(--gold); color:var(--gold);}

.nav-toggle{display:none;}

@media (max-width: 860px){
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px;height:38px; border-radius:8px; border:1px solid rgba(243,239,224,0.25);
    background:none; color:var(--text-light); cursor:pointer;
  }
  .nav-list{
    position:fixed; top:69px; left:0; right:0; bottom:0;
    background:var(--ink); flex-direction:column; align-items:stretch;
    padding:16px; overflow-y:auto; gap:6px;
    display:none;
  }
  .nav-list.open{display:flex;}
  .nav-item{width:100%;}
  .dropdown{position:static; display:none; box-shadow:none; border:none; margin-left:14px; width:100%;}
  .nav-item.expanded .dropdown{display:flex;}
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid rgba(212,160,23,0.2);
  padding:36px 28px; margin-top:80px;
  text-align:center; font-size:0.85rem; opacity:0.6;
}

/* ---------- Layout helpers ---------- */
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
.section{padding:64px 0;}
.eyebrow{
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--mint); display:flex; align-items:center; gap:8px;
  margin-bottom:14px;
}
h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0 0 12px;}
h1{font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.05;}
h2{font-size:clamp(1.6rem, 3vw, 2.3rem);}
p{line-height:1.65; opacity:0.9;}
.lede{font-size:1.15rem; opacity:0.85; max-width:640px;}

/* ---------- Hero ---------- */
.hero{
  padding:90px 0 60px; position:relative; overflow:hidden;
}
.hero-plumbob{
  position:absolute; top:-40px; right:-40px;
  width:280px; height:280px; background:linear-gradient(135deg, var(--gold), var(--coral));
  transform:rotate(45deg); border-radius:24px;
  opacity:0.18; filter:blur(2px);
}
.hero-inner{position:relative; z-index:1;}

/* ---------- Cards ---------- */
.card-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  background:var(--parchment); color:var(--text-dark);
  border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  display:flex; flex-direction:column; gap:10px;
  border:1px solid rgba(0,0,0,0.05);
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(10,20,15,0.35);}
.card .thumb{
  width:100%; aspect-ratio:16/10; border-radius:8px;
  background:var(--parchment-dim);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:rgba(27,36,30,0.35);
  font-family:var(--font-mono); font-size:0.75rem;
}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card h3{font-size:1.15rem; margin-bottom:2px;}
.card .meta{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--coral); display:flex; align-items:center; gap:6px;
}
.card p{font-size:0.92rem; opacity:0.85; margin:0;}
.card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto;}
.tag{
  font-family:var(--font-mono); font-size:0.68rem; padding:3px 8px;
  border-radius:20px; background:rgba(95,191,139,0.18); color:#2b5c42;
}

.feature-nav{
  display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  margin-top:40px;
}
.feature-card{
  background:var(--panel); border:1px solid rgba(212,160,23,0.18);
  border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:10px;
  transition:border-color 0.18s ease, transform 0.18s ease;
}
.feature-card:hover{border-color:var(--gold); transform:translateY(-3px);}
.feature-card .diamond{margin-bottom:6px;}
.feature-card h3{font-size:1.2rem;}
.feature-card p{font-size:0.9rem;}
.feature-card .go{
  margin-top:auto; font-family:var(--font-mono); font-size:0.75rem;
  color:var(--gold); display:flex; align-items:center; gap:6px;
}

/* ---------- Toolbar / filters ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:28px 0 36px;
}
.pill{
  font-family:var(--font-mono); font-size:0.78rem;
  padding:7px 14px; border-radius:20px;
  border:1px solid rgba(243,239,224,0.25);
  background:transparent; color:var(--text-light); cursor:pointer;
  opacity:0.75;
}
.pill:hover{opacity:1;}
.pill.active{background:var(--mint); color:var(--ink); border-color:var(--mint); opacity:1;}
.search-input{
  font-family:var(--font-body); font-size:0.92rem;
  padding:9px 14px; border-radius:20px; flex:1; min-width:200px;
  border:1px solid rgba(243,239,224,0.25); background:rgba(255,255,255,0.03);
  color:var(--text-light);
}
.search-input::placeholder{color:rgba(243,239,224,0.4);}

.empty-state{
  padding:50px 20px; text-align:center; opacity:0.6;
  border:1px dashed rgba(243,239,224,0.25); border-radius:var(--radius);
  font-family:var(--font-mono); font-size:0.85rem;
}

/* ---------- Detail panel ---------- */
.detail-panel{
  background:var(--parchment); color:var(--text-dark);
  border-radius:var(--radius); padding:30px; box-shadow:var(--shadow);
  margin-top:10px;
}

/* ---------- Family tree ---------- */
.tree-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px;
  background:var(--panel); border-radius:var(--radius); padding:20px;
  border:1px solid rgba(212,160,23,0.18);
}
.tree-toolbar .field{display:flex; flex-direction:column; gap:6px; font-size:0.8rem;}
.tree-toolbar label{font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; opacity:0.7;}
.tree-toolbar input, .tree-toolbar select{
  padding:8px 10px; border-radius:8px; border:1px solid rgba(243,239,224,0.25);
  background:rgba(255,255,255,0.04); color:var(--text-light); font-family:var(--font-body);
}
.btn{
  font-family:var(--font-mono); font-size:0.8rem; padding:9px 16px;
  border-radius:8px; border:none; cursor:pointer; align-self:flex-end;
  background:var(--gold); color:var(--ink); font-weight:700;
}
.btn.secondary{background:transparent; border:1px solid rgba(243,239,224,0.3); color:var(--text-light);}
.btn:hover{filter:brightness(1.08);}

#tree-canvas-wrap{
  position:relative; overflow:auto; min-height:420px;
  background:var(--panel); border-radius:var(--radius); border:1px solid rgba(212,160,23,0.18);
  padding:40px 20px;
}
#tree-canvas-inner{position:relative; display:block; width:max-content; min-width:100%;}
.tree-gen-row{display:flex; gap:36px; justify-content:center; margin-bottom:70px; position:relative;}
.tree-node{
  background:var(--parchment); color:var(--text-dark); border-radius:10px;
  padding:12px 14px; min-width:140px; text-align:center; position:relative;
  box-shadow:var(--shadow); font-size:0.85rem; font-weight:700;
}
.tree-node .sub{display:block; font-family:var(--font-mono); font-size:0.65rem; font-weight:400; opacity:0.6; margin-top:3px;}
.tree-node .remove{
  position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%;
  background:var(--coral); color:#fff; border:none; font-size:0.7rem; cursor:pointer; line-height:1;
}
#tree-svg{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;}

/* ---------- Save file log ---------- */
.save-log{display:flex; flex-direction:column; gap:14px; margin-top:10px;}
.save-log-item{
  background:var(--parchment); color:var(--text-dark);
  border-radius:var(--radius); padding:20px 22px;
  box-shadow:var(--shadow); position:relative;
  border-left:4px solid var(--gold);
}
.save-log-item.latest{border-left-color:var(--mint);}
.save-log-item .row-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.save-log-item .version{font-family:var(--font-display); font-weight:700; font-size:1.2rem;}
.save-log-item .date{font-family:var(--font-mono); font-size:0.75rem; opacity:0.6;}
.save-log-item p{margin:8px 0 0; font-size:0.92rem;}
.badge-latest{
  font-family:var(--font-mono); font-size:0.65rem; text-transform:uppercase;
  background:var(--mint); color:var(--ink); padding:3px 9px; border-radius:20px; letter-spacing:0.05em;
}
.download-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  background:var(--gold); color:var(--ink); font-weight:700;
  padding:12px 22px; border-radius:8px; font-family:var(--font-mono); font-size:0.85rem;
}
.download-cta:hover{filter:brightness(1.08);}
.download-cta.disabled{background:rgba(243,239,224,0.15); color:var(--text-light); opacity:0.6; pointer-events:none;}

/* ---------- Towniepedia world sections ---------- */
.jump-chips{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 40px;}
.world-section{margin-bottom:56px; scroll-margin-top:90px;}
.world-band{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  padding-bottom:10px; border-bottom:2px solid var(--world-color, var(--gold));
}
.world-band h2{margin:0; font-size:1.5rem;}
.world-band .count{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--world-color, var(--gold));
  background:rgba(243,239,224,0.06); border:1px solid var(--world-color, var(--gold));
  padding:3px 10px; border-radius:20px;
}

/* ---------- Uploader ---------- */
.dropzone{
  border:2px dashed rgba(212,160,23,0.4); border-radius:var(--radius);
  padding:50px 20px; text-align:center; cursor:pointer;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.drag-active{
  border-color:var(--gold); background:rgba(212,160,23,0.06);
}
.dropzone .diamond{margin-bottom:12px;}
.dropzone h3{margin-bottom:6px;}
.dropzone p{font-size:0.85rem; opacity:0.65; margin:0;}

.setup-notice{
  display:none; background:var(--parchment); color:var(--text-dark);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
}
.setup-notice ol{margin:14px 0 0; padding-left:20px; font-size:0.92rem; line-height:1.7;}
.setup-notice code{
  background:rgba(0,0,0,0.06); padding:2px 6px; border-radius:4px; font-family:var(--font-mono); font-size:0.85em;
}

.upload-list{display:flex; flex-direction:column; gap:12px; margin-top:24px;}
.upload-row{
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border:1px solid rgba(212,160,23,0.18);
  border-radius:10px; padding:12px 16px;
}
.upload-thumb{width:52px; height:52px; object-fit:cover; border-radius:6px; flex-shrink:0;}
.upload-info{flex:1; min-width:0;}
.upload-name{font-size:0.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.upload-status{font-family:var(--font-mono); font-size:0.72rem; opacity:0.7; margin-top:2px;}
.upload-bar{height:4px; background:rgba(243,239,224,0.15); border-radius:4px; margin-top:6px; overflow:hidden;}
.upload-bar-fill{height:100%; background:var(--mint); transition:width 0.15s ease;}
.upload-result{display:flex; gap:8px; align-items:center; flex-shrink:0;}
.upload-result .upload-url{width:220px; font-family:var(--font-mono); font-size:0.75rem;}

/* ---------- Responsive ---------- */
@media (max-width: 600px){
  .nav-wrap{padding:14px 18px;}
  .section{padding:44px 0;}
}