:root {
  color-scheme: dark;
  --hue-shift: 0;
  --bg-hue-shift: 0;
  --bg: oklch(0.15 0.014 calc(50 + var(--bg-hue-shift)));
  --bg-deep: oklch(0.11 0.012 calc(50 + var(--bg-hue-shift)));
  --shell: oklch(0.2 0.018 52);
  --shell-edge: oklch(0.31 0.03 60);
  --panel: oklch(0.23 0.02 calc(55 + var(--bg-hue-shift)));
  --panel-shadow: oklch(0.12 0.02 52);
  --panel-cut: oklch(0.11 0.016 calc(45 + var(--bg-hue-shift)));
  --line: oklch(0.54 0.06 calc(74 + var(--hue-shift)) / 0.8);
  --line-soft: oklch(0.43 0.04 calc(75 + var(--hue-shift)) / 0.35);
  --text: oklch(0.9 0.02 75);
  --text-soft: oklch(0.7 0.02 72);
  --text-mute: oklch(0.56 0.02 72);
  --accent: oklch(0.78 0.11 calc(78 + var(--hue-shift)));
  --accent-dim: oklch(0.64 0.09 calc(77 + var(--hue-shift)));
  --accent-glow: oklch(0.74 0.15 calc(80 + var(--hue-shift)) / 0.16);
  --danger: oklch(0.72 0.16 34);
  --font-ui: "Aptos Narrow", "Bahnschrift SemiCondensed", "Liberation Sans Narrow", "Nimbus Sans Narrow", "Arial Narrow", "Segoe UI", sans-serif;
  --font-copy: "Aptos", "Segoe UI", "Liberation Sans", "Trebuchet MS", sans-serif;
  --page-pad: clamp(1.4rem, 3vw, 3rem);
  --shell-radius: clamp(1.25rem, 2vw, 2rem);
  --digit-height: clamp(8.5rem, 21vw, 15rem);
  --digit-width: calc(var(--digit-height) * 0.74);
  --board-gap: clamp(0.55rem, 1.2vw, 1rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-copy);
  background:
    radial-gradient(circle at 50% 12%, var(--accent-glow), transparent 33%),
    linear-gradient(180deg, oklch(0.19 0.016 54), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
  color: var(--text);
  overflow: hidden;
  cursor: default;
}

body.is-fullscreen.is-idle:not(.settings-panel-open) {
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, oklch(0.34 0.04 65 / 0.05) 48%, transparent 100%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 2px,
      oklch(0.42 0.02 70 / 0.035) 3px,
      transparent 4px
    );
  pointer-events: none;
  mix-blend-mode: screen;
}

.screen-glow,
.screen-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.screen-glow {
  background:
    radial-gradient(circle at 50% 45%, transparent 42%, oklch(0.09 0.01 50 / 0.62) 100%),
    radial-gradient(circle at 50% 50%, oklch(0.72 0.1 calc(77 + var(--hue-shift)) / 0.05), transparent 30%);
}

.screen-noise {
  opacity: 0.05;
  background-image:
    linear-gradient(0deg, transparent 0%, oklch(0.9 0.01 80 / 0.15) 50%, transparent 100%),
    radial-gradient(circle at 20% 20%, oklch(0.82 0.03 75 / 0.2) 0.4px, transparent 0.7px),
    radial-gradient(circle at 80% 70%, oklch(0.72 0.04 75 / 0.18) 0.4px, transparent 0.7px);
  background-size: 100% 100%, 7px 7px, 11px 11px;
  animation: grain 8s steps(8) infinite;
}

