:root{--bg: #07090b;--panel: #0d1114;--panel-2: #12171b;--edge: rgba(120, 140, 150, .16);--text: #9db0ba;--dim: #5f717b;--amber: #b2793c;--amber-bright: #d09a58;--red: #9c3a30;--green: #4f8064;--font: "Courier New", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}#app{position:fixed;inset:0}#gl-canvas,#hud-canvas{position:absolute;inset:0;display:block;image-rendering:pixelated}#hud-canvas{pointer-events:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:10;overflow-y:auto}.overlay--dim{background:radial-gradient(circle at 50% 40%,#0a0e10db,#030506f7);backdrop-filter:blur(2px)}.panel{width:min(920px,100%);max-height:100%;overflow-y:auto;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge);padding:28px 32px 24px;box-shadow:0 24px 80px #000000b3}.panel--wide{width:min(1140px,100%)}.panel--small{width:min(440px,100%);text-align:center}.panel--encounter,.panel--vignette{width:min(760px,100%)}.panel header{border-bottom:1px solid var(--edge);padding-bottom:14px;margin-bottom:18px}h1{margin:0;font-size:22px;letter-spacing:.14em;font-weight:600;color:var(--text);text-transform:uppercase}h2{font-size:12px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin:22px 0 10px;font-weight:600}h3{font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin:16px 0 6px}.sub{margin:8px 0 0;color:var(--dim);font-size:13px}.dim{color:var(--dim)}p{line-height:1.65;font-size:14px}.cols{display:grid;grid-template-columns:1fr 320px;gap:28px}@media (max-width: 900px){.cols{grid-template-columns:1fr}}.runs{display:flex;flex-direction:column;gap:10px}.run{display:grid;gap:3px;text-align:left;background:#ffffff05;border:1px solid var(--edge);border-left:3px solid var(--amber);padding:14px 16px;color:var(--text);font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.run:hover:not(:disabled){background:#b2793c17;border-left-color:var(--amber-bright);transform:translate(2px)}.run:disabled{opacity:.35;cursor:not-allowed;border-left-color:var(--dim)}.run__chapter{font-size:10px;letter-spacing:.24em;color:var(--dim)}.run__title{font-size:16px;letter-spacing:.05em}.run__meta{font-size:12px;color:var(--dim)}.run__meta--dim{opacity:.75}.run__tags{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}.run__tags em{font-style:normal;font-size:10px;letter-spacing:.12em;padding:2px 7px;border:1px solid var(--edge);color:var(--dim);text-transform:uppercase}.run__tags .ok{color:var(--green);border-color:#4f806480}.run__tags .locked{color:var(--red);border-color:#9c3a3080}.upgrades,.rep,.outcomes,.manifest{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.upgrades li{display:grid;gap:2px;font-size:12px;border-left:2px solid var(--green);padding-left:10px}.upgrades li span{color:var(--dim);line-height:1.5}.upgrades li.dim{border-left-color:var(--edge);color:var(--dim);line-height:1.6}.rep li{display:grid;grid-template-columns:1fr 110px;align-items:center;gap:10px;font-size:12px;color:var(--dim)}.bar{height:5px;background:#ffffff12}.bar i{display:block;height:100%;background:var(--amber)}.diffs{display:flex;flex-direction:column;gap:8px}.diff{display:grid;gap:3px;text-align:left;background:transparent;border:1px solid var(--edge);color:var(--text);font-family:var(--font);font-size:13px;padding:10px 12px;cursor:pointer}.diff em{font-style:normal;font-size:11px;color:var(--dim)}.diff.on{border-color:var(--amber);background:#b2793c1a}.totals{margin-top:16px;font-size:11px;color:var(--dim)}.briefing{display:grid;grid-template-columns:1fr 240px;gap:26px}@media (max-width: 760px){.briefing{grid-template-columns:1fr}}.briefing__text p{border-left:2px solid var(--edge);padding-left:14px;margin:0 0 14px}.manifest li{font-size:12px;color:var(--text);border-bottom:1px dotted var(--edge);padding-bottom:5px}.controls-hint{margin-top:20px;padding:14px 16px;border:1px solid var(--edge);background:#ffffff05;font-size:12px;line-height:1.9;color:var(--dim)}.controls-hint b{color:var(--amber);font-weight:600}.script p{margin:0 0 12px;color:var(--text)}.script b{color:var(--amber);font-weight:600}.options{display:flex;flex-direction:column;gap:8px;margin-top:20px}.option{display:grid;gap:4px;text-align:left;background:#ffffff05;border:1px solid var(--edge);padding:12px 14px;color:var(--text);font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s}.option:hover{background:#b2793c1a;border-color:var(--amber)}.option__label{font-size:14px}.option__hint{font-size:12px;color:var(--dim);line-height:1.5}.option__odds{font-size:10px;letter-spacing:.14em;color:var(--amber);text-transform:uppercase}.vignette p{opacity:0;animation:fade-in 1.4s ease forwards;font-size:15px;line-height:1.85;margin:0 0 18px;color:var(--text)}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.stats div{border:1px solid var(--edge);padding:14px;text-align:center}.stats b{display:block;font-size:22px;color:var(--amber);font-weight:600}.stats span{font-size:11px;color:var(--dim);letter-spacing:.1em}.outcomes li{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px dotted var(--edge);padding-bottom:6px;color:var(--dim)}.outcomes li em{font-style:normal;color:var(--text)}.reason{color:var(--red);border-left:2px solid var(--red);padding-left:12px}button.primary,button.ghost{font-family:var(--font);font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:12px 22px;cursor:pointer;transition:background .15s,border-color .15s}button.primary{margin-top:20px;background:#b2793c26;border:1px solid var(--amber);color:var(--amber-bright)}button.primary:hover{background:#b2793c47}button.ghost{margin-top:12px;background:transparent;border:1px solid var(--edge);color:var(--dim)}button.ghost:hover{border-color:var(--text);color:var(--text)}.row{display:flex;gap:12px;align-items:center}.row--stack{flex-direction:column}.row--stack button{width:100%;margin-top:0}.keys{width:100%;border-collapse:collapse;font-size:13px}.keys td{padding:7px 10px;border-bottom:1px dotted var(--edge)}.keys td:first-child{color:var(--amber);width:160px;letter-spacing:.08em}.keys td:last-child{color:var(--dim)}.gate .dim{line-height:1.8;font-size:13px}.fatal{padding:40px;color:var(--red);font-family:var(--font)}