/* DeckTime — Kiosk-Ansicht. Auf Lesbarkeit aus mehreren Metern Entfernung ausgelegt. */

:root {
  --k-bg:     #08060f;
  --k-text:   #f2f0ff;
  --k-muted:  #7d76a8;
  --k-cyan:   #22d3ee;
  --k-magenta:#e451f5;
  --k-amber:  #fbbf24;
  --k-red:    #ff3d63;
  --k-accent: var(--k-cyan);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body.kiosk {
  background: var(--k-bg);
  color: var(--k-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  cursor: none;

  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: max(2vmin, env(safe-area-inset-top)) 3vmin max(2vmin, env(safe-area-inset-bottom));

  /* Der Farbschimmer im Hintergrund folgt dem Zustand des Timers. */
  background-image: radial-gradient(120vmin 80vmin at 50% 45%, color-mix(in srgb, var(--k-accent) 14%, transparent), transparent 70%);
  transition: background-image .6s ease;
}

/* Mauszeiger und Vollbild-Schalter erscheinen nur kurz nach einer Eingabe. */
body.kiosk.ui-visible { cursor: default; }

/* ---------- Kopfzeile ---------- */

.k-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vmin;
  font-size: clamp(1rem, 3.4vmin, 2.6rem);
  font-weight: 600;
}

.k-slot-range {
  color: var(--k-accent);
  letter-spacing: .02em;
  white-space: nowrap;
}

.k-dj {
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.1rem, 4.6vmin, 3.6rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--k-cyan), var(--k-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}

.k-clock {
  text-align: right;
  color: var(--k-text);
  white-space: nowrap;
}

/* ---------- Timer ---------- */

.k-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.k-timer {
  font-size: clamp(4rem, 26vmin, 24rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--k-accent);
  text-shadow: 0 0 8vmin color-mix(in srgb, var(--k-accent) 45%, transparent);
  transition: color .4s ease, text-shadow .4s ease;
  white-space: nowrap;
}

.k-label {
  margin-top: 1.5vmin;
  font-size: clamp(.8rem, 2.6vmin, 2rem);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--k-muted);
  text-align: center;
}

/* ---------- Fußzeile ---------- */

.k-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vmin;
  font-size: clamp(.8rem, 2.4vmin, 1.8rem);
  color: var(--k-muted);
  padding-bottom: 1.4vmin;
}

.k-next strong { color: var(--k-text); font-weight: 700; }

.k-status { display: flex; align-items: center; gap: .6em; white-space: nowrap; }

.k-dot {
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--k-cyan);
  box-shadow: 0 0 .8em var(--k-cyan);
  transition: background .3s, box-shadow .3s;
}

body.is-offline .k-dot { background: var(--k-amber); box-shadow: 0 0 .8em var(--k-amber); }

/* ---------- Fortschrittsbalken ---------- */

.k-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.1vmin;
  min-height: 6px;
  background: rgba(255, 255, 255, .07);
}

.k-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--k-cyan), var(--k-magenta));
  transition: width 1s linear, background .4s ease;
}

/* ---------- Zustände ---------- */

body[data-state="warn"]     { --k-accent: var(--k-amber); }
body[data-state="urgent"]   { --k-accent: var(--k-red); }
body[data-state="final"]    { --k-accent: var(--k-red); }
body[data-state="overtime"] { --k-accent: var(--k-red); }

body[data-state="urgent"] .k-progress-fill,
body[data-state="final"] .k-progress-fill,
body[data-state="overtime"] .k-progress-fill { background: var(--k-red); }

body[data-state="warn"] .k-progress-fill { background: var(--k-amber); }

/* Letzte Minute: der Timer pulsiert. */
body[data-state="final"] .k-timer { animation: pulse 1s steps(1, end) infinite; }

/* Überzogen: der ganze Bildschirm atmet rot. */
body[data-state="overtime"] { animation: alarm 2s ease-in-out infinite; }
body[data-state="overtime"] .k-label { color: var(--k-red); }

@keyframes pulse {
  0%, 50%  { opacity: 1; }
  50.01%, 100% { opacity: .25; }
}

@keyframes alarm {
  0%, 100% { background-color: var(--k-bg); }
  50%      { background-color: #1c0510; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-state="final"] .k-timer,
  body[data-state="overtime"] { animation: none; }
}

/* ---------- Vollbild-Schalter ---------- */

.k-fs {
  position: fixed;
  right: 2vmin;
  bottom: 3vmin;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--k-muted);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

body.ui-visible .k-fs { opacity: 1; pointer-events: auto; }
.k-fs:focus-visible   { opacity: 1; pointer-events: auto; }

/* Hochkant auf dem Handy: Kopfzeile untereinander, damit nichts abgeschnitten wird. */
@media (max-aspect-ratio: 3/4) {
  .k-head {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "range clock" "dj dj";
    row-gap: 1.5vmin;
  }
  .k-slot-range { grid-area: range; }
  .k-clock      { grid-area: clock; }
  .k-dj         { grid-area: dj; max-width: 94vw; font-size: clamp(1.3rem, 7vw, 3rem); }
  .k-timer      { font-size: clamp(3.5rem, 22vw, 12rem); }
}