/* =============================================
   LED Clock — 7-segment red display
   Sits on floor to the right of TV (no overlap)
   ============================================= */

.led-clock {
  --digit-size: 54px;
  --digit-width: 0.6em;
  --digit-height: 1.0em;
  --led-width: 0.25em;
  --led-height: 0.0625em;
  --cos45: 0.707107;
  --half-height: calc(var(--led-height) / 2);
  --cap-size: calc(var(--cos45) * var(--led-height));
  --divider-width: 0.2em;
  --digit-bg-color: #111;
  --led-color-off: #1a1a1a;
  --led-color-on: #e00;

  position: absolute;
  background: #2a2a2a;
  padding: 8px 10px;
  border-radius: 4px;
  /* Position: sitting on top of TV, right side
     TV visual top ≈ 37% - 232px, TV visual right ≈ 62% + 268px */
  left: calc(50% + 416px + var(--scene-offset-x));
  top: calc(51% + var(--scene-offset-y) + 110px);
  z-index: 750;
  box-shadow:
    /* Ground shadow — object sitting on floor, light from above/CRT */
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3),
    /* Subtle side shadows for depth */
    4px 2px 8px rgba(0, 0, 0, 0.2),
    -4px 2px 8px rgba(0, 0, 0, 0.2),
    /* Top edge highlight from overhead light */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    /* Bottom edge darkening */
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  border: 1px solid #1a1a1a;
}

.led-clock-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #0a0a0a;
  border-radius: 2px;
  padding: 2px 4px;
  background: #111;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.led-clock .digit {
  position: relative;
  font-size: var(--digit-size);
  width: var(--digit-width);
  height: var(--digit-height);
  background-color: var(--digit-bg-color);
}

.led-clock .led {
  width: var(--led-width);
  height: var(--led-height);
  background-color: var(--led-color-off);
  position: absolute;
}

.led-clock .led::before,
.led-clock .led::after {
  content: '';
  position: absolute;
  background-color: var(--led-color-off);
  height: var(--cap-size);
  width: var(--cap-size);
  top: var(--half-height);
}

.led-clock .led::before {
  left: var(--half-height);
  transform:
    translate(
      calc(0px - var(--half-height) - var(--cap-size) / 2),
      calc(0px - var(--cap-size) / 2)
    )
    rotate(45deg);
}

.led-clock .led::after {
  right: var(--half-height);
  transform:
    translate(
      calc(var(--half-height) + var(--cap-size) / 2),
      calc(0px - var(--cap-size) / 2)
    )
    rotate(45deg);
}

.led-clock .segment-0 {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(0em, -0.36em);
}

.led-clock .segment-1 {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(0.18em, -0.18em) rotate(90deg);
}

.led-clock .segment-2 {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(0.18em, 0.18em) rotate(90deg);
}

.led-clock .segment-3 {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(0em, 0.36em);
}

.led-clock .segment-4 {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(-0.18em, 0.18em) rotate(90deg);
}

.led-clock .segment-5 {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(-0.18em, -0.18em) rotate(90deg);
}

.led-clock .segment-6 {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(0em, 0em);
}

.led-clock .hh-mm-divider {
  position: relative;
  font-size: var(--digit-size);
  height: var(--digit-height);
  width: var(--divider-width);
  background-color: var(--digit-bg-color);
}

.led-clock .hh-mm-divider::before,
.led-clock .hh-mm-divider::after {
  content: '';
  position: absolute;
  height: var(--led-height);
  width: var(--led-height);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: var(--led-color-off);
}

.led-clock .hh-mm-divider::before {
  transform: translate(-50%, -50%) translateY(-0.125em);
}

.led-clock .hh-mm-divider::after {
  transform: translate(-50%, -50%) translateY(0.125em);
}

/* Active segments */
.led-clock .led.on,
.led-clock .led.on::before,
.led-clock .led.on::after,
.led-clock .hh-mm-divider.on::before,
.led-clock .hh-mm-divider.on::after {
  background-color: var(--led-color-on);
  box-shadow: 0px 0px 8px #f33a;
}

/* Shadow from TV (to the left) — clock sits in TV's shadow on its left side */
.led-clock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, transparent 50%);
  pointer-events: none;
  opacity: 1;
}