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

:root {
  --jp: "M PLUS Rounded 1c", ui-rounded, "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --lime: #86C83E;
  --swoosh: #1F5FD6;
  --navy: #0E2F77;
  --price-yellow: #FFE14D;
  --price-red: #D7141A;
  --paper: #FBF8F1;
  --shelf-h: 88px;            /* swatch row height incl. the picked card's lift */
}

/* ───────── Studio sweep backdrop ───────── */

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  background-color: #8d8780;
  background-image:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(30,24,20,.38) 100%),
    radial-gradient(70% 55% at 28% 20%, rgba(255,250,240,.20), transparent 70%),
    linear-gradient(to bottom, #7b766f 0%, #8f8a83 40%, #a29c94 62%, #938d86 82%, #857f78 100%);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #2A2622;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* Paper mottling (large soft blotches) + fine grain, blended into the sweep */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .45;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3 0 0 0 -1 3 0 0 0 -1 3 0 0 0 -1 0 0 0 0 .14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0045 0.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.7 0 0 0 .15 .7 0 0 0 .15 .7 0 0 0 .15 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 180px 180px, 1200px 1200px;
}

/* ───────── Canvas + fallback ───────── */

#pig {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  opacity: 0;
  transition: opacity .5s;
}
body[data-gl="ok"] #pig { opacity: 1; }
body[data-hover="on"] #pig { cursor: pointer; }

#pig-fallback {
  display: none;
  position: fixed;
  left: 50%;
  top: 44%;
  width: min(78vw, 70vh);
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: 50% 82%;
  transition: transform 90ms;
  z-index: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#pig-fallback.is-squish { transform: translate(-50%, -50%) scale(1.04, .94); }
body[data-gl="none"] #pig { display: none; }
body[data-gl="none"] #pig-fallback { display: block; }

/* toy switch: quick dip to the backdrop while the next shader comes up */
body[data-switching="1"] #pig,
body[data-switching="1"] #pig-fallback { opacity: 0; transition: opacity .12s; }

/* ───────── Hang tag ───────── */
/* B owns transform on #tag-rig and #tag-swing. Never set it here. */

#tag-rig {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 3;
}
body[data-gl="pending"] #tag-rig { visibility: hidden; }
body[data-tag="gone"] #tag-rig { display: none; }
body[data-toy="duck"] #tag-rig { display: none; }

#tag-loops {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;               /* loops thread over the card, into the holes */
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.18));
}
.loop {
  stroke: rgba(255,255,255,.6);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
}

#tag-swing {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  filter: drop-shadow(0 6px 8px rgba(30,20,10,.28));
}

#tag {
  position: absolute;
  left: calc(var(--tag-size, 120px) * -.5);
  top: calc(var(--tag-size, 120px) * .30);
  width: var(--tag-size, 120px);
  height: var(--tag-size, 120px);
  border-radius: 50%;
  border: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--jp);
  font-weight: 800;
  font-style: normal;
  color: #161616;
  user-select: none;
  -webkit-user-select: none;
  -webkit-appearance: none;
  appearance: none;
  /* printed card stock: fibre speckle over a soft key-light falloff */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .35' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .25 0 0 0 0 .02 -1.4 0 0 0 .72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 96px 96px,
    radial-gradient(circle at 35% 25%, #9ad655, var(--lime) 60%, #79b836);
  box-shadow: inset 0 0 0 1.5px rgba(40,80,10,.35);
  /* die-cut: two loop holes + hang slot */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 50a50 50 0 1 0 100 0a50 50 0 1 0-100 0Z M18.5 13a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0Z M74.5 13a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0Z M27.5 74h45a5.5 5.5 0 0 1 0 11h-45a5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 50a50 50 0 1 0 100 0a50 50 0 1 0-100 0Z M18.5 13a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0Z M74.5 13a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0Z M27.5 74h45a5.5 5.5 0 0 1 0 11h-45a5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}

.tag-swoosh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tag-kana,
.tag-name,
.tag-cta {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-style: normal;
}

.tag-kana {
  margin-top: 30%;
  color: #123F9A;
  font-size: calc(var(--tag-size, 120px) * .085);
  letter-spacing: .06em;
  line-height: 1.2;
  /* thin paper keyline so it lifts off the swoosh */
  text-shadow: 0 0 1px #fff, 0 0 2px rgba(255,255,255,.8);
}

.tag-name {
  --k: calc(var(--tag-size, 120px) * .009);
  --kd: calc(var(--tag-size, 120px) * .0064);
  color: #161616;
  font-size: calc(var(--tag-size, 120px) * .16);
  letter-spacing: -.01em;
  line-height: 1;
  /* white packaging keyline, like the print on the real tag */
  text-shadow:
    var(--k) 0 #fff, calc(var(--k) * -1) 0 #fff,
    0 var(--k) #fff, 0 calc(var(--k) * -1) #fff,
    var(--kd) var(--kd) #fff, calc(var(--kd) * -1) var(--kd) #fff,
    var(--kd) calc(var(--kd) * -1) #fff, calc(var(--kd) * -1) calc(var(--kd) * -1) #fff;
}

