/* ==========================================================================
   jrzbk.com — console.css
   The bezel around the playfield, the scanline overlay and the drawn NES
   controller. Loaded only by pages that actually have a screen: the home page
   and /404.html.
   ========================================================================== */

/* ==========================================================================
   The screen
   ========================================================================== */
.tv {
  position: relative;
  background: #000;
  padding: var(--u);
  border: 4px solid #24242e;
  /* A flat ring, not a shadow: no blur, no offset. */
  box-shadow: 0 0 0 4px #000;
}

#screen {
  display: block;
  /* The 1x size, spelled out. Without this the canvas is a replaced element
     with `max-width: 100%` inside a shrink-to-fit flex item, which resolves
     the percentage against nothing and collapses it to 0x0 when JavaScript is
     off. scene.js overwrites both values with the integer-scaled size. */
  width: 256px;
  height: 240px;
  max-width: 100%;
  /* Integer scaling is applied to width/height in JS; this keeps the
     upscale hard-edged instead of interpolated. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Sky blue, so that with JavaScript off the screen reads as a switched-off
     screen rather than as a broken element. */
  background: var(--sky);
  cursor: default;
}
/* Set by scene.js when the pointer is over a pipe. */
#screen.hot { cursor: pointer; }

.glass {
  position: absolute;
  inset: var(--u);
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
              rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 3px);
  opacity: 0.22;
}
body.fx-off .glass { display: none; }

/* ==========================================================================
   The controller.
   aria-hidden, because every button here duplicates something the PAUSE MENU
   already exposes properly. It exists to be touched on a phone and to teach
   the keyboard mapping by lighting up in sync on a desktop.
   ========================================================================== */
.pad {
  width: min(420px, 100%);
  background: #c4c4c4;
  border: 4px solid #000;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.dpad { position: relative; width: 78px; height: 78px; }
.dpad span { position: absolute; background: #2b2b2b; border: 2px solid #111; }
.dpad .up    { left: 26px; top: 0;     width: 26px; height: 28px; }
.dpad .down  { left: 26px; bottom: 0;  width: 26px; height: 28px; }
.dpad .left  { left: 0;    top: 26px;  width: 28px; height: 26px; }
.dpad .right { right: 0;   top: 26px;  width: 28px; height: 26px; }
.dpad .mid   { left: 26px; top: 26px;  width: 26px; height: 26px; }
.dpad span.on { background: var(--red); }

.pad-mid { display: flex; gap: 14px; justify-content: center; }
.pad-mid button {
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #111;
  background: #8a8a8a;
  border: 2px solid #111;
  padding: 5px 10px;
  min-height: 28px;
  cursor: pointer;
  /* The only rounded things on the whole site were rounded on the hardware
     too — SELECT and START were pill-shaped rubber. */
  border-radius: 8px;
}
.pad-mid button.on { background: var(--red); color: #fff; }

.pad-ab { display: flex; gap: 12px; transform: rotate(-12deg); }
.pad-ab button {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid #7a1400;
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pad-ab button.on { background: #fc7460; }

.padnote {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #555;
  line-height: 1.5;
}

/* Thumbs need room; below 520px the pad gets the whole width. */
@media (max-width: 520px) {
  .pad { gap: 8px; padding: 8px; }
  .pad-ab { gap: 10px; }
  .pad-mid { gap: 8px; }
  .pad-mid button { padding: 5px 6px; letter-spacing: 0.06em; }
}
@media (max-width: 360px) {
  .dpad { width: 66px; height: 66px; }
  .dpad .up    { left: 22px; width: 22px; height: 24px; }
  .dpad .down  { left: 22px; width: 22px; height: 24px; }
  .dpad .left  { top: 22px;  width: 24px; height: 22px; }
  .dpad .right { top: 22px;  width: 24px; height: 22px; }
  .dpad .mid   { left: 22px; top: 22px; width: 22px; height: 22px; }
  .pad-ab button { width: 40px; height: 40px; }
}

/* ==========================================================================
   Home page layout
   ========================================================================== */
.console {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
  width: 100%;
}