/* design tokens, sampled off the approved avatar (PIL pixel probe of the studio backdrop + tie silk) */
:root {
  --bg: #726858;          /* dingy studio grey, sampled off the avatar's own backdrop */
  --bg-dark: #4f4839;      /* deeper corner shadow tone, same photo */
  --red: #c11c2b;          /* tie silk red */
  --kraft: #ddd0aa;        /* price-tag cardboard */
  --kraft-line: #8c7a4e;   /* tag rule lines */
  --ink: #2a2116;          /* tag ink */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 20px;
}

@font-face {
  font-family: 'Oswald';
  src: url('assets/fonts/oswald-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('assets/fonts/oswald-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cutive Mono';
  src: url('assets/fonts/cutive-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--bg) 0%, var(--bg-dark) 100%);
}

.stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tie {
  height: 100dvh;
  width: auto;
  max-width: 100vw;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.tag {
  position: absolute;
  top: 58%;
  left: 61%;
  transform: translate(-50%, -50%) rotate(-7deg);
  transform-origin: 20% 0%;
  background: var(--kraft);
  color: var(--ink);
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 6px);
  clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
  box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: clamp(150px, 26vw, 220px);
  animation: tag-sway 6s ease-in-out infinite;
}

.tag-clip {
  position: absolute;
  left: -3px;
  top: -14px;
  width: 4px;
  height: 22px;
  background: linear-gradient(to bottom, #33302a, #17130f);
  border-radius: 2px;
  transform: rotate(18deg);
}

.tag-ticker {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  letter-spacing: 0.02em;
  color: var(--red);
  text-transform: uppercase;
}

.tag-line {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 500;
  font-size: clamp(0.6rem, 1.15vw, 0.72rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-top: 1px solid var(--kraft-line);
  padding-top: 3px;
  width: 100%;
}

.ca {
  appearance: none;
  border: 1px dashed var(--kraft-line);
  background: rgba(255, 255, 255, 0.25);
  color: var(--ink);
  font-family: 'Cutive Mono', ui-monospace, 'SF Mono', monospace;
  font-size: clamp(0.55rem, 1.05vw, 0.68rem);
  padding: 4px 6px;
  margin-top: 4px;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.3;
}

.ca:hover { background: rgba(255, 255, 255, 0.4); }
.ca:active { transform: translateY(1px); }
.ca.copied::after {
  content: ' copied';
  color: var(--red);
}

@keyframes tag-sway {
  0%, 100% { transform: translate(-50%, -50%) rotate(-7deg); }
  50% { transform: translate(-50%, -50%) rotate(-4.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tag { animation: none; }
}

@media (max-width: 480px) {
  .tag {
    top: 60%;
    left: 66%;
    padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--space-2) + 6px);
    min-width: clamp(130px, 46vw, 190px);
  }
}