.tag-cta {
  margin-top: 4%;
  color: #fff;
  background: var(--navy);
  font-size: calc(var(--tag-size, 120px) * .072);
  letter-spacing: .03em;
  line-height: 1;
  padding: .32em .75em .38em;
  border-radius: 99px;
}
.cta-coarse { display: none; }
@media (hover: none) {
  .cta-fine { display: none; }
  .cta-coarse { display: inline; }
}

@media (hover: hover) {
  #tag:hover { transform: scale(1.03); }
}
#tag:active { transform: scale(.97); }
#tag:focus { outline: none; }
#tag:focus-visible { outline: 3px solid var(--swoosh); outline-offset: 4px; }
/* the die-cut mask clips #tag's own outline, so draw the focus ring on the swing */
#tag-swing:has(#tag:focus-visible)::before {
  content: "";
  position: absolute;
  left: calc(var(--tag-size, 120px) * -.5 - 7px);
  top: calc(var(--tag-size, 120px) * .30 - 7px);
  width: calc(var(--tag-size, 120px) + 14px);
  height: calc(var(--tag-size, 120px) + 14px);
  border: 3px solid var(--swoosh);
  border-radius: 50%;
  pointer-events: none;
}

/* locked hover/touch → flash the CTA */
body[data-tag="hint"] .tag-cta { animation: cta-flash .9s ease-out; }

@keyframes cta-flash {
  0%, 100% { background: var(--navy); color: #fff; transform: scale(1); }
  12%, 44% { background: var(--price-yellow); color: var(--navy); transform: scale(1.1); }
  28%      { background: var(--navy); color: #fff; transform: scale(1.04); }
}

/* tear-off */
body[data-tag="tearing"] #tag-loops { display: none; }
body[data-tag="tearing"] #tag {
  animation: tag-fall 900ms cubic-bezier(.45, 0, .9, .55) forwards;
  pointer-events: none;
}

@keyframes tag-fall {
  0%   { transform: translate(0, 0) rotate(0); }
  18%  { transform: translate(calc(var(--fall-dir, 1) * 14px), -26px) rotate(calc(var(--fall-dir, 1) * -8deg)); }
  100% { transform: translate(calc(var(--fall-dir, 1) * 90px), 115vh) rotate(calc(var(--fall-dir, 1) * var(--fall-spin, 240deg))); }
}
@keyframes tag-fade { to { opacity: 0; } }

/* no WebGL: tag hangs statically in front of the photo */
body[data-gl="none"] #tag-rig {
  left: 50%;
  top: calc(44% + min(78vw, 70vh) * .12);
}
body[data-gl="none"] #tag-loops { display: none; }

/* ───────── Price sticker ───────── */

#sticker {
  --s: 1;
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 4px);
  right: max(12px, env(safe-area-inset-right));
  min-width: 118px;
  z-index: 4;
  transform: rotate(-4deg) scale(var(--s));
  transform-origin: top right;
  color: var(--price-red);
  font-family: var(--jp);
  font-weight: 800;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* edge shadow follows the die-cut notches (box-shadow would be clipped by the mask) */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)) drop-shadow(0 2px 2.5px rgba(40,30,20,.18));
}
/* the sticker paper: glossy label stock with two die-cut notches */
#sticker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 5px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 38%),
    var(--price-yellow);
  box-shadow: inset 0 0 0 1px rgba(181,0,15,.18);
  -webkit-mask:
    radial-gradient(circle 4px at 0 58%, transparent 3.5px, #000 4px),
    radial-gradient(circle 4px at 100% 58%, transparent 3.5px, #000 4px);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle 4px at 0 58%, transparent 3.5px, #000 4px),
    radial-gradient(circle 4px at 100% 58%, transparent 3.5px, #000 4px);
          mask-composite: intersect;
}
.sticker-band {
  background: var(--price-red);
  color: #FFF6D0;
  font-size: 11px;
  letter-spacing: .14em;
  text-align: center;
  padding: 3px 0 2px .14em;
  border-radius: 5px 5px 0 0;
}
.sticker-count {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 34px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  padding: 2px 10px 0;
}
.sticker-unit {
  font-size: 15px;
  margin-left: 2px;
  letter-spacing: 0;
}
.sticker-foot {
  color: #B5000F;
  font-size: 9px;
  letter-spacing: .08em;
  text-align: center;
  padding: 1px 0 5px;
  border-top: 1px dashed rgba(215,20,26,.35);
  margin: 0 8px;
  padding-top: 3px;
}
#sticker.is-bump { animation: sticker-bump 160ms ease-out; }
@keyframes sticker-bump {
  40% { transform: rotate(-4deg) scale(calc(var(--s) * 1.08)); }
}

/* ───────── Share ───────── */

#share {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 4px + 100px);
  right: max(12px, env(safe-area-inset-right));
  z-index: 4;
  transform: rotate(2.5deg);
  transform-origin: 100% 50%;
  background: var(--paper);
  color: #1d1a17;
  border: 0;
  border-left: 4px solid var(--price-red);
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  padding: 0 14px;
  min-height: 40px;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
@media (hover: hover) {
  #share:hover { transform: rotate(0) translateY(-1px); box-shadow: 0 2px 3px rgba(0,0,0,.2); }
}
#share:active { transform: rotate(0) translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,.2); }
#share:focus { outline: none; }
#share:focus-visible { outline: 2px solid var(--swoosh); outline-offset: 3px; }

/* ───────── Toast + keyboard hint ───────── */

#toast,
#kbd-hint {
  position: fixed;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--shelf-h) + 14px);
  transform: translateX(-50%) rotate(-1deg);
  max-width: min(92vw, 360px);
  width: max-content;
  background: var(--paper);
  color: #2A2622;
  border-left: 4px solid var(--price-red);
  font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 8px 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
