/* Work Disk teaser: a DOS prompt and a QBasic-blue game screen. Original artwork, system monospace fonts. */
:root {
  --black: #000;
  --grey: #aaa;
  --white: #fff;
  --blue: #0000aa;
  --cyan: #00aaaa;
  --yellow: #ffff55;
  --red: #aa0000;
  --font: "Perfect DOS VGA 437", "Lucida Console", "Consolas", "Courier New", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--black);
  color: var(--grey);
  font: 18px/1.35 var(--font);
}

a { color: var(--yellow); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.screen {
  min-height: 100vh;
  max-width: 80ch;
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.console p, .console h1, .console pre { margin: 0 0 0.6em; }
.console h1 { font-size: inherit; font-weight: normal; color: var(--white); }
.console .hint b { color: var(--white); font-weight: normal; }
.console pre { font: inherit; white-space: pre-wrap; }
.console .echo { color: var(--white); margin: 0.8em 0 0.3em; }

.prompt { display: flex; align-items: baseline; gap: 0; }
.prompt label { white-space: nowrap; }
.prompt input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0 0 0 0.5ch;
  background: transparent;
  color: var(--white);
  font: inherit;
  text-transform: uppercase;
  caret-color: var(--grey);
  outline: none;
}

.commands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.commands button, .pad button {
  font: inherit;
  color: var(--black);
  background: var(--grey);
  border: 0;
  padding: 4px 12px;
  cursor: pointer;
}
.commands button:hover, .pad button:hover { background: var(--white); }

.cursor::after { content: "_"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }

/* QBasic-style run screen */
.qbasic {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--blue);
  color: var(--white);
}
.qbasic[hidden] { display: none; }
.qb-bar, .qb-foot {
  display: flex;
  gap: 2ch;
  padding: 2px 1ch;
  background: var(--grey);
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
}
.qb-bar .qb-exit { margin-left: auto; font: inherit; color: var(--black); background: transparent; border: 0; padding: 0 1ch; cursor: pointer; }
.qb-bar .qb-exit:hover { background: var(--black); color: var(--grey); }
.qb-foot { background: var(--cyan); }
.qb-status {
  display: flex;
  justify-content: space-between;
  padding: 2px 1ch;
  color: var(--white);
}
canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  touch-action: none;
  image-rendering: pixelated;
}
.qb-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(60ch, calc(100% - 32px));
  padding: 16px 3ch;
  background: var(--blue);
  border: 3px double var(--white);
  text-align: center;
}
.qb-panel:empty { display: none; }
.qb-panel h2 { margin: 0 0 0.8em; font-size: inherit; font-weight: normal; color: var(--yellow); letter-spacing: 0.6ch; }
.qb-panel p { margin: 0 0 0.6em; }

.pad {
  display: none;
  grid-template-columns: repeat(3, 56px);
  grid-template-areas: ". up ." "left down right";
  gap: 6px;
  justify-content: center;
  padding: 8px 0;
}
.pad [data-dir="up"] { grid-area: up; }
.pad [data-dir="left"] { grid-area: left; }
.pad [data-dir="down"] { grid-area: down; }
.pad [data-dir="right"] { grid-area: right; }
.pad button { height: 48px; padding: 0; }
@media (pointer: coarse) { .pad { display: grid; } }

@media (max-width: 640px) {
  html, body { font-size: 15px; }
  .qb-bar span:not(:first-child) { display: none; }
  .qb-foot span:nth-child(n+3) { display: none; }
}

.noscript { padding: 16px; }