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

/* The page itself never moves: fixed root, no scroll, no rubber-band, no address-bar jump. */
html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.stage {
  /* --u: chrome size unit, set from the card width in app.js (1 = 336px card on a 390px phone) */
  --u: 1;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #000;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  cursor: grab;
  outline: none;
  transition: opacity 0.14s ease;
}
.stage.dragging { cursor: grabbing; }
.stage * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* the single WebGL canvas draws cards, light and material; nothing else paints boxes */
.gl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---------- chrome (all sizes follow the card width via --u, all positions respect safe areas) ---------- */
.topbar {
  position: absolute;
  top: calc(var(--sat) + clamp(10px, calc(14px * var(--u)), 18px));
  left: calc(var(--sal) + clamp(16px, calc(22px * var(--u)), 28px));
  right: calc(var(--sar) + clamp(16px, calc(22px * var(--u)), 28px));
  font-size: clamp(12px, calc(13px * var(--u)), 15px);
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.topbar b { font-weight: 600; color: rgba(255, 255, 255, 0.84); }

/* layout toggle: small glass segmented pill, top-right on the header line. The buttons are 44 px
   tall touch targets; the visible pill is drawn inside them. */
.modes {
  --mh: 44px;
  --ph: clamp(22px, calc(24px * var(--u)), 28px);
  position: absolute;
  top: calc(var(--sat) + clamp(10px, calc(14px * var(--u)), 18px) + clamp(12px, calc(13px * var(--u)), 15px) * 0.625 - var(--mh) / 2);
  right: calc(var(--sar) + clamp(10px, calc(14px * var(--u)), 20px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--mh);
  pointer-events: auto;
  touch-action: none;
  cursor: default;
  z-index: 2;
}
.modes::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc((var(--mh) - var(--ph)) / 2);
  height: var(--ph);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.modes .thumb {
  position: absolute;
  left: 3px;
  top: calc((var(--mh) - var(--ph)) / 2 + 3px);
  width: calc(50% - 3px);
  height: calc(var(--ph) - 6px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 var(--pager-color, #2fae82);
  transform: translateX(0);
  pointer-events: none;
}
.modes.anim .thumb { transition: transform 0.42s cubic-bezier(0.32, 1.28, 0.42, 1), box-shadow 0.35s ease; }
.modes[data-mode="compact"] .thumb { transform: translateX(100%); }
.modes .seg {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  height: var(--mh);
  min-width: 44px;
  padding: 0 clamp(9px, calc(10px * var(--u)), 13px);
  font: inherit;
  font-size: clamp(9px, calc(9.5px * var(--u)), 11px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
  cursor: pointer;
  touch-action: none;           /* no pinch / double-tap gesture may start here (it would cancel a swipe) */
  outline: none;
  border-radius: 999px;
  transition: color 0.3s ease;
}
.modes .seg[aria-pressed="true"] { color: rgba(255, 255, 255, 0.86); cursor: default; }
.modes .seg:focus-visible::after {
  content: "";
  position: absolute;
  inset: calc((var(--mh) - var(--ph)) / 2 - 2px) -1px;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--hint-b, 64px);
  text-align: center;
  font-size: clamp(10px, calc(10.5px * var(--u)), 12px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.34);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.stage.used .hint,
.stage.nohint .hint { opacity: 0; }

/* infinite pager: counter + a thin track with a gliding tick (wraps every 10 cards), in the card's colour */
.pager {
  position: absolute;
  left: 50%;
  bottom: var(--pager-b, 16px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(12px * var(--u)), 16px);
  height: 44px;
  pointer-events: none;
  font-size: clamp(11px, calc(11.5px * var(--u)), 14px);
  color: var(--pager-color, #2fae82);
  transition: color 0.35s ease;
}
.pager .no {
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.42);
  min-width: 6.2em;
  text-align: right;
}
.pager .no b { font-weight: 600; color: var(--pager-color, #2fae82); transition: color 0.35s ease; }
.pager .track {
  --p: 0;
  position: relative;
  display: block;
  width: clamp(70px, calc(80px * var(--u)), 100px);
  height: 1px;
  overflow: hidden;
  /* ten faint notches, one per card of the current run of ten */
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, rgba(255, 255, 255, 0.09) 1px 10%);
  margin-right: 6.2em;          /* balance the counter so the pair stays centred */
}
.pager .tick {
  position: absolute;
  left: 0;
  top: 0;
  width: 10%;
  height: 100%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  transform: translateX(calc(var(--p) * 100%));
}
.pager .tick2 { transform: translateX(calc((var(--p) - 10) * 100%)); }

.nogl {
  position: absolute; left: 0; right: 0; top: 45%;
  text-align: center; font-size: 14px; color: rgba(255,255,255,.6);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pager, .pager .no b, .hint, .modes .thumb, .modes .seg { transition-duration: 0.01s !important; }
}