* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #05060a;
  font-family: 'VT323', monospace;
}
body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at center, #1a1c22 0%, #050609 70%, #000 100%);
  padding: 12px;
}

.monitor { width: 100%; max-width: 900px; }

.bezel {
  background: linear-gradient(160deg, #c9c2b0, #9a9481 45%, #7d7768 100%);
  border-radius: 20px;
  padding: 16px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    inset 0 2px 4px rgba(255,255,255,0.4),
    inset 0 -3px 6px rgba(0,0,0,0.4);
}

.topbar {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; color: #2c2a22;
  padding: 2px 6px 8px;
}
.topbar > span:first-child { letter-spacing: 1px; font-weight: bold; }
.led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff4444; margin-left: auto;
  animation: flicker 3s infinite;
}
@keyframes flicker {
  0%,100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: 0.3; } 96% { opacity: 1; }
}
.ctrls { display: flex; gap: 4px; }
.chip {
  background: rgba(0,0,0,0.85); border: 1px solid #555;
  font-family: 'VT323', monospace; font-size: 15px;
  padding: 2px 7px; cursor: pointer; border-radius: 3px;
}
.chip:hover { filter: brightness(1.3); }

.screen {
  position: relative;
  background: #000;
  border-radius: 8px;
  padding: 14px 16px;
  height: 66vh; min-height: 420px;
  overflow-y: auto; overflow-x: hidden;
  font-size: 22px; line-height: 1.15;
  cursor: text;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.9), inset 0 0 20px rgba(0,0,0,0.6);
  text-shadow: 0 0 4px currentColor;
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

.crt {
  pointer-events: none;
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0) 4px);
  z-index: 5;
  animation: crtroll 8s linear infinite;
  border-radius: 8px;
}
@keyframes crtroll {
  0% { background-position: 0 0; } 100% { background-position: 0 100px; }
}

.out { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; }

.promptline { display: flex; align-items: flex-start; flex-wrap: wrap; position: relative; }
.inputwrap { display: inline-flex; align-items: center; white-space: pre-wrap; word-break: break-word; }
.cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.hiddeninput {
  position: absolute; opacity: 0; left: 0; top: 0;
  width: 100%; height: 100%; border: none; background: transparent;
  font-family: inherit; font-size: inherit;
}

.snake { position: relative; z-index: 6; }
.snakegrid { font-family: inherit; margin: 6px 0; letter-spacing: 2px; line-height: 1; }
.dpad { margin-top: 6px; }
.dpad button:hover { filter: brightness(1.4); }

.matrix { font-family: inherit; margin: 0; line-height: 1; letter-spacing: 1px; cursor: pointer; opacity: 0.9; }

.overlay { position: relative; z-index: 6; }

.statusbar {
  margin-top: 8px;
  background: #0000aa; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 10px; font-size: 18px; border-radius: 4px;
}
.remix { color: #ffff55; text-decoration: none; }
.remix:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .screen { font-size: 17px; height: 62vh; padding: 10px; }
  .snakegrid { letter-spacing: 1px; }
  .topbar { font-size: 16px; }
  .statusbar { font-size: 14px; }
}