/* 320x240 everything. The UI layer is authored at 1x and scaled by CSS so the
   graphics stay chunky while the text stays readable. */
:root {
  --scale: 3;
  --ink: #e8e8f0;
  --box: #0a0a2a;
  --edge: #b8b8d8;
  --hi: #ffd75f;
  --sleaze: #ff5fa8;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #0b0b10;
  color: var(--ink);
  font-family: "Courier New", ui-monospace, monospace;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#cabinet { position: relative; }
#crt {
  position: relative;
  width: calc(320px * var(--scale));
  height: calc(240px * var(--scale));
  background: #000;
  border: 6px solid #23232c;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #000, 0 0 60px rgba(120,80,255,.25), inset 0 0 40px rgba(0,0,0,.8);
  overflow: hidden;
}
#screen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
#ui {
  position: absolute; top: 0; left: 0;
  width: 320px; height: 240px;
  transform: scale(var(--scale));
  transform-origin: top left;
  font-size: 8px; line-height: 1.25;
  /* The text layer covers the whole screen. Without this it eats every click
     and the canvas underneath never hears about them - Larry stands still. */
  pointer-events: none;
}
#ui > * { pointer-events: auto; }
#scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: multiply;
}
#glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.06), rgba(0,0,0,.45) 85%);
}

/* ---------------------------------------------------------------- widgets */
.panel {
  background: var(--box);
  border: 1px solid var(--edge);
  box-shadow: 1px 1px 0 #000;
  padding: 3px 4px;
}
#statusbar {
  position: absolute; left: 0; top: 0; width: 320px; height: 10px;
  background: #d8d8e8; color: #101028;
  display: flex; gap: 6px; align-items: center; padding: 0 3px;
  font-weight: bold; letter-spacing: .2px;
}
#statusbar .right { margin-left: auto; }
#statusbar .heart { color: #c01050; }

#textbox {
  position: absolute; left: 12px; top: 24px; width: 296px;
  max-height: 104px; overflow-y: auto;   /* never run off a 240px screen */
  display: none; cursor: pointer; z-index: 6;
}
#textbox.show { display: block; }
#textbox .who { color: var(--hi); }
#textbox .more { color: #8888aa; text-align: right; }

#bottom {
  position: absolute; left: 0; top: 200px; width: 320px; height: 40px;
  background: linear-gradient(#1b1b2e, #101018);
  border-top: 1px solid #4a4a6a;
  padding: 2px 3px;
}
#verbs { display: flex; gap: 2px; flex-wrap: wrap; }
button {
  font-family: inherit; font-size: 8px; line-height: 1;
  color: var(--ink); background: #2a2a44;
  border: 1px solid #5a5a80; padding: 2px 3px; cursor: pointer;
}
button:hover { background: #3d3d63; }
button.on { background: var(--hi); color: #201800; border-color: #fff; }
button:disabled { opacity: .4; cursor: default; }
#hint { margin-top: 2px; color: #a8a8c8; height: 10px; overflow: hidden; }
#selitem { color: var(--hi); }

#invpanel, #gopanel, #dadpanel, #talk, #splash, #endcard {
  position: absolute; z-index: 8;
}
#dadpanel {
  left: 8px; top: 14px; width: 304px; max-height: 182px;
  display: none; flex-direction: column;
}
#dadpanel.show { display: flex; }
#dad-title { color: var(--hi); }
#dad-body { overflow-y: auto; flex: 1; margin: 3px 0; scrollbar-width: thin; }
#dadpanel { top: 40px; max-height: 150px; }
#dad-count { color: var(--sleaze); }
#dad-body .said {
  color: var(--ink); border-left: 2px solid var(--hi); padding-left: 4px;
}
#dad-body .old { color: #7a7a96; margin-top: 3px; }
.dad-foot { display: flex; gap: 5px; align-items: center; }
#invpanel, #gopanel {
  left: 20px; top: 20px; width: 280px; display: none;
}
#invpanel.show, #gopanel.show { display: block; }
#invgrid { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.item {
  width: 46px; text-align: center; cursor: pointer;
  border: 1px solid transparent; padding: 1px;
}
.item:hover, .item.sel { border-color: var(--hi); background: #202048; }
.item img { display: block; margin: 0 auto; image-rendering: pixelated; height: 30px; }
.item span { display: block; font-size: 7px; color: #c8c8e0; }

#talk {
  left: 6px; top: 88px; width: 308px; max-height: 108px;
  display: none; flex-direction: column; gap: 2px;
}
#talk.show { display: flex; }
#talk .head { display: flex; gap: 4px; min-height: 0; }
#talk img.port {
  width: 40px; height: 40px; image-rendering: pixelated;
  border: 1px solid var(--edge);
}
#talk .said {
  flex: 1; min-width: 0; min-height: 40px; max-height: 48px;
  overflow-y: auto; overflow-wrap: break-word;
}
#talk .name { color: var(--sleaze); }
#lines {
  display: flex; flex-direction: column; gap: 1px; margin-top: 2px;
  max-height: 36px; overflow-y: auto;
}
#lines button {
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#say { display: flex; gap: 2px; margin-top: 2px; }
#say input {
  flex: 1; font-family: inherit; font-size: 8px;
  background: #05051a; color: var(--ink); border: 1px solid #5a5a80; padding: 2px;
}
#meter { display: flex; gap: 1px; align-items: center; }
#meter i { width: 4px; height: 5px; background: #33334d; display: inline-block; }
#meter i.on { background: var(--sleaze); }

