/* The experience - shared ground. Each module adds its own file with its own prefix
   (wall-, stage-, duel-, tune-, start-, kept-) and uses only the tokens defined here. */

:root {
  color-scheme: dark;

  /* ground and ink - warm near-black, the art is the only colour */
  --ground: #0d0d0e;
  --ground-raised: #17171a;
  --ink: #f4f2ed;
  --ink-soft: #a9a8a4;
  --ink-faint: #6d6c69;
  --line: rgba(255, 255, 255, 0.09);
  --accent: #c5a36b; /* Lazart's gold: focus, the kept state of the count, nothing else */
  --love: #ee8795; /* a kept picture */
  --material: rgba(22, 22, 25, 0.72); /* floating chrome over art */
  --material-edge: rgba(255, 255, 255, 0.1);
  --scrim: rgba(6, 6, 7, 0.62);

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* shape */
  --radius-art: 2px; /* art is not a card */
  --radius-chip: 999px;
  --radius-sheet: 22px;

  /* type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voice: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --text-voice: italic 400 1.0625rem/1.3 var(--font-voice); /* the few words the page says */
  --text-label: 500 0.6875rem/1 var(--font-ui); /* tiny tracked labels */
  --text-body: 400 0.875rem/1.4 var(--font-ui);
  --track-label: 0.09em;

  /* wall */
  --wall-gap: 6px;
  --wall-pad: 6px;

  /* layers */
  --z-bar: 10;
  --z-stage: 30;
  --z-sheet: 40; /* a sheet can be opened from an artwork, so it sits above the stage */
  --z-toast: 50;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

@media (min-width: 760px) {
  :root {
    --wall-gap: 10px;
    --wall-pad: 14px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  /* The page is locked while an artwork is open. Without a held gutter the scrollbar would
     vanish, the wall would widen by its width and every tile would shift under the artwork. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

body.is-locked {
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── tile: one artwork, anywhere ─────────────────────────────────────────── */

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-art);
  background-color: var(--ground-raised);
  contain: layout paint;
}

.tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.tile.is-loaded > img {
  opacity: 1;
}

/* press feedback lives on the press, and it is instant */
button.tile:active > img,
.tile.is-pressed > img {
  transform: scale(0.985);
  transition: opacity 320ms ease-out, transform 90ms ease-out;
}

.tile-kept {
  position: absolute;
  right: var(--s2);
  bottom: var(--s2);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--love);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  pointer-events: none;
}

.tile.is-kept .tile-kept {
  opacity: 1;
  transform: scale(1);
}

/* ── chrome: the dock (thumb zone), the mark ─────────────────────────────── */

/* The mark: the page's one door, and the line that the art is made with AI. It sits above
   every layer including an opened artwork, on its own backing, so it reads over any picture:
   the disclosure the EU rule asks for at first exposure, without a tap. docs/14. */
.mark {
  position: fixed;
  top: calc(var(--safe-top) + var(--s2));
  right: var(--s2);
  z-index: calc(var(--z-stage) + 2);
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 32px;
  padding: 0 var(--s3);
  border-radius: var(--radius-chip);
  background: var(--material);
  border: 1px solid var(--material-edge);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  color: var(--ink);
}

/* a 44px target around a 32px pill */
.mark::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.mark:active {
  background: rgba(40, 40, 44, 0.9);
}

.mark-name {
  font: 600 0.6875rem/1 var(--font-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.mark-note {
  font: 400 0.75rem/1 var(--font-ui);
  color: var(--ink-soft);
}

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--s4));
  z-index: var(--z-bar);
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  border-radius: var(--radius-chip);
  background: var(--material);
  border: 1px solid var(--material-edge);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  transition: opacity 220ms ease-out;
}

.dock.is-away {
  opacity: 0;
  pointer-events: none;
}

.dock-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--ink);
}

.dock-button:active {
  background: rgba(255, 255, 255, 0.1);
}

.dock-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-button.is-on {
  color: var(--accent);
}

.dock-count {
  position: absolute;
  top: 7px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--love);
  color: #1a0d10;
  font: 600 0.625rem/16px var(--font-ui);
  text-align: center;
}

/* ── sheet ───────────────────────────────────────────────────────────────── */

.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: var(--scrim);
  opacity: 0;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-sheet) + 1);
  max-height: min(86dvh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--material);
  border-top: 1px solid var(--material-edge);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.5);
  will-change: transform;
  touch-action: none;
}

@media (min-width: 760px) {
  .sheet {
    left: 50%;
    right: auto;
    bottom: var(--s5);
    width: min(560px, calc(100vw - 2 * var(--s5)));
    margin-left: calc(min(560px, calc(100vw - 2 * var(--s5))) / -2);
    border-radius: var(--radius-sheet);
    border: 1px solid var(--material-edge);
  }
}

.sheet-grip {
  flex: none;
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px; /* the tap that closes the sheet */
  margin-bottom: calc(-1 * var(--s2));
  cursor: grab;
  touch-action: none;
}

.sheet-grip::before {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s5) calc(var(--s5) + var(--safe-bottom));
  touch-action: pan-y;
}

/* ── small parts ─────────────────────────────────────────────────────────── */

.label {
  font: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.voice {
  font: var(--text-voice);
  color: var(--ink);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 36px;
  padding: 0 var(--s4);
  border-radius: var(--radius-chip);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font: var(--text-body);
  white-space: nowrap;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.chip:active {
  background: rgba(255, 255, 255, 0.08);
}

.chip.is-on {
  color: var(--ground);
  background: var(--ink);
  border-color: var(--ink);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 84px);
  z-index: var(--z-toast);
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-chip);
  background: var(--material);
  border: 1px solid var(--material-edge);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  font: var(--text-voice);
  font-size: 0.9375rem;
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  pointer-events: none;
}

.toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--ground);
  color: var(--ink-faint);
  font: var(--text-voice);
}

/* the picture a visitor arrived with, painted before anything else loads */
.boot-seed {
  max-width: calc(100vw - 2 * var(--s4));
  max-height: 70dvh;
  object-fit: contain;
  border-radius: var(--radius-art);
}

@media (prefers-reduced-motion: reduce) {
  .tile > img,
  .toast,
  .dock {
    transition-duration: 1ms;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .dock,
  .sheet,
  .mark,
  .toast {
    background: var(--ground-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* a sheet takes the focus as a whole when it opens; a container shows no ring */
.sheet:focus {
  outline: none;
}