@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap');

/* Theme tokens copied from the tv-schedule artifact's theme.css. */
:root {
  color-scheme: light dark;
  --bg: #faf9f6;
  --page-gradient: linear-gradient(
    130deg,
    #ffd166 0%,
    #ff9f68 16%,
    #ff7bac 34%,
    #c084fc 52%,
    #818cf8 68%,
    #38bdf8 84%,
    #2dd4bf 100%
  );
  --surface: #ffffff;
  --text: #111111;
  --dim: #6f6a5e;
  --border: #e3ded2;
  --accent: #e8930c;
  --class: #1d9e4b;
  --glow: #f59e0b;
  --glow-strong: #fbbf24;
  --glow-ink: #92400e;
  --live: var(--glow);
  --radius: 10px;
  --room-central-bg: #f7ead3;
  --room-central-edge: #e2c48d;
  --room-central-accent: #b07f27;
  --room-studio-1-bg: #dfeef8;
  --room-studio-1-edge: #a9cde9;
  --room-studio-1-accent: #35709f;
  --room-studio-2-bg: #e0f1e3;
  --room-studio-2-edge: #a9d6b4;
  --room-studio-2-accent: #2e7d4f;
  --room-studio-3-bg: #eae4f6;
  --room-studio-3-edge: #c2b3e2;
  --room-studio-3-accent: #6d4fae;
  --room-studio-4-bg: #fbe6d9;
  --room-studio-4-edge: #efbf9f;
  --room-studio-4-accent: #bd5a28;
  --room-pole-bg: #f9dfe7;
  --room-pole-edge: #ecb0c1;
  --room-pole-accent: #a93a5c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010;
    --page-gradient: linear-gradient(
      130deg,
      #78350f 0%,
      #881337 20%,
      #581c87 42%,
      #312e81 62%,
      #1e3a8a 80%,
      #134e4a 100%
    );
    --surface: #1a1a1a;
    --text: #f5f3ee;
    --dim: #a39e92;
    --border: #2e2c28;
    --accent: #f5a623;
    --class: #3ecf6e;
    --glow: #fbbf24;
    --glow-strong: #fde68a;
    --glow-ink: #fcd34d;
    --room-central-bg: #332a1b;
    --room-central-edge: #5c4a2a;
    --room-central-accent: #d9a856;
    --room-studio-1-bg: #1c2b3a;
    --room-studio-1-edge: #33506c;
    --room-studio-1-accent: #82b6de;
    --room-studio-2-bg: #1e3124;
    --room-studio-2-edge: #33573e;
    --room-studio-2-accent: #7fc995;
    --room-studio-3-bg: #2b2439;
    --room-studio-3-edge: #493b63;
    --room-studio-3-accent: #b7a4e0;
    --room-studio-4-bg: #37251b;
    --room-studio-4-edge: #613d29;
    --room-studio-4-accent: #eda87d;
    --room-pole-bg: #372329;
    --room-pole-edge: #5e3543;
    --room-pole-accent: #e48da6;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  background-image: var(--page-gradient);
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
}

/* Full-page colorful gradient backdrop, like the artifact's .page-bg. */
.page-bg {
  background-color: var(--bg);
  background-image: var(--page-gradient);
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  .page-bg { height: 100dvh; max-height: 100dvh; overflow: hidden; }
}

/* ---------- header ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  padding: 1rem 1rem 0;
}
@media (min-width: 640px) { .topbar { padding: 1.25rem 1.5rem 0; } }

.topbar h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw + 1rem, 3.4rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--text);
}
.updated {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--text);
  opacity: 0.75;
}
.updated .stale-note { color: var(--accent); opacity: 1; }

.clock-wrap { display: flex; align-items: center; gap: 1rem; }
.clock {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.refresh-btn {
  border-radius: 9999px;
  border: 2px solid var(--text);
  background: var(--surface);
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(30, 10, 60, 0.18);
  cursor: pointer;
  transition: opacity 0.15s;
}
.refresh-btn:disabled { opacity: 0.4; }

/* ---------- main grid ---------- */
main.board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
}
@media (min-width: 640px) { main.board { padding-left: 1.5rem; padding-right: 1.5rem; } }