.shell {
  position: relative;
  min-height: 100vh;
  padding: var(--page-pad);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.masthead {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  gap: 1rem;
}

.title-block {
  min-block-size: 1px;
}

.eyebrow,
.frame-note,
.readout-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.eyebrow,
.readout-label {
  color: var(--text-mute);
  font-size: clamp(0.72rem, 1vw, 0.88rem);
}

h1 {
  margin: 0.3rem 0 0;
  font-family: var(--font-ui);
  font-size: clamp(1.45rem, 2.8vw, 2.6rem);
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.clock-frame {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(1.1rem, 1.8vw, 1.6rem);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: var(--shell-radius);
  border: 1px solid oklch(0.45 0.04 68 / 0.2);
  background:
    linear-gradient(145deg, oklch(0.26 0.018 calc(56 + var(--bg-hue-shift)) / 0.96), oklch(0.16 0.016 calc(50 + var(--bg-hue-shift)) / 0.98)),
    linear-gradient(180deg, oklch(0.8 0.04 80 / 0.03), transparent);
  box-shadow:
    0 30px 70px oklch(0.06 0.01 50 / 0.55),
    inset 0 1px 0 oklch(0.8 0.05 75 / 0.08),
    inset 0 -1px 0 oklch(0.1 0.02 40 / 0.55);
  overflow: hidden;
}

.clock-frame::before,
.clock-frame::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border-radius: calc(var(--shell-radius) - 0.35rem);
  pointer-events: none;
}

.clock-frame::before {
  border: 1px solid oklch(0.73 0.05 calc(78 + var(--hue-shift)) / 0.08);
}

.clock-frame::after {
  background:
    radial-gradient(circle at center, transparent 45%, oklch(0.1 0.01 50 / 0.3) 100%),
    linear-gradient(90deg, transparent 0%, oklch(0.74 0.09 calc(78 + var(--hue-shift)) / 0.02) 50%, transparent 100%);
  mix-blend-mode: screen;
}

.frame-note {
  color: var(--text-soft);
  font-size: clamp(0.72rem, 1vw, 0.9rem);
}

.clock-board {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1vw, 1.15rem);
}

.digit-group {
  display: flex;
  gap: var(--board-gap);
}

.separator {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.4rem);
  align-items: center;
  padding-inline: 0.25rem;
}

.separator span {
  inline-size: clamp(0.55rem, 1vw, 0.8rem);
  block-size: clamp(0.55rem, 1vw, 0.8rem);
  border-radius: 999px;
  background: var(--accent-dim);
  box-shadow: 0 0 20px oklch(0.74 0.12 calc(78 + var(--hue-shift)) / 0.26);
}

.meridiem {
  align-self: flex-end;
  margin-inline-start: clamp(0.4rem, 1vw, 0.7rem);
  margin-block-end: clamp(0.6rem, 1.5vw, 1.1rem);
  font-family: var(--font-ui);
  font-size: clamp(0.85rem, 1.6vw, 1.3rem);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.meridiem:empty {
  display: none;
}

.flap-card {
  position: relative;
  inline-size: var(--digit-width);
  block-size: var(--digit-height);
  perspective: 1200px;
}

.flap-inner {
  position: absolute;
  inset: 0;
  border-radius: clamp(0.7rem, 1vw, 1rem);
  background:
    linear-gradient(180deg, oklch(0.3 0.015 calc(65 + var(--bg-hue-shift))), oklch(0.19 0.013 calc(52 + var(--bg-hue-shift))));
  border: 1px solid oklch(0.72 0.04 78 / 0.08);
  box-shadow:
    inset 0 1px 0 oklch(0.78 0.04 80 / 0.07),
    inset 0 -2px 0 oklch(0.08 0.02 50 / 0.6),
    0 12px 24px oklch(0.06 0.01 50 / 0.4);
  overflow: hidden;
}

.flap-inner::before,
.flap-inner::after {
  content: "";
  position: absolute;
  inset-inline: 0.6rem;
  block-size: 1px;
  background: oklch(0.83 0.05 78 / 0.06);
  z-index: 4;
}

.flap-inner::before {
  top: 0.85rem;
}

.flap-inner::after {
  bottom: 0.85rem;
}

.hinge {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  block-size: 2px;
  transform: translateY(-50%);
  z-index: 5;
  background:
    linear-gradient(90deg, transparent, oklch(0.76 0.09 calc(78 + var(--hue-shift)) / 0.16), transparent),
    linear-gradient(180deg, oklch(0.1 0.01 50), oklch(0.32 0.03 55), oklch(0.12 0.01 50));
  box-shadow:
    0 0 12px oklch(0.76 0.1 calc(78 + var(--hue-shift)) / 0.15),
    0 1px 0 oklch(0.86 0.04 90 / 0.05);
}

.flap-half {
  position: absolute;
  inset-inline: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--panel), var(--panel-cut));
  backface-visibility: hidden;
}

.flap-top {
  top: 0;
  block-size: 50%;
}

.flap-bottom {
  bottom: 0;
  block-size: 50%;
}

.flap-top::before,
.flap-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.85 0.02 85 / 0.04), transparent 55%, oklch(0.02 0 0 / 0.18));
  pointer-events: none;
}

.flap-bottom::before {
  background: linear-gradient(180deg, oklch(0.02 0 0 / 0.18), transparent 45%, oklch(0.8 0.04 82 / 0.03));
}

.flap-text {
  position: absolute;
  inset-inline: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-weight: 650;
  font-size: clamp(4.4rem, 12vw, 8.4rem);
  letter-spacing: 0.04em;
  color: var(--text);
  text-shadow:
    0 0 12px oklch(0.96 0.03 88 / 0.08),
    0 0 26px oklch(0.76 0.08 calc(78 + var(--hue-shift)) / 0.07);
  user-select: none;
}

