/* Star Love XP — shared character-sheet styles (/create, /profile) */
:root{
  --deep:#070914; --panel:#0f1326; --edge:#252c4d; --mist:#ece9f6; --mist-mid:#b9b6cc; --mist-dim:#7d7f99;
  --gold:#c8922a; --gold-soft:#f0d080; --gold-dim:#8b6010;
  --fire:#ff8a4a; --earth:#3ed08e; --air:#8fc3ff; --water:#a78bfa;
  --disp:'Cinzel',serif; --body:'Lora',Georgia,serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--deep);color:var(--mist);font:16px/1.65 var(--body);min-height:100vh;overflow-x:hidden}
.stars{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(1px 1px at 12% 18%,#fff8 0,transparent 60%),radial-gradient(1px 1px at 78% 8%,#fff6 0,transparent 60%),
  radial-gradient(1.5px 1.5px at 40% 70%,#ffe9b06 0,transparent 60%),radial-gradient(1px 1px at 88% 62%,#fff7 0,transparent 60%),
  radial-gradient(1px 1px at 22% 88%,#fff5 0,transparent 60%),radial-gradient(1.5px 1.5px at 60% 30%,#fff6 0,transparent 60%),
  radial-gradient(1px 1px at 5% 50%,#fff5 0,transparent 60%),radial-gradient(1px 1px at 95% 40%,#fff6 0,transparent 60%),
  radial-gradient(600px 300px at 50% -10%,#2a1f5c55 0,transparent 70%)}
.wrap{position:relative;max-width:720px;margin:0 auto;padding:44px 20px 80px}
.topnav{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 11px var(--disp);letter-spacing:.2em;margin-bottom:26px}
.topnav a,.topnav button{color:var(--mist-dim);text-decoration:none;background:none;border:0;cursor:pointer;font:inherit;letter-spacing:inherit}
.topnav a:hover,.topnav button:hover{color:var(--gold-soft)}
.eyebrow{font:600 11px var(--disp);letter-spacing:.32em;color:var(--gold);text-align:center}
h1{font:700 clamp(28px,6vw,44px)/1.15 var(--disp);letter-spacing:.04em;text-align:center;margin:10px 0 8px;color:var(--gold-soft);text-wrap:balance}
.lede{text-align:center;color:var(--mist-mid);max-width:52ch;margin:0 auto 30px;font-style:italic}
.card{background:linear-gradient(180deg,#121735,#0d1024);border:1px solid var(--edge);border-radius:18px;padding:26px 24px;box-shadow:0 20px 60px #00000066}
label{display:block;font:600 11px var(--disp);letter-spacing:.2em;color:var(--mist-dim);margin:14px 0 6px}
input[type=text],input[type=date],input[type=time],input[type=email]{width:100%;background:#0a0d1c;border:1px solid var(--edge);border-radius:10px;color:var(--mist);font:16px var(--body);padding:12px 14px;outline:none}
input:focus{border-color:var(--gold)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.row{grid-template-columns:1fr}}
.check{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:14px;color:var(--mist-mid)}
.check input{accent-color:var(--gold)}
.hint{font-size:12.5px;color:var(--mist-dim);margin-top:6px}
.btn{display:block;width:100%;margin-top:24px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1a1204;border:0;border-radius:12px;font:700 15px var(--disp);letter-spacing:.18em;padding:16px;cursor:pointer;box-shadow:0 0 30px #c8922a44}
.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:none;color:var(--gold-soft);border:1px solid var(--edge);box-shadow:none;font-size:12px;padding:12px;margin-top:10px}
.err{color:#ff8a8a;font-size:14px;margin-top:12px;display:none}
.fine{font-size:12px;color:var(--mist-dim);margin-top:14px;text-align:center}
.fine a{color:var(--gold-soft)}
/* sheet */
.sheet{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
@media(max-width:640px){.sheet{grid-template-columns:1fr}.avatar{margin:0 auto}}
.avatar{width:240px;height:240px;position:relative}
.avatar svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 22px var(--aura,#c8922a55))}
.cls{font:900 clamp(26px,5vw,36px)/1 var(--disp);letter-spacing:.08em;color:var(--gold-soft)}
.cls small{display:block;font:600 11px var(--disp);letter-spacing:.3em;color:var(--mist-dim);margin-bottom:8px}
.trio{font-size:15px;color:var(--mist);margin:10px 0 4px}
.trio b{color:var(--gold-soft);font-weight:600}
.nak{font-size:13px;color:var(--mist-dim);font-style:italic}
.tag{font-size:14.5px;color:var(--mist-mid);margin:12px 0 0;font-style:italic}
.layers{margin-top:18px;display:grid;gap:6px}
.layer{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;align-items:baseline;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--edge)}
.layer .ll{font:600 10.5px var(--disp);letter-spacing:.18em;color:var(--mist-dim)}
.layer b{color:var(--gold-soft);font-weight:600}
.layer .le{color:var(--mist-mid)}
.layer .lw{grid-column:2;font-size:12px;color:var(--mist-dim);font-style:italic;margin-top:-4px}
.insight{margin-top:10px;padding:12px 14px;border-left:2px solid var(--gold);background:#0a0d1c;border-radius:0 10px 10px 0;font-size:13.5px;color:var(--mist-mid)}
.insight b{color:var(--gold-soft);font-weight:600}
.stats{margin-top:22px;display:grid;gap:9px}
.stat{display:grid;grid-template-columns:96px 1fr 38px;gap:10px;align-items:center;font-size:13px}
.stat .n{font:600 11px var(--disp);letter-spacing:.14em;color:var(--mist-mid)}
.stat .n em{display:block;font:italic 10px var(--body);letter-spacing:0;color:var(--mist-dim);text-transform:none}
.bar{height:8px;background:#0a0d1c;border:1px solid var(--edge);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold-soft));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.stat .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--gold-soft)}
.gloss{font-size:11.5px;color:var(--mist-dim);grid-column:1/-1;margin-top:-6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chip{font-size:12px;border:1px solid var(--edge);border-radius:99px;padding:3px 10px;color:var(--mist-mid)}
.chip.r{border-color:var(--water);color:var(--water)}
.mathbox{margin-top:18px;border:1px solid var(--edge);border-radius:12px;padding:10px 14px;font-size:13px;color:var(--mist-mid)}
.mathbox summary{cursor:pointer;font:600 11px var(--disp);letter-spacing:.2em;color:var(--gold)}
.mathbox p{margin:10px 0}
.tblwrap{overflow-x:auto}
.mathbox table{border-collapse:collapse;width:100%;font-size:12.5px}
.mathbox th{font:600 10px var(--disp);letter-spacing:.14em;color:var(--mist-dim);text-align:left;padding:6px 8px;border-bottom:1px solid var(--edge)}
.mathbox td{padding:5px 8px;border-bottom:1px solid #1a2040}
.mathbox td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--gold-soft)}
.doors{margin-top:28px;border-top:1px solid var(--edge);padding-top:20px}
.doors h3{font:600 12px var(--disp);letter-spacing:.26em;color:var(--mist-dim);margin:0 0 12px}
.door{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#0a0d1c;border:1px solid var(--edge);border-radius:12px;padding:12px 14px;margin-bottom:10px;text-decoration:none;color:inherit}
.door:hover{border-color:var(--gold)}
.door .t{font:600 13px var(--disp);letter-spacing:.06em;color:var(--gold-soft)}
.door .d{font-size:13px;color:var(--mist-mid)}
.door .go{font:700 12px var(--disp);letter-spacing:.14em;color:var(--gold);white-space:nowrap}
.door.locked{opacity:.55}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.actions .btn{margin:0;flex:1 1 200px;font-size:12px;padding:13px}
.saved{font-size:12.5px;color:var(--mist-dim);margin-top:16px;text-align:center}
.saved b{color:var(--earth)}
.again{background:none;border:0;color:var(--mist-dim);font:12px var(--body);text-decoration:underline;cursor:pointer;margin-top:6px}
/* avatar picker */
.picker{margin-top:14px}
.picker .ll{font:600 10.5px var(--disp);letter-spacing:.18em;color:var(--mist-dim);margin-bottom:6px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:30px;height:30px;border-radius:99px;border:2px solid transparent;cursor:pointer;background:var(--c)}
.sw.on{border-color:var(--gold-soft);box-shadow:0 0 0 2px #0a0d1c inset}
.crest{display:flex;gap:8px;margin-top:8px}
.crest button{font:600 11px var(--disp);letter-spacing:.14em;background:#0a0d1c;border:1px solid var(--edge);color:var(--mist-mid);border-radius:99px;padding:6px 12px;cursor:pointer}
.crest button.on{border-color:var(--gold);color:var(--gold-soft)}
.codebox{letter-spacing:.4em;font-size:24px;text-align:center}
@media(prefers-reduced-motion:reduce){.bar i{transition:none}}