:root{
  --night:#211829; --night-2:#2E2238; --paper:#FCFAF8; --paper-2:#F4EEF6; --ink:#2A1B30; --ink-soft:#6E5F75;
  --lilac:#CDBFE0; --lilac-deep:#7E68A8; --peach:#F2B38C; --plum:#8E3B5E; --line:#E6DDEB; --leaf:#4F8A5E;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100dvh; background:radial-gradient(90% 70% at 20% 0%, #3A2A47 0%, var(--night) 60%); color:var(--ink);
  font:500 16px/1.5 Nunito, system-ui, sans-serif; -webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}

.top{display:flex; justify-content:space-between; align-items:center; max-width:1120px; margin:0 auto; padding:18px 24px; color:#EDE4F2}
.brand{font-family:Fraunces, Georgia, serif; font-weight:600; font-size:1.3rem}
.brand small{font-family:Nunito, sans-serif; font-weight:800; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--peach); color:var(--ink); padding:3px 8px; border-radius:99px; margin-left:6px; vertical-align:middle}
.by{color:#CBBBD6; text-decoration:none; font-weight:700; font-size:.9rem}
.by:hover{color:#fff}

.stage{max-width:1120px; margin:0 auto; padding:0 24px 40px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; align-items:start}
.dragon-panel{position:sticky; top:20px; text-align:center}
.dragon svg{width:100%; max-width:440px; height:auto; display:block; margin:0 auto}
.dragon-name{color:#F4EAF8; font-family:Fraunces, Georgia, serif; font-size:1.6rem; margin:6px 0 0; min-height:2.2rem}
.dragon-name small{display:block; font-family:Nunito, sans-serif; font-size:.85rem; color:#BBA9C8; font-weight:700}

.panel{background:var(--paper); border-radius:var(--radius); padding:clamp(22px,3.5vw,40px); box-shadow:0 30px 60px rgba(0,0,0,.35)}
.panel > *{animation:rise .4s ease both}
@keyframes rise{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.panel > *{animation:none}}
.kicker{font-weight:800; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--plum); margin:0 0 6px}
h1,h2{font-family:Fraunces, Georgia, serif; font-weight:600; line-height:1.1; margin:0 0 10px}
h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
h2{font-size:1.6rem}
.lede{color:var(--ink-soft); margin:0 0 20px}

fieldset{border:0; padding:0; margin:0 0 22px}
legend{font-weight:800; margin:0 0 8px; padding:0}
legend span{font-weight:600; color:var(--ink-soft); font-size:.88rem; margin-left:6px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:2px solid var(--line); background:#fff; color:var(--ink); border-radius:99px; padding:7px 14px; font-weight:700; font-size:.92rem;
  transition:border-color .15s, background .15s}
.chip:hover{border-color:var(--lilac-deep)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.chip:disabled{opacity:.4; cursor:default}
.chip small{display:block; font-weight:600; font-size:.75rem; opacity:.75}
.trait{border-radius:14px; text-align:left}
.swatch{width:40px; height:40px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px var(--line)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.name-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.text{border:2px solid var(--line); border-radius:14px; padding:10px 14px; background:#fff; color:var(--ink); min-width:0}
.text:focus{outline:none; border-color:var(--lilac-deep)}
.name-row .text{width:220px; font-weight:800; font-size:1.1rem}
.hint{color:var(--ink-soft); font-size:.85rem; margin:6px 0 0}
.hint.bad{color:#B4442E; font-weight:700}
.slider{display:grid; grid-template-columns:72px 1fr 72px; gap:10px; align-items:center; font-size:.85rem; font-weight:700; color:var(--ink-soft); margin-bottom:8px}
.slider span:last-child{text-align:right}
input[type=range]{width:100%; accent-color:var(--plum)}

.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px}
.btn{border:0; border-radius:99px; padding:13px 24px; font-weight:800; font-size:1.02rem; background:var(--plum); color:#fff; box-shadow:0 3px 0 #6B2945}
.btn:hover{background:#9C4669}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 #6B2945}
.btn:disabled{opacity:.45; cursor:default}
.btn.ghost{background:transparent; color:var(--plum); box-shadow:inset 0 0 0 2px var(--line)}
.link{background:none; border:0; color:var(--plum); font-weight:800; padding:0; text-decoration:underline}

/* shelf */
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin:0 0 22px}
.book{border:0; border-radius:10px 14px 14px 10px; min-height:150px; padding:14px 12px; text-align:left; color:#fff; position:relative;
  display:flex; flex-direction:column; justify-content:space-between; box-shadow:inset 6px 0 0 rgba(0,0,0,.18)}
.book b{font-family:Fraunces, Georgia, serif; font-size:1.02rem; line-height:1.15}
.book small{font-weight:700; opacity:.85; font-size:.75rem}
.book[aria-pressed="true"]{outline:4px solid var(--peach); outline-offset:3px}
.book.locked{opacity:.55; cursor:default}
.book .tag{position:absolute; top:10px; right:10px; background:rgba(0,0,0,.35); border-radius:99px; padding:2px 8px; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; font-weight:800}
.chapters{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px}
.chapter{border:2px solid var(--line); background:#fff; border-radius:12px; padding:8px 12px; text-align:left; color:var(--ink); font-weight:700; font-size:.9rem}
.chapter span{color:var(--ink-soft); font-weight:800; margin-right:6px}
.chapter[aria-pressed="true"]{border-color:var(--plum); background:#FBEFF4}

/* chat */
.chat-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.left{font-size:.85rem; font-weight:800; color:var(--ink-soft)}
.log{display:flex; flex-direction:column; gap:10px; max-height:52dvh; overflow:auto; padding:4px 2px 8px; margin-bottom:12px}
.msg{max-width:88%; padding:12px 16px; border-radius:18px; line-height:1.5; white-space:pre-wrap}
.msg.dragon{align-self:flex-start; background:var(--paper-2); border-bottom-left-radius:6px; font-family:Fraunces, Georgia, serif; font-size:1.05rem}
.msg.me{align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:6px}
.msg.note{align-self:center; background:none; color:var(--ink-soft); font-size:.9rem; text-align:center}
.typing{display:inline-flex; gap:5px}
.typing i{width:8px; height:8px; border-radius:50%; background:var(--lilac-deep); animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.suggest{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.suggest .chip{font-size:.85rem; font-weight:700}
.compose{display:flex; gap:10px}
.compose .text{flex:1}
.fine{color:var(--ink-soft); font-size:.8rem; margin:10px 0 0}
.fine a{color:var(--plum); font-weight:800}
.done{background:var(--paper-2); border-radius:16px; padding:16px 18px; margin-top:6px}
.done p{margin:0 0 10px}

.btn.big{font-size:1.15rem; padding:16px 30px}
.start{margin-bottom:6px}
.start .actions .text{width:150px}
body.talking .dragon svg{animation:bob .5s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) scale(1)}to{transform:translateY(-6px) scale(1.02)}}
@media (prefers-reduced-motion:reduce){body.talking .dragon svg{animation:none}}
.noscript{color:#fff; text-align:center; padding:40px}

@media (max-width:860px){
  .stage{grid-template-columns:1fr; gap:6px; padding:0 14px 28px}
  .dragon-panel{position:static}
  .dragon svg{max-width:280px}
  .dragon-name{font-size:1.3rem; min-height:0; margin-bottom:6px}
  .top{padding:14px 16px}
  .log{max-height:none}
  body.hatching .dragon-panel{position:sticky; top:0; z-index:2; background:var(--night); margin:0 -14px; padding:6px 0 2px; box-shadow:0 10px 20px rgba(0,0,0,.25)}
  body.hatching .dragon svg{max-width:200px}
  body.hatching .dragon-name{display:none}
}