/* tokens, sampled straight off the approved avatar's own pink field */
@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/anton-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --pink: #ff0087;
  --paper: #f2e9d8;
  --ink: #c81f1f;
  --wire: #1a1a1a;
  --display: 'Anton', Impact, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--pink);
}

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

.sign-wrap {
  position: relative;
  width: clamp(240px, 46vmin, 560px);
  aspect-ratio: 674 / 779;
  transform-origin: 59% 80%;
  translate: -10.5% 8.4%;
  cursor: pointer;
}

.sign-wrap.sway {
  animation: sway 1.4s cubic-bezier(.36,.07,.19,.97);
}

@keyframes sway {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-3.5deg); }
  35%  { transform: rotate(3deg); }
  55%  { transform: rotate(-2deg); }
  75%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

.sign {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.tag {
  position: absolute;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(9px, 1.5vmin, 13px);
  color: var(--wire);
  background: var(--paper);
  border: none;
  padding: 5px 9px;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: clamp(70px, 30vw, 220px);
  text-align: center;
}

.tag::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--wire);
}

.tag-ca {
  color: var(--ink);
}

.sound-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(242,233,216,0.5);
  padding: 6px 10px;
  cursor: pointer;
}

.sound-toggle[aria-pressed="true"] {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--ink);
}

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