/* =====================================================================
 * TIFE runtime stylesheet — phosphor terminal skin (green / amber)
 * Copyright (c) 2026 Tronsoft Games. All rights reserved.
 * ===================================================================== */

:root{
  --font: 'DejaVu Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --accent: #8fe36b;
}

/* palette applied per-theme on .tife-app */
.theme-green{
  --bg:#050a06; --bg2:#08120a; --panel:#071a0d; --panel2:#0a2110;
  --ink:#bdf5a0; --ink-dim:#5f9a53; --ink-bright:#daffca;
  --line:#123a1c; --line2:#1c5a2c;
  --accent:#8fe36b; --warm:#e7c06a; --danger:#ff8a6b;
  --glow: 0 0 6px rgba(120,230,110,.30);
}
.theme-amber{
  --bg:#0a0602; --bg2:#140c04; --panel:#170f04; --panel2:#1f1507;
  --ink:#f2c777; --ink-dim:#a17b3a; --ink-bright:#ffe6ad;
  --line:#3a2610; --line2:#5a3c17;
  --accent:#ffb64d; --warm:#ffd27a; --danger:#ff8a6b;
  --glow: 0 0 6px rgba(255,180,80,.30);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#000; }
body{ font-family:var(--font); }

.tife-app{
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg2), var(--bg) 70%);
  color:var(--ink); font-size:14px; line-height:1.5;
  overflow:hidden; text-shadow:var(--glow);
}
.tife-app[data-size="sm"]{ font-size:12.5px; }
.tife-app[data-size="lg"]{ font-size:16px; }

/* faint scanline overlay */
.tife-app::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.10) 2px 3px);
  mix-blend-mode:multiply;
}

/* ---------- status bar ---------- */
.tife-status{
  display:flex; align-items:center; gap:14px; padding:7px 14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-bottom:1px solid var(--line2); flex:0 0 auto;
}
.st-brand{ font-weight:700; letter-spacing:2px; color:var(--accent); border:1px solid var(--line2); padding:1px 7px; border-radius:3px; }
.st-title{ font-weight:700; letter-spacing:3px; color:var(--ink-bright); }
.st-right{ margin-left:auto; display:flex; gap:18px; color:var(--ink-dim); font-size:.85em; letter-spacing:1px; }
.st-loc{ color:var(--ink); }

/* ---------- main three-pane ---------- */
.tife-main{
  display:grid; grid-template-columns:210px 1fr 210px; gap:10px;
  padding:10px 12px; flex:1 1 auto; min-height:0;
}
.pane{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:6px; padding:10px 12px;
  overflow:auto; min-height:0;
}
.pane-center{ padding:0; display:flex; }
.pane-h{
  text-transform:uppercase; letter-spacing:2px; font-size:.72em; color:var(--accent);
  border-bottom:1px dashed var(--line2); padding-bottom:4px; margin:2px 0 8px;
}
.pane-h:not(:first-child){ margin-top:16px; }

.loc-name{ color:var(--ink-bright); font-weight:700; }
.exit-list{ display:flex; flex-direction:column; gap:5px; }
.exit-btn{
  text-align:left; background:var(--panel2); color:var(--ink);
  border:1px solid var(--line2); border-radius:4px; padding:5px 9px; cursor:pointer;
  font-family:inherit; font-size:.92em; text-shadow:inherit;
}
.exit-btn:hover{ border-color:var(--accent); color:var(--ink-bright); box-shadow:var(--glow); }
.exit-btn.locked{ opacity:.5; }
.exit-none{ color:var(--ink-dim); font-size:.9em; }

.meters{ display:flex; flex-direction:column; gap:6px; }
.meter{ display:flex; justify-content:space-between; border-bottom:1px dotted var(--line); padding-bottom:3px; }
.m-label{ color:var(--ink-dim); }
.m-val{ color:var(--ink-bright); font-weight:700; }
.inv-list{ display:flex; flex-direction:column; gap:3px; }
.inv-item{ font-size:.92em; }
.inv-empty{ color:var(--ink-dim); font-style:italic; }

/* ---------- story ---------- */
.story{
  flex:1 1 auto; overflow-y:auto; padding:16px 20px; width:100%;
  background:linear-gradient(180deg, rgba(0,0,0,.15), transparent 40px);
  scroll-behavior:smooth;
}
.story .line{ margin:0 0 4px; white-space:pre-wrap; }
.story .spacer{ height:10px; }
.story .roomtitle{ color:var(--ink-bright); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:6px; margin-bottom:6px; }
.story .echo{ color:var(--accent); margin:14px 0 6px; }
.story .prompt{ color:var(--warm); font-style:italic; margin-top:8px; }
.story .sys{ color:var(--accent); }
.story .good{ color:var(--ink-bright); }
.story .reading{ color:var(--warm); border-left:2px solid var(--line2); padding-left:12px; margin:6px 0; }
.story .intro{ color:var(--ink-bright); }

.story::-webkit-scrollbar,.pane::-webkit-scrollbar,.tab-scroll::-webkit-scrollbar{ width:10px; }
.story::-webkit-scrollbar-thumb,.pane::-webkit-scrollbar-thumb,.tab-scroll::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:6px; }
.story::-webkit-scrollbar-track{ background:transparent; }

/* ---------- context bands ---------- */
.tife-bands{ flex:0 0 auto; max-height:32vh; overflow-y:auto; padding:2px 12px 6px; }
.band{ margin:8px 0 0; }
.band-h{ font-size:.68em; letter-spacing:2px; text-transform:uppercase; color:var(--ink-dim); margin:0 0 5px; }
.band-row{ display:flex; flex-wrap:wrap; gap:7px; }
.cmd-btn{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  color:var(--ink); border:1px solid var(--line2); border-radius:5px;
  padding:6px 12px; cursor:pointer; font-family:inherit; font-size:.9em; text-shadow:inherit;
  transition:border-color .12s, color .12s, box-shadow .12s;
}
.cmd-btn:hover{ border-color:var(--accent); color:var(--ink-bright); box-shadow:var(--glow); }
.cmd-btn:active{ transform:translateY(1px); }

/* ---------- input ---------- */
.tife-input{ display:flex; gap:8px; padding:8px 12px; border-top:1px solid var(--line2); background:var(--panel); flex:0 0 auto; }
.cmd{
  flex:1; background:var(--bg); color:var(--ink-bright); border:1px solid var(--line2);
  border-radius:5px; padding:9px 12px; font-family:inherit; font-size:1em; outline:none; text-shadow:inherit;
}
.cmd:focus{ border-color:var(--accent); box-shadow:var(--glow); }
.cmd::placeholder{ color:var(--ink-dim); }
.enter{
  background:var(--accent); color:#04120a; border:none; border-radius:5px;
  padding:0 20px; font-weight:700; letter-spacing:1px; cursor:pointer; font-family:inherit; text-shadow:none;
}
.enter:hover{ filter:brightness(1.12); }

/* ---------- quick row ---------- */
.tife-quick{ display:flex; gap:8px; padding:8px 12px 12px; flex:0 0 auto; justify-content:center; flex-wrap:wrap; }
.quickbtn{
  display:flex; align-items:center; gap:7px; background:var(--panel2); color:var(--ink);
  border:1px solid var(--line2); border-radius:5px; padding:7px 16px; cursor:pointer;
  font-family:inherit; font-size:.9em; letter-spacing:1px; text-shadow:inherit;
}
.quickbtn:hover{ border-color:var(--accent); color:var(--ink-bright); box-shadow:var(--glow); }
.qicon{ font-size:1.1em; }

/* ---------- modal / dialogs ---------- */
.tife-modal{ position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.66); padding:24px; }
.tife-modal.hidden{ display:none; }
.modal-box{ width:min(760px,94vw); max-height:88vh; overflow:hidden; display:flex; }
.dlg,.endcard,.modal-box>.dlg{ background:linear-gradient(180deg,var(--panel2),var(--bg2)); border:1px solid var(--line2); border-radius:8px; width:100%; display:flex; flex-direction:column; max-height:88vh; box-shadow:0 0 40px rgba(0,0,0,.6); }
.modal-head{ display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line2); }
.modal-title{ color:var(--accent); letter-spacing:2px; text-transform:uppercase; font-weight:700; }
.modal-x{ margin-left:auto; background:none; border:1px solid var(--line2); color:var(--ink); border-radius:4px; padding:3px 9px; cursor:pointer; font-family:inherit; text-shadow:inherit; }
.modal-x:hover{ border-color:var(--danger); color:var(--danger); }

.tabs{ display:flex; flex-wrap:wrap; gap:2px; padding:8px 12px 0; border-bottom:1px solid var(--line); }
.tab{ background:transparent; color:var(--ink-dim); border:1px solid transparent; border-bottom:none; border-radius:5px 5px 0 0; padding:6px 12px; cursor:pointer; font-family:inherit; font-size:.85em; text-shadow:inherit; }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--ink-bright); background:var(--panel); border-color:var(--line2); }

.tab-body,.tab-scroll{ padding:14px 18px; overflow-y:auto; }
.tab-scroll{ max-height:64vh; }
.muted{ color:var(--ink-dim); font-style:italic; }
h3,h4{ color:var(--accent); margin:6px 0 8px; letter-spacing:1px; }

.jentry{ border-left:2px solid var(--line2); padding:2px 0 8px 12px; margin-bottom:12px; }
.jentry h4{ margin:0 0 4px; color:var(--warm); }
.jentry p{ margin:0; }

.quest{ display:flex; gap:10px; padding:7px 0; border-bottom:1px dotted var(--line); }
.quest.done .q-text b{ text-decoration:line-through; color:var(--ink-dim); }
.q-mark{ color:var(--accent); }
.q-desc{ color:var(--ink-dim); font-size:.9em; margin-top:2px; }

.ach-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ach{ display:flex; gap:10px; border:1px solid var(--line); border-radius:6px; padding:9px 11px; opacity:.55; }
.ach.got{ opacity:1; border-color:var(--line2); box-shadow:var(--glow); }
.ach-ic{ font-size:1.4em; color:var(--warm); }
.ach-name{ font-weight:700; color:var(--ink-bright); font-size:.92em; }
.ach-desc{ font-size:.82em; color:var(--ink-dim); }

.stat-tbl{ display:flex; flex-direction:column; }
.stat-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dotted var(--line); }
.s-k{ color:var(--ink-dim); }
.s-v{ color:var(--ink-bright); font-weight:700; }

.talk-row{ padding:5px 0; border-bottom:1px dotted var(--line); }
.transcript pre,.map-art{ white-space:pre-wrap; font-size:.86em; color:var(--ink); line-height:1.45; }
.map-art{ color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:14px; }
.map-list{ display:flex; flex-direction:column; gap:4px; }
.map-loc.here{ color:var(--warm); font-weight:700; }

.opt-row{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 14px; align-items:center; }
.btn{ background:var(--panel2); color:var(--ink); border:1px solid var(--line2); border-radius:5px; padding:7px 14px; cursor:pointer; font-family:inherit; font-size:.9em; text-shadow:inherit; }
.btn:hover{ border-color:var(--accent); color:var(--ink-bright); }
.btn.small{ padding:4px 10px; font-size:.82em; }
.btn.primary{ background:var(--accent); color:#04120a; border:none; font-weight:700; text-shadow:none; }
.btn.danger:hover{ border-color:var(--danger); color:var(--danger); }
.theme-pick.green{ box-shadow:inset 0 0 0 2px #6fd35a55; }
.theme-pick.amber{ box-shadow:inset 0 0 0 2px #ffb64d55; }
.save-name,.cmd{ text-shadow:inherit; }
.save-name{ flex:1; background:var(--bg); color:var(--ink-bright); border:1px solid var(--line2); border-radius:5px; padding:8px 10px; font-family:inherit; }
.save-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.save-row{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:6px; padding:8px 11px; }
.save-title{ color:var(--ink-bright); font-weight:700; }
.save-meta{ color:var(--ink-dim); font-size:.8em; }
.save-acts{ margin-left:auto; display:flex; gap:6px; }
.dlg-actions{ display:flex; gap:10px; margin-top:14px; }
.hint-steps{ display:flex; flex-direction:column; gap:8px; }
.hint-step{ display:flex; gap:8px; }
.hs-n{ color:var(--accent); }
.help-grid,.stat-tbl{ margin-top:6px; }
.help-row{ display:flex; gap:12px; padding:5px 0; border-bottom:1px dotted var(--line); }
.h-k{ color:var(--accent); width:70px; flex:0 0 auto; }
.h-v{ color:var(--ink); }

/* ---------- ending card ---------- */
.endcard{ background:linear-gradient(180deg,var(--panel2),var(--bg2)); border:1px solid var(--line2); border-radius:10px; width:min(680px,94vw); max-height:88vh; overflow:auto; padding:26px 30px; box-shadow:0 0 60px rgba(0,0,0,.7); }
.end-badge{ text-align:center; letter-spacing:4px; color:var(--accent); font-weight:700; margin-bottom:10px; }
.endcard.lose .end-badge{ color:var(--danger); }
.endcard h2{ color:var(--ink-bright); text-align:center; letter-spacing:2px; margin:4px 0 16px; }
.endcard p{ margin:0 0 12px; }
.end-score{ color:var(--warm); text-align:center; border-top:1px dashed var(--line2); padding-top:14px; margin-top:8px; }

/* ---------- responsive: sidebars yield to bands ---------- */
@media (max-width:820px){
  .tife-main{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .pane-left,.pane-right{ display:none; }         /* movement handled by bands; inventory in bands */
  .tife-bands{ max-height:38vh; }
  .band-row{ overflow-x:auto; flex-wrap:nowrap; }
  .ach-grid{ grid-template-columns:1fr; }
  .st-right{ gap:10px; }
}