.board-grid {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .board-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}

.center-msg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.center-msg .big { font-size: 1.5rem; font-weight: 700; color: var(--text); max-width: 28rem; margin: 0; }
.center-msg .small { font-size: 1rem; font-weight: 600; color: var(--dim); margin: 0; }
.center-msg .error-note { font-size: 0.875rem; font-weight: 600; color: var(--accent); max-width: 28rem; margin: 0; }
.solid-btn {
  border: none;
  border-radius: 9999px;
  background: var(--text);
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--bg);
  cursor: pointer;
  transition: opacity 0.15s;
}
.solid-btn:disabled { opacity: 0.4; }

/* ---------- room panels ---------- */
.panel {
  display: flex;
  flex-direction: column;
  min-height: 11rem;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(30, 10, 60, 0.18);
}
@media (min-width: 1024px) { .panel { min-height: 0; overflow: hidden; } }
@media (min-width: 640px) { .panel.central { grid-column: span 2; } }

.panel[data-density="regular"] { padding: 1rem; }
@media (min-width: 640px) { .panel[data-density="regular"] { padding: 1.25rem; } }
.panel[data-density="compact"] { padding: 1rem; }
.panel[data-density="dense"] { padding: 0.75rem; }
@media (min-width: 640px) { .panel[data-density="dense"] { padding: 0.875rem; } }

.panel-head {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 4px solid var(--text);
  padding-bottom: 0.5rem;
}
.panel[data-density="regular"] .panel-head { margin-bottom: 0.75rem; }
.panel[data-density="compact"] .panel-head { margin-bottom: 0.5rem; }
.panel[data-density="dense"] .panel-head { margin-bottom: 0.375rem; }

.panel-head .title-wrap {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}
.room-title {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}
.central-addr {
  font-size: clamp(0.95rem, 0.9vw + 0.6rem, 1.35rem);
  font-weight: 700;
  white-space: nowrap;
  color: var(--dim);
}
.booking-count {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.empty-label {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 1;
  font-weight: 900;
  color: var(--dim);
}

ul.events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}
ul.events[data-density="regular"] { gap: 1.25rem; }
ul.events[data-density="compact"] { gap: 0.75rem; }
ul.events[data-density="dense"] { gap: 0.5rem; }

li.event { display: flex; flex-direction: column; }
li.event[data-density="regular"] { gap: 0.25rem; }
li.event[data-density="compact"], li.event[data-density="dense"] { gap: 0.125rem; }

.event-name-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}
.event-name {
  min-width: 0;
  font-weight: 900;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
  line-height: 1.05;
}
.event-name.central {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-name.kind-class { color: var(--class); }
.event-name.kind-rental { color: var(--text); }

.event-time {
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--dim);
}

/* density-driven sizes (from the artifact's EVENT_*_SIZE tables) */
.name-regular { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.3rem); }
.name-compact { font-size: clamp(1.28rem, 1.3vw + 0.82rem, 1.9rem); }
.name-dense { font-size: clamp(1.12rem, 1.1vw + 0.72rem, 1.65rem); }
.time-regular { font-size: clamp(1.38rem, 1.35vw + 0.92rem, 2rem); }
.time-compact { font-size: clamp(1.18rem, 1.15vw + 0.78rem, 1.7rem); }
.time-dense { font-size: clamp(1.02rem, 1vw + 0.68rem, 1.45rem); }
.title-central-regular { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.2rem); }
.title-other-regular { font-size: clamp(1.6rem, 2vw + 0.9rem, 2.7rem); }
.title-central-compact { font-size: clamp(1.65rem, 2.2vw + 0.9rem, 2.75rem); }
.title-other-compact { font-size: clamp(1.4rem, 1.7vw + 0.8rem, 2.3rem); }
.title-central-dense { font-size: clamp(1.45rem, 1.9vw + 0.8rem, 2.4rem); }
.title-other-dense { font-size: clamp(1.25rem, 1.5vw + 0.72rem, 2rem); }
.empty-regular { font-size: clamp(1.7rem, 2vw + 1rem, 2.8rem); }
.empty-compact { font-size: clamp(1.45rem, 1.7vw + 0.85rem, 2.35rem); }
.empty-dense { font-size: clamp(1.3rem, 1.5vw + 0.75rem, 2.05rem); }

