/* The skyBlip Go case, drawn once for every page that runs the simulator: the
   development harness next door and skyblip.eu. Geometry is measured off
   LILYGO's own front view of the T-Echo Plus. Everything scales from
   --sb-glass, which is the panel's own size and must stay an integer multiple
   of the 200 px framebuffer: at any other factor a panel pixel straddles screen
   pixels and the whole screen looks resampled. */

.sb-case {
  --sb-glass: 400px;
  --sb-margin: calc(var(--sb-glass) * 0.12);
  --sb-rivet: calc(var(--sb-glass) * 0.055);
  --sb-led: calc(var(--sb-glass) * 0.02);
  --sb-case: linear-gradient(168deg, #fbfbf9, #dedfda);
  --sb-boss: #e6e4dd;

  position: relative;
  box-sizing: border-box;
  inline-size: calc(var(--sb-glass) + var(--sb-margin) * 2);
  padding: var(--sb-margin) var(--sb-margin) calc(var(--sb-margin) * 1.16);
  border-radius: calc(var(--sb-glass) * 0.08);
  background:
    radial-gradient(circle at 50% 45%, #f4f2ec 0 26%, #d7d3c9 30% 44%, #fbfaf6 47% 50%, transparent 52%),
    radial-gradient(circle at 50% 45%, #f4f2ec 0 26%, #d7d3c9 30% 44%, #fbfaf6 47% 50%, transparent 52%),
    radial-gradient(circle at 50% 45%, #f4f2ec 0 26%, #d7d3c9 30% 44%, #fbfaf6 47% 50%, transparent 52%),
    radial-gradient(circle at 50% 45%, #f4f2ec 0 26%, #d7d3c9 30% 44%, #fbfaf6 47% 50%, transparent 52%),
    var(--sb-case);
  background-size:
    var(--sb-rivet) var(--sb-rivet), var(--sb-rivet) var(--sb-rivet),
    var(--sb-rivet) var(--sb-rivet), var(--sb-rivet) var(--sb-rivet), auto;
  background-position: 4% 4%, 96% 4%, 4% 95%, 96% 95%;
  background-repeat: no-repeat;
  box-shadow: inset 0 2px 0 #fff, inset 0 -2px 6px #0000001a;
}

.sb-glass {
  display: block;
  inline-size: var(--sb-glass);
  block-size: var(--sb-glass);
  image-rendering: pixelated;
  background: #c9cbc4;
  box-shadow: 0 0 0 calc(var(--sb-glass) * 0.015) #f2f2ef, 0 0 0 calc(var(--sb-glass) * 0.0175) #0000001f;
}

.sb-pad,
.sb-key {
  position: absolute;
  padding: 0;
  cursor: pointer;
  touch-action: none;
}

/* P0.11 is a capacitive pad on the TOP edge, at the left: no travel, so it
   reads as a ringed pad rather than a key. */
.sb-pad {
  inset-block-start: calc(var(--sb-glass) * -0.0125);
  inset-inline-start: 13.5%;
  inline-size: 17.3%;
  block-size: calc(var(--sb-glass) * 0.05);
  border: 1px solid #00000026;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f5f2, #dcded9);
  box-shadow: inset 0 -2px 4px #0000001f;
}
.sb-pad:active { background: #c3e4f4; }

/* Both push keys are on the left edge, reset up top, the one the firmware reads
   at the bottom: a few px of them stand proud of the case, and they travel
   inwards when pressed. */
.sb-key {
  inset-inline-start: -5px;
  inline-size: calc(var(--sb-glass) * 0.05);
  block-size: calc(var(--sb-glass) * 0.14);
  border: 1px solid #00000033;
  border-radius: 6px 3px 3px 6px;
  box-shadow: inset -2px 0 4px #0000001f;
}
.sb-key--reset { inset-block-start: 19%; background: linear-gradient(90deg, #fff, #e9e7e1); }
.sb-key--action { inset-block-start: 72%; background: linear-gradient(90deg, #fff, #e9e7e1); }
.sb-key:active { transform: translateX(2px); box-shadow: inset 2px 0 4px #00000033; }

/* The two lamps, side by side, middle of the right edge. Only the left one is
   the firmware's. The right one is wired to the charger. */
.sb-led {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: var(--sb-led);
  block-size: var(--sb-led);
  border-radius: 50%;
  background: #c6c8c3;
  box-shadow: inset 0 1px 2px #00000040;
}
.sb-led--alarm { inset-inline-end: calc(var(--sb-glass) * 0.06); }
.sb-led--charge { inset-inline-end: calc(var(--sb-glass) * 0.025); }
.sb-led--alarm.sb-led--lit { background: #ff4f2f; box-shadow: 0 0 8px 2px #ff4f2f88; }
.sb-led--charge.sb-led--lit { background: #ffab3d; box-shadow: 0 0 8px 2px #ffab3d88; }