/* Webfont: Open Sauce One */
@font-face {
  font-family: 'Open Sauce One';
  src: url('fonts/woff2/OpenSauceOne-Regular.woff2') format('woff2'),
       url('fonts/woff/OpenSauceOne-Regular.woff') format('woff'),
       url('fonts/ttf/OpenSauceOne-Regular.ttf') format('truetype'),
       url('fonts/otf/OpenSauceOne-Regular.otf') format('opentype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('fonts/woff2/OpenSauceOne-Bold.woff2') format('woff2'),
       url('fonts/woff/OpenSauceOne-Bold.woff') format('woff'),
       url('fonts/ttf/OpenSauceOne-Bold.ttf') format('truetype'),
       url('fonts/otf/OpenSauceOne-Bold.otf') format('opentype');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

/* =============================================================================
   The Written Now — Uhr-Display (index.html)
   =============================================================================
   Inhaltsverzeichnis:
   1.  Reset & Grundlayout
   2.  Uhr & Digit-Slots
   3.  Installations-Modus (?slot=H1 etc.)
   4.  Video-Rotation (?rotate=90/180/270)
   5.  Controls-Screen (?controls — Tablet / 7. Screen)
   6.  Spotlight-Bar
   7.  Code-Panel (Web-Modus)
   8.  Dev-Controls (?dev=1)
   9.  Status-Overlay
   ============================================================================= */


/* ─── 1. Reset & Grundlayout ─────────────────────────────────────────────────── */

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

body {
  background:      #0a0a0a;
  width:           100vw;
  height:          100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  font-family: var(--font);
  font-size:   16px;
  line-height: 24px;
}


/* ─── 2. Uhr & Digit-Slots ───────────────────────────────────────────────────── */

#clock {
  display:     flex;
  align-items: center;
  gap:         0.5vw;
}

.digit-slot {
  position:   relative;
  width:      14vw;
  height:     20vw;
  background: #111;
  overflow:   hidden;
}

.digit-slot video {
  position:        absolute;
  top:             0;
  left:            0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}

.digit-slot .placeholder {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #333;
  font-size:       6vw;
  font-weight:     bold;
}

.separator {
  color:       #444;
  font-size:   5vw;
  font-weight: 100;
  padding:     0 0.3vw;
  margin-bottom: 1vw;
  align-self:  center;
}


/* ─── 3. Installations-Modus (?slot=H1 etc.) ────────────────────────────────── */

body.mode-slot {
  width:    100vw;
  height:   100vh;
  overflow: hidden;
}

body.mode-slot #clock {
  display: block;
  width:   100vw;
  height:  100vh;
}

body.mode-slot .separator          { display: none; }
body.mode-slot .digit-slot.hidden  { display: none; }

body.mode-slot .digit-slot {
  position: fixed !important;
  inset:    0 !important;
  width:    100vw !important;
  height:   100vh !important;
  overflow: visible !important;  /* Safari: fixed inside overflow:hidden bricht */
}

body.mode-slot .digit-slot video {
  position:    fixed !important;
  inset:       0 !important;
  width:       100vw !important;
  height:      100vh !important;
  aspect-ratio: unset !important;
}


/* ─── 4. Video-Rotation (?rotate=90/180/270) ────────────────────────────────── */

body.rotate-90 .digit-slot video,
body.rotate-270 .digit-slot video {
  position:  absolute;
  top:       50%;
  left:      50%;
  translate: -50% -50%;
  width:     100vh;
  height:    100vw;
}

body.rotate-90 .digit-slot video   { transform: rotate(90deg);  }
body.rotate-180 .digit-slot video  { transform: rotate(180deg); }
body.rotate-270 .digit-slot video  { transform: rotate(270deg); }


/* ─── 5. Controls-Screen (?controls — Tablet / 7. Screen) ───────────────────── */

/* Im Controls-Modus: Uhr und UI ausblenden */
body.mode-controls #clock,
body.mode-controls #code-panel,
body.mode-controls #spotlight-bar,
body.mode-controls #status {
  display: none;
}

#controls-screen {
  display:         none;
  flex-direction:  column;
  align-items:     center;
  gap:             2.5rem;
  width:           100%;
  max-width:       420px;
  padding:         3rem 2rem;
}

body.mode-controls #controls-screen {
  display: flex;
}

#controls-screen h1 {
  font-size:      0.85rem;
  font-weight:    normal;
  color:          #444;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

#ctrl-clock-preview {
  font-size:           3rem;
  color:               #2a2a2a;
  letter-spacing:      0.15em;
  font-variant-numeric: tabular-nums;
}

/* Spotlight-Status (aktiv während 60s-Spotlight) */
#ctrl-spotlight-status {
  display:         none;
  flex-direction:  column;
  align-items:     center;
  gap:             0.75rem;
  border:          1px solid #222;
  padding:         1.5rem 2rem;
  width:           100%;
}

