:root {
  color-scheme: dark;
  --page: #11141f;
  --ink: #f3e8ee;
  --muted: #ccbccc;
  --mint: #84f5e5;
  --pink: #ff93b5;
  font-family: system-ui, sans-serif;
  background: var(--page);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:is(a, button):focus-visible, .scene-toggle:focus-visible + .scene-control {
  outline: 2px solid var(--mint);
  outline-offset: 5px;
}

.frame { width: min(100% - 2.25rem, 68rem); margin-inline: auto; }
.skip-link {
  position: absolute;
  z-index: 5;
  top: .75rem;
  left: .75rem;
  padding: .7rem;
  background: var(--page);
  transform: translateY(-175%);
}
.skip-link:focus { transform: translateY(0); }

.street {
  --storefront-position: 74% center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 3px solid #82506d;
  background: #27263c url('./assets/night-market.svg') var(--storefront-position) / cover no-repeat;
}
.street::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #10111ff5 0%, #10111fd9 28%, #1113204d 61%, transparent 88%),
    linear-gradient(0deg, #161320a0, transparent 42%);
}
.street-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  min-height: 27rem;
  padding-block: 2.7rem 3.5rem;
}
.eyebrow, .browse, .scene-control, .tape-action, .site-footer {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .085em;
}
.eyebrow { font-size: .78rem; font-weight: 700; color: var(--mint); }
.district { display: inline-block; padding: .42rem .58rem; background: #1c2834; border-left: 3px solid var(--mint); }
.district span { color: #95afbb; }
.street h1 {
  margin: .85rem 0;
  font: 900 clamp(3.3rem, 9vw, 7.1rem)/.81 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: -.095em;
  text-transform: uppercase;
  text-shadow: 3px 4px #9d3767, 0 0 1.6rem #ee78a77a;
}
.street h1 span {
  color: var(--mint);
  text-shadow: 3px 4px #276a76, 0 0 1.25rem #4ed9d66b;
}
.street-line { font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 700; }
.street-description { max-width: 27rem; margin-top: .25rem; color: #f0d7e6; }
.browse {
  margin-top: 1.1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--mint);
  background: #172632;
  box-shadow: 3px 3px #276575;
  color: var(--mint);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.browse:hover { background: var(--mint); color: #112630; }

.storefront-neon {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('./assets/night-market-neon.svg') var(--storefront-position) / cover no-repeat;
  animation: neon-glow 5s ease-in-out infinite;
}
@keyframes neon-glow {
  0%, 100% { opacity: .24; }
  24%, 40% { opacity: 1; }
  76% { opacity: .32; }
}
.pedestrians {
  --pedestrian-width: clamp(3.75rem, 7vw, 5.5rem);
  --crossing-cycle: 34s;
  --return-delay: 18s;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.pedestrian {
  --crossing-end: calc(100% + var(--pedestrian-width));
  position: absolute;
  inset: auto 0 11%;
  animation: pavement-crossing var(--crossing-cycle) linear 2s infinite;
}
.pedestrian--return {
  --crossing-end: calc(-100% - var(--pedestrian-width));
  animation-delay: var(--return-delay);
}
.pedestrian-sprite {
  position: absolute;
  right: 100%;
  bottom: 0;
  width: var(--pedestrian-width);
  aspect-ratio: 32 / 38;
  background: url('./assets/umbrella-walk.svg') 0 0 / 400% 100% repeat-x;
  image-rendering: pixelated;
  animation: pavement-stride .64s steps(4) infinite;
}
.pedestrian--return .pedestrian-sprite {
  right: auto;
  left: 100%;
  transform: scaleX(-1);
  filter: hue-rotate(255deg);
}
@keyframes pavement-crossing {
  /* Hold just outside the scene between crossings. */
  36%, 100% { transform: translateX(var(--crossing-end)); }
}
@keyframes pavement-stride {
  to { background-position-x: calc(-4 * var(--pedestrian-width)); }
}
.rain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.rain::before, .rain::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--rain-tile-height)) -10rem 0;
  background-size: auto var(--rain-tile-height);
  transform: skewX(-10deg);
  /* One full tile of travel keeps the last frame aligned with the first. */
  animation: rainfall var(--rain-duration) linear infinite;
}
.rain::before {
  --rain-tile-height: 251px;
  --rain-duration: 5.3s;
  background-image: url('./assets/rain-distant.svg');
}
.rain::after {
  --rain-tile-height: 317px;
  --rain-duration: 3.7s;
  background-image: url('./assets/rain-near.svg');
  animation-delay: -1.7s;
}
@keyframes rainfall {
  to { transform: skewX(-10deg) translateY(var(--rain-tile-height)); }
}
.scene-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scene-control {
  position: absolute;
  z-index: 2;
  right: max(1.125rem, calc((100% - 68rem) / 2));
  bottom: .8rem;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .65rem;
  border: 1px solid #7d7892;
  background: #181a29;
  font-size: .7rem;
  cursor: pointer;
}
.scene-toggle:checked ~ .storefront-neon,
.scene-toggle:checked ~ .pedestrians :is(.pedestrian, .pedestrian-sprite),
.scene-toggle:checked ~ .rain::before,
.scene-toggle:checked ~ .rain::after { animation-play-state: paused; }
.play-label, .scene-toggle:checked + .scene-control .pause-label { display: none; }
.scene-toggle:checked + .scene-control .play-label { display: inline; }

.shop {
  padding-block: 2.4rem 2.6rem;
  scroll-margin-top: 1rem;
  background: radial-gradient(ellipse at 44% 0%, #3d304d, transparent 82%),
    repeating-linear-gradient(90deg, #202332 0 23px, #181b29 23px 26px);
}
.collection-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin-bottom: 1rem;
}
.collection-heading h2 { font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: 1.1; }
.collection-heading > p { color: var(--muted); }
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.1rem, 1fr));
  align-content: end;
  align-items: end;
  gap: 1rem;
  min-height: 11.5rem;
  margin: 0;
  padding: 1.25rem 1rem 0;
  list-style: none;
  border: 4px solid #171321;
  border-bottom: 7px solid #885951;
  box-shadow: inset 0 -2px #b37a60, 0 0 0 2px #7a607d, 0 7px #151421;
  background: linear-gradient(135deg, #afdaf01a, transparent 23%, transparent 70%, #f388c31a), #201c2b;
}
.shelf:not(:has(.tape)) { align-content: center; padding-block: 1rem; }
.shelf-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.shelf:has(.tape) .shelf-empty, .shop:not(:has(.tape)) .shelf-hint { display: none; }
.tape {
  position: relative;
  display: grid;
  width: min(100%, 8rem);
  min-height: 9rem;
  grid-template-rows: auto 1fr auto;
  padding: 4px 4px 6px 10px;
  border: 2px solid #11131c;
  background: linear-gradient(90deg, #2c4d55 0 6px, #121925 6px 10px, #243748 10px);
  box-shadow: 4px 3px #12121a;
  color: #f4f3ed;
  text-decoration: none;
  transition: transform 180ms steps(6), box-shadow 180ms;
}
.cover { display: block; width: 100%; height: auto; aspect-ratio: 120 / 104; object-fit: cover; }
.tape-title { padding: .38rem .35rem .1rem; font-size: .91rem; font-weight: 750; overflow-wrap: anywhere; }
.tape-action { padding: .1rem .35rem 0; color: var(--mint); font-size: .7rem; }
.tape-badges {
  position: absolute;
  z-index: 1;
  top: .4rem;
  right: .35rem;
  left: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.tape-badge {
  padding: .2rem .25rem;
  color: #17202a;
  background: var(--mint);
  box-shadow: 1px 2px #151621;
  font: 750 .65rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}
.tape-badge--updated { background: var(--pink); }
.tape:is(:hover, :focus-visible) {
  transform: translateY(-8px);
  box-shadow: 0 0 0 1px var(--mint), 0 0 18px #84f5e56b, 5px 8px #11131c;
}

.counter {
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 2px solid #55384e;
  background: radial-gradient(ellipse at 32% 16%, #403042, transparent 72%), #1c1927;
}
.counter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.counter-art {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #13121d;
  box-shadow: 0 0 0 1px #71536a, 5px 6px #14131d;
  image-rendering: pixelated;
}
.counter-note {
  position: relative;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 2px solid #9e664f;
  background: #f5dcad;
  color: #3e2931;
  box-shadow: 5px 6px #100f18;
}
.counter-note::before {
  content: "";
  position: absolute;
  inset: -.45rem auto auto 1.25rem;
  width: 2.9rem;
  height: .8rem;
  background: #e29f7f;
  box-shadow: 2px 2px #793e4a;
  transform: rotate(-5deg);
}
.counter-note .eyebrow { color: #6e3b4d; }
.counter-note h2 {
  margin: .25rem 0 .85rem;
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  line-height: 1.1;
}
.counter-note p:not(.eyebrow) { line-height: 1.55; }
.counter-note p + p { margin-top: .65rem; }
.counter-note .report-button { margin-top: 1rem; }
.report-button, .report-close, .tape-launch, .tape-close {
  padding: .6rem .8rem;
  border: 1px solid #86627a;
  color: #ffe9df;
  background: #502e44;
  font: 650 .8rem/1.25 ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-decoration: none;
  cursor: pointer;
}
.report-button:hover { background: #703f57; }
.report-close, .tape-close { background: #252032; }
.shop-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: clamp(1rem, 4vw, 1.75rem);
  border: 2px solid #9f6885;
  color: var(--ink);
  background: #241d30;
  box-shadow: 6px 6px #16121d;
}
.shop-dialog::backdrop { background: #12121ccc; }
.tape-dialog {
  width: min(37rem, calc(100% - 2rem));
  border-top-color: var(--pink);
  background: linear-gradient(135deg, #412740, #241d30 62%);
  box-shadow: 6px 6px #16121d, 0 0 28px #ff93b52b;
}
.tape-dialog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1rem, 4vw, 1.75rem);
  align-items: center;
}
.tape-dialog-cover { border: 4px solid #151724; box-shadow: 4px 4px #151724; }
.tape-dialog h2 { margin-block: .25rem .6rem; font-size: clamp(1.6rem, 5vw, 2.35rem); overflow-wrap: anywhere; }
#tape-details-description { color: var(--muted); line-height: 1.55; }
.tape-dialog-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.tape-launch { background: var(--mint); border-color: var(--mint); color: var(--page); }
.tape-launch:hover { background: #b8fff3; }
.tape-close:hover { background: #3c2c43; }
.report-dialog form { display: grid; gap: .55rem; margin-top: .9rem; }
.report-dialog :is(select, textarea) {
  width: 100%;
  padding: .55rem;
  border: 1px solid #91758f;
  color: var(--ink);
  background: #181622;
  font: inherit;
}
.report-dialog textarea { resize: vertical; }
.report-dialog label { font-size: .88rem; font-weight: 650; }
.report-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .35rem; }
.report-draft { margin-top: .85rem; }
.report-draft textarea { margin-top: .35rem; }
#report-status:not(:empty) { margin-top: .75rem; color: var(--mint); font-size: .85rem; }

.site-footer { border-top: 2px solid #634257; color: var(--muted); font-size: .75rem; }
.site-footer .frame { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding-block: .95rem; }
.site-footer span span { color: var(--mint); }

@media (max-width: 42rem) {
  .pedestrians { --crossing-cycle: 21s; --return-delay: 12s; }
  .street::before { background: linear-gradient(90deg, #10111ff0, #10111fbb 48%, #10111f42); }
  .street-inner { min-height: 26rem; padding-bottom: 4.5rem; }
  .counter-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 30rem) {
  .tape-dialog-layout { grid-template-columns: 1fr; }
  .tape-dialog-cover { width: min(100%, 8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .storefront-neon, .rain::before, .rain::after { animation: none; }
  .scene-toggle, .scene-control, .pedestrians { display: none; }
  .tape { transition: none; }
  .tape:is(:hover, :focus-visible) { transform: none; }
}