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

:root {
  --black: #000;
  --white: #fff;
  --off-white: #e8e8e8;
  --grey: #333;
  --dim: #666;
  --grey-1: #1a1a1a;
  --grey-2: #2a2a2a;
  --grey-5: #999;
  --font-brute: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  min-height: 100dvh;
  background: #000;
  color: var(--white);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Splash ── */
#splash {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
#splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-prompt {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dim);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ── Layout ── */
.viewport { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; }

.panel {
  position: absolute; inset: 0; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 1.5rem 5rem;
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease);
  will-change: transform, opacity;
}

#home    { transform: translateX(0);    opacity: 1; }
#clothes { transform: translateX(100%); opacity: 0; pointer-events: none; }
#home.out    { transform: translateX(-35%); opacity: 0; pointer-events: none; }
#clothes.in  { transform: translateX(0);    opacity: 1; pointer-events: all; }

/* ── Title ── */
.name-wrap {
  display: flex; align-items: baseline; margin-bottom: 0.15em;
  user-select: none; -webkit-user-select: none;
  padding-block: 0.12em; overflow: visible;
}
.name-wrap .letter {
  display: inline-block;
  font-family: var(--font-brute);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900; line-height: 0.88; letter-spacing: -0.01em;
  text-transform: lowercase; color: var(--white); will-change: transform;
}
.name-wrap .letter.dim { color: var(--grey); }

/* ── Sub / links ── */
.sub {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--dim); text-transform: uppercase; margin-bottom: 3rem;
}
.links { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.6rem; align-items: flex-start; }
.link-item {
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
  color: var(--dim); font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.03em; transition: color 0.2s;
}
.link-item:hover { color: var(--white); }
.link-item svg { width: 14px; height: 14px; flex-shrink: 0; }

@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
.buy-clothes {
  display: inline-block; margin-bottom: 2rem;
  font-family: var(--font-brute); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--white);
  cursor: pointer; background: none; border: none; padding: 0; opacity: 1;
  animation: breathe 3s ease-in-out 1s infinite;
}
.buy-clothes:hover { animation-play-state: paused; opacity: 1; }

/* ── Player ── */
.player { width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 0.55rem; }
.player-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.player-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.player-title {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-artist { font-family: var(--font-mono); font-size: 0.55rem; color: var(--dim); letter-spacing: 0.03em; }
.play-btn {
  flex-shrink: 0; width: 22px; height: 22px; background: none; border: none;
  cursor: pointer; color: var(--white); opacity: 0.5;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s; padding: 0;
}
.play-btn:hover { opacity: 1; }
.waveform-wrap { position: relative; width: 100%; height: 40px; cursor: grab; }
.waveform-wrap.dragging { cursor: grabbing; }
canvas#waveCanvas { display: block; width: 100%; height: 100%; }
.player-bottom { display: flex; align-items: center; justify-content: space-between; }
.prog-time { font-family: var(--font-mono); font-size: 0.52rem; color: var(--dim); letter-spacing: 0.06em; min-width: 28px; }

/* ── Clothes panel ── */
#clothes { justify-content: flex-start; overflow-y: auto; padding-top: 4rem; }

.clothes-header {
  width: 100%; max-width: 560px;
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--grey-1);
}
.clothes-title-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.clothes-title {
  font-family: var(--font-brute); font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900; line-height: 0.9; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--white);
}
.clothes-sub {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.15em;
  color: var(--dim); text-transform: uppercase;
}
.back-btn {
  background: none; border: 1px solid var(--grey-1); cursor: pointer; padding: 0;
  color: var(--dim); width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px; margin-top: 0.3rem;
  transition: border-color 0.2s, color 0.2s;
}
.back-btn:hover { border-color: var(--grey); color: var(--white); }
.back-btn svg { width: 13px; height: 13px; }

/* ── Listings grid ── */
.listings-grid {
  width: 100%; max-width: 560px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px; background: #000; border: 1px solid var(--grey); margin-bottom: 4rem;
}

/* ── Listing card ── */
.listing-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--white);
  background: #000; transition: background 0.2s; position: relative; overflow: hidden;
}
.listing-card:hover { background: #0a0a0a; }

.listing-thumbs {
  width: 100%; aspect-ratio: 3/4; overflow: hidden;
  position: relative; background: #111; cursor: pointer;
}
.listing-thumbs-track {
  display: flex; height: 100%;
  transition: transform 0.3s var(--ease);
}
.listing-thumbs-track img {
  width: 100%; height: 100%; flex-shrink: 0;
  object-fit: cover; display: block;
}
.listing-dots {
  position: absolute; bottom: 6px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 3px; pointer-events: none;
}
.listing-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.18s, transform 0.18s;
}
.listing-dot.active { background: rgba(255,255,255,0.85); transform: scale(1.3); }

.listing-info {
  padding: 0.6rem 0.65rem 0;
  display: flex; flex-direction: column; gap: 0.25rem; flex: 1;
}
.listing-title {
  font-family: var(--font-mono); font-size: 0.57rem; color: var(--grey-5);
  letter-spacing: 0.02em; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* price + size badge on same row */
.listing-meta {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.1rem;
}
.listing-price {
  font-family: var(--font-brute); font-size: 1.5rem; font-weight: 700;
  color: var(--white); letter-spacing: 0.03em; line-height: 1;
}
.listing-size {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--white);
  border: 1px solid var(--grey); padding: 0.1rem 0.35rem;
  line-height: 1.5; flex-shrink: 0;
}

/* condition on its own row */
.listing-cond {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--dim);
}

.listing-buy {
  display: block; width: calc(100% - 1.3rem); margin: 0.5rem 0.65rem 0.65rem;
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center; text-decoration: none;
  color: #000; background: var(--white);
  padding: 0.38rem 0; border-radius: 1px;
  transition: background 0.15s, color 0.15s;
}
.listing-buy:hover { background: var(--off-white); }

/* ── Status / footer ── */
.listings-status {
  width: 100%; max-width: 560px; font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2rem 0; text-align: center;
}
.footer {
  position: fixed; bottom: 1.2rem; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 0.55rem; color: var(--grey);
  letter-spacing: 0.12em; pointer-events: none;
}

/* ── Entrance animations ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.name-wrap { animation: fadeUp 0.7s ease both; }
.sub        { animation: fadeUp 0.7s ease 0.08s both; }
.links      { animation: fadeUp 0.7s ease 0.18s both; }
.player     { animation: fadeUp 0.7s ease 0.34s both; }