/* ============================================================================
   THE DECK AS A DEVICE
   ----------------------------------------------------------------------------
   Critique of what this replaced: 297 px of flat #0a0b0e with controls floating
   in it. The d-pad was #15171d on #0a0b0e -- a 2% luminance difference, so the
   primary control was invisible. A and B were dark circles with a 9%-white
   border: generic buttons, no affordance, no identity. SELECT/START were
   transparent pills with a BLACK border on a black background.

   Three rules fix it, and they are the rules the hardware itself follows:
     1. THE BODY IS A SURFACE. Controls sit ON something, so there is a device.
     2. CONTROLS ARE DARK ON LIGHT. The DMG put black rubber on grey plastic --
        maximum contrast, and every control reads at a glance.
     3. COLOUR MARKS FUNCTION. A and B are the only saturated things on the
        deck, because they are the ones you reach for.
   ============================================================================ */

#deck {
  position: relative;
  background: linear-gradient(180deg, #cdc9bd 0%, #c2beb2 42%, #b3afa3 100%);
  border-radius: 22px;
  /* the seam where the body meets the screen: without it the grey just appears */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55),
              inset 0 -1px 0 rgba(0, 0, 0, .18),
              0 -1px 0 #0a0b0e,
              0 -14px 26px -14px rgba(0, 0, 0, .85);
  overflow: hidden;
}

/* the speaker grille: six diagonal slots, bottom right. It is the detail that
   says "handheld" faster than anything else on the deck. */
#deck::after {
  content: '';
  position: absolute;
  right: 26px;
  bottom: 24px;
  width: 96px;
  height: 56px;
  background: repeating-linear-gradient(115deg,
    rgba(60, 58, 52, .55) 0 5px, transparent 5px 13px);
  border-radius: 4px;
  pointer-events: none;
}

/* the power LED */
#deck::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, #d0201a 60%, #7a0d0a);
  box-shadow: 0 0 8px 1px rgba(224, 60, 40, .75), inset 0 0 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* The wordmark printed under the screen. The DMG puts "Nintendo GAME BOY" here,
   and on a device body that upper strip is otherwise dead space. */
#wordmark {
  position: absolute;
  right: 24px;
  top: 14px;
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 700;
  color: #8c877b;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
#wordmark b { color: #9c2249; letter-spacing: .22em; }

/* ---------------------------------------------------------------- d-pad */
#dpad { position: relative; }

#dpad .cross {
  background: linear-gradient(160deg, #3a3a40 0%, #17171b 55%, #0d0d10 100%);
  border-radius: 7px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .16),
              inset 0 -2px 0 rgba(0, 0, 0, .5);
}

/* the four arms: keep them invisible (the .cross is the visible key) but give
   them a real hit area and a lit state */
#dpad .dp {
  background: transparent;
  border: 0;
  color: transparent;
  border-radius: 6px;
}
#dpad .dp.on {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22), transparent 70%);
}

/* directional nubs so the pad reads as a pad, not a cross shape */
#dpad .dp.up::after, #dpad .dp.down::after,
#dpad .dp.left::after, #dpad .dp.right::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border: 5px solid transparent;
  opacity: .55;
}
#dpad .dp.up::after    { border-bottom-color: #cfd3da; top: 8px;   left: 50%; transform: translateX(-50%); }
#dpad .dp.down::after  { border-top-color: #cfd3da;    bottom: 8px; left: 50%; transform: translateX(-50%); }
#dpad .dp.left::after  { border-right-color: #cfd3da;  left: 8px;  top: 50%;  transform: translateY(-50%); }
#dpad .dp.right::after { border-left-color: #cfd3da;   right: 8px; top: 50%;  transform: translateY(-50%); }

/* ---------------------------------------------------------------- A / B
   The one saturated thing on the deck. Dark maroon on grey, with a raised
   edge -- the DMG arrangement, and the only colour the eye needs to find. */
#ab #btn-a, #ab #btn-b {
  background: linear-gradient(180deg, #b8325c 0%, #9c2249 55%, #7d1739 100%);
  color: #fbe9ef;
  border: 0;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  box-shadow: 0 3px 0 #5f0f2a,
              0 5px 8px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .30);
  transition: transform .06s ease, box-shadow .06s ease;
}
#ab #btn-a:active, #ab #btn-b:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #5f0f2a, 0 2px 4px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .2);
}
/* classic diagonal: B sits higher and left, A lower and right */
#ab { align-items: center; }
#ab #btn-b { transform: translateY(-9px); }
#ab #btn-a { transform: translateY(9px); }
#ab #btn-b:active { transform: translateY(-7px); }
#ab #btn-a:active { transform: translateY(11px); }

/* ---------------------------------------------------------------- SELECT / START
   Real keys, angled, with the labels printed on the body beneath them -- which
   is how the hardware does it and why it reads at a glance. */
#system .syskeys button {
  background: linear-gradient(180deg, #55555e 0%, #35353c 70%, #26262c 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
#system .syskeys button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
}
#system .syslabels span {
  color: #4a473f;
  font-weight: 700;
  letter-spacing: .14em;
}

/* the controls sit on a body now, so the hints can be dark-on-light */
/* Printed on the body, like the real thing. It used to fade out after 7 s and
   be removed from the DOM, so a returning player had NO control reference. */
#app { position: relative; }
#hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  color: #55524a;
  background: transparent;
  font-size: 10px;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: .9;
}
#hint b { color: #9c2249; }

/* ---------------------------------------------------------------- landscape
   A wide viewport has the deck to the side, so the body should read as the
   same object rather than a grey band. */
@media (orientation: landscape) and (min-width: 620px) {
  /* ALL FOUR CORNERS, always. This override used to square the right-hand side
     for a side-mounted deck, which is exactly what made the corner look wrong on
     a wide window -- the body stopped being a body and became a band. */
  #deck { border-radius: 22px; }
  #deck::after { right: 18px; bottom: 16px; width: 70px; height: 40px; }
}