:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --fs-h1: 30px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-label: 14px;
  --fs-small: 12px;
  --pad-x: 30px;
  --pad-top: 26px;
  --gap-head: 22px;
  --gap-section: 28px;
}
body.phone {
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --pad-x: 12px;
  --pad-top: 14px;
  --gap-head: 16px;
  --gap-section: 20px;
}

.empty-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center; color: var(--muted);
}
.empty-state .es-art { display: block; margin-bottom: var(--sp-2); }
.es-title { font-size: var(--fs-h3); font-weight: 600; color: var(--fg); line-height: 1; text-box: trim-both cap alphabetic; }
.es-hint { font-size: var(--fs-label); line-height: 1.35; max-width: 52ch; text-wrap: balance; }
.empty-state .btn { margin-top: var(--sp-2); }
.empty-state.es-small { padding: var(--sp-4) var(--sp-3); gap: var(--sp-2); }
.es-small .es-art { margin-bottom: var(--sp-1); }
.es-small .es-title { font-size: var(--fs-label); }
.es-small .es-hint { font-size: var(--fs-small); }
body.phone .empty-state { padding: var(--sp-5) var(--sp-3); }

@keyframes ls-blink { 0% { opacity: 1; } 33% { opacity: .25; } }

body:not([data-ready])::after {
  content: 'Opening the shop';
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg); color: var(--muted);
  font-size: var(--fs-label); letter-spacing: 1px;
  animation: boot-slow 0s 10s forwards;
}
@keyframes boot-slow { to { content: 'This is taking a while. Check the server is running, then reload.'; } }

.col-tab { white-space: nowrap; }
.screen-collection .empty-state { margin-bottom: var(--sp-3); }

.room-empty { width: min(420px, 100%); margin: var(--sp-5) auto 0; pointer-events: auto; }
.room-empty .empty-state { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
body.phone .room-empty { margin-top: var(--sp-3); }

.ph-row:has(> .ph-case) { align-items: flex-end; }

.dt-preview:empty::after { content: 'Drawing the wallpaper'; color: var(--muted); font-size: var(--fs-label); animation: ls-blink 1.2s steps(1, end) infinite; }