#splash, #endcard {
  left: 0; top: 0; width: 320px; height: 240px;
  background: #05050f; display: none;
}
#splash { padding: 14px 16px; }
#splash.show, #endcard.show { display: block; }
#endcard { overflow: hidden; }
#end-art {
  position: absolute; inset: 0; width: 320px; height: 240px;
  object-fit: cover; image-rendering: pixelated; opacity: .55;
}
#end-inner {
  position: absolute; inset: 0; padding: 10px 12px;
  background: linear-gradient(rgba(5,5,15,.72), rgba(5,5,15,.88));
  display: flex; flex-direction: column; gap: 3px;
}
#end-rank {
  font-size: 13px; margin: 0; color: var(--hi); letter-spacing: .3px;
  text-shadow: 1px 1px 0 #a00050; text-wrap: balance;
}
#end-score { color: var(--sleaze); }
#end-text { color: #d8d8ea; overflow-y: auto; flex: 1; scrollbar-width: thin; }
#end-dad {
  color: var(--ink); border-left: 2px solid var(--hi); padding-left: 4px;
  max-height: 46px; overflow-y: auto;
}
#end-dad b { color: var(--hi); }
#end-buttons { display: flex; gap: 3px; }
#splash h1 {
  font-size: 15px; margin: 2px 0 0; color: var(--hi);
  text-shadow: 1px 1px 0 #a00050;
}
#splash h2 { font-size: 9px; margin: 2px 0 6px; color: var(--sleaze); font-weight: normal; }
#splash p { margin: 3px 0; color: #c0c0d8; }
#splash .bar { height: 6px; border: 1px solid var(--edge); margin: 6px 0 2px; }
#splash .bar i { display: block; height: 100%; background: var(--sleaze); width: 0; }
#splash .row { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; }
#worlds { margin-top: 4px; max-height: 60px; overflow: auto; }
#worlds button { display: block; width: 100%; text-align: left; margin-bottom: 1px; }
.dim { color: #7a7a96; }

/* Scrollbars on a 320x240 screen have to be nearly invisible. */
#textbox, #talk .said, #lines, #invgrid, #worlds { scrollbar-width: thin; }
#textbox::-webkit-scrollbar, #talk .said::-webkit-scrollbar,
#lines::-webkit-scrollbar { width: 3px; }
#textbox::-webkit-scrollbar-thumb, #talk .said::-webkit-scrollbar-thumb,
#lines::-webkit-scrollbar-thumb { background: #5a5a80; }