/* DRAGONRISE / DESIGN ATLAS v2
   A visual redesign; concept content and interactive logic remain separate. */
:root {
  --bg: #080d14;
  --side: #0a1019;
  --panel: #101925;
  --panel2: #142030;
  --line: #233346;
  --text: #f0f5fb;
  --muted: #9bacbe;
  --accent: #6eb6fa;
  --accent2: #d4b77e;
  --blue: #8fc9fa;
  --r: 12px;
  --shadow: 0 12px 40px rgba(0,0,0,.13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #080d14; color: var(--text); font-family: "Segoe UI Variable", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.58; }
body::before { content:""; position: fixed; inset:0; pointer-events:none; z-index:-1; background: radial-gradient(ellipse at 95% 0%,rgba(40,100,158,.075), transparent 58%), linear-gradient(180deg,#0a1018,#080d14 60%); }
::selection { background:#4f8abd; color:#fff; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #86c9fb!important; outline-offset: 3px; }
a { transition: color .17s, border-color .17s, background-color .17s, transform .17s; }
h1,h2,h3,h4 { letter-spacing: -.035em; color:#f3f6fc; }
h1 { font-size: clamp(34px, 3.8vw, 54px); font-weight: 730; line-height: 1.1; margin: 14px 0; }
h2 { font-size: clamp(21px,2.2vw,27px); font-weight: 680; line-height:1.24; }
h3 { font-size: 17px; font-weight: 670; line-height:1.33; }
p { line-height:1.68; }
.muted { color:var(--muted); }
.app { grid-template-columns: 254px minmax(0,1fr); min-height:100vh; }
.sidebar { z-index:45; position:sticky; top:0; height:100vh; overflow-y:auto; padding:24px 14px 22px; background: #0a1019; border-right:1px solid #273444; scrollbar-color: #35495c transparent; scrollbar-width:thin; }
.sidebar::before { content:""; display:block; position:absolute; width:3px; top:0; left:0; height:160px; background:linear-gradient(180deg,#7cc5fc,transparent); opacity:.75; }
.brand { padding:4px 10px 16px; gap:11px; align-items:center; }
.logo { width:43px; height:43px; border-radius:11px; font-weight:850; font-size:15px; letter-spacing:-.09em; flex-shrink:0; color:#dff2ff; background:linear-gradient(140deg,#1b3856,#10263b); border:1px solid #41698d; box-shadow:none; }
.logo span { transform:translateX(-1px); }
.brand b { font-size:20px; letter-spacing:-.045em; line-height:1.15; font-weight:760; }
.brand small { display:block; color:#7891aa; letter-spacing:.105em; font-size:9px; margin-top:5px; white-space:nowrap; }
.project { display:flex; align-items:center; gap:9px; border:0; border-radius:8px; padding:9px 11px; margin:4px 4px 15px; background:#101d2a; color:#b2c5d7; font-size:10px; font-weight:750; letter-spacing:.08em; }
.project-dot { width:7px; height:7px; background:#72c4a0; border-radius:50%; box-shadow:0 0 0 4px #72c4a014; flex:none; }
.nav-search { position:relative; top:0; background:#0a1019; padding:5px 4px 12px; z-index:2; }
.nav-search::before { content:"⌕"; position:absolute; z-index:1; left:17px; top:10px; font-size:20px; color:#6486a2; line-height:32px; pointer-events:none; }
.nav-search input { border:1px solid #2d4258; border-radius:9px; background:#111b29; padding:10px 12px 10px 38px; font-size:12px; min-height:41px; color:#e7f1fa; transition:background .2s,border-color .2s; }
.nav-search input::placeholder{color:#8198ad}
.nav-search input:focus{border-color:#699ccd;background:#142235;box-shadow:0 0 0 3px #5b9ddd17;outline:none}
.sidebar .nav-title { appearance:none; display:flex; align-items:center; justify-content:space-between; gap:7px; width:100%; margin:18px 0 5px; padding:7px 11px; cursor:pointer; background:transparent; color:#758da4; border:0; text-align:left; font-size:10px; font-weight:780; letter-spacing:.115em; text-transform:uppercase; border-radius:7px; }
.sidebar .nav-title:hover { background:#141e2a; color:#dbe9f8; }
.group-chevron { color:#607c96; font-size:15px; line-height:1; transition:transform .2s ease; }
.sidebar .nav-title[aria-expanded="false"] .group-chevron{transform:rotate(-90deg)}
.sidebar nav.nav { display:grid; grid-template-columns:1fr; gap:2px; }
.sidebar nav.nav.is-collapsed { display:none; }
.sidebar .nav a { display:flex; gap:11px; align-items:center; min-height:37px; border-radius:8px; color:#adbbcb; padding:8px 12px; font-size:12.5px; font-weight:510; border:1px solid transparent; }
.sidebar .nav a .ico { width:17px; min-width:17px; color:#6f90aa; font-family:system-ui,sans-serif; font-size:15px; line-height:1; }
.sidebar .nav a:hover { background:#142233; color:#ecf6ff; border-color:#1f364c; }
.sidebar .nav a.active { background:#172b3f; border:1px solid #345779; box-shadow:inset 3px 0 0 #7cbff4; color:#f2f8ff; font-weight:650; }
.sidebar .nav a.active .ico { color:#b1dfff; }
.sidebar-foot { font-size:9px; font-weight:750; letter-spacing:.14em; color:#5b7289; margin:32px 10px 0; padding-top:15px; border-top:1px solid #24313f; }
.sidebar .nav a[hidden],.sidebar .nav[hidden],.sidebar .nav-title[hidden]{display:none!important}
.sidebar-overlay{display:none}
.main { min-width:0; }
.top { top:0; min-height:69px; padding:13px clamp(20px,3.25vw,58px); border-bottom:1px solid #263647; background:rgba(10,16,25,.93); backdrop-filter:blur(15px); gap:15px; }
.crumb { display:flex;align-items:center;gap:11px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crumb-project{font-size:10px;letter-spacing:.11em;font-weight:770;color:#7e93a9}
.crumb-sep{color:#415d75}
.crumb strong { font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; color:#f0f6fd; }
.actions { gap:9px; flex-shrink:0; }
.btn { border-radius:8px; padding:9px 13px; background:#122235; border:1px solid #2d4d69; font-size:12px; font-weight:670; color:#c6dded; min-height:38px; }
.btn:hover { background:#1c3650; border-color:#5d92bc; color:#fff; }
.actions #home { background:#1c3e59; color:#e2f3ff; border-color:#376488; }
.menu-toggle { display:none; color:#dbecfc; background:#122132; border:1px solid #314e65; border-radius:9px; padding:7px 12px; font-size:18px; }
.content { width:min(1530px,100%); padding:clamp(32px,3vw,55px) clamp(25px,3.25vw,58px) 100px; }
.page { display:none; animation:studioIn .18s ease-out; }
.page.active { display:block; }
@keyframes studioIn {from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
.page .head { max-width:1100px; margin-bottom:27px; padding-bottom:25px; border-bottom:1px solid #233446; }
.page .head h1 { font-size:clamp(32px,3.3vw,49px); font-weight:740; margin:12px 0 12px; }
.page .head p { font-size:14px;line-height:1.8;max-width:770px;color:#a9bacb;margin-bottom:0; }
.kicker { background:transparent; border:0; padding:0; font-size:10px; font-weight:770; color:#83bffa; letter-spacing:.145em; border-radius:0; }
.page-return { margin-bottom:19px; }
.page-return a { display:inline-flex; align-items:center; color:#88a9c4; font-size:12px; text-decoration:none; padding:4px 0; }
.page-return a:hover { color:#c5e5ff; text-decoration:none; }
.hero-studio { position:relative; isolation:isolate; overflow:hidden; min-height:345px; display:flex; flex-direction:column; align-items:flex-start;justify-content:center; background:radial-gradient(circle at 97% 35%,rgba(73,137,204,.2),transparent 31%),linear-gradient(125deg,#13273c,#101c2b 60%,#0e1a29); border:1px solid #33536f; box-shadow:none; border-radius:15px; padding:clamp(30px,4vw,58px); }
.hero-studio::before { content:""; position:absolute; inset:0; background-image:linear-gradient(#8aa9c30b 1px,transparent 1px), linear-gradient(90deg,#8aa9c30b 1px,transparent 1px); background-size:38px 38px; z-index:-2; mask-image:linear-gradient(90deg,transparent 15%,black 100%); }
.hero-studio::after {content:"";position:absolute;width:380px;height:380px;border:1px solid #7cbff42a;right:-120px;top:-110px;transform:rotate(45deg);border-radius:52px;pointer-events:none;z-index:-1}
.hero-eyebrow { color:#9dcaee; font-size:10px; font-weight:770; letter-spacing:.17em; margin-bottom:18px; }
.hero-studio h1 { max-width:720px; font-size:clamp(42px,5vw,72px); font-weight:770; line-height:1.04; letter-spacing:-.065em; margin:0 0 20px; position:relative; z-index:2; }
.hero-accent {color:#82c9ff}
.hero-studio p.lead { font-size:15px; line-height:1.85; max-width:600px; color:#b9cbd9; position:relative; z-index:2; }
.hero-quicklinks {display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;position:relative;z-index:2}
.hero-quicklinks a {border:1px solid #426381;background:#1b344b;padding:9px 13px;color:#d6edfe;text-decoration:none;font-size:12px;font-weight:680;border-radius:8px}
.hero-quicklinks a:hover {background:#274662;border-color:#81b4dd}
.hero-emblem {position:absolute;right:8%;top:10%;font-size:clamp(160px,17vw,290px);font-weight:900;color:#79bffc08;letter-spacing:-.18em;line-height:1.2;pointer-events:none;user-select:none}
.section-title { margin:39px 0 16px; padding-bottom:0; align-items:baseline; gap:12px; }
.section-title h2 { margin:0 0 5px; }
.section-title p { font-size:12px; line-height:1.65; color:#8198ae; }
.grid { gap:15px; }
.grid.two {grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three {grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four {grid-template-columns:repeat(4,minmax(0,1fr))}
.card { min-width:0; background:#111b28; border:1px solid #26384b; box-shadow:none; border-radius:12px; padding:23px; }
.card h3 { font-size:17px; color:#edf5ff; line-height:1.33; margin:0 0 12px; }
.card p, .card li { color:#b6c6d5; font-size:13px; line-height:1.7; }
.card p:last-child { margin-bottom:0; }
.card:hover { border-color:#334d65; }
.card.decision {border-left:2px solid #a4bdd4}
.card.warning {border-left:2px solid #e39f8e}
.tag { padding:4px 0; margin:0 6px 10px 0; border:0!important; border-radius:0; background:none!important; color:#88a3be!important; font-size:10px; font-weight:790; letter-spacing:.1em; text-transform:uppercase; }
.tag.game {color:#91c8f2!important}.tag.open{color:#c4ae85!important}.tag.story{color:#b6a9d8!important}.tag.lore{color:#8ccbd0!important}
.landing-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px;margin-top:19px}
.landing-grid .card {min-height:205px;display:flex;flex-direction:column;gap:0;padding:26px;position:relative;transition:transform .2s,border-color .2s, background .2s;background:#101b28; }
.landing-grid .card:hover {background:#152639; transform:translateY(-3px);border-color:#50769b;}
.landing-grid .card:nth-child(1) {background:radial-gradient(circle at 100% 0%,#244e7042,transparent 50%),#142437;border-color:#3c6688}
.landing-grid .landing-icon {width:auto;height:auto;display:block;text-align:left;font-size:11px;font-weight:810;letter-spacing:.12em;background:transparent;color:#729cbc;padding:0;margin-bottom:22px;border-radius:0}
.landing-grid .card h3 {font-size:20px;font-weight:700;margin-bottom:7px}
.landing-grid .card p {font-size:13px;line-height:1.65;max-width:440px;}
.landing-grid .landing-go {font-size:12px;letter-spacing:.015em;color:#95cafa;font-weight:670;margin-top:auto;padding-top:19px}
.topic-index {gap:13px;margin-top:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.topic-link { background:#111d2a; border:1px solid #2a3c4e; border-radius:11px; min-height:93px; padding:20px; align-items:center; }
.topic-link strong {font-size:15px;font-weight:680;line-height:1.4}
.topic-link span {font-size:11px;letter-spacing:.02em;color:#81b7e3}
.topic-link:hover {background:#192b3e;border-color:#52799b;transform:translateY(-2px)}
.stats {gap:12px}
.stat {background:#111c2a;border-color:#284259;border-radius:11px;padding:18px}
.stat b {font-size:27px;font-weight:780;color:#d8efff;line-height:1.25}
.stat span{font-size:11px}
.flow {gap:8px}
.flow span {border:1px solid #2d455a;background:#162638;border-radius:8px;padding:9px 13px;color:#dceafa;font-size:12px}
.flow i {color:#8da4b8}
.step {border-color:#26394b;background:#111c28;border-radius:11px;padding:17px 19px;grid-template-columns:44px 1fr;gap:17px}
.num {width:43px;height:43px;background:#192d42;border-color:#305a7b;border-radius:9px;color:#a8d9fc;font-size:11px}
.step p {line-height:1.75;color:#adbecf}
.data {border-top:1px solid #2a3b4c;grid-template-columns:minmax(96px,145px) minmax(0,1fr)}
.data div {border-bottom:1px solid #24374a;padding:11px 10px;line-height:1.58;overflow-wrap:break-word}
.data div:nth-child(odd){font-size:12px;color:#8ea9c0}
.data div:nth-child(even){color:#d4e4f2;font-size:12.5px}
.card table {border-collapse:collapse}
.card table th {color:#a6caea}
.card table td, .card table th {line-height:1.55;}
.links,.subnav { display:flex;flex-wrap:wrap;gap:8px; }
.links a,.subnav a { border:1px solid #304b64; background:#162738; padding:8px 12px; border-radius:8px;color:#a6d1f1;font-size:12px;text-decoration:none; }
.links a:hover,.subnav a:hover {background:#1e3951;color:#fff;border-color:#5a83a4}
.check {align-items:center;gap:13px;border-bottom:1px solid #26384b;padding:14px 11px}
.check label {font-size:13px;color:#cdd9e6;cursor:pointer}
.check input {height:17px;width:17px;flex:none}
.check.done label {color:#8498aa}
textarea {font-size:13px;line-height:1.8;background:#0b1420;border:1px solid #36516a;border-radius:11px;padding:18px;min-height:325px}
.wiki {color:#9acef7;border-bottom:1px dotted #527d9e}
.wiki:hover {color:#d1efff}
/* Selected Minecraft player stats: large editorial blocks instead of tight card dashboard */
.keeper-stat-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}
.keeper-stat {display:flex;flex-direction:column;align-items:stretch;min-height:255px;padding:23px;border:1px solid #2a3e52;border-radius:12px;background:#111d2b;transition:border-color .2s,transform .2s}
.keeper-stat:hover {border-color:#4b7295;transform:translateY(-2px)}
.keeper-stat-top {display:flex;align-items:center;justify-content:space-between;margin-bottom:21px;gap:10px}
.keeper-stat-icon {width:40px;height:40px;display:grid;place-items:center;border:1px solid #365a78;border-radius:9px;background:#1a354c;color:#b7e2ff;font-size:20px;flex:none}
.keeper-stat-index {font-size:11px;color:#718aa1;font-weight:750;letter-spacing:.12em}
.keeper-stat h3 {font-size:19px;font-weight:700;margin:0 0 9px;line-height:1.35;overflow-wrap:break-word;}
.keeper-stat p {font-size:13px;line-height:1.7;flex:1;margin:0 0 23px;color:#b9c8d6}
.keeper-stat-meta {margin-top:auto;padding-top:15px;border-top:1px solid #2a4055;display:grid;gap:4px;font-size:11px;line-height:1.6}
.keeper-stat-meta b {font-size:10px;color:#86bddf;letter-spacing:.09em;text-transform:uppercase;font-weight:750}
.keeper-stat-meta span {color:#aabfd2}
.keeper-notice {border:1px solid #2d465c!important;background:#102033!important;border-radius:11px;padding:21px;margin-top:27px!important}
.keeper-notice p {line-height:1.75}
.keeper-summary-item {background:#111d2b;border-color:#2c4258;border-radius:11px}
/* Energy calculators and tabular data should feel like workspace tools. */
.elem-fields label,.elem-slot label{font-size:12px;color:#a9c1d6}
.elem-fields select,.elem-slot select {border-radius:8px;background:#0d1a27;border-color:#39536a;padding:12px;min-height:44px;color:#e4f1fb}
.elem-fields select:focus,.elem-slot select:focus {outline:2px solid #6dabe0;outline-offset:2px}
.elem-slot-grid{gap:13px;margin:22px 0}
.elem-slot{background:#132336;border:1px solid #30516b;border-radius:10px;padding:18px}
.elem-slot b {color:#a9d6f9;font-size:13px}
.elem-slot .slot-meta{line-height:1.6}
.elem-result {background:linear-gradient(135deg,#1a3951,#112437);border:1px solid #52789a;border-radius:10px;padding:25px}
.elem-result strong{font-size:36px;font-weight:760}
.elem-pool {background:#14293a;border-color:#305b78;border-radius:10px;padding:19px}
.elem-pool strong{font-size:26px;font-weight:720}
.elem-skills{background:#0f1c2b;border:1px solid #2b445b;border-radius:9px}
.elem-table th,.elem-table td {padding:13px 12px}
.elem-table th{background:#16293b;color:#a2d3f7}
.elem-table tbody tr:nth-child(even){background:#17233266}
.elem-table tbody tr:hover {background:#1a334a}
/* Breeding pages, preserving the layouts and IDs of existing tools */
.breed-card,.breed-steps>div,.breed-example {border-radius:10px}
.breed-steps>div {background:#112131;border-color:#2b465d;padding:17px}
.breed-formula span {border-radius:7px}
/* Scroll helper */
.to-top {position:fixed;right:25px;bottom:24px;z-index:32;min-width:44px;height:44px;border:1px solid #41617b;background:#172d40;color:#cdeaff;border-radius:11px;box-shadow:0 8px 24px #0006;cursor:pointer;font-size:21px;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s}
.to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:#264a67}
/* responsive: space for actual content, not dozens of columns */
@media (max-width:1350px) {
 .keeper-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid.four {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
 .app{grid-template-columns:240px minmax(0,1fr)}
 .sidebar{position:sticky;height:100vh}
 .sidebar .nav{grid-template-columns:1fr}
 .grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
 .content{padding:31px 27px 80px}
 .top{padding:13px 27px}
}
@media (max-width:900px){
 .app{display:block}
 .sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:min(315px,86vw);z-index:60;transform:translateX(-102%);transition:transform .22s ease;box-shadow:16px 0 40px #0008}
 body.sidebar-open .sidebar{transform:translateX(0)}
 .sidebar-overlay{display:none;position:fixed;inset:0;z-index:55;border:0;background:rgba(2,7,14,.7);backdrop-filter:blur(3px)}
 body.sidebar-open .sidebar-overlay{display:block}
 body.sidebar-open{overflow:hidden}
 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:41px}
 .keeper-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero-studio{min-height:325px}
}
@media (max-width:660px){
 .top{padding:10px 14px;min-height:61px}
 .actions{gap:6px}.actions #back{display:none}.actions .btn{padding:8px 10px}
 .crumb-project{display:none}.crumb-sep{display:none}
 .content{padding:22px 16px 70px}
 .hero-studio{padding:30px 22px;min-height:315px}
 .hero-studio h1{font-size:40px}
 .hero-emblem{font-size:130px;right:4%}
 .grid.two,.grid.three,.grid.four,.landing-grid,.topic-index,.keeper-stat-grid,.elem-slot-grid {grid-template-columns:1fr!important}
 .landing-grid .card{min-height:166px}
 .page .head h1{font-size:35px}
 .page .head{padding-bottom:21px}
 .keeper-stat{min-height:210px}
 .card{padding:19px}
 .data{grid-template-columns:minmax(75px,100px) minmax(0,1fr)}
 .to-top{right:15px;bottom:15px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}