/* TIFE Runtime Interface — Developer Kit v1.3 Section 6.
   Themeable via CSS variables set by js/interface.js (green / amber phosphor). */
:root{
  --fg:#19f58b; --fg2:#86ffc0; --dim:#4c9b75; --line:#08733f;
  --bg:#010503; --panel:#04100b; --bar:#06100d; --muted:#87b89e;
  --font:Consolas,"Courier New",monospace; --fs:15px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--fg);font-family:var(--font);font-size:var(--fs)}
button,input{font:inherit;font-family:var(--font)}

.tife-shell{
  min-height:100vh;display:grid;
  grid-template-rows:auto minmax(320px,1fr) auto auto;
  background:radial-gradient(circle at 55% 35%,#06130d 0,var(--bg) 48%,#000 100%);
}

/* ---------------- status bar: title | location | turn | clock ------------- */
.statusbar{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;
  padding:9px 16px;background:var(--bar);border:1px solid var(--line);
}
.sb-engine{color:var(--fg2);font-weight:900;letter-spacing:.1em;margin-right:6px}
.sb-title strong{letter-spacing:.2em;color:var(--fg2)}
.sb-location{text-align:center;color:var(--fg);letter-spacing:.06em}
.sb-turn,.sb-clock{color:var(--dim);white-space:nowrap}
.sb-turn b{color:var(--fg)}

/* ---------------- three panes: LOCATION | STORY | PLAYER ------------------ */
.panes{display:grid;grid-template-columns:250px 1fr 250px;gap:10px;padding:10px;min-height:0}
.pane{border:1px solid var(--line);background:var(--panel);padding:10px 12px;min-height:0;overflow:auto}
.pane h2{
  margin:0 0 8px;font-size:.78em;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg2);border-bottom:1px solid var(--line);padding-bottom:5px;font-weight:700;
}
.pane h2:not(:first-child){margin-top:16px}
.loc-name{color:var(--fg2);font-weight:700;margin-bottom:6px}
.loc-desc{margin:0;color:var(--muted);line-height:1.5;font-size:.92em}
.muted{color:var(--dim)}

.exit-list{display:flex;flex-direction:column;gap:6px}
.exit-button{
  background:transparent;border:1px solid var(--line);color:var(--fg);
  padding:7px 10px;text-align:left;cursor:pointer;border-radius:2px;
}
.exit-button:hover,.exit-button:focus{background:var(--line);color:var(--fg2);outline:none}

/* story pane */
.pane-story{display:flex;flex-direction:column;gap:8px;padding:0;background:var(--panel)}
.screen{flex:1;overflow-y:auto;padding:14px 16px;min-height:220px;line-height:1.55;white-space:pre-wrap}
.line{margin:0 0 3px}
.line.title{color:var(--fg2);font-weight:700;letter-spacing:.12em}
.line.system{color:var(--muted)}
.line.error{color:#ff8a6a}
.line.echo{color:var(--fg2);margin-top:10px}
.line.prompt{color:var(--dim);margin-top:10px;font-style:italic}
.command-line{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--bar)}
.command-line .caret{color:var(--fg2);font-weight:700}
.command-line input{flex:1;background:transparent;border:none;color:var(--fg);outline:none}
.command-line input::placeholder{color:var(--dim)}
.command-line button,.quickrow button,.cmd-button,.dialog-body button{
  background:transparent;border:1px solid var(--line);color:var(--fg);
  padding:6px 12px;cursor:pointer;border-radius:2px;
}
.command-line button:hover,.quickrow button:hover,.cmd-button:hover,.dialog-body button:hover{
  background:var(--line);color:var(--fg2);
}

/* player pane */
.meters{display:flex;flex-direction:column;gap:5px}
.meter{display:flex;justify-content:space-between;gap:10px;font-size:.92em}
.meter-label{color:var(--dim)}
.meter-value{color:var(--fg2);text-align:right}
.inv-list{display:flex;flex-direction:column;gap:3px;font-size:.92em}
.inv-item{color:var(--fg)}

/* ---------------- context-action bands ----------------------------------- */
.context-actions{
  display:flex;flex-direction:column;gap:8px;padding:10px 12px;margin:0 10px;
  border:1px solid var(--line);background:var(--bar);
}
.context-actions:empty{display:none}
.band-title{
  margin:0 0 5px;font-size:.72em;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);font-weight:700;
}
.band-row{display:flex;flex-wrap:wrap;gap:6px}
.cmd-button{font-size:.9em}

/* ---------------- quick row ---------------------------------------------- */
.quickrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px;background:var(--bar);border:1px solid var(--line);margin:10px}

/* ---------------- dialog -------------------------------------------------- */
#manager-dialog{
  width:min(760px,94vw);max-height:82vh;border:1px solid var(--line);
  background:var(--panel);color:var(--fg);padding:0;font-family:var(--font);
}
#manager-dialog::backdrop{background:rgba(0,0,0,.72)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bar)}
.dialog-head h2{margin:0;font-size:1em;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2)}
#dialog-close{background:transparent;border:1px solid var(--line);color:var(--fg);cursor:pointer;padding:2px 10px;border-radius:2px}
.dialog-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 16px 0}
.dialog-tabs:empty{display:none}
.tab{background:transparent;border:1px solid var(--line);color:var(--dim);padding:5px 11px;cursor:pointer;border-radius:2px;font-size:.88em}
.tab.active{color:var(--fg2);background:var(--line)}
.dialog-body{padding:14px 16px;overflow:auto;max-height:58vh}
.dialog-body h3{margin:14px 0 6px;font-size:.78em;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2)}
.dialog-body h3:first-child{margin-top:0}
.dialog-pre{margin:0;white-space:pre-wrap;line-height:1.5;color:var(--fg)}
.opt-row{display:flex;flex-wrap:wrap;gap:6px}
.opt-row .active{background:var(--line);color:var(--fg2)}
.save-new{display:flex;gap:8px;margin-bottom:12px}
.save-new input{flex:1;background:transparent;border:1px solid var(--line);color:var(--fg);padding:6px 10px;outline:none}
.save-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.save-meta{flex:1;color:var(--muted);font-size:.9em}

/* ---------------- narrow screens ----------------------------------------- */
/* s6: sidebars yield to the bands; bands scroll horizontally; story reads first */
@media (max-width:900px){
  .panes{grid-template-columns:1fr;gap:8px}
  .pane-location,.pane-player{display:none}
  .statusbar{grid-template-columns:1fr auto;row-gap:4px}
  .sb-location{grid-column:1 / -1;text-align:left;color:var(--muted);font-size:.9em}
  .band-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .cmd-button{white-space:nowrap}
  .screen{min-height:46vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}