*{box-sizing:border-box}body{margin:0;font-family:"Trebuchet MS",system-ui,sans-serif;background:#2b1b4a;color:#fff;min-height:100vh}
#app{max-width:820px;margin:0 auto;padding:16px}h1{text-align:center;font-size:2.4em;margin:10px 0;text-shadow:0 3px 0 #000}
.scene{border-radius:24px;height:200px;display:flex;align-items:center;justify-content:center;font-size:84px;letter-spacing:10px;box-shadow:inset 0 -40px 60px rgba(0,0,0,.35);margin-bottom:14px;transition:background 1s}
.narr{background:#fff7e6;color:#3a2a10;border-radius:18px;padding:18px;font-size:1.3em;line-height:1.45;min-height:90px}
.choices{display:grid;gap:12px;margin-top:14px}.big{font-size:1.35em;padding:18px;border:0;border-radius:18px;background:#ffb703;color:#2b1b4a;font-weight:bold;box-shadow:0 6px 0 #c77d00;cursor:pointer;width:100%}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #c77d00}.big.alt{background:#8ecae6;box-shadow:0 6px 0 #4a8fb0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.hero{background:#4a2f7a;border:4px solid transparent;border-radius:18px;padding:12px;text-align:center;font-size:1.1em;cursor:pointer;color:#fff}
.hero .e{font-size:56px}.hero.on{border-color:#ffb703;background:#5e3d99}.bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pill{background:#1a1030;border-radius:99px;padding:6px 12px}.die{font-size:64px;text-align:center;animation:spin .6s}@keyframes spin{from{transform:rotate(-360deg) scale(.3)}}
.small{font-size:.9em;opacity:.8;text-align:center}