/* Layout: one phone-width terminal column. ANSI 16-colour palette on deep navy; ASCII art, bracketed controls, text-drawn meters. Deliberately one dark world. */
:root{
  --bg:#0c0f1f; --panel:#121733; --panel2:#1a2045; --line:#2c3466;
  --ink:#e7e9f2; --dim:#8b91b3; --yellow:#f4c95d; --cyan:#62d6d6; --red:#ff6f6f; --green:#8fe08f; --magenta:#d99bef;
  --display:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{font-variant-numeric:lining-nums tabular-nums}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:var(--base,15px);line-height:1.6;-webkit-tap-highlight-color:transparent;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px dashed var(--line)}
.bar-in,.col{max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar-in{padding-block:8px;display:grid;gap:2px}
.row1{display:flex;align-items:center;gap:6px}
.brand{font-family:var(--display);font-size:24px;line-height:1;color:var(--yellow);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tbtn{font-size:12px;color:var(--dim);padding:6px 4px;min-height:32px;white-space:nowrap}
.tbtn[aria-pressed="true"]{color:var(--cyan)}
.tbtn:hover{color:var(--ink)}
.row2{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden}
.row2 b{color:var(--ink);font-weight:600}
.row2 .hp{color:var(--red)}
.row2 .g{color:var(--yellow)}

.sheet{border-bottom:1px dashed var(--line);background:var(--panel)}
.sheet .col{padding-block:14px 18px;display:grid;gap:14px}
.col.main{padding-block:18px 72px}

.art{font-family:var(--mono);font-size:12px;line-height:1.15;color:var(--cyan);margin:0 0 10px;white-space:pre;overflow-x:auto;max-width:100%}
.art.foeart{color:var(--red)}
.place{font-size:12px;letter-spacing:.06em;color:var(--magenta);margin:0}
h1.scene{font-family:var(--display);font-weight:400;font-size:clamp(34px,9vw,44px);line-height:1;margin:2px 0 12px;color:var(--yellow);text-wrap:balance}
.rule{color:var(--line);white-space:nowrap;overflow:hidden;font-size:12px;line-height:1;margin:0 0 14px;user-select:none}
.rule::before{content:"================================================================================================================"}
.prose p{margin:0 0 12px}
.prose em{color:var(--yellow);font-style:normal}
.prose .say{color:var(--green)}
.notes{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 14px;font-size:13px}
.note{color:var(--dim)} .note::before{content:"* "}
.note.up{color:var(--green)} .note.down{color:var(--red)} .note.lvl{color:var(--yellow)}

.roll{border:1px dashed var(--line);padding:10px 12px;margin:0 0 16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center}
.die{font-family:var(--display);font-size:42px;line-height:.9;color:var(--yellow);grid-row:span 2}
.die::before{content:"["} .die::after{content:"]"}
.roll.fail .die{color:var(--dim)}
.roll .lbl{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.roll .math{font-size:14px}
.roll .verdict{color:var(--green);font-weight:600}
.roll.fail .verdict{color:var(--red)}
@media (prefers-reduced-motion:no-preference){.die.spin{animation:flick .45s steps(6)}}
@keyframes flick{0%{opacity:.2}50%{opacity:1}70%{opacity:.4}100%{opacity:1}}

.choices{display:grid;gap:8px;margin-top:18px}
.choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;text-align:left;width:100%;padding:11px 12px;min-height:48px;border:1px solid var(--line);background:var(--panel)}
.choice .k{color:var(--yellow)}
.choice .tag{grid-column:2;font-size:12px;color:var(--cyan)}
.choice .tag::before{content:"{ "} .choice .tag::after{content:" }"}
.choice:hover:not(:disabled),.choice:active:not(:disabled){border-color:var(--yellow);background:var(--panel2)}
.choice:disabled{opacity:.45;cursor:not-allowed}
.choice:disabled .k{color:var(--dim)} .choice:disabled .tag{color:var(--dim)}

.foe{border:1px solid var(--line);padding:10px 12px;margin:2px 0 12px;background:var(--panel)}
.foe h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;margin:0 0 4px;color:var(--red)}
.foe .meta{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden}
.foe .meta b{color:var(--red);font-weight:400}
.flog{font-size:13px;line-height:1.5;border:1px dashed var(--line);padding:8px 10px;max-height:190px;overflow:auto;margin-bottom:6px}
.flog div{padding:2px 0}
.flog .you{color:var(--ink)} .flog .you::before{content:"> ";color:var(--yellow)}
.flog .them{color:#ffaaaa} .flog .them::before{content:"< ";color:var(--red)}
.flog .sys{color:var(--magenta)} .flog .sys::before{content:"# "}
.hint{font-size:12px;color:var(--dim)}
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.act{padding:10px;min-height:60px;border:1px solid var(--line);background:var(--panel);text-align:left;display:grid;align-content:start;gap:2px}
.act:hover:not(:disabled),.act:active:not(:disabled){border-color:var(--yellow)}
.act:disabled{opacity:.4;cursor:not-allowed}
.act b{font-weight:600;color:var(--yellow)}
.act span{font-size:12px;color:var(--dim)}

.shop{display:grid;gap:8px;margin-top:6px}
.ware{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);background:var(--panel)}
.ware b{font-weight:600}
.ware small{grid-column:1;display:block;color:var(--dim);font-size:13px;line-height:1.4}
.price{color:var(--yellow);font-size:13px}
.buy{grid-column:2;grid-row:1 / span 2;padding:8px 10px;min-height:44px;border:1px solid var(--yellow);color:var(--yellow)}
.buy:disabled{border-color:var(--line);color:var(--dim);cursor:not-allowed}

.namefield{display:grid;gap:4px;margin:4px 0 16px}
.namefield label{font-size:12px;color:var(--dim)}
.namefield input{font:inherit;font-size:18px;padding:8px 10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:0;width:100%;max-width:320px}
.classes{display:grid;gap:8px}
.cls{text-align:left;padding:12px;border:1px solid var(--line);background:var(--panel);display:grid;gap:4px}
.cls[aria-pressed="true"]{border-color:var(--yellow);background:var(--panel2)}
.cls h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;margin:0;color:var(--yellow)}
.cls[aria-pressed="true"] h3::before{content:"> "}
.cls p{margin:0;font-size:13px;line-height:1.45;color:var(--dim)}
.cls .ab{font-size:13px;color:var(--cyan)}
.begin{margin-top:16px;width:100%;font-family:var(--display);font-size:30px;line-height:1;padding:12px;background:var(--yellow);color:var(--bg)}
.begin:active{filter:brightness(1.1)}

