:root {
  --bg-base: #8a1315;
  --bg1: #cf2029;
  --bg2: #e94b3a;
  --bg3: #b01a1e;
  --bg-speed: 20s;

  --phase: #e01e2b;

  --line: rgba(255, 255, 255, 0.92);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.65);
  --accent: #e01e2b;

  --display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --body: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html, body {
  height: 100%;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Wabernder Hintergrund ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-base); }
.bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode: multiply;
}
#bgcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- App-Layout ---------- */
.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: clamp(8px, 1.6vmin, 20px);
  padding: clamp(12px, 2.4vmin, 34px);
}

.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; }

/* ---------- Header ---------- */
.head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.head-label {
  font-family: var(--display); text-transform: uppercase; color: var(--accent);
  font-size: clamp(18px, 3vmin, 40px); transform: skewX(-8deg); transform-origin: left; justify-self: start;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.timer { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-self: center; }
.timer .ring { position: relative; width: clamp(84px, 13vmin, 150px); aspect-ratio: 1; }
.timer .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .ring .track { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 9; }
.timer .ring .prog { fill: none; stroke: var(--phase); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--phase)); transition: stroke-dashoffset 0.3s linear, stroke 0.4s ease; }
.timer .ring .count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4.6vmin, 54px); line-height: 1;
}
.timer .phase {
  font-family: var(--display); text-transform: uppercase; color: var(--phase);
  font-size: clamp(12px, 1.9vmin, 22px); transform: skewX(-8deg); letter-spacing: 0.03em;
}

.brand { display: flex; align-items: center; gap: 10px; justify-self: end; }
.bg-badge {
  font-family: var(--display); font-size: clamp(20px, 3.2vmin, 42px); color: #0d0000;
  background: #fff; padding: 0.05em 0.28em; border-radius: 4px; line-height: 1.05;
}
.brand-sep { width: 2px; height: clamp(22px, 3.4vmin, 44px); background: rgba(255,255,255,0.75); }
.brand-name { font-family: var(--body); font-weight: 600; color: #fff; font-size: clamp(11px, 1.7vmin, 20px); }

/* ---------- Plan-Titel ---------- */
.plan-titles { display: grid; grid-template-columns: 1fr 1fr; }
.plan-title {
  font-family: var(--display); text-transform: uppercase; text-align: center; color: #fff;
  font-size: clamp(24px, 4.6vmin, 62px); transform: skewX(-8deg); text-shadow: 0 3px 14px rgba(0,0,0,0.45);
}

/* ---------- Board (Tabelle) ---------- */
.board {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  border: 2px solid var(--line);
  overflow: hidden;
}
.cell {
  display: flex; align-items: baseline; gap: clamp(6px, 1.1vmin, 14px);
  min-height: 0; overflow: hidden;
  padding: clamp(6px, 1.3vmin, 18px) clamp(10px, 1.8vmin, 24px);
  font-family: var(--body);
  font-size: clamp(14px, 2.5vmin, 34px);
  line-height: 1.14; min-width: 0;
}
.cell.col-l { border-right: 2px solid var(--line); }
.cell.block-end { border-bottom: 2px solid var(--line); }
.cell .k {
  flex: none; align-self: center;
  background: rgba(0, 0, 0, 0.28); color: #fff; font-weight: 800;
  font-size: 0.78em; letter-spacing: 0.02em;
  padding: 0.12em 0.44em; border-radius: 6px;
}
.cell .cell-body { min-width: 0; }
.cell .txt { font-weight: 800; }
.cell .ex { font-weight: 500; color: var(--text-dim); }

/* ---------- Sonderbereich (PUMP CITY) ---------- */
.special {
  border: 2px solid var(--line);
  padding: clamp(8px, 1.6vmin, 20px) clamp(12px, 2.2vmin, 30px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.6vmin, 8px);
  text-align: center;
}
.special.hidden { display: none; }
.special-title { font-family: var(--display); text-transform: uppercase; color: #fff; font-size: clamp(20px, 3.4vmin, 48px); transform: skewX(-8deg); }
.special-sub { font-family: var(--body); font-weight: 700; color: var(--text-dim); font-size: clamp(12px, 1.9vmin, 24px); }
.special-items { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, 1vmin, 10px) clamp(16px, 3vmin, 44px); margin-top: clamp(4px, 1vmin, 12px); }
.special-item { font-family: var(--body); font-weight: 700; color: #fff; font-size: clamp(15px, 2.4vmin, 32px); line-height: 1.15; }
.special-item::before { content: "•"; color: var(--accent); margin-right: 0.4em; }

/* ---------- Sonos-Player (Musik) ---------- */
.sonos { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 30px); }
.cover {
  width: clamp(70px, 12vmin, 150px); aspect-ratio: 1; flex: none;
  background: #d7d7d7 center/cover no-repeat; border-radius: 4px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45); position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cover .nocover { font-family: var(--body); font-weight: 800; color: #111; font-size: clamp(9px, 1.5vmin, 16px); }
.cover.has-art .nocover { display: none; }
.np-track { display: flex; flex-direction: column; gap: clamp(4px, 1vmin, 12px); min-width: 0; text-align: left; }
.np-artist, .np-song { display: flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 700; min-width: 0; }
.np-artist { color: var(--text-dim); font-size: clamp(13px, 2vmin, 26px); }
.np-song { color: #fff; font-size: clamp(15px, 2.4vmin, 30px); }
.np-artist span:last-child, .np-song span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-song .emo, .np-artist .emo { flex: none; }

/* ---------- Landscape-Feinschliff ---------- */
@media (orientation: landscape) {
  .app { gap: clamp(6px, 1.2vmin, 16px); }
  .np-row { margin-top: clamp(4px, 0.8vmin, 10px); }
}