.flap-top .flap-text {
  top: 0;
  block-size: 200%;
}

.flap-bottom .flap-text {
  bottom: 0;
  block-size: 200%;
}

.flap-overlay {
  z-index: 6;
  pointer-events: none;
}

.flap-top-overlay {
  transform-origin: bottom center;
  transform: rotateX(0deg);
}

.flap-bottom-overlay {
  transform-origin: top center;
  transform: rotateX(90deg);
}

.flap-card.is-flipping .flap-top-overlay {
  animation: flip-top 720ms cubic-bezier(0.22, 0.84, 0.22, 1) forwards;
}

.flap-card.is-flipping .flap-bottom-overlay {
  animation: flip-bottom 720ms cubic-bezier(0.22, 0.84, 0.22, 1) forwards;
}

.readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.readouts.readouts-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.readout {
  display: grid;
  justify-items: center;
  padding: 0.95rem 1rem 1.05rem;
  border-radius: 1rem;
  border: 1px solid oklch(0.63 0.03 75 / 0.1);
  background:
    linear-gradient(180deg, oklch(0.24 0.018 calc(56 + var(--bg-hue-shift)) / 0.78), oklch(0.14 0.016 calc(50 + var(--bg-hue-shift)) / 0.88));
  box-shadow:
    inset 0 1px 0 oklch(0.78 0.04 80 / 0.05),
    0 10px 30px oklch(0.05 0.01 50 / 0.25);
  text-align: center;
}

.readout-value {
  display: block;
  margin-top: 0.55rem;
  inline-size: 100%;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.65vw, 1.25rem);
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.rail {
  position: absolute;
  inset-inline: 2rem;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.rail-top {
  top: 5.5rem;
}

.rail-bottom {
  bottom: 2.2rem;
}

@keyframes flip-top {
  0% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }

  100% {
    transform: rotateX(-90deg);
    filter: brightness(0.7);
  }
}

@keyframes flip-bottom {
  0% {
    transform: rotateX(90deg);
    filter: brightness(0.74);
  }

  100% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }
}

@keyframes grain {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-0.6%, 0.3%);
  }

  50% {
    transform: translate(0.5%, -0.3%);
  }

  75% {
    transform: translate(-0.2%, 0.4%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@media (max-width: 880px) {
  body {
    overflow: auto;
  }

  .shell {
    min-height: auto;
  }

  .masthead {
    align-items: start;
    flex-direction: column;
  }

  .clock-board {
    gap: 0.8rem;
  }

  .readouts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  :root {
    --digit-height: clamp(6.4rem, 23vw, 8rem);
  }

  .shell {
    padding: 1rem;
  }

  h1 {
    letter-spacing: 0.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-noise,
  .flap-card.is-flipping .flap-top-overlay,
  .flap-card.is-flipping .flap-bottom-overlay {
    animation: none;
    transition: none;
  }
}

/* TV / Cast: pantallas grandes sufren moiré con scanlines finas y flicker
   por el grain animado. Apagamos overlays problemáticos y reescalamos
   bordes finos para sobrevivir al reescalado del Chromecast. */
@media (min-width: 1600px), (min-resolution: 1.5dppx) {
  body::before,
  .screen-noise {
    display: none;
  }

  .screen-glow {
    background:
      radial-gradient(circle at 50% 45%, transparent 55%, oklch(0.09 0.01 50 / 0.5) 100%);
    mix-blend-mode: normal;
  }

  .clock-frame::after {
    mix-blend-mode: normal;
    background: radial-gradient(circle at center, transparent 55%, oklch(0.1 0.01 50 / 0.25) 100%);
  }

  .clock-frame,
  .flap-inner,
  .readout {
    border-width: 2px;
  }

  .rail {
    block-size: 2px;
  }

  .hinge {
    block-size: 3px;
  }

  .flap-inner::before,
  .flap-inner::after {
    block-size: 2px;
  }
}

/* Cast/Chromecast: H.264 destruye gradientes sutiles y subpixel rendering.
   Forzamos capas GPU, hint de rendering y subimos contraste de los dígitos
   para que sobrevivan al encoding. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.flap-card,
.flap-inner,
.flap-half {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.flap-text {
  color: oklch(0.95 0.02 80);
  text-shadow: 0 2px 4px oklch(0.05 0.01 50 / 0.5);
}

.readout-value {
  color: oklch(0.95 0.02 78);
}