:root {
  color-scheme: dark;
  --bg: #091019;
  --bg-deep: #050a10;
  --panel: rgba(13, 22, 32, .92);
  --panel-soft: rgba(19, 31, 42, .76);
  --panel-solid: #101c27;
  --line: rgba(210, 225, 224, .15);
  --line-strong: rgba(227, 191, 105, .38);
  --text: #e9e4d7;
  --muted: #93a4ad;
  --gold: #d9b45e;
  --gold-bright: #f1d38a;
  --red: #bf4d4b;
  --green: #75b99c;
  --blue: #6d9fc2;
  --violet: #9b8fd0;
  --shadow: 0 24px 70px rgba(0,0,0,.4);
  --radius: 18px;
  --radius-small: 11px;
  --serif: "STKaiti", "KaiTi", "Noto Serif SC", "Songti SC", serif;
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}
body[data-art="jade"] {
  --bg:#071416; --bg-deep:#031012; --panel:rgba(10,31,31,.92); --panel-soft:rgba(17,47,44,.76);
  --panel-solid:#102c2a; --line:rgba(184,239,215,.16); --line-strong:rgba(107,213,192,.43);
  --text:#e9f4e7; --muted:#99b9ae; --gold:#e4bd62; --gold-bright:#ffe09a; --green:#6bd5c0; --blue:#76c3c7;
}
body[data-art="chibi"] {
  color-scheme: light;
  --bg:#18243a; --bg-deep:#10182a; --panel:rgba(245,240,232,.94); --panel-soft:rgba(255,250,241,.82);
  --panel-solid:#fff8ee; --line:rgba(35,54,76,.13); --line-strong:rgba(216,125,121,.42);
  --text:#24314a; --muted:#66758b; --gold:#e0a44e; --gold-bright:#b97539; --red:#db746f;
  --green:#62b59a; --blue:#6eb5d0; --violet:#a58fd5; --shadow:0 24px 70px rgba(22,32,56,.3);
}
* { box-sizing: border-box; }
html { min-height:100%; background:var(--bg-deep); }
body {
  min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; color:var(--text);
  background:radial-gradient(circle at 12% 8%,rgba(78,117,137,.18),transparent 35%),
    radial-gradient(circle at 88% 18%,rgba(191,77,75,.12),transparent 30%),
    linear-gradient(150deg,var(--bg-deep),var(--bg) 48%,#0d151d);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
body[data-art="chibi"] {
  background:radial-gradient(circle at 12% 8%,rgba(130,201,215,.25),transparent 35%),
    radial-gradient(circle at 88% 18%,rgba(238,143,139,.25),transparent 30%),
    linear-gradient(150deg,#152238,#253450 52%,#1b2941);
}
button,input,select { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.42; }
.ambient {
  position:fixed; z-index:0; width:38vw; height:38vw; border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);
  border-radius:50%; pointer-events:none; opacity:.4; filter:blur(1px); animation:orbit-drift 18s ease-in-out infinite alternate;
}
.ambient:before,.ambient:after { content:""; position:absolute; inset:14%; border:1px solid color-mix(in srgb,var(--gold) 14%,transparent); border-radius:inherit; }
.ambient:after { inset:31%; }
.ambient-a { top:-18vw; right:-8vw; }
.ambient-b { bottom:-24vw; left:-12vw; animation-delay:-7s; }
@keyframes orbit-drift { to { transform:rotate(18deg) translate3d(0,14px,0); } }
.app-shell { position:relative; z-index:1; min-height:100vh; }
.eyebrow { margin:0 0 7px; color:var(--gold); font-size:.73rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px;
  border:1px solid var(--line-strong); border-radius:999px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  color:var(--text); font-weight:700; text-decoration:none; cursor:pointer; transition:.16s ease;
}
.button:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--gold); box-shadow:0 10px 32px rgba(0,0,0,.22); }
.button.primary { border-color:var(--gold); background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#21190c; }
.button.ghost { border-color:var(--line); background:transparent; }
.button.small { min-height:34px; padding:0 13px; font-size:.82rem; }
.button.large { min-height:52px; padding:0 25px; font-size:1rem; }
.button.block { width:100%; }
.text-button,.icon-button { border:0; background:transparent; color:var(--muted); cursor:pointer; }
.text-button { padding:7px 5px; font-size:.88rem; }
.text-button:hover,.icon-button:hover { color:var(--gold); }
.icon-button { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:1.2rem; }
.start-screen { display:flex; min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:32px 22px 30px; }
.start-orbit { position:fixed; z-index:-1; width:520px; height:520px; border:1px solid color-mix(in srgb,var(--gold) 18%,transparent); border-radius:50%; }
.orbit-one { top:-280px; left:-170px; }
.orbit-two { right:-260px; bottom:-330px; width:620px; height:620px; }
.hero-mark { width:min(820px,100%); text-align:center; }
.seal,.mini-seal,.ending-glyph { display:grid; place-items:center; border:1px solid var(--line-strong); background:linear-gradient(145deg,rgba(217,180,94,.2),rgba(191,77,75,.08)); color:var(--gold-bright); font-family:var(--serif); }
.seal { width:78px; height:78px; margin:0 auto 23px; border-radius:24px 7px 24px 7px; font-size:2.15rem; box-shadow:0 0 50px rgba(217,180,94,.18); }
.hero-mark h1,.creator-topbar h1,.ending-card h1 { margin:0; font-family:var(--serif); font-size:clamp(4rem,12vw,8.8rem); font-weight:700; letter-spacing:.06em; line-height:.93; text-shadow:0 0 55px rgba(217,180,94,.16); }
.hero-subtitle { margin:22px 0 8px; color:var(--gold-bright); font-family:var(--serif); font-size:clamp(1.2rem,3vw,1.75rem); letter-spacing:.12em; }
.hero-copy { max-width:650px; margin:18px auto 0; color:var(--muted); line-height:1.9; }
.start-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:13px; margin:32px 0 21px; }
.meta-ribbon { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.meta-ribbon span,.mini-status { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025); color:var(--muted); font-size:.78rem; }
.feature-grid { display:grid; width:min(980px,100%); grid-template-columns:repeat(4,1fr); gap:12px; margin-top:52px; }
.feature-card { min-height:190px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(150deg,var(--panel),rgba(255,255,255,.018)); box-shadow:0 18px 48px rgba(0,0,0,.15); }
.feature-icon { display:grid; width:41px; height:41px; place-items:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--gold); font-family:var(--serif); font-size:1.15rem; }
.feature-card h2 { margin:20px 0 9px; font-family:var(--serif); font-size:1.18rem; }
.feature-card p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.7; }
.start-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:38px; color:var(--muted); font-size:.74rem; }
.creator-screen { width:min(1480px,100%); margin:0 auto; padding:22px 24px 60px; }
.creator-topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin-bottom:25px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.creator-topbar>div { text-align:center; }
.creator-topbar h1 { font-size:clamp(2rem,5vw,3.25rem); }
.creator-topbar .mini-status { justify-self:end; }
.creator-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:28px; align-items:start; }
.creator-form { display:grid; gap:17px; }
.form-section,.preview-card,.preview-label,.narrative-card,.event-card,.inventory-card,.save-slot { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,var(--panel),rgba(255,255,255,.02)); box-shadow:0 18px 45px rgba(0,0,0,.14); }
.form-section { padding:24px; }
.section-heading,.panel-heading,.action-heading,.combat-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.section-heading>span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--gold); font-family:var(--serif); }
.section-heading h2,.panel-heading strong,.action-heading h3,.combat-header h2 { margin:0 0 5px; font-family:var(--serif); }
.section-heading p,.action-heading p,.combat-header small,.panel-heading span { margin:0; color:var(--muted); font-size:.82rem; line-height:1.6; }
.text-input,select,input[type="color"] { width:100%; border:1px solid var(--line); border-radius:var(--radius-small); background:rgba(0,0,0,.15); color:var(--text); }
.text-input,select { min-height:46px; margin-top:17px; padding:0 14px; }
input[type="color"] { min-height:43px; padding:4px; cursor:pointer; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:17px; }
.choice-card,.style-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:124px; padding:17px; border:1px solid var(--line); border-radius:var(--radius-small); background:rgba(255,255,255,.02); text-align:left; cursor:pointer; transition:.16s ease; }
.choice-card:hover,.style-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--gold) 60%,transparent); }
.choice-card.selected,.style-card.selected { border-color:var(--gold); background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 12%,transparent),rgba(255,255,255,.02)); box-shadow:inset 0 0 28px rgba(217,180,94,.07); }
.choice-card strong,.style-card strong { margin-top:8px; font-size:.95rem; }
.choice-card small,.style-card small,.choice-card em,.preview-card p,.preview-card strong { color:var(--muted); font-size:.76rem; font-style:normal; line-height:1.55; }
.choice-card em { margin-top:10px; }
.choice-dot { width:22px; height:22px; border-radius:50%; background:var(--dot); box-shadow:0 0 18px color-mix(in srgb,var(--dot) 40%,transparent); }
.root-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:17px; }
.root-list,.root-strip,.inventory-strip { display:flex; flex-wrap:wrap; gap:8px; }
.root-chip,.root-strip span,.system-chip,.artifact-chip,.muted-chip,.region-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025); font-size:.75rem; }
.root-chip { border-color:color-mix(in srgb,var(--root) 55%,transparent); color:var(--root); }
.root-chip small { opacity:.65; }
.field-note,.fine-print { margin:10px 0 0; color:var(--muted); font-size:.73rem; line-height:1.65; }
.attribute-editor { display:grid; gap:9px; margin-top:17px; }
.attribute-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-small); background:rgba(0,0,0,.09); }
.attribute-name { display:flex; min-width:0; align-items:center; gap:11px; }
.attribute-icon { display:grid; width:31px; height:31px; flex:0 0 auto; place-items:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--gold); font-family:var(--serif); }
.attribute-name strong,.attribute-name small { display:block; }
.attribute-name small { max-width:520px; margin-top:3px; color:var(--muted); font-size:.72rem; line-height:1.4; }
.stepper { display:flex; flex:0 0 auto; align-items:center; gap:9px; }
.stepper button { width:31px; height:31px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; }
.stepper b { min-width:26px; text-align:center; }
.style-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:17px; }
.style-card { min-height:146px; }
.style-swatches { display:flex; gap:5px; }
.style-swatches i { width:24px; height:24px; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.appearance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:15px; }
.appearance-grid label { display:grid; gap:6px; color:var(--muted); font-size:.72rem; }
.appearance-grid select,.appearance-grid input { margin-top:0; }
.creator-preview { min-width:0; }
.preview-sticky { position:sticky; top:18px; display:grid; gap:13px; }
.avatar-frame { position:relative; overflow:hidden; border:1px solid var(--line-strong); border-radius:26px; background:radial-gradient(circle at 50% 38%,rgba(217,180,94,.11),transparent 45%),linear-gradient(160deg,rgba(255,255,255,.04),rgba(0,0,0,.13)); }
.large-frame { min-height:510px; }
.avatar-svg { display:block; width:100%; height:100%; min-height:280px; filter:drop-shadow(0 18px 28px rgba(0,0,0,.28)); }
.avatar-svg.compact { min-height:220px; }
.preview-label,.preview-card { padding:16px 18px; }
.preview-label span,.preview-label small,.preview-card>span { display:block; color:var(--muted); font-size:.72rem; }
.preview-label strong { display:block; margin:6px 0 4px; font-family:var(--serif); font-size:1.6rem; color:var(--text); }
.preview-card strong { display:block; margin:8px 0 5px; color:var(--gold-bright); }
.modal-layer { position:fixed; z-index:20; inset:0; display:none; align-items:center; justify-content:center; padding:18px; }
.modal-layer.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(3,6,10,.72); backdrop-filter:blur(8px); }
.modal-card { position:relative; z-index:1; width:min(980px,100%); max-height:min(85vh,900px); overflow:hidden; border:1px solid var(--line-strong); border-radius:22px; background:var(--panel-solid); box-shadow:0 30px 100px rgba(0,0,0,.55); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line); }
.modal-header h2 { margin:0; font-family:var(--serif); }
.modal-body { max-height:calc(85vh - 73px); overflow:auto; padding:20px; }
.modal-section { margin-bottom:24px; }
.modal-section h3 { margin:0 0 10px; color:var(--gold); font-family:var(--serif); }
.inventory-grid,.save-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.inventory-card,.save-slot { padding:14px; }
.inventory-card.special { border-color:color-mix(in srgb,var(--violet) 55%,transparent); }
.inventory-card span,.inventory-card strong,.inventory-card small,.save-slot span,.save-slot strong,.save-slot small { display:block; }
.inventory-card strong,.save-slot strong { margin:5px 0; }
.inventory-card small,.save-slot small { color:var(--muted); font-size:.72rem; line-height:1.5; }
.pill-card { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.save-slot>div { display:flex; gap:7px; margin-top:12px; }
.empty-copy { color:var(--muted); font-size:.82rem; }
.ending-screen { display:grid; min-height:100vh; place-items:center; padding:28px 20px; }
.ending-card { width:min(760px,100%); padding:clamp(26px,5vw,56px); border:1px solid var(--line-strong); border-radius:28px; background:linear-gradient(150deg,var(--panel),rgba(255,255,255,.02)); box-shadow:var(--shadow); text-align:center; }
.ending-glyph { width:72px; height:72px; margin:0 auto 23px; border-radius:23px 7px 23px 7px; font-size:2rem; }
.death-ending .ending-glyph { color:#e68575; border-color:color-mix(in srgb,var(--red) 55%,transparent); }
.ending-card h1 { font-size:clamp(3rem,9vw,6rem); }
.ending-reason { max-width:610px; margin:21px auto; color:var(--muted); font-family:var(--serif); font-size:1.15rem; line-height:1.9; }
.ending-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:25px 0; }
.ending-stats div { padding:13px 10px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.1); }
.ending-stats span,.ending-stats strong { display:block; }
.ending-stats span { color:var(--muted); font-size:.67rem; }
.ending-stats strong { margin-top:5px; font-size:.82rem; }
.ending-card blockquote { margin:22px 0; color:var(--gold-bright); font-family:var(--serif); font-size:1.04rem; line-height:1.8; }
.ending-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:25px 0 13px; }
.toast-layer { position:fixed; z-index:30; right:16px; bottom:16px; display:grid; gap:8px; pointer-events:none; }
.toast { max-width:min(360px,calc(100vw - 32px)); padding:12px 15px; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel-solid); color:var(--text); box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.18s ease; }
.toast.show { opacity:1; transform:translateY(0); }
.toast-error { border-color:color-mix(in srgb,var(--red) 65%,transparent); }
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)}.creator-layout{grid-template-columns:1fr}.creator-preview{order:-1}.preview-sticky{position:static;grid-template-columns:minmax(250px,.8fr) minmax(0,1fr);align-items:start}.large-frame{grid-row:span 4;min-height:430px}}
@media(max-width:680px){.start-screen{justify-content:flex-start;padding-top:50px}.hero-mark h1{font-size:clamp(3.6rem,22vw,6rem)}.feature-grid{grid-template-columns:1fr;margin-top:35px}.feature-card{min-height:0}.creator-screen{padding:22px 10px 50px}.creator-topbar{grid-template-columns:auto 1fr}.creator-topbar>div{text-align:left}.creator-topbar .mini-status{display:none}.form-section{padding:17px}.choice-grid,.style-picker,.appearance-grid{grid-template-columns:1fr}.appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.root-panel{align-items:flex-start;flex-direction:column}.attribute-row{align-items:flex-start}.attribute-name small{display:none}.preview-sticky{display:block}.large-frame{min-height:400px}.preview-label,.preview-card{margin-top:10px}.ending-stats{grid-template-columns:repeat(2,1fr)}.inventory-grid,.save-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}