@import url("./tokens.css");

:root{--bg:#100907;--panel:#1b100d;--panel2:#25140f;--gold:#e9bd65;--orange:#ff7628;--text:#fff3e5;--muted:#d6c1af;--border:rgba(233,189,101,.27);--green:#8de0a0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% 0,#43180f 0,transparent 42%),var(--bg);color:var(--text);font-family:Poppins,sans-serif;line-height:1.65}a{color:var(--gold);text-decoration:none}a:hover{color:#fff0bd}.topbar{min-height:78px;padding:15px max(5%,calc((100% - 1160px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border);background:#0c0705eF}.brand{display:flex;align-items:center;gap:10px;color:var(--gold);font-family:Cinzel,serif;font-weight:800;letter-spacing:1.3px}.brand>span:first-child{font-size:30px}.brand small{display:block;color:var(--muted);font:9px Poppins,sans-serif;letter-spacing:2px}.topbar nav{display:flex;gap:22px;flex-wrap:wrap}.topbar nav a{font-size:12px;font-weight:600}.page{width:min(1160px,92%);margin:auto}.hero{text-align:center;padding:70px 0 42px}.eyebrow{color:var(--orange);font-size:11px;font-weight:700;letter-spacing:3px}.hero h1{margin:12px 0;color:var(--gold);font:800 clamp(34px,6vw,62px)/1.12 Cinzel,serif;letter-spacing:2px;text-shadow:0 5px 28px #000}.hero h1 em{font-style:normal;color:#fff0d5}.intro{max-width:700px;margin:0 auto;color:var(--muted);font-size:14px}.stats{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}.stats div{min-width:130px;padding:12px 18px;border:1px solid var(--border);border-radius:8px;background:#21120dbd}.stats strong,.stats span{display:block}.stats strong{color:var(--gold);font-family:Cinzel,serif;font-size:19px}.stats span{color:var(--muted);font-size:10px}.panel,.source-note{margin:20px 0 35px;padding:clamp(16px,3vw,28px);background:linear-gradient(145deg,#25140f,#140b08);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 45px #0004}.tools{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(150px,190px) auto;gap:10px;align-items:center}.search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #63442e;border-radius:7px;background:#0d0806}.search span{color:var(--gold);font-size:23px}.search input{width:100%;min-width:0;padding:12px 0;background:transparent;border:0;outline:0;color:var(--text);font:13px Poppins,sans-serif}.filter-label{font-size:12px;color:var(--muted)}select,button{font:inherit}select{min-width:0;padding:11px;background:#0d0806;color:var(--text);border:1px solid #63442e;border-radius:7px}.secondary{padding:11px 14px;color:var(--gold);background:transparent;border:1px solid var(--border);border-radius:7px;cursor:pointer}.secondary:hover{background:#462018}.hint,.disclaimer{color:var(--muted);font-size:11px}.progress{margin:22px 0}.progress-top{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.progress-top strong{color:var(--gold)}.track{height:8px;margin-top:8px;border-radius:20px;background:#ffffff15;overflow:hidden}.track div{width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#a51d19,var(--orange),var(--gold));transition:width .3s}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px}table{width:100%;border-collapse:collapse;min-width:780px;font-size:12px}th,td{padding:12px 13px;text-align:left;vertical-align:top;border-bottom:1px solid #ffffff14}th{position:sticky;top:0;background:#32180f;color:var(--gold);font-size:11px;letter-spacing:.3px}tbody tr:hover{background:#ffffff07}tbody tr.done{background:#16302455}tbody tr.done td:nth-child(2){color:var(--green)}.check{width:17px;height:17px;accent-color:#d9aa53;cursor:pointer}.level-badge{display:inline-block;padding:3px 9px;border:1px solid var(--border);border-radius:20px;color:var(--gold);font-weight:700}.cost{white-space:normal;min-width:175px}.cost span{display:block}.cost span:nth-child(1){color:#f0d18b}.cost span:nth-child(2){color:#c9d99d}.cost span:nth-child(3){color:#b8d5f5}.hidden{display:none!important}.empty{text-align:center;color:var(--muted);padding:25px}.disclaimer{margin:20px 0 0}.source-note h2{margin-top:0;color:var(--gold);font:700 23px Cinzel,serif}.source-note p{color:var(--muted);font-size:13px}.source-note .source{font-size:11px}footer{padding:25px 15px;text-align:center;color:#a99583;font-size:10px;letter-spacing:1px;border-top:1px solid var(--border)}@media(max-width:850px){.tools{grid-template-columns:1fr 1fr}.search{grid-column:1/-1}.filter-label{grid-column:1}.topbar{padding:15px 4%}}@media(max-width:520px){.topbar{align-items:flex-start;flex-direction:column}.topbar nav{gap:15px}.hero{padding-top:45px}.stats{gap:8px}.stats div{min-width:95px;padding:10px}.stats strong{font-size:15px}.tools{grid-template-columns:1fr}.search,.filter-label{grid-column:auto}.panel{padding:13px}.hint{font-size:10px}}


/* CRIMSON SERPENT ROYAL THEME */
:root { --bg:#120305; --panel:#210609; --panel2:#33090f; --gold:#e9c98a; --orange:#ff7c87; --text:#fff4f1; --muted:#d8bfc0; --border:rgba(233,201,138,.28); --green:#91e0b1; }
body {
  background:
    radial-gradient(ellipse at 50% 0,rgba(173,14,39,.58),transparent 42%),
    radial-gradient(ellipse at 100% 75%,rgba(86,5,20,.3),transparent 45%),
    var(--bg);
}
.topbar { background:rgba(15,2,6,.94); box-shadow:0 8px 30px rgba(0,0,0,.2); }
.hero { position:relative; overflow:hidden; }
.hero::after {
  content:"蛇";
  position:absolute;
  top:24px;
  left:-30px;
  color:rgba(255,91,109,.82);
  font:20px serif;
  text-shadow:0 0 12px rgba(255,50,76,.8);
  animation:requirementsSerpent 15s linear infinite;
  pointer-events:none;
}
@keyframes requirementsSerpent {
  0% { left:-30px; opacity:0; transform:rotate(0); }
  8%,90% { opacity:.9; }
  50% { transform:rotate(8deg); }
  100% { left:calc(100% + 10px); opacity:0; transform:rotate(0); }
}
.hero h1 { color:#fff0d9; text-shadow:0 0 35px rgba(239,66,88,.22); }
.panel,.source-note {
  background:linear-gradient(145deg,rgba(52,7,16,.98),rgba(17,3,7,.98));
  border-radius:14px;
  box-shadow:0 22px 65px rgba(0,0,0,.3),0 0 35px rgba(168,18,42,.1);
}
.stats div { background:rgba(45,5,14,.75); border-color:rgba(233,201,138,.25); }
.search,select { background:#170307; border-color:rgba(233,201,138,.3); }
.search:focus-within,select:focus { border-color:#ff6674; outline:none; box-shadow:0 0 0 3px rgba(239,66,88,.12); }
.secondary { border-color:rgba(233,201,138,.38); }
.secondary:hover { background:#4b0b1a; }
.track div { background:linear-gradient(90deg,#a8122a,#ef4258,#e9c98a); }
th { background:#410a17; }
.level-badge { border-color:rgba(233,201,138,.38); }
.source-note h2 { color:var(--gold); }
a { color:#f0d6a0; }
footer { background:#090103; }
@media (prefers-reduced-motion:reduce) { .hero::after { animation:none; } }

/* MYSTIC DRAGON REALM V2 — CITY HALL DATABASE FINISHING PASS */
:root{--bg:var(--ink);--panel:var(--raise);--panel2:var(--raise-2);--gold:var(--gilt);--orange:var(--crimson);--text:#f6eee9;--muted:#b4a5a6;--border:var(--line-2);--green:var(--jade)}
body{font-family:var(--body);background:radial-gradient(ellipse at 50% 0,rgba(209,40,59,.2),transparent 46%),var(--ink)}
.topbar{background:rgba(16,11,13,.94);border-color:var(--line)}
.brand{font-family:var(--display);color:var(--gilt)}
.brand small{font-family:var(--body)}
.hero h1,.source-note h2{font-family:var(--display)}
.panel,.source-note{background:linear-gradient(145deg,rgba(36,24,32,.97),rgba(16,11,13,.98));border-color:var(--line-2)}
.stats div{background:rgba(36,24,32,.8);border-color:var(--line)}
.search,select{background:var(--ink);border-color:var(--line-2);color:var(--text)}
.search:focus-within,select:focus{border-color:var(--gilt);box-shadow:0 0 0 3px rgba(232,194,122,.14)}
.secondary{border-color:var(--line-2);color:var(--gilt)}
.secondary:hover{background:rgba(209,40,59,.16)}
.track div{background:linear-gradient(90deg,var(--crimson-deep),var(--crimson),var(--gilt))}
th{background:#32101a;color:var(--gilt)}
.level-badge{border-color:var(--line-2);color:var(--gilt)}
tbody tr.done{background:rgba(95,211,166,.07)}
footer{background:transparent;border-color:var(--line);color:var(--faint)}