/* ---------- live "NOW" glow (copied from the artifact) ---------- */
.live-glow-name {
  text-shadow:
    0 0 8px color-mix(in srgb, var(--glow-strong) 90%, transparent),
    0 0 18px color-mix(in srgb, var(--glow) 75%, transparent),
    0 0 30px color-mix(in srgb, var(--glow) 50%, transparent);
}
.live-glow-now {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  color: var(--glow-ink);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--glow-strong) 85%, transparent),
    0 0 18px color-mix(in srgb, var(--glow) 60%, transparent);
}
.live-glow-now .now-text {
  font-size: clamp(0.95rem, 0.9vw + 0.6rem, 1.3rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.glow-dot {
  display: inline-block;
  width: clamp(0.8rem, 0.7vw + 0.55rem, 1.1rem);
  height: clamp(0.8rem, 0.7vw + 0.55rem, 1.1rem);
  border-radius: 9999px;
  background-color: var(--glow);
  box-shadow:
    0 0 8px var(--glow),
    0 0 16px color-mix(in srgb, var(--glow) 75%, transparent),
    0 0 26px color-mix(in srgb, var(--glow) 50%, transparent);
  animation: glow-dot-pulse 1.8s ease-out infinite;
}
@keyframes glow-dot-pulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 8px var(--glow),
      0 0 16px color-mix(in srgb, var(--glow) 70%, transparent),
      0 0 0 0 color-mix(in srgb, var(--glow) 55%, transparent);
  }
  70% {
    transform: scale(1.12);
    box-shadow:
      0 0 10px var(--glow),
      0 0 22px color-mix(in srgb, var(--glow) 80%, transparent),
      0 0 0 10px transparent;
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 8px var(--glow),
      0 0 16px color-mix(in srgb, var(--glow) 70%, transparent),
      0 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) { .glow-dot { animation: none; } }

/* ---------- QR / book panel ---------- */
.qr-panel {
  background: var(--text);
  border: none;
  box-shadow: 0 10px 28px rgba(30, 10, 60, 0.22);
  padding: 1rem;
}
@media (min-width: 640px) { .qr-panel { padding: 1.25rem; } }
@media (min-width: 1024px) { .qr-panel { grid-column: span 2; } }
@media (min-width: 1280px) { .qr-panel { grid-column: span 1; } }

.qr-inner {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}
@media (min-width: 1024px) { .qr-inner { flex-direction: row; gap: 1.5rem; } }
@media (min-width: 1280px) { .qr-inner { flex-direction: column; gap: 0.75rem; } }

.qr-heading {
  margin: 0;
  font-size: clamp(1.55rem, 1.8vw + 0.9rem, 2.4rem);
  line-height: 1.05;
  font-weight: 900;
  color: var(--bg);
}
.qr-url {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  word-break: break-all;
  color: var(--bg);
  opacity: 0.8;
}
.qr-img {
  display: block;
  flex-shrink: 0;
  aspect-ratio: 1;
  width: clamp(6.5rem, 20vh, 10.5rem);
  border-radius: 0.375rem;
  background: #ffffff;
  padding: 0.375rem;
}
@media (min-width: 1024px) { .qr-img { width: clamp(6rem, 22vh, 10rem); } }
@media (min-width: 1280px) { .qr-img { width: clamp(7rem, 26vh, 12rem); } }

.legend {
  margin: 0.75rem 0 0;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bg);
}
.legend .item { display: flex; align-items: center; gap: 0.375rem; }
.legend .swatch { display: inline-block; width: 0.75rem; height: 0.75rem; }
.legend .swatch-class { background: var(--class); }
.legend .swatch-rental { border: 2px solid var(--bg); }