/* ── the dark room, the beige monitor, the glowing tube ─────────────── */

@font-face {
  font-family: "Web437";
  src: url("fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display: swap;
}

:root {
  --room: #07080d;
  --beige: #d6c8a8;
  --beige-dark: #b3a37f;
  --beige-shadow: #6e6248;
  --tube: #000;
  --amber: #ffb000;
  --cyan: #55ffff;
  --mono: "Web437", "Px437 IBM VGA8", ui-monospace, "Menlo", "Consolas", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% 20%, #10131f 0%, var(--room) 55%, #030409 100%);
  color: var(--beige);
  font-family: var(--mono);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  user-select: none;
}

/* monitor ------------------------------------------------------------ */

.monitor { display: flex; flex-direction: column; align-items: center; }

.bezel {
  background:
    linear-gradient(175deg, #e7dcbf 0%, var(--beige) 30%, var(--beige-dark) 100%);
  border-radius: 14px;
  padding: 22px 22px 0;
  box-shadow:
    inset 0 2px 2px #fff6,
    inset 0 -3px 6px #0004,
    0 18px 50px -10px #000,
    0 4px 14px #0009;
}

.screen {
  position: relative;
  background: var(--tube);
  border-radius: 6px;
  padding: 12px;
  box-shadow:
    inset 0 0 0 2px #1a1a1a,
    inset 0 6px 24px #000;
}

canvas#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  filter: drop-shadow(0 0 14px #113) drop-shadow(0 0 3px #08f3);
}

.scanlines {
  position: absolute; inset: 12px;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, transparent 0 2px, rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode: multiply;
}

.glass {
  position: absolute; inset: 12px;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 30% 0%, rgba(255,255,255,.07) 0%, transparent 45%);
}

.chin {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 4px 12px;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--beige-shadow);
}

.brand { font-weight: bold; color: #4d4433; }
.brand b { color: #8b7c5c; }
.model { flex: 1; text-align: right; font-size: 10px; }

.led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a5a2c;
  box-shadow: inset 0 1px 1px #0008;
  transition: background .3s, box-shadow .3s;
}
.led.on { background: #7CFC00; box-shadow: 0 0 8px #7CFC00cc, inset 0 0 2px #fff8; }

.foot {
  width: 42%; height: 16px;
  background: linear-gradient(180deg, var(--beige-dark), #8a7b5c);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px -6px #000;
}

/* desk copy ---------------------------------------------------------- */

.desk {
  margin-top: 26px;
  text-align: center;
  max-width: 560px;
  padding: 0 16px;
}

.keys {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px;
  font-size: 13px;
  color: #7f8aa3;
}

kbd {
  font-family: inherit;
  background: #161a26;
  border: 1px solid #2c3346;
  border-bottom-width: 3px;
  border-radius: 4px;
  padding: 1px 7px;
  margin-right: 4px;
  color: #cfd6e6;
  font-size: 12px;
}

.lore {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: #4d5670;
}
.lore em { color: #707c9c; font-style: normal; }
.lore a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted #ffb00055; }
.lore a:hover { color: #ffd25e; }

/* scale: JS sets --scale so the canvas is always an integer multiple */
canvas#game { width: calc(320px * var(--scale, 2)); height: calc(200px * var(--scale, 2)); }

@media (max-height: 720px) { .desk { margin-top: 12px; } .lore { display: none; } }

/* touch controls: only on coarse pointers */
.touch { display: none; }
@media (pointer: coarse) {
  .touch {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 10px;
    justify-content: space-between;
    padding: 0 18px;
    z-index: 5;
  }
  .desk { display: none; }
  .tc-left, .tc-right { display: flex; align-items: center; gap: 10px; }
  .tc-right { flex-direction: column; }
  .touch button {
    font-family: var(--mono);
    font-size: 20px;
    color: #cfd6e6;
    background: #161a26cc;
    border: 1px solid #2c3346;
    border-radius: 12px;
    width: 62px; height: 62px;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
  }
  .touch button.big { width: 84px; height: 84px; font-size: 14px; color: var(--amber); }
  .touch button:active { background: #2c3346; }
}