:root {
  --bg: #ffffff;
  --fg: #1e1e1e;
  --muted: #888888;
  --hud-bg: rgba(255,255,255,.78);
  --hud-border: rgba(0,0,0,.08);
  --card-bg: rgba(0,0,0,.04);
  --tile-bg: #f2f2f2;
  --accent: #1e1e1e;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-theme="dark"] {
  --bg: #0c0c0c;
  --fg: #f4f4f4;
  --muted: #777;
  --hud-bg: rgba(20,20,20,.7);
  --hud-border: rgba(255,255,255,.1);
  --card-bg: rgba(255,255,255,.05);
  --tile-bg: #1a1a1a;
  --accent: #fff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Canvas */
#canvas {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--bg);
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
}
#world {
  position: absolute; left: 0; top: 0;
  will-change: transform;
}

/* ---- Tiles */
.tile {
  position: absolute; left: 0; top: 0;
  overflow: hidden;
  background: var(--tile-bg);
  will-change: transform;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
.tile-media { position: absolute; inset: 0; pointer-events: none; }
.tile-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.tile-media video { pointer-events: none; }
.tile-media .swatch-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  font: 500 14px/1 ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.tile-hover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  opacity: 0; transition: opacity .25s ease;
  color: #fff; pointer-events: none;
}
.tile:hover .tile-hover { opacity: 1; }
.tile-hover h3 {
  margin: 0 0 6px;
  font: 600 18px/1.15 var(--font-display);
  letter-spacing: -.01em;
}
.tile-hover ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font: 500 11px/1 ui-monospace, monospace;
  letter-spacing: .04em; opacity: .85;
}
.tile-hover li { white-space: nowrap; }

/* ---- Video player */
.vp { position: relative; width: 100%; height: 100%; overflow: hidden; background: #111; }
.vp-poster, .vp-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .35s ease;
}
.vp-vid { opacity: 0; }
.vp.vp-loaded .vp-vid { opacity: 1; }
.vp.vp-loaded .vp-poster { opacity: 0; }
.vp-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
  transition: opacity .25s ease;
}
.vp.vp-loaded .vp-loader,
.vp.vp-fallback .vp-loader { opacity: 0; }
.vp-ring {
  width: 28px; height: 28px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.vp-label {
  font: 500 10px/1 ui-monospace, monospace;
  letter-spacing: .15em; opacity: .85;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- HUD */
#hud {
  position: fixed; top: 16px; right: 16px; bottom: 16px;
  width: 280px;
  z-index: 10;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  background: var(--hud-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hud-border);
  border-radius: 14px;
  color: var(--fg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#hud .cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--fg); color: var(--bg);
  border-radius: 999px;
  font: 500 16px/1 var(--font-display);
  text-decoration: none;
}
#hud .block { display: flex; flex-direction: column; gap: 6px; }
#hud .kicker {
  font: 500 11px/1 ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
#hud .focus { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
#hud .focus-item {
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 6px 0;
  font: 500 17px/1.2 var(--font-display);
  color: var(--fg);
  cursor: pointer; letter-spacing: -.01em;
}
#hud .focus-item:hover { opacity: .65; }
#hud .focus-item.active {
  color: var(--accent);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
#hud .links { gap: 4px; }
#hud .link {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; padding: 6px 0;
  font: 500 14px/1.2 var(--font-display);
  color: var(--fg); cursor: pointer; text-decoration: none;
  width: 100%;
}
#hud .link:hover { opacity: .65; }
#hud .clock {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 10px 12px;
  background: var(--card-bg);
  border-radius: 10px;
}
#hud .clock-text { font: 500 12px/1.3 var(--font-display); color: var(--muted); }
#hud .clock-time { font: 500 14px/1 ui-monospace, monospace; }
#hud .theme {
  width: 100%; padding: 10px 12px;
  background: transparent;
  border: 1px dashed var(--hud-border);
  border-radius: 10px;
  font: 500 13px/1 var(--font-display);
  color: var(--fg);
  cursor: pointer; text-align: left;
}
#hud .cta-card {
  margin-top: auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
}
#hud .cta-img {
  aspect-ratio: 11/12;
  background: radial-gradient(120% 80% at 30% 20%, #b8e0a8, #4a7e3e 60%, #1f3a1a 100%);
}
#hud .cta-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  font: 500 13px/1 var(--font-display);
}
#hud .cta-cap {
  margin: 0; padding: 0 12px 12px;
  font: 500 11px/1.35 var(--font-display);
  color: var(--muted);
}

/* small screens — hide hud's CTA card if cramped */
@media (max-height: 740px) {
  #hud .cta-card .cta-cap { display: none; }
}