:root{
    --bg:#0d0800;
    --panel:#160e00;
    --panel2:#1d1300;
    --ink:#ffb000;
    --ink-dim:#a9750a;
    --ink-faint:#5c4106;
    --accent:#ffd35c;
    --danger:#ff6a3d;
    --line:#3a2a05;
    --font:'Courier New', ui-monospace, 'IBM Plex Mono', monospace;
    --fs:14px;
  }
  :root[data-phosphor="green"]{
    --bg:#000a04; --panel:#02120a; --panel2:#03180d;
    --ink:#33ff66; --ink-dim:#1da344; --ink-faint:#0d5a25;
    --accent:#a8ffbe; --line:#0a3a1a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--font); font-size:var(--fs); line-height:1.5;
    display:flex; flex-direction:column;
    text-shadow:0 0 6px color-mix(in srgb, var(--ink) 35%, transparent);
  }
  body::after{ /* scanline film */
    content:""; pointer-events:none; position:fixed; inset:0; z-index:99;
    background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.16) 2px 3px);
    mix-blend-mode:multiply;
  }
  @media (prefers-reduced-motion: no-preference){
    #story .cursor{animation:blink 1s steps(1) infinite}
    @keyframes blink{50%{opacity:0}}
  }

  /* ---- status bar ---- */
  header{
    display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap;
    padding:.4rem .9rem; border-bottom:1px solid var(--line); background:var(--panel);
  }
  header .brand{font-weight:bold; letter-spacing:.12em}
  header .brand small{color:var(--ink-dim); font-weight:normal; letter-spacing:0; margin-left:.5rem}
  header .stat{color:var(--ink-dim)}
  header .stat b{color:var(--ink); font-weight:normal}
  header .spacer{flex:1}

  /* ---- main three panes ---- */
  main{flex:1; display:flex; min-height:0}
  .pane{padding:.8rem .9rem; overflow:auto}
  .side{width:220px; flex:none; background:var(--panel); border-right:1px solid var(--line)}
  .side.right{border-right:0; border-left:1px solid var(--line)}
  .side h3{
    font-size:.78em; letter-spacing:.2em; color:var(--ink-dim);
    border-bottom:1px solid var(--line); padding-bottom:.25rem; margin:.9rem 0 .5rem;
  }
  .side h3:first-child{margin-top:0}
  .side ul{list-style:none}
  .side li{padding:.1rem 0; color:var(--ink)}
  .side .dim{color:var(--ink-dim)}
  .meter{display:flex; justify-content:space-between}

  #storywrap{flex:1; display:flex; flex-direction:column; min-width:0}
  #story{flex:1; overflow:auto; padding:1rem 1.2rem; white-space:pre-wrap; background:var(--bg)}
  #story .cmd{color:var(--accent)}
  #story .sys{color:var(--ink-dim)}
  #story .block{margin-bottom:1rem}
  #story .prompt-line{color:var(--ink-dim); margin-top:.4rem}

  /* ---- context bands ---- */
  #bands{border-top:1px solid var(--line); background:var(--panel); padding:.5rem .9rem; max-height:34vh; overflow:auto}
  .band{margin:.35rem 0}
  .band .bandname{font-size:.75em; letter-spacing:.2em; color:var(--ink-dim); margin-bottom:.2rem}
  .band .btns{display:flex; flex-wrap:wrap; gap:.35rem}
  button{
    font-family:var(--font); font-size:.92em; color:var(--ink);
    background:var(--panel2); border:1px solid var(--ink-faint);
    padding:.28rem .6rem; cursor:pointer;
  }
  button:hover{border-color:var(--ink); color:var(--accent)}
  button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

  /* ---- input row ---- */
  #inputrow{display:flex; gap:.5rem; padding:.5rem .9rem; border-top:1px solid var(--line); background:var(--panel)}
  #inputrow input{
    flex:1; background:var(--bg); color:var(--ink); border:1px solid var(--ink-faint);
    font-family:var(--font); font-size:1em; padding:.35rem .6rem;
  }
  #inputrow input:focus{outline:none; border-color:var(--ink)}

  /* ---- quick row ---- */
  footer{
    display:flex; gap:.4rem; padding:.45rem .9rem; flex-wrap:wrap;
    border-top:1px solid var(--line); background:var(--panel);
  }

  /* ---- dialogs ---- */
  dialog{
    background:var(--panel); color:var(--ink); border:1px solid var(--ink-dim);
    font-family:var(--font); font-size:var(--fs);
    max-width:640px; width:92vw; max-height:80vh; padding:0;
    box-shadow:0 0 40px rgba(0,0,0,.8);
  }
  dialog::backdrop{background:rgba(0,0,0,.65)}
  dialog .dhead{display:flex; justify-content:space-between; align-items:center;
    padding:.5rem .8rem; border-bottom:1px solid var(--line); letter-spacing:.15em}
  dialog .dbody{padding:.8rem; overflow:auto; max-height:64vh; white-space:pre-wrap}
  .tabs{display:flex; gap:.3rem; flex-wrap:wrap; padding:.5rem .8rem 0}
  .tabs button[aria-selected="true"]{border-color:var(--ink); color:var(--accent)}
  .done{color:var(--ink-dim); text-decoration:line-through}
  .locked{color:var(--ink-faint)}
  table.saves{width:100%; border-collapse:collapse}
  table.saves td{border-bottom:1px solid var(--line); padding:.3rem .2rem}

  /* ---- narrow screens: sidebars yield to bands ---- */
  @media (max-width:820px){
    .side{display:none}
    .band .btns{flex-wrap:nowrap; overflow-x:auto; padding-bottom:.2rem}
  }