@font-face {
  font-family: "C64 Pro Mono";
  src:
    url("data:font/woff2;base64,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") format("woff2"),
    url("fonts/C64_Pro_Mono-STYLE.woff") format("woff"),
    url("fonts/C64_Pro_Mono-STYLE.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --border-blue: #a5a5ff;
  --screen-blue: #4242e7;
  --c64-text: #a5a5ff;
  --c64-white: #a5a5ff;
  --line-height: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--border-blue);
}

body {
  min-height: 100dvh;
  overflow: hidden;
  color: var(--c64-text);
  font-family: "C64 Pro Mono", monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-synthesis: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

.machine {
  width: 100vw;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 8.9vh, 72px) clamp(20px, 5.55vw, 68px);
  background: var(--border-blue);
}

.terminal {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(
    1100px,
    calc(100vw - (2 * clamp(20px, 5.55vw, 68px))),
    calc((100dvh - (2 * clamp(20px, 8.9vh, 72px))) * 1.6)
  );
  aspect-ratio: 320 / 200;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--screen-blue);
  color: var(--c64-text);
  box-shadow: none;
  outline: none;
  cursor: text;
  scrollbar-width: none;
}

.terminal::-webkit-scrollbar {
  display: none;
}

.output {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  overflow: visible;
  font-size: calc(100cqi / 40);
  line-height: var(--line-height);
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.line {
  width: 100%;
  height: 1em;
  min-height: 1em;
  margin: 0;
  padding: 0;
}

.line.center {
  text-align: center;
}

.line.dim {
  opacity: 0.74;
}

.input-line {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: 1em;
  min-height: 1em;
  margin: 0;
  margin-inline-start: 0;
  padding: 0;
  padding-inline-start: 0;
  text-indent: 0;
  font-size: calc(100cqi / 40);
  line-height: var(--line-height);
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.input-line.is-hidden {
  visibility: hidden;
}

.cursor {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  color: var(--screen-blue);
  background: var(--c64-text);
  animation: c64-cursor 1s steps(1, end) infinite;
  vertical-align: top;
}

@keyframes c64-cursor {
  0%, 49.999% { background: var(--c64-text); }
  50%, 100% { background: transparent; }
}

.command-input {
  position: fixed;
  left: -1000px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0.001;
  pointer-events: none;
}

/*
 * Desktop keeps the invisible hardware-keyboard input off-screen.
 * Touch devices need an input that is physically inside the visible page;
 * iOS/iPadOS will not reliably summon the software keyboard for an
 * off-screen one-pixel field. It remains visually transparent and simply
 * feeds the C64-rendered input line above it.
 */
.touch-input .command-input {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  height: max(44px, 3em);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  opacity: 0.01;
  color: transparent;
  background: transparent;
  caret-color: transparent;
  font-size: 16px;
  line-height: 1;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}

.touch-input .command-input:disabled {
  pointer-events: none;
}

.crt-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

@supports not (font-size: 1cqi) {
  .output,
  .input-line {
    font-size: clamp(13px, 2.5vw, 27.5px);
  }
}


@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation-duration: 1.6s;
  }
}

.graphic-frame {
  position: relative;
  width: 100%;
  height: 4em;
  min-height: 4em;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.graphic-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.wordle-row {
  display: flex;
  width: 100%;
  height: 1em;
  min-height: 1em;
  margin: 0;
  padding: 0;
  align-items: stretch;
  white-space: nowrap;
  overflow: hidden;
}

.wordle-label {
  display: inline-block;
  width: 10em;
  min-width: 10em;
  height: 1em;
  overflow: hidden;
}

.wordle-tile {
  display: inline-flex;
  width: 2em;
  min-width: 2em;
  height: 1em;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wordle-count {
  display: inline-block;
  width: 4em;
  min-width: 4em;
  height: 1em;
  margin-left: 1em;
  color: var(--c64-text);
}

.pong-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--screen-blue);
  color: var(--c64-text);
  font-size: calc(100cqi / 40);
  line-height: 1;
}

.pong-layer.is-hidden,
.pong-panel.is-hidden,
.pong-canvas.is-hidden {
  display: none;
}


.pong-panel {
  width: 34em;
  max-width: 100%;
  min-height: 15em;
  padding: 1em;
  border: 1em solid var(--c64-text);
  background: var(--screen-blue);
}

.pong-title {
  height: 2em;
  text-align: center;
  color: #edf171;
}

