/* ============================================================
   Dragon's Ledger — DM Campaign Hub
   Dark fantasy / parchment theme
   ============================================================ */
:root{
  --bg:#0e0b08; --bg2:#171009; --panel:#1d1509; --panel2:#241a0c;
  --ink:#e8dcc0; --ink-dim:#b8a884; --muted:#8a7a5c;
  --gold:#c9a44c; --gold-bright:#e9c96b; --gold-dark:#8a6d2c;
  --blood:#7a1f1f; --blood-bright:#a83232; --emerald:#3f7d4f;
  --arcane:#6b4fa8; --arcane-bright:#9a78e0;
  --border:#3a2c15; --border-lit:#6b5320;
  --parchment:#e6d5a8; --parchment-ink:#2b2110;
  --shadow:0 8px 30px rgba(0,0,0,.6);
  --radius:10px;
  --serif:'Cinzel','Trajan Pro',Georgia,'Times New Roman',serif;
  --body:'EB Garamond',Georgia,'Palatino Linotype',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(201,164,76,.10), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.55;
  min-height:100vh;
}
a{color:var(--gold-bright);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--gold-bright);letter-spacing:.04em;font-weight:600;margin:.2em 0 .5em}
h1{font-size:2.1rem;text-shadow:0 2px 8px rgba(0,0,0,.7)}
h2{font-size:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.25em}
h3{font-size:1.2rem;color:var(--gold)}
::selection{background:var(--gold-dark);color:#fff}

/* Layout */
.wrap{max-width:1200px;margin:0 auto;padding:0 20px 80px}
header.site{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(20,14,6,.98),rgba(20,14,6,.90));
  border-bottom:2px solid var(--border-lit);
  box-shadow:0 4px 20px rgba(0,0,0,.5);backdrop-filter:blur(4px);
}
.bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.35rem;color:var(--gold-bright);text-shadow:0 2px 6px #000}
.brand .sigil{font-size:1.6rem;filter:drop-shadow(0 0 6px rgba(201,164,76,.5))}
nav.main{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav.main a{
  font-family:var(--serif);font-size:.82rem;letter-spacing:.05em;color:var(--ink-dim);
  padding:7px 12px;border-radius:6px;border:1px solid transparent;text-transform:uppercase;
}
nav.main a:hover{color:var(--gold-bright);border-color:var(--border);background:rgba(201,164,76,.06)}
nav.main a.active{color:#1a1305;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold-dark);font-weight:600}

/* Panels */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px;margin:18px 0;box-shadow:var(--shadow);position:relative;
}
.panel::before{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,164,76,.06)}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Cards / hub tiles */
.tile{display:block;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:.15s;position:relative;overflow:hidden}
.tile:hover{border-color:var(--gold-dark);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.6)}
.tile .ico{font-size:2.2rem;display:block;margin-bottom:10px}
.tile h3{margin:0 0 6px;color:var(--gold-bright)}
.tile p{margin:0;color:var(--muted);font-size:.95rem}
.tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold-dark);opacity:.5}
.tile:hover::after{opacity:1;background:var(--gold)}

/* Buttons */
button,.btn{
  font-family:var(--serif);font-size:.85rem;letter-spacing:.04em;cursor:pointer;
  background:linear-gradient(180deg,var(--panel2),#120c05);color:var(--ink);
  border:1px solid var(--border-lit);border-radius:7px;padding:9px 16px;transition:.15s;text-transform:uppercase;
}
button:hover,.btn:hover{border-color:var(--gold);color:var(--gold-bright);background:linear-gradient(180deg,#2a1f0d,#181005)}
button.primary,.btn.primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;border-color:var(--gold-dark);font-weight:600}
button.primary:hover{background:linear-gradient(180deg,#f2d885,var(--gold-bright));color:#140f04}
button.danger{border-color:var(--blood);color:#e6a0a0}
button.danger:hover{background:var(--blood);color:#fff;border-color:var(--blood-bright)}
button.ghost{background:transparent}
button.sm{padding:5px 10px;font-size:.72rem}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}

/* Forms */
label{display:block;font-family:var(--serif);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);margin:12px 0 4px}
input,textarea,select{
  width:100%;background:#0c0805;border:1px solid var(--border);border-radius:6px;color:var(--ink);
  font-family:var(--body);font-size:1rem;padding:9px 11px;transition:.15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,164,76,.15)}
textarea{min-height:90px;resize:vertical;line-height:1.5}
input[type=range]{padding:0;accent-color:var(--gold)}
.inline{display:flex;gap:10px;flex-wrap:wrap}
.inline>*{flex:1}
.field-sm{max-width:120px}

/* Tables */
table{width:100%;border-collapse:collapse;margin:10px 0}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
th{font-family:var(--serif);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}
tr:hover td{background:rgba(201,164,76,.04)}

/* Badges / tags */
.tag{display:inline-block;font-size:.72rem;font-family:var(--serif);letter-spacing:.04em;padding:3px 9px;border-radius:20px;border:1px solid var(--border-lit);color:var(--ink-dim);background:rgba(201,164,76,.05);text-transform:uppercase}
.tag.gold{color:var(--gold-bright);border-color:var(--gold-dark)}
.tag.blood{color:#e6a0a0;border-color:var(--blood)}
.tag.arcane{color:var(--arcane-bright);border-color:var(--arcane)}
.tag.emerald{color:#8fd6a0;border-color:var(--emerald)}
.tag.locked{color:var(--muted);opacity:.7}

/* Parchment blocks (for lore etc) */
.parchment{
  background:linear-gradient(135deg,#e6d5a8,#d8c493);color:var(--parchment-ink);
  border:1px solid #b89a5a;border-radius:8px;padding:18px 22px;
  box-shadow:inset 0 0 40px rgba(120,90,30,.25),var(--shadow);font-size:1.05rem;line-height:1.6;
}
.parchment h1,.parchment h2,.parchment h3{color:#5a3d12;text-shadow:none;border-color:#b89a5a}

/* Utility */
.muted{color:var(--muted)}
.dim{color:var(--ink-dim)}
.center{text-align:center}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sep{height:1px;background:var(--border);margin:16px 0}
.pill-nav{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.pill-nav button{border-radius:20px}
.empty{color:var(--muted);font-style:italic;padding:24px;text-align:center;border:1px dashed var(--border);border-radius:8px}
.hero{text-align:center;padding:34px 10px 10px}
.hero h1{font-size:2.8rem}
.hero .sub{color:var(--ink-dim);font-size:1.15rem;max-width:680px;margin:0 auto}
.mono{font-family:'Courier New',monospace}
footer.site{border-top:1px solid var(--border);color:var(--muted);text-align:center;padding:24px;font-size:.85rem}
.savebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(120px);background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;padding:10px 22px;border-radius:8px;font-family:var(--serif);font-weight:600;box-shadow:var(--shadow);transition:.3s;z-index:200;opacity:0}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.hidden{display:none!important}
@media(max-width:640px){body{font-size:16px}.hero h1{font-size:2rem}nav.main a{font-size:.72rem;padding:6px 8px}}