:root{--ink:#14110f;--bg:#17140f;--panel:#2a231c;--panel-hi:#3d332a;--panel-lo:#0f0d0b;--sunken:#1b1712;--text:#ece0cb;--muted:#9a8a74;--gold:#c8a35a;--gold-hi:#e8c887;--gold-lo:#8a6f38;--red:#a33b2e;--green:#4a7c3f;--blue:#3b4a9e;--purple:#5b3a7a;--bevel:2px}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0}body{background-image:repeating-linear-gradient(0deg,#ffffff04 0 2px,#0000 2px 4px),repeating-linear-gradient(90deg,#00000029 0 2px,#0000 2px 4px)}.app-root{min-height:100vh;font-family:Tahoma,Verdana,Geneva,sans-serif;font-size:15px;line-height:1.5}canvas,.portrait{image-rendering:pixelated}canvas{display:block}.viewport,.app-root{-webkit-user-select:none;user-select:none}.viewport input,.app-root input{-webkit-user-select:text;user-select:text}h1{color:var(--gold);text-shadow:2px 2px 0 var(--ink);margin:0 0 .75rem;font-family:Tahoma,Verdana,Geneva,sans-serif;font-size:1.5rem;line-height:1.4}.muted{color:var(--muted)}.ok{color:#7bb661}.bad{color:#d97a6c}.mono{font-variant-numeric:tabular-nums}.small{font-size:.85em}.narrow{max-width:32rem;margin:0 auto;padding:3rem 1.25rem}.row{justify-content:space-between;align-items:center;display:flex}.row.gap{justify-content:flex-start;gap:.75rem}.stack{flex-direction:column;gap:1rem;margin-top:1.5rem;display:flex}.card,.status,.characters li{background:var(--panel);border:var(--bevel) solid var(--ink);box-shadow:inset var(--bevel) var(--bevel) 0 var(--panel-hi), inset calc(var(--bevel) * -1) calc(var(--bevel) * -1) 0 var(--panel-lo)}.card{padding:1.25rem}label{flex-direction:column;gap:.4rem;display:flex}label>span{letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-size:.7rem}input,select{color:var(--text);background:var(--sunken);border:var(--bevel) solid var(--ink);box-shadow:inset var(--bevel) var(--bevel) 0 var(--panel-lo), inset calc(var(--bevel) * -1) calc(var(--bevel) * -1) 0 var(--panel-hi);font:inherit;padding:.5rem .6rem}select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);background-position:right 14px top 1.15em,right 8px top 1.15em;background-repeat:no-repeat;background-size:6px 6px}input:focus-visible,select:focus-visible,button:focus-visible{outline:var(--bevel) solid var(--gold);outline-offset:var(--bevel)}.hint{color:var(--muted);font-size:.8rem;font-style:normal}.error,.notice{border:var(--bevel) solid var(--ink);padding:.6rem .7rem;font-size:.9rem}.error{color:#f0c4bd;box-shadow:inset var(--bevel) var(--bevel) 0 #5a2c25;background:#3a1d19}.notice{color:var(--text);box-shadow:inset var(--bevel) var(--bevel) 0 #574625;background:#3a2f1a}button{font:inherit}button.primary,a.primary{color:var(--ink);background:var(--gold);border:var(--bevel) solid var(--ink);box-shadow:inset var(--bevel) var(--bevel) 0 var(--gold-hi), inset calc(var(--bevel) * -1) calc(var(--bevel) * -1) 0 var(--gold-lo);cursor:pointer;padding:.5rem 1rem;font-weight:700;text-decoration:none}button.primary:active:not(:disabled),a.primary:active{transform:translate(var(--bevel), var(--bevel));box-shadow:inset calc(var(--bevel) * -1) calc(var(--bevel) * -1) 0 var(--gold-hi), inset var(--bevel) var(--bevel) 0 var(--gold-lo)}button.primary:disabled{background:var(--panel-hi);color:var(--muted);box-shadow:none;cursor:not-allowed}a.primary.block{text-align:center;display:inline-block}button.link{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:.5rem .4rem}button.link:hover{color:var(--gold)}button.link.danger:hover{color:var(--red)}.tabs{gap:var(--bevel);margin-top:1.5rem;display:flex}.tab{color:var(--muted);background:var(--panel);border:var(--bevel) solid var(--ink);box-shadow:inset calc(var(--bevel) * -1) calc(var(--bevel) * -1) 0 var(--panel-lo);cursor:pointer;padding:.45rem .9rem}.tab.active{color:var(--ink);background:var(--gold);box-shadow:inset var(--bevel) var(--bevel) 0 var(--gold-hi)}.status{grid-template-columns:7rem 1fr;gap:.5rem 1rem;margin:1.5rem 0;padding:1rem;display:grid}.status dt{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;align-self:center;font-size:.7rem}.status dd{margin:0}.characters{flex-direction:column;gap:.75rem;margin:1.5rem 0;padding:0;list-style:none;display:flex}.characters li{justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .75rem;display:flex}.grow{flex:1;min-width:0}.actions{flex:none}.details{flex-direction:column;min-width:0;line-height:1.35;display:flex}.char-name{color:var(--gold);font-size:1.05rem}.nowrap{white-space:nowrap}.portrait{background-position:0 0;background-repeat:no-repeat;background-size:256px 768px;width:64px;height:96px;display:block}.choice{color:var(--muted);background:var(--sunken);border:var(--bevel) solid var(--ink);box-shadow:inset var(--bevel) var(--bevel) 0 var(--panel-lo);cursor:pointer;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem .7rem;font-size:.8rem;display:flex}.choice.active{color:var(--ink);background:var(--gold);box-shadow:inset var(--bevel) var(--bevel) 0 var(--gold-hi)}.next{color:var(--muted);padding-left:1.2rem;line-height:2}.next strong{color:var(--text)}.viewport{position:fixed;inset:0;overflow:hidden}.viewport canvas{width:100%;height:100%;position:absolute;inset:0}.viewport canvas.world{pointer-events:none}