html,body { margin:0; padding:0; font-family: 'Segoe UI', Arial, sans-serif; background:#0d0b10; color:#f2e9f2; height:100%; }
#app { position:relative; width:100vw; height:100vh; overflow:hidden; }
#background { position:absolute; inset:0; background:#121018 center/cover no-repeat; filter:brightness(0.9); transition:opacity .6s ease; opacity:1; }
#ui { position:relative; z-index:10; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
#status-bar { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; gap:.75rem; padding:.5rem .75rem; background:rgba(20,15,25,.55); backdrop-filter: blur(6px); font-size:.8rem; }
#status-bar button { background:linear-gradient(90deg,#433041,#5a3a57); color:#f7e3ef; border:1px solid #d4557a55; border-radius:8px; padding:.35rem .7rem; font:600 .7rem 'Segoe UI',sans-serif; cursor:pointer; letter-spacing:.5px; }
#status-bar button:hover { filter:brightness(1.15); }
#dialogue-box { background:rgba(30,20,35,.72); backdrop-filter: blur(12px); padding:1rem 1.25rem 1.25rem; margin:0.75rem; border:1px solid #d4557a55; border-radius:14px; box-shadow:0 4px 18px -6px rgba(0,0,0,.6); }
#name { font-weight:600; color:#ffd1e1; margin:0 0 .4rem; letter-spacing:.5px; min-height:1.2em; }
#text { line-height:1.45; font-size:1rem; min-height:6.5rem; white-space:pre-wrap; }
#next-btn { background:linear-gradient(90deg,#d4557a,#ff7fa1); border:none; color:#fff; padding:.55rem 1.1rem; border-radius:999px; font-weight:600; cursor:pointer; letter-spacing:.5px; box-shadow:0 2px 10px -4px rgba(0,0,0,.7); transition:transform .15s ease, box-shadow .3s ease; }
#next-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px -6px rgba(0,0,0,.8); }
#choices { display:flex; flex-direction:column; gap:.55rem; margin-top:.75rem; }
.choice-btn { background:linear-gradient(90deg,#352032,#4d2c49); color:#f5dce7; border:1px solid #d4557a55; border-radius:12px; padding:.6rem .9rem; text-align:left; font:600 .95rem 'Segoe UI',sans-serif; cursor:pointer; position:relative; overflow:hidden; }
.choice-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,#d4557a22,#ff9bb833); opacity:0; transition:opacity .35s ease; }
.choice-btn:hover::before { opacity:1; }
.hidden { display:none !important; }
.rich em { font-style:italic; }
.rich strong { font-weight:600; }
.rich .center { text-align:center; }
@media (max-width:680px){ #dialogue-box { margin:.5rem; padding:.75rem .85rem 1rem; } #text { font-size:.94rem; } }