*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#09070b;color:#f4eee4;font-family:Georgia,"Times New Roman",serif}
body{min-height:100vh;background:radial-gradient(circle at 15% 20%,#24102b 0,#0b080e 35%,#07070a 100%);overflow-x:hidden}
body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:radial-gradient(#ff7a1a 0 1px,transparent 1px),radial-gradient(#7d4cff 0 1px,transparent 1px);background-size:170px 170px,230px 230px}
header{position:fixed;z-index:20;top:0;left:0;right:0;height:64px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;font:11px system-ui;letter-spacing:.16em;background:linear-gradient(#08060b,transparent)}
header b{color:#ff7518;text-shadow:0 0 14px #ff4d0044}header span{color:#9b879e}
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:90px 7vw 100px}.content,.story{width:min(840px,100%)}
.eyebrow{font:11px system-ui;letter-spacing:.25em;color:#ff7518;text-transform:uppercase;margin-bottom:20px}
h1{font-size:clamp(44px,7vw,84px);line-height:.92;font-weight:500;margin:0 0 25px;text-shadow:0 4px 30px #000}p{font-size:20px;line-height:1.7;color:#d8d0d2}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:45px}.path{min-height:255px;text-align:left;padding:30px;color:#eee;border:1px solid #43264e;background:linear-gradient(145deg,#21142a,#100d15);cursor:pointer;transition:.25s}
.path:hover{transform:translateY(-5px);border-color:#ff7518;box-shadow:0 10px 45px #ff4d0018}.path h2{font-size:40px;font-weight:500;margin:55px 0 10px}.path p{font-size:16px;color:#a99cae;margin:0}
.story{animation:fadeIn .5s ease}.storyText{white-space:pre-line;font-size:22px;line-height:1.85;color:#eee6dc;min-height:250px;max-width:840px}.actions{min-height:156px}.question{margin-top:45px;border-top:1px solid #39283e;padding-top:16px;font:11px system-ui;letter-spacing:.2em;color:#ff7518}
.actions{display:grid;gap:12px;margin-top:25px}.action{padding:18px 21px;text-align:left;background:#151019;border:1px solid #3a2941;color:#e6dfe0;font:17px Georgia;cursor:pointer;transition:.2s}.action:hover{border-color:#ff7518;transform:translateX(5px);background:#1e1420}
.outcome{margin-top:30px;min-height:180px;display:flex;flex-direction:column;justify-content:flex-start}.typedOutcome{min-height:112px;max-height:240px;overflow-y:auto;margin:0;padding-right:8px}.continue{margin-top:25px;padding:14px 22px;border:0;background:#ff7518;color:#120b08;font:700 11px system-ui;letter-spacing:.12em;cursor:pointer}.continue:disabled{opacity:.45;cursor:wait}
.roll{position:fixed;z-index:25;right:26px;bottom:24px;width:78px;height:78px;border-radius:50%;border:1px solid #ff7518;background:#17101a;color:#ff9b55;box-shadow:0 0 0 5px #ff75180c,0 12px 40px #000b;cursor:pointer}.roll span{display:block;font-size:25px}.roll small{font:9px system-ui;letter-spacing:.14em}
.overlay{position:fixed;z-index:30;inset:0;background:transparent;overflow:hidden;pointer-events:none}.hidden{display:none}
#diceStage{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:31;display:block!important;visibility:hidden;opacity:0;overflow:hidden}#diceStage.visible{visibility:visible;opacity:1}#diceStage canvas{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;display:block!important;visibility:visible!important;opacity:1!important;pointer-events:none!important;transform:none!important;filter:none!important;z-index:32!important}.overlay:not(.hidden){display:block!important;visibility:visible!important;opacity:1!important}.diceVignette{display:none!important}
#diceCaption{display:none}
#diceNumber{display:none!important}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:700px){.grid{grid-template-columns:1fr}.path{min-height:195px}.path h2{margin-top:30px}.storyText,p{font-size:18px}.outcome{height:205px}.typedOutcome{height:137px;min-height:137px}}