.sec{font-size:12px;color:var(--magenta);margin:0 0 6px}
.sec::before{content:"-- "} .sec::after{content:" --"}
.who{font-family:var(--display);font-size:30px;line-height:1;color:var(--yellow)}
.sub{font-size:13px;color:var(--dim)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;font-size:13px}
.kv span:nth-child(odd){color:var(--dim)}
.kv .meter{white-space:nowrap;overflow:hidden}
.inv{list-style:none;margin:0;padding:0;font-size:13px;display:grid;gap:2px}
.inv li{display:flex;justify-content:space-between;gap:8px}
.inv li span:last-child{color:var(--dim)}
.dlog{font-size:12px;display:grid;gap:1px;color:var(--dim)}
.dlog .ok{color:var(--green)} .dlog .no{color:var(--red)}
.toggles{display:grid;gap:6px}
.tog{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;min-height:44px;border:1px solid var(--line);font-size:14px;text-align:left}
.tog b{font-weight:600;color:var(--dim)}
.tog[aria-pressed="true"] b{color:var(--green)}
.howto p{margin:0 0 8px;font-size:13px;color:var(--dim)}

.end-stats{font-size:14px;border:1px dashed var(--line);padding:10px 12px;margin:14px 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px}
.end-stats span:nth-child(odd){color:var(--dim)}
.end-stats b{color:var(--yellow);font-weight:600}
:root[data-skin="amoled"]{--bg:#000;--panel:#000;--panel2:#0b0906;--line:#211d17;--ink:#d8ccb4;--dim:#7d7466;--yellow:#e3a64b;--cyan:#6fa89c;--red:#d0675c;--green:#93b878;--magenta:#a88fb3} /* bedtime: pure black, warm low-blue text */
:root[data-skin="amoled"] body{background-image:none}
.cur{display:inline-block;width:.6em;margin-left:1px;background:var(--yellow);color:transparent;animation:blink .8s steps(1) infinite}
.cur::before{content:"_"}
@keyframes blink{50%{opacity:0}}
.skiphint{font-size:12px;color:var(--dim);margin-top:4px}
.skiphint::before{content:">> "}
.wait{visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .art.draw{animation:drawdown .45s steps(9) both}
  .reveal .choice,.reveal .act,.reveal .ware,.reveal .end-stats,.reveal .begin,.reveal .foe,.reveal .flog,.reveal .hint{animation:pop .28s ease-out both;animation-delay:calc(var(--i,0) * 70ms)}
  .flog .new{animation:wipe .32s steps(24) both}
}
@keyframes drawdown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.np{font-size:12px;color:var(--dim)}
.np b{color:var(--cyan);font-weight:400}
/* one-screen layout: header, a stage that holds one page of story, and a dock for the next step */
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
.bar{position:relative;flex:none}
.sheet{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow-y:auto;z-index:20;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.65)}
#story{flex:1;min-height:0;width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.stage{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;overscroll-behavior:contain}
.stage>*{flex:none}
.stage .flog{flex:1 1 auto;min-height:72px;max-height:none}
.dock{flex:none;padding-top:10px;display:grid;gap:8px}
.dock .choices,.dock .actions{margin-top:0}
.dock .end-stats{margin:0}
.next{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:54px;padding:10px 14px;border:1px solid var(--yellow);background:var(--panel);color:var(--yellow);font-family:var(--display);font-size:28px;line-height:1}
.next:active{background:var(--panel2)}
.next .pg{font-family:var(--mono);font-size:12px;color:var(--dim)}
.art{font-size:min(12px,1.65vh)}
@media (max-height:560px){.art{display:none}}
h1.scene{font-size:clamp(30px,8vw,40px)}
.prose{font-size:calc(var(--base,15px) + 1px)}
.namefield{margin:0 0 10px}
.classes{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cls{font-family:var(--display);font-size:24px;line-height:1;text-align:center;padding:10px 4px;color:var(--dim);display:block}
.cls[aria-pressed="true"]{color:var(--yellow)}
.cls[aria-pressed="true"]::before{content:"> "}
.clsinfo{border:1px dashed var(--line);padding:10px 12px;margin-top:8px;font-size:13px;display:grid;gap:4px}
.clsinfo p{margin:0;color:var(--dim)}
.clsinfo .ab{color:var(--cyan)}
.begin{margin-top:0}
.hx{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* library */
.brandbtn{font-family:var(--display);font-size:24px;line-height:1;color:var(--yellow);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding:4px 0;text-align:left}
.art.logo{color:var(--yellow);font-size:min(13px,1.8vh);margin-bottom:6px}
.games{display:grid;gap:10px;margin-bottom:12px}
.gamecard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;text-align:left;padding:12px 14px;border:1px solid var(--line);background:var(--panel);border-left:3px solid var(--gacc,var(--yellow))}
.gamecard:hover,.gamecard:active{background:var(--panel2);border-color:var(--gacc,var(--yellow))}
.gamecard .gt{grid-column:1 / -1;font-family:var(--display);font-size:28px;line-height:1;color:var(--gacc,var(--yellow))}
.gamecard .gg{grid-column:1 / -1;font-size:12px;color:var(--magenta)}
.gamecard .gb{grid-column:1 / -1;font-size:13px;color:var(--dim);line-height:1.45;margin:2px 0 6px}
.gamecard .gs{font-size:12px;color:var(--dim);align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gamecard .gs.go{color:var(--cyan)} .gamecard .gs.done{color:var(--green)} .gamecard .gs.dead{color:var(--red)}
.gamecard .ga{font-size:13px;color:var(--gacc,var(--yellow));align-self:center}
@media (prefers-reduced-motion:no-preference){.gamecard{animation:pop .3s ease-out both;animation-delay:calc(var(--i,0) * 80ms)}}
.endbtns{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.next.lib{font-size:22px;width:auto;border-color:var(--line);color:var(--dim)}

.goal{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.codebox{font:12px/1.4 var(--mono);width:100%;padding:8px 10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:0;resize:vertical;word-break:break-all}
.verline{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px dashed var(--line);margin-top:6px;padding-top:6px;font-size:12px;color:var(--dim)}
.newtag{color:var(--bg);background:var(--yellow);font-weight:600;padding:0 4px;margin-left:4px}
.rel{margin-bottom:14px}
.relv{margin:0 0 4px;font-family:var(--display);font-size:24px;line-height:1;color:var(--yellow)}
.relv span{font-family:var(--mono);font-size:12px;color:var(--dim)}
.rel ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.rel li{margin-bottom:4px}
/* dialogue: speaker name, then the line, marked with a rule */
.line{margin:0 0 12px;padding-left:10px;border-left:2px solid var(--green)}
.line .spk{color:var(--cyan);font-weight:600;margin-right:2px}
.line .say{color:var(--green)}
.page>p{margin:0 0 12px}
.art.portrait{color:var(--ink);margin-bottom:2px}
.castname{margin:0 0 8px;font-size:12px;color:var(--dim)}
.castdesc{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--ink);border:1px dashed var(--line);padding:8px 10px}
.journal{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.journal li{margin-bottom:4px}
.people{list-style:none;margin:0;padding:0;font-size:13px;display:grid;gap:8px}
.people b{color:var(--cyan);font-weight:600}
.people span{display:block;color:var(--dim);line-height:1.45}
.slider{display:grid;gap:4px;padding:8px 10px;border:1px solid var(--line);font-size:14px}
.slider input{width:100%;accent-color:var(--yellow)}
.diffsec{margin-top:12px}
.tog:disabled{opacity:.5}
.dock{max-height:46vh;max-height:46dvh;overflow-y:auto;overscroll-behavior:contain}
.choice{padding:9px 12px;min-height:44px}
.dock .choices{gap:6px}
#typed>.place+.prose{margin-top:6px}
/* story editor */
.fld{display:grid;gap:4px;margin:0 0 10px}
.fld span{font-size:12px;color:var(--dim)}
.fld input,.fld textarea,.fld select{font:inherit;font-size:14px;padding:8px 10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:0;width:100%}
.fld textarea{font-family:var(--mono);line-height:1.45;resize:vertical}
.edchoice{border:1px dashed var(--line);padding:10px 10px 4px;margin-bottom:8px}
.mycard{display:grid;gap:4px}
.mycard .tbtn{justify-self:end;font-size:12px}