/* =========================================================
   Hello Display — styles
   Designed for Meta Ray-Ban Display (600x600, monochrome-ish,
   black = transparent on lens). Also renders nicely on web.
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #000;
  color: #00eaff;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The 600x600 stage. On the glasses this fills the viewport.
   On a desktop browser it appears as a 600x600 centered box,
   with a glowing border to make the lens limits clearly visible. */
.stage {
  position: relative;
  width: 600px;
  height: 600px;
  background: #000;
  color: #00eaff;
  /* Thick border showing the field-of-view limits */
  border: 4px solid #00eaff;
  box-shadow:
    0 0 0 2px #000 inset,
    0 0 24px rgba(0, 234, 255, 0.35),
    0 0 60px rgba(0, 234, 255, 0.15);
  padding: 18px 22px;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 12px;
  overflow: hidden;
}

/* Corner markers reinforce the limits */
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  pointer-events: none;
}
.stage::before { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.stage::after  { bottom: 6px; right: 6px;   border-left:  none; border-top:    none; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed #00eaff66;
  padding-bottom: 6px;
}
.title   { font-weight: 700; letter-spacing: 2px; font-size: 20px; color: #fff; }
.version { color: #00eaff99; font-size: 12px; }

/* D-pad */
.dpad-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dpad {
  position: relative;
  width: 160px;
  height: 160px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(3, 1fr);
  gap: 4px;
}
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #00eaff77;
  background: #001418;
  color: #00eaff;
  font-size: 28px;
  border-radius: 6px;
  transition: transform 80ms ease, background 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.key-up    { grid-column: 2; grid-row: 1; }
.key-left  { grid-column: 1; grid-row: 2; }
.key-ok    { grid-column: 2; grid-row: 2; font-size: 22px; }
.key-right { grid-column: 3; grid-row: 2; }
.key-down  { grid-column: 2; grid-row: 3; }

.key.active {
  background: #00eaff;
  color: #000;
  transform: scale(1.12);
  box-shadow: 0 0 18px #00eaff, 0 0 36px #00eaffaa;
}

.last-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 18px;
  color: #fff;
  text-align: right;
}
.last-input span {
  color: #00eaff;
  font-weight: 700;
  margin-left: 8px;
}

/* Panels */
.panel {
  border: 1px solid #00eaff44;
  border-radius: 4px;
  padding: 8px 10px;
  background: rgba(0, 234, 255, 0.04);
}
.panel h2 {
  font-size: 12px;
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 6px;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 14px;
}
.panel span {
  color: #00eaff;
  font-weight: 700;
}

/* Hints */
.hints {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #ffffffcc;
  border-top: 1px dashed #00eaff66;
  padding-top: 6px;
}

/* Flash overlay (full-screen pulse on input) */
.flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background 60ms ease;
}
.flash.on { background: rgba(0, 234, 255, 0.18); }

/* Focusable element default style (used by D-pad focus on glasses) */
.focusable {
  outline: none;
}
.focusable:focus,
.focusable.focus {
  box-shadow: 0 0 0 3px #00eaff, 0 0 24px #00eaffaa;
}

/* Hidden focusable button used only to receive D-pad focus on the glasses */
.hidden-btn {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Responsive web fallback: scale the 600 box down on tiny phones,
   but keep the exact 600x600 layout intact so the glasses experience
   is identical. */
@media (max-width: 620px), (max-height: 620px) {
  .stage {
    transform: scale(min(calc(100vw / 600), calc(100vh / 600)));
    transform-origin: center center;
  }
}