.pong-body {
  min-height: 10em;
  white-space: pre;
}

.pong-menu-line {
  height: 1em;
  overflow: hidden;
}

.pong-footer {
  min-height: 2em;
  color: #75cec8;
}

.pong-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}

.private-line {
  width: 100%;
  background: #000000;
  opacity: 1;
}


/* C64 DOOM — local single-player game layer */
.doom-layer {
  position: absolute;
  z-index: 14;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000000;
  touch-action: none;
  user-select: none;
}

.doom-layer.is-hidden {
  display: none;
}

.doom-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #000000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.doom-touch {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

.doom-touch-pad,
.doom-touch-actions {
  position: absolute;
  bottom: max(0.6rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(2, minmax(2.5rem, 11vw));
  gap: 0.35rem;
  pointer-events: auto;
}

.doom-touch-pad { left: max(0.6rem, env(safe-area-inset-left)); }
.doom-touch-actions { right: max(0.6rem, env(safe-area-inset-right)); }

.doom-touch button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem;
  border: 0.16rem solid rgba(237, 241, 113, 0.9);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  font: inherit;
  line-height: 1;
  touch-action: none;
}

.doom-touch button:active {
  background: rgba(129, 51, 56, 0.9);
}

/* v1.19 — stable touch layout, square D-pad and iOS selection suppression */
.mobile-game-controls {
  display: none;
}

/* Prevent iOS long-press selection/callout while using the virtual controls. */
.touch-input,
.touch-input .machine,
.touch-input .terminal,
.touch-input .mobile-game-controls,
.touch-input .mobile-game-controls * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.touch-input .mobile-game-controls,
.touch-input .mobile-game-controls * {
  touch-action: none;
}

/* The software keyboard may resize the visual viewport, but the C64 layout
   keeps the height captured before the keyboard opened. The real input stays
   on-screen at the top-left so iOS can focus it without panning the page. */
.touch-input body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--spy-layout-height, 100svh);
  min-height: 0;
  overflow: hidden;
}

.touch-input .machine,
.touch-input.keyboard-active .machine {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--spy-layout-height, 100svh);
  min-height: 0;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.touch-input .terminal,
.touch-input.keyboard-active .terminal {
  width: min(
    calc(100vw - 16px),
    calc((var(--spy-layout-height, 100svh) - max(16px, env(safe-area-inset-top))) * 1.6)
  );
  flex: 0 0 auto;
}

.touch-input .command-input,
.touch-input.keyboard-active .command-input {
  position: fixed;
  z-index: 30;
  left: 1px;
  top: 1px;
  right: auto;
  bottom: auto;
  width: 1px;
  height: 1px;
  min-width: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.01;
  color: transparent;
  background: transparent;
  caret-color: transparent;
  font-size: 16px;
  pointer-events: none;
  transform: none;
  appearance: none;
  -webkit-appearance: none;
}

/* The earlier in-canvas DOOM touch overlay is replaced by the shared control
   panel below the C64 screen. */
.doom-touch { display: none !important; }

@media (pointer: coarse) {
  .touch-input.game-controls-active .machine {
    justify-content: flex-start;
    gap: clamp(6px, 1.6vh, 12px);
  }

  .touch-input.game-controls-active .terminal {
    width: min(
      calc(100vw - 16px),
      calc((var(--spy-layout-height, 100svh) - 172px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.6)
    );
  }

  .touch-input.game-controls-active .mobile-game-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(42px, 64px));
    grid-template-rows: repeat(3, minmax(42px, 64px));
    grid-template-areas:
      ". . w . ."
      ". a s d ."
      "enter enter space esc esc";
    justify-content: center;
    gap: 6px;
    width: min(calc(100vw - 16px), 640px);
    max-height: 154px;
    flex: 1 1 auto;
    padding: 0;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }

  .mobile-key {
    min-width: 0;
    min-height: 42px;
    border: 3px solid #a5a5ff;
    border-radius: 0;
    padding: 0.3rem;
    background: #352879;
    color: #ffffff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(14px, 4vw, 22px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 2px #4242e7;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-key.is-pressed,
  .mobile-key:active {
    background: #813338;
    transform: translateY(1px);
  }

  .key-w { grid-area: w; }
  .key-a { grid-area: a; }
  .key-s { grid-area: s; }
  .key-d { grid-area: d; }
  .key-enter { grid-area: enter; }
  .key-space { grid-area: space; }
  .key-escape { grid-area: esc; }
}