#ctrl-spotlight-status.active {
  display: flex;
}

#ctrl-spotlight-label {
  color:          #444;
  font-size:      0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

#ctrl-spotlight-countdown {
  font-size:           4rem;
  color:               #c8a96e;
  font-variant-numeric: tabular-nums;
  line-height:         1;
}

#ctrl-cancel-btn {
  background:     transparent;
  border:  none;
  outline: 1px solid #222;
  color:          #333;
  font-family: var(--font);
  font-size:      0.7rem;
  letter-spacing: 0.1em;
  padding:        0.3rem 1.5rem;
  cursor:         pointer;
  margin-top:     0.5rem;
}

#ctrl-cancel-btn:hover {
  outline-color: #c0392b;
  color:        #c0392b;
}

/* Code-Eingabe */
#ctrl-code-form {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1rem;
  width:           100%;
}

#ctrl-code-input {
  background:     transparent;
  border:         none;
  border-bottom:  1px solid #2a2a2a;
  color:          #fff;
  font-family: var(--font);
  font-size:      3.5rem;
  letter-spacing: 0.5em;
  text-align:     center;
  width:          100%;
  text-transform: uppercase;
  outline:        none;
  padding:        0.5rem 0;
}

#ctrl-code-input::placeholder {
  color:          #1e1e1e;
  letter-spacing: 0.5em;
}

#ctrl-code-input:focus {
  border-bottom-color: #444;
}

#ctrl-code-btn {
  background:     transparent;
  border:  none;
  outline: 1px solid #2a2a2a;
  color:          #444;
  font-family: var(--font);
  font-size:      0.8rem;
  letter-spacing: 0.2em;
  padding:        0.75rem 2rem;
  cursor:         pointer;
  width:          100%;
  transition:     all 0.2s;
}

#ctrl-code-btn:hover {
  outline-color: #c8a96e;
  color:        #c8a96e;
}

#ctrl-code-message {
  font-size:  0.75rem;
  min-height: 1.2em;
  color:      #444;
  text-align: center;
}

#ctrl-code-message.error   { color: #c0392b; }
#ctrl-code-message.success { color: #27ae60; }


/* ─── 6. Spotlight-Bar ───────────────────────────────────────────────────────── */

#spotlight-bar {
  position:   fixed;
  top:        1rem;
  left:       50%;
  transform:  translateX(-50%);
  display:    none;
  align-items: center;
  gap:        0.75rem;
  background: rgba(0, 0, 0, 0.8);
  border:     1px solid #333;
  padding:    0.4rem 1rem;
  font-size:  0.7rem;
  color:      #666;
  z-index:    100;
}

#spotlight-timer {
  color:       #c8a96e;
  font-weight: bold;
}


/* ─── 7. Code-Panel (Web-Modus) ──────────────────────────────────────────────── */

#code-panel {
  position:   fixed;
  bottom:     2rem;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  align-items: center;
  gap:        0.5rem;
  z-index:    100;
}

body.mode-slot #code-panel {
  display: none;
}

#code-input {
  background:     rgba(0, 0, 0, 0.7);
  border:         1px solid #333;
  color:          #aaa;
  font-family: var(--font);
  font-size:      1rem;
  letter-spacing: 0.2em;
  padding:        0.4rem 0.8rem;
  width:          9rem;
  text-transform: uppercase;
  outline:        none;
}

#code-input:focus {
  border-color: #666;
  color:        #fff;
}

#code-btn {
  background:  transparent;
  border:  none;
  outline: 1px solid #333;
  color:       #555;
  font-family: var(--font);
  font-size:   0.75rem;
  padding:     0.4rem 0.8rem;
  cursor:      pointer;
}

#code-btn:hover {
  outline-color: #666;
  color:        #aaa;
}

#code-message {
  position:    absolute;
  top:         -1.4rem;
  left:        0;
  font-size:   0.7rem;
  color:       #555;
  white-space: nowrap;
}

#code-message.error { color: #c0392b; }


/* ─── 8. Dev-Controls (?dev=1) ───────────────────────────────────────────────── */

#dev-controls {
  position:       fixed;
  top:            1rem;
  left:           1rem;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  z-index:        200;
}

#dev-controls label {
  color:          #555;
  font-size:      0.65rem;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#dev-controls select,
#dev-controls input[type=number],
#dev-controls input[type=range] {
  background:  #1a1a1a;
  border:      1px solid #333;
  color:       #aaa;
  font-family: var(--font);
  font-size:   0.7rem;
  padding:     0.25rem 0.5rem;
  width:       100%;
}

#dev-controls .control-group {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}


/* ─── 9. Status-Overlay ──────────────────────────────────────────────────────── */

#status {
  position:   fixed;
  bottom:     1rem;
  right:      1rem;
  color:      #2a2a2a;
  font-size:  0.65rem;
  font-family: var(--font);
}