@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Manrope:wght@500;700;800&display=swap');

:root { --ink:#fffaf0; --gold:#ffd990; --lavender:#c5c5f7; --night:#111425; --glass:#111426d9; --border:#f6d58d8a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow:hidden; background:#0b0f1d; color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
button,input { font:inherit; }
.novel { min-height:100vh; position:relative; display:flex; flex-direction:column; overflow:hidden; background:#101628; }
.backdrop,.shade,.stars { position:absolute; inset:0; pointer-events:none; }
.backdrop { background:url('moon-academy.png') center / cover no-repeat; filter:saturate(.85) brightness(.82); transform:scale(1.02); }
.shade { background:linear-gradient(180deg,#08102256 20%,#0a0d1a12 44%,#080914dc 100%); }
.stars { opacity:.75; background-image:radial-gradient(circle at 14% 22%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 31% 17%,#d6e5ff 0 1px,transparent 2px),radial-gradient(circle at 76% 29%,#fff 0 1px,transparent 2px),radial-gradient(circle at 89% 17%,#bfd1ff 0 1px,transparent 1.5px); animation:glow 4s ease-in-out infinite alternate; }
@keyframes glow { to { opacity:.35; } }
.topbar { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:flex-start; padding:24px clamp(20px,5vw,70px); text-shadow:0 2px 10px #000; }
.chapter { display:block; margin:0 0 5px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.22em; }
h1 { margin:0; font:600 clamp(25px,4vw,43px)/.9 'Cormorant Garamond',serif; letter-spacing:.03em; }
.actions { display:flex; gap:8px; }
.icon-button { border:1px solid #eadca86b; padding:8px 11px; background:#1014269c; color:#fff7df; cursor:pointer; font-size:11px; font-weight:800; }
.icon-button:hover { background:#29345bca; }
.scene { position:relative; z-index:1; flex:1; min-height:250px; }
.portrait { position:absolute; right:clamp(-20px,4vw,78px); bottom:-38px; width:min(47vw,620px); max-height:77vh; object-fit:contain; object-position:bottom; filter:drop-shadow(0 14px 20px #000b); transition:opacity .4s,transform .4s; }
.portrait.hidden { opacity:0; transform:translateX(40px); pointer-events:none; }
.stat-card { position:absolute; left:clamp(20px,5vw,70px); top:5px; padding:10px 13px; border:1px solid var(--border); background:#12172fd6; backdrop-filter:blur(5px); color:#f8edcb; font-size:11px; }
.stat-card strong { display:block; margin-top:4px; color:var(--gold); letter-spacing:3px; }
.dialogue-panel { position:relative; z-index:4; width:min(1020px,calc(100% - 32px)); margin:0 auto 28px; padding:18px clamp(18px,4vw,40px) 22px; border:1px solid var(--border); background:linear-gradient(110deg,#111424ef,#17132cec); box-shadow:0 10px 40px #0009; }
.speaker { min-height:20px; margin:0 0 6px; color:var(--gold); font:700 21px/1 'Cormorant Garamond',serif; letter-spacing:.03em; }
.text { min-height:52px; margin:0; max-width:730px; color:#fffdf7; font:500 clamp(17px,2.1vw,22px)/1.4 'Cormorant Garamond',serif; }
.choices { display:grid; gap:9px; margin-top:15px; max-width:760px; }
.choice { width:100%; border:1px solid #e6d6a768; padding:11px 14px; background:#232848d2; color:#fff8e4; cursor:pointer; text-align:left; font-size:13px; font-weight:700; transition:background .2s,transform .2s; }
.choice:hover { background:#38436edd; transform:translateX(5px); }
.choice small { display:block; margin-top:3px; color:#ebcf81; font-size:10px; font-weight:800; letter-spacing:.04em; }
.start-screen { position:absolute; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:linear-gradient(90deg,#070a17d9,#10172c99,#070a17d9); transition:opacity .6s; }
.start-screen.hide { opacity:0; pointer-events:none; }
.title-card { width:min(470px,100%); padding:clamp(28px,5vw,52px); border:1px solid #f4d78e8a; background:#111528e3; box-shadow:0 20px 60px #000b; text-align:center; }
.moon { color:var(--gold); font-size:58px; line-height:.8; }
h2 { margin:5px 0 16px; color:#fff7e4; font:600 clamp(39px,7vw,60px)/.8 'Cormorant Garamond',serif; }
.title-card p:not(.chapter) { color:#e5ddce; font:500 16px/1.5 'Cormorant Garamond',serif; }
label { display:block; margin:23px 0 12px; color:#f2db9d; text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; }
input { width:100%; margin-top:7px; border:1px solid #d7ca9d8a; padding:11px; background:#080b17; color:#fff9e9; outline-color:var(--gold); font-size:15px; }
.primary { width:100%; border:0; padding:13px; background:linear-gradient(100deg,#e6ba61,#ffe4a7); color:#252038; cursor:pointer; font-weight:800; }
.primary:hover { filter:brightness(1.08); }
@media (max-width:680px) { .topbar { padding:19px 16px; } .icon-button { padding:7px; font-size:10px; } .scene { min-height:210px; } .portrait { width:85vw; right:-58px; bottom:-10px; } .dialogue-panel { margin-bottom:16px; } .text { min-height:42px; } .choice { font-size:12px; } }