/* Polyester Pete — AGI-era cabinet chrome */
:root{
  --ega-black:#000000; --ega-blue:#0000aa; --ega-cyan:#00aaaa;
  --ega-ltgray:#aaaaaa; --ega-dkgray:#555555; --ega-white:#ffffff;
  --ega-yellow:#ffff55; --ega-ltcyan:#55ffff; --ega-ltred:#ff5555;

  /* Reading colours. The EGA palette above is right for the artwork and wrong
     for body text: #555555 on black is 2.8:1, which is simply unreadable, and
     #aaaaaa is thin at 14px. Every value below clears 7:1 on black. */
  --ink:#d2d8dc;        /* body text               */
  --ink-dim:#9aa6ae;    /* system / parser chatter */
  --ink-echo:#6fe3e3;   /* the player's own command */
  --ink-bright:#ffffff; /* narration               */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#101014;color:var(--ega-ltgray);
  font-family:"DejaVu Sans Mono","SF Mono",Menlo,Consolas,"Courier New",monospace;}
body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:12px;}

#cabinet{
  width:min(960px,100%);
  background:var(--ega-black);
  border:2px solid var(--ega-dkgray);
  box-shadow:0 0 0 6px #0a0a0c, 0 18px 60px rgba(0,0,0,.8);
  display:flex;flex-direction:column;
}

/* ---- status line: white on light grey, like AGI ---- */
#statusbar{
  background:var(--ega-ltgray);color:var(--ega-black);
  font-weight:700;font-size:14px;line-height:1.6;
  padding:2px 8px;display:flex;justify-content:space-between;gap:8px;
  white-space:nowrap;overflow:hidden;
}
#st-right{display:flex;gap:14px}

/* ---- scene ---- */
#stage{position:relative;background:#000;line-height:0}
#scene{
  display:block;width:100%;height:auto;
  /* image-rendering is set from canvas.js: nearest-neighbour when the backing
     buffer is being scaled up, smooth when it is being scaled down. */
  image-rendering:pixelated;
  cursor:crosshair;touch-action:manipulation;
}
#overlay{position:absolute;inset:0;pointer-events:none}

/* ---- message window ---- */
#messages{
  background:var(--ega-black);
  color:var(--ink);
  font-size:15px;line-height:1.5;
  padding:8px 10px;
  height:9.2em;overflow-y:auto;
  border-top:2px solid var(--ega-dkgray);
  scrollbar-width:thin;scrollbar-color:var(--ega-dkgray) #000;
}
#messages p{margin:0 0 .35em}
#messages .echo{color:var(--ink-echo)}
#messages .good{color:var(--ega-yellow)}
#messages .bad{color:var(--ega-ltred)}
#messages .narr{color:var(--ink-bright)}
#messages .sys{color:var(--ink-dim)}

/* ---- parser line ---- */
#promptbar{display:flex;align-items:center;gap:6px;
  background:var(--ega-black);border-top:2px solid var(--ega-dkgray);padding:5px 10px}
#caret{color:var(--ega-ltcyan);font-size:16px;font-weight:700}
#cmd{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--ega-ltcyan);font:inherit;font-size:16px;caret-color:var(--ega-ltcyan);
}
#cmd::placeholder{color:#4d7272}

/* ---- help line ---- */
#helpline{
  display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  background:#0a0a0c;color:#8d99a2;font-size:12px;padding:5px 10px;
  border-top:1px solid #1c1c22;
}
#helpline b{color:var(--ink)}
#quicks{display:flex;gap:4px}
#quicks button{
  background:#1d1d25;color:var(--ink);border:1px solid #3a3a46;
  font:inherit;font-size:12px;padding:3px 9px;cursor:pointer;
}
#quicks button:hover{background:var(--ega-dkgray);color:#fff}

/* ---- modal ---- */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.82);
  display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
#modal[hidden]{display:none}
#modalbox{
  /* A shade lighter than pure EGA blue: white on #0000aa is legible but harsh,
     and this screen carries the longest prose in the game. */
  background:#1a1aa8;color:var(--ega-white);
  border:2px solid var(--ega-white);outline:3px solid var(--ega-black);
  max-width:620px;width:100%;max-height:86dvh;padding:16px 20px;
  font-size:15px;line-height:1.55;
  /* Title pinned at the top, buttons pinned at the bottom, only the prose in
     between scrolls. Scrolling the whole box meant that on a phone the longest
     screen in the game pushed BEGIN off the bottom — the one control the
     player has to be able to reach. */
  display:flex;flex-direction:column;overflow:hidden;
}
#modalbox h2{flex:0 0 auto}
#modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#6a6ad0 #1a1aa8}
#modalbox h2{margin:0 0 .6em;font-size:17px;color:var(--ega-yellow);letter-spacing:.5px}
#modalbox p{margin:0 0 .7em}
#modalbox ol{margin:.2em 0 .8em;padding-left:1.4em}
#modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;flex:0 0 auto;
  padding-top:12px;border-top:1px solid #4a4ac8}
#modal-actions button{
  background:var(--ega-ltgray);color:#000;border:2px solid #fff;
  font:inherit;font-size:14px;font-weight:700;padding:5px 14px;cursor:pointer;
}
#modal-actions button:hover{background:var(--ega-white)}
#modalbox .choice{display:block;width:100%;text-align:left;margin:0 0 6px;
  background:#000;color:var(--ega-ltcyan);border:1px solid #6a6a7a;
  font:inherit;font-size:15px;padding:8px 11px;cursor:pointer}
#modalbox .choice:hover{background:var(--ega-dkgray);color:#fff}
#modalbox .fine{color:#cfe2ec;font-size:13px}

@media (max-width:560px){
  body{padding:0;align-items:stretch}
  /* Fill the viewport and let the message window take up the slack. On a phone
     the keyboard removes ~40% of the screen; with a fixed-height log the prompt
     ends up underneath it. Everything else is fixed, messages flex. */
  #cabinet{border-width:0;box-shadow:none;height:100dvh}
  #stage{flex:0 0 auto}
  #statusbar{flex:0 0 auto;font-size:11px;padding:3px 6px}
  #st-right{gap:8px}
  #messages{flex:1 1 auto;height:auto;min-height:3.2em;font-size:14px}
  #promptbar,#helpline{flex:0 0 auto}
  #helpline span:first-child{display:none}
  #quicks{width:100%;justify-content:space-between}
}
/* Short viewport on any width — a small desktop window, or a phone in landscape. */
@media (max-height:620px){
  body{padding:0;align-items:stretch}
  #cabinet{height:100dvh}
  #messages{flex:1 1 auto;height:auto;min-height:2.6em}
}