#toast { z-index: 5; }
#toast[data-show="1"] { opacity: 1; }

#kbd-hint {
  z-index: 2;
  transform: translateX(-50%) rotate(1deg);
}
#pig:focus-visible ~ #kbd-hint { opacity: 1; }
.for-duck { display: none; }
body[data-toy="duck"] .for-pig { display: none; }
body[data-toy="duck"] .for-duck { display: inline; }

/* ───────── Style picker: two blister cards on the peg ───────── */

#styles {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.styles-label {
  align-self: center;
  margin-right: 2px;
  font: 800 13px/1 var(--jp);
  letter-spacing: .02em;
  color: #FBF8F1;
  text-shadow: 0 1px 1px rgba(30,24,20,.45);
  user-select: none;
  -webkit-user-select: none;
}

.swatch {
  --r: 0deg;
  position: relative;
  isolation: isolate;
  width: 64px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 0;
  border: 0;
  background: none;
  color: #2A2622;
  font: 800 12px/1 var(--jp);
  letter-spacing: .03em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transform: rotate(var(--r));
  transform-origin: 50% 7px;          /* swings from its hang hole */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.16)) drop-shadow(0 3px 3px rgba(40,30,20,.20));
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.swatch[data-toy="pig"]  { --r: -3deg; }
.swatch[data-toy="duck"] { --r: 2.5deg; }

/* backing card: printed stock with a punched hang hole */
.swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background:
    linear-gradient(170deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%),
    #ECE7DC;
  box-shadow: inset 0 0 0 1px rgba(60,50,40,.14);
  -webkit-mask: radial-gradient(circle 4px at 50% 7px, transparent 3.4px, #000 4px);
          mask: radial-gradient(circle 4px at 50% 7px, transparent 3.4px, #000 4px);
}
.swatch img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: saturate(.7) brightness(.96);
  opacity: .8;
  transition: filter .2s, opacity .2s;
}
.swatch span {
  align-self: stretch;
  margin-top: auto;
  padding: 5px 0 6px;
  text-align: center;
  border-radius: 0 0 4px 4px;
}

/* picked: becomes the yellow price label with the red band */
.swatch[aria-pressed="true"] {
  --r: 0deg;
  color: #FFF6D0;
  transform: translateY(-4px);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)) drop-shadow(0 6px 5px rgba(40,30,20,.26));
}
.swatch[aria-pressed="true"]::before {
  background:
    linear-gradient(165deg, rgba(255,255,255,.45), rgba(255,255,255,0) 40%),
    var(--price-yellow);
  box-shadow: inset 0 0 0 1px rgba(181,0,15,.22);
}
.swatch[aria-pressed="true"] img { filter: none; opacity: 1; }
.swatch[aria-pressed="true"] span { background: var(--price-red); }

@media (hover: hover) {
  .swatch[aria-pressed="false"]:hover { transform: rotate(0) translateY(-2px); }
  .swatch[aria-pressed="false"]:hover img { filter: none; opacity: 1; }
}
.swatch:active { transform: translateY(1px); }
.swatch:focus { outline: none; }
.swatch:focus-visible { outline: 2px solid var(--swoosh); outline-offset: 3px; border-radius: 4px; }

/* desktop + short landscape: the pig's tag swings through bottom-centre, so park the cards bottom-left */
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  #styles {
    left: max(20px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: none;
  }
  #toast, #kbd-hint { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 6px); }
}
/* short landscape: the tag reaches the bottom edge, so toasts sit bottom-right */
@media (orientation: landscape) and (max-height: 520px) {
  #toast, #kbd-hint {
    left: auto;
    right: max(16px, env(safe-area-inset-right));
    transform: rotate(-1deg);
  }
}

/* ───────── Desktop ───────── */

@media (min-width: 900px) {
  #sticker { --s: 1.2; }
  #share { top: calc(max(12px, env(safe-area-inset-top)) + 4px + 130px); }
}

/* ───────── Reduced motion ───────── */

@media (prefers-reduced-motion: reduce) {
  #pig { transition: none; }
  #tag { transition: none; }
  #sticker.is-bump { animation: none; }
  body[data-tag="tearing"] #tag { animation: tag-fade 250ms ease-out forwards; }
  #pig-fallback { transition: none; }
  body[data-switching="1"] #pig,
  body[data-switching="1"] #pig-fallback { transition: none; }
  .swatch, .swatch img { transition: none; }
}