:root {
  --ink: #24302f;
  --muted: #66706d;
  --paper: #fbf7ed;
  --panel: #fffef9;
  --line: #d8d0c2;
  --teal: #2d7f86;
  --teal-dark: #1f5f66;
  --coral: #e96656;
  --gold: #f1bd46;
  --leaf: #6f9d4b;
  --plum: #5b416f;
  --blue: #4a7fb3;
  --cream: #fff6d7;
  --shadow: 0 16px 34px rgba(38, 34, 28, .13);
  --stage-a: #d7f3ff;
  --stage-b: #fff2b8;
  --stage-c: #4a7fb3;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(45, 127, 134, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(233, 102, 86, .06) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button,
input {
  font: inherit;
}

button {
  touch-action: manipulation;
}

.app-shell {
  display: grid;
  gap: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-block > div:last-child {
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  color: var(--panel);
  background: linear-gradient(135deg, var(--teal), var(--coral));
  box-shadow: 5px 5px 0 var(--gold);
}

.brand-mark .css-icon {
  width: 30px;
  height: 30px;
}

.css-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.css-icon::before,
.css-icon::after {
  position: absolute;
  content: "";
  box-sizing: border-box;
}

.icon-paw {
  background:
    radial-gradient(circle at 50% 68%, currentColor 0 6px, transparent 7px),
    radial-gradient(circle at 24% 42%, currentColor 0 4px, transparent 5px),
    radial-gradient(circle at 42% 30%, currentColor 0 4px, transparent 5px),
    radial-gradient(circle at 60% 30%, currentColor 0 4px, transparent 5px),
    radial-gradient(circle at 78% 42%, currentColor 0 4px, transparent 5px);
}

.icon-shirt::before {
  inset: 3px 2px 1px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 2px 2px 4px 4px;
  clip-path: polygon(28% 0, 40% 18%, 60% 18%, 72% 0, 100% 18%, 82% 42%, 72% 32%, 72% 100%, 28% 100%, 28% 32%, 18% 42%, 0 18%);
}

.icon-game::before {
  left: 1px;
  right: 1px;
  top: 7px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.icon-game::after {
  left: 6px;
  top: 10px;
  width: 8px;
  height: 8px;
  background:
    linear-gradient(currentColor, currentColor) center / 8px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 8px no-repeat;
  box-shadow: 8px 1px 0 -3px currentColor, 12px 4px 0 -3px currentColor;
}

.icon-trophy::before {
  left: 5px;
  top: 2px;
  width: 10px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 2px 2px 6px 6px;
}

.icon-trophy::after {
  left: 3px;
  top: 5px;
  width: 14px;
  height: 17px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  clip-path: polygon(0 0, 28% 0, 28% 55%, 42% 55%, 42% 76%, 15% 76%, 15% 100%, 85% 100%, 85% 76%, 58% 76%, 58% 55%, 72% 55%, 72% 0, 100% 0, 100% 34%, 76% 50%, 24% 50%, 0 34%);
}

.icon-camera::before {
  left: 2px;
  top: 7px;
  width: 16px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.icon-camera::after {
  left: 7px;
  top: 10px;
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: -3px -7px 0 -2px currentColor;
}

.icon-reset::before {
  left: 2px;
  top: 3px;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.icon-reset::after {
  right: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(8deg);
}

.icon-play::before {
  left: 6px;
  top: 3px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}

.icon-lock::before {
  left: 4px;
  top: 9px;
  width: 12px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.icon-lock::after {
  left: 7px;
  top: 2px;
  width: 7px;
  height: 10px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.brand-block h1 {
  font-size: 1.45rem;
  line-height: 1.1;
}

.brand-block p {
  margin-top: 4px;
  color: var(--muted);
  font-size: .92rem;
}

.wallet {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 8px;
  width: min(100%, 390px);
}

.wallet-item {
  min-height: 54px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.wallet-item span,
.theme-strip span,
.pet-summary span,
.score-preview span,
.mini-stats span,
.show-panel span,
.result-scores span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.wallet-item strong {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
  line-height: 1;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(340px, 510px) minmax(390px, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 0;
}

.stage-panel,
.control-panel {
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 254, 249, .96);
  box-shadow: var(--shadow);
}

.stage-panel {
  display: grid;
  grid-template-rows: auto minmax(330px, 1fr) auto auto;
  gap: 12px;
  padding: 14px;
}

.theme-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--cream);
}

.theme-strip strong {
  display: block;
  margin-top: 3px;
  font-size: 1.25rem;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 3px 3px 0 rgba(36, 48, 47, .16);
  cursor: pointer;
}

.icon-button .css-icon,
.primary-button .css-icon,
.secondary-button .css-icon,
.tab-button .css-icon {
  width: 20px;
  height: 20px;
}

.icon-button:hover,
.primary-button:hover,
.secondary-button:hover,
.tab-button:hover {
  transform: translateY(-1px);
}

.icon-button:active,
.primary-button:active,
.secondary-button:active,
.tab-button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.pet-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 330px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--stage-a) 0%, var(--stage-b) 72%, var(--stage-c) 72% 100%);
}

.sky-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    radial-gradient(circle at 16% 17%, rgba(255, 255, 255, .9) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 21%, rgba(255, 255, 255, .8) 0 6px, transparent 7px),
    radial-gradient(circle at 58% 9%, rgba(255, 255, 255, .85) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, .75) 0 5px, transparent 6px);
}

.parade-road {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 27%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .38) 0 34px, transparent 34px 68px),
    rgba(36, 48, 47, .12);
}

.parade-road::before {
  position: absolute;
  content: "";
  left: 8%;
  right: 8%;
  top: 44%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

.pet-shadow {
  position: absolute;
  bottom: 15%;
  width: 48%;
  height: 28px;
  border-radius: 50%;
  background: rgba(36, 48, 47, .2);
  filter: blur(2px);
}

.pet-art {
  position: relative;
  z-index: 2;
  width: min(86%, 390px);
  aspect-ratio: 1;
}

.pet-css {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 0 rgba(36, 48, 47, .1));
  --pet-color: #c9824f;
  --pet-accent: #6d442d;
  --pet-detail: #fff1cf;
}

.pet-css *,
.pet-css *::before,
.pet-css *::after {
  box-sizing: border-box;
}

.pet-css > span,
.pet-css .outfit-back,
.pet-css .outfit-front,
.pet-css .hat,
.pet-css .accessory {
  position: absolute;
  display: block;
}

.pet-css .body,
.pet-css .head,
.pet-css .ear,
.pet-css .tail,
.pet-css .leg,
.pet-css .muzzle,
.pet-css .detail-mark,
.pet-css .wing,
.pet-css .outfit-back,
.pet-css .outfit-front,
.pet-css .hat,
.pet-css .accessory {
  border: 5px solid var(--ink);
}

.pet-css .body {
  left: 27%;
  top: 56%;
  width: 48%;
  height: 30%;
  border-radius: 48% 52% 42% 45%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .3) 0 9%, transparent 10%),
    var(--pet-color);
  z-index: 4;
}

.pet-css .wing,
.pet-css .detail-mark {
  display: none;
}

.pet-css .head {
  left: 31%;
  top: 28%;
  width: 39%;
  height: 39%;
  border-radius: 48%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 255, 255, .26) 0 9%, transparent 10%),
    var(--pet-color);
  z-index: 6;
}

.pet-css .ear.left {
  left: 24%;
  top: 28%;
  width: 15%;
  height: 26%;
  border-radius: 70% 45% 54% 48%;
  background: var(--pet-accent);
  transform: rotate(-24deg);
  z-index: 5;
}

.pet-css .ear.right {
  right: 24%;
  top: 28%;
  width: 15%;
  height: 26%;
  border-radius: 45% 70% 48% 54%;
  background: var(--pet-accent);
  transform: rotate(24deg);
  z-index: 5;
}

.pet-css .tail {
  right: 17%;
  top: 55%;
  width: 24%;
  height: 18%;
  border-radius: 20% 80% 60% 30%;
  background: var(--pet-accent);
  transform: rotate(-12deg);
  z-index: 3;
}

.pet-css .leg {
  top: 77%;
  width: 14%;
  height: 20%;
  border-radius: 45% 45% 38% 38%;
  background: var(--pet-color);
  z-index: 5;
}

.pet-css .leg.left {
  left: 31%;
}

.pet-css .leg.right {
  right: 31%;
}

.pet-css .muzzle {
  left: 40%;
  top: 47%;
  width: 21%;
  height: 16%;
  border-width: 4px;
  border-radius: 50%;
  background: var(--pet-detail);
  z-index: 8;
}

.pet-css .eye {
  position: absolute;
  top: 42%;
  width: 6.5%;
  height: 8.5%;
  border-radius: 50%;
  background: var(--ink);
  z-index: 9;
}

.pet-css .eye.left {
  left: 40%;
}

.pet-css .eye.right {
  right: 40%;
}

.pet-css .eye::after {
  position: absolute;
  content: "";
  left: 24%;
  top: 18%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: #fff;
}

.pet-css .nose {
  position: absolute;
  left: 47%;
  top: 52%;
  width: 7%;
  height: 6%;
  border: 4px solid var(--ink);
  border-radius: 48% 48% 58% 58%;
  background: var(--pet-accent);
  z-index: 10;
}

.pet-css .mouth {
  position: absolute;
  left: 44%;
  top: 58%;
  width: 13%;
  height: 8%;
  border-bottom: 4px solid var(--ink);
  border-radius: 0 0 50% 50%;
  z-index: 10;
}

.pet-kitten .body {
  top: 57%;
  border-radius: 46% 48% 44% 44%;
}

.pet-kitten .ear {
  width: 18%;
  height: 19%;
  border-radius: 8px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--pet-color);
}

.pet-kitten .ear.left {
  left: 25%;
  top: 22%;
  transform: rotate(-17deg);
}

.pet-kitten .ear.right {
  right: 25%;
  top: 22%;
  transform: rotate(17deg);
}

.pet-kitten .detail-mark {
  display: block;
  left: 47%;
  top: 29%;
  width: 6%;
  height: 16%;
  border-width: 0;
  border-radius: 0 0 50% 50%;
  background: var(--pet-accent);
  z-index: 8;
}

.pet-kitten .tail {
  right: 9%;
  top: 53%;
  width: 28%;
  height: 25%;
  border-radius: 50%;
  background: transparent;
  border-left-color: transparent;
  border-bottom-color: var(--pet-accent);
  border-top-color: var(--pet-accent);
  border-right-color: var(--pet-accent);
  transform: rotate(18deg);
}

.pet-bunny .body {
  left: 28%;
  top: 58%;
  width: 46%;
  height: 31%;
  border-radius: 52% 52% 44% 44%;
}

.pet-bunny .head {
  top: 31%;
}

.pet-bunny .ear {
  width: 15%;
  height: 42%;
  background:
    linear-gradient(var(--pet-accent), var(--pet-accent)) center / 42% 78% no-repeat,
    var(--pet-color);
  z-index: 4;
}

.pet-bunny .ear.left {
  left: 33%;
  top: 2%;
  transform: rotate(-10deg);
}

.pet-bunny .ear.right {
  right: 33%;
  top: 2%;
  transform: rotate(10deg);
}

.pet-bunny .tail {
  right: 21%;
  top: 62%;
  width: 14%;
  height: 14%;
  border-radius: 50%;
  background: var(--pet-detail);
}

.pet-bunny .leg {
  top: 80%;
  width: 20%;
  height: 14%;
  background: var(--pet-detail);
}

.pet-bunny .leg.left {
  left: 26%;
}

.pet-bunny .leg.right {
  right: 26%;
}

.pet-slime .ear,
.pet-slime .tail,
.pet-slime .leg,
.pet-slime .muzzle {
  display: none;
}

.pet-slime .body {
  left: 22%;
  top: 42%;
  width: 60%;
  height: 45%;
  border-radius: 55% 48% 38% 42%;
  background:
    radial-gradient(ellipse at 34% 22%, rgba(255, 255, 255, .62) 0 10%, transparent 11%),
    radial-gradient(ellipse at 50% 82%, rgba(45, 127, 134, .32) 0 42%, transparent 43%),
    var(--pet-color);
  z-index: 5;
}

.pet-slime .head {
  display: none;
}

.pet-slime .eye {
  top: 55%;
}

.pet-slime .eye.left {
  left: 38%;
}

.pet-slime .eye.right {
  right: 35%;
}

.pet-slime .nose {
  display: none;
}

.pet-slime .mouth {
  left: 43%;
  top: 65%;
  width: 19%;
  z-index: 10;
}

.pet-dragon .wing {
  display: block;
  top: 44%;
  width: 28%;
  height: 28%;
  border-radius: 12% 70% 18% 62%;
  background: var(--pet-accent);
  z-index: 2;
}

.pet-dragon .wing.left {
  left: 6%;
  clip-path: polygon(100% 24%, 8% 0, 24% 45%, 0 74%, 100% 92%);
}

.pet-dragon .wing.right {
  right: 6%;
  clip-path: polygon(0 24%, 92% 0, 76% 45%, 100% 74%, 0 92%);
}

.pet-dragon .ear {
  width: 14%;
  height: 15%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 5px;
  background: var(--pet-detail);
}

.pet-dragon .ear.left {
  left: 32%;
  top: 20%;
  transform: rotate(-15deg);
}

.pet-dragon .ear.right {
  right: 32%;
  top: 20%;
  transform: rotate(15deg);
}

.pet-dragon .tail {
  right: 10%;
  top: 64%;
  width: 32%;
  height: 17%;
  border-radius: 60% 20% 50% 30%;
  transform: rotate(20deg);
}

.pet-dragon .detail-mark {
  display: block;
  left: 47%;
  top: 64%;
  width: 7%;
  height: 7%;
  border-width: 0;
  background: var(--pet-detail);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 8;
}

.outfit-back {
  left: 28%;
  top: 47%;
  width: 46%;
  height: 48%;
  border-radius: 34% 34% 48% 48%;
  opacity: .98;
  z-index: 1;
}

.outfit-back.galaxy-cape {
  background:
    radial-gradient(circle at 28% 36%, #fff6d7 0 3px, transparent 4px),
    radial-gradient(circle at 70% 62%, #fff6d7 0 4px, transparent 5px),
    radial-gradient(circle at 52% 82%, #fff6d7 0 3px, transparent 4px),
    #1f2f58;
}

.outfit-back.velvet-cape {
  background:
    linear-gradient(90deg, transparent 0 46%, #f1bd46 46% 54%, transparent 54%),
    #704567;
}

.outfit-back.bat-wings {
  left: 12%;
  top: 48%;
  width: 76%;
  height: 30%;
  border: 0;
  background: transparent;
}

.outfit-back.bat-wings::before,
.outfit-back.bat-wings::after {
  position: absolute;
  content: "";
  top: 0;
  width: 42%;
  height: 100%;
  border: 5px solid var(--ink);
  background: #4a3759;
}

.outfit-back.bat-wings::before {
  left: 0;
  clip-path: polygon(100% 20%, 0 0, 18% 42%, 0 74%, 100% 100%);
}

.outfit-back.bat-wings::after {
  right: 0;
  clip-path: polygon(0 20%, 100% 0, 82% 42%, 100% 74%, 0 100%);
}

.outfit-front {
  left: 31%;
  top: 59%;
  width: 43%;
  height: 29%;
  z-index: 7;
}

.outfit-front.parade-sash {
  border: 0;
  background:
    linear-gradient(43deg, transparent 0 42%, #fff6d7 42% 46%, #f1bd46 46% 56%, #fff6d7 56% 60%, transparent 60%);
}

.outfit-front.rainbow-vest,
.outfit-front.plaid-jacket {
  border-radius: 22% 22% 35% 35%;
}

.outfit-front.rainbow-vest {
  background:
    linear-gradient(90deg, #e96656 0 25%, #f1bd46 25% 50%, #79d3d6 50% 75%, #4a7fb3 75%);
}

.outfit-front.plaid-jacket {
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(255, 246, 215, .9) 22% 25%, transparent 25% 48%, rgba(255, 246, 215, .9) 48% 52%, transparent 52% 75%, rgba(255, 246, 215, .9) 75% 78%, transparent 78%),
    linear-gradient(0deg, transparent 0 32%, #f1bd46 32% 37%, transparent 37% 66%, #f1bd46 66% 71%, transparent 71%),
    #53754a;
}

.outfit-front.galaxy-cape,
.outfit-front.velvet-cape {
  left: 36%;
  top: 57%;
  width: 32%;
  height: 14%;
  border-radius: 40% 40% 55% 55%;
  background: #fff6d7;
}

.outfit-front.bat-wings {
  left: 46%;
  top: 61%;
  width: 9%;
  height: 9%;
  border-radius: 50%;
  background: #b8e38e;
}

.hat {
  z-index: 12;
}

.hat.sunny-bow {
  left: 32%;
  top: 19%;
  width: 37%;
  height: 18%;
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, #f1bd46 0 14%, transparent 15%),
    linear-gradient(35deg, transparent 0 16%, #e96656 16% 43%, transparent 43%),
    linear-gradient(-35deg, transparent 57%, #e96656 57% 84%, transparent 84%);
}

.hat.star-helmet {
  left: 23%;
  top: 14%;
  width: 54%;
  height: 54%;
  border-radius: 50%;
  border-color: #bfeaff;
  background: rgba(210, 245, 255, .33);
}

.hat.star-helmet::before {
  position: absolute;
  content: "";
  left: 48%;
  top: -34%;
  width: 5px;
  height: 34%;
  background: var(--ink);
}

.hat.star-helmet::after {
  position: absolute;
  content: "";
  left: 40%;
  top: -45%;
  width: 22%;
  height: 22%;
  border: 4px solid var(--ink);
  background: #f1bd46;
  clip-path: polygon(50% 0, 62% 34%, 100% 36%, 70% 58%, 80% 100%, 50% 76%, 20% 100%, 30% 58%, 0 36%, 38% 34%);
}

.hat.tiny-crown {
  left: 34%;
  top: 18%;
  width: 32%;
  height: 21%;
  background: #f1bd46;
  clip-path: polygon(0 100%, 8% 34%, 28% 66%, 50% 12%, 72% 66%, 92% 34%, 100% 100%);
}

.hat.school-cap {
  left: 30%;
  top: 20%;
  width: 41%;
  height: 22%;
  border: 0;
  background:
    linear-gradient(#2d7f86, #2d7f86) 20% 68% / 60% 36% no-repeat;
}

.hat.school-cap::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 57%;
  border: 5px solid var(--ink);
  background: #2d7f86;
  clip-path: polygon(50% 0, 100% 68%, 50% 100%, 0 68%);
}

.hat.school-cap::after {
  position: absolute;
  content: "";
  right: 7%;
  top: 48%;
  width: 4px;
  height: 42%;
  background: var(--ink);
  box-shadow: 0 17px 0 2px #f1bd46;
}

.hat.monster-horns {
  left: 31%;
  top: 10%;
  width: 39%;
  height: 23%;
  border: 0;
}

.hat.monster-horns::before,
.hat.monster-horns::after {
  position: absolute;
  content: "";
  top: 0;
  width: 36%;
  height: 100%;
  border: 5px solid var(--ink);
  background: #b8e38e;
}

.hat.monster-horns::before {
  left: 0;
  border-radius: 80% 20% 55% 35%;
  clip-path: polygon(100% 100%, 0 0, 20% 95%);
}

.hat.monster-horns::after {
  right: 0;
  border-radius: 20% 80% 35% 55%;
  clip-path: polygon(0 100%, 100% 0, 80% 95%);
}

.accessory {
  z-index: 13;
}

.accessory.treat-pouch {
  left: 66%;
  top: 65%;
  width: 15%;
  height: 17%;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 68%, #f1bd46 0 16%, transparent 17%),
    linear-gradient(#fff6d7, #fff6d7) center 28% / 68% 10% no-repeat,
    #c9824f;
}

.accessory.moon-wand {
  left: 67%;
  top: 43%;
  width: 26%;
  height: 30%;
  border: 0;
  background: linear-gradient(135deg, transparent 0 48%, #fff6d7 48% 55%, transparent 55%);
}

.accessory.moon-wand::after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 45%;
  height: 45%;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: #bfeaff;
  box-shadow: inset -10px 0 0 #fff6d7;
}

.accessory.pearl-collar {
  left: 36%;
  top: 55%;
  width: 32%;
  height: 18%;
  border: 0;
  border-bottom: 9px dotted #fff0c9;
  border-radius: 0 0 50% 50%;
}

.accessory.pearl-collar::after {
  position: absolute;
  content: "";
  left: 42%;
  top: 58%;
  width: 18%;
  height: 32%;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #f1bd46;
}

.accessory.prism-spinner {
  left: 67%;
  top: 59%;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background:
    conic-gradient(#e96656, #f1bd46, #79d3d6, #4a7fb3, #e96656);
}

.accessory.prism-spinner::after {
  position: absolute;
  content: "";
  left: 35%;
  top: 35%;
  width: 30%;
  height: 30%;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff6d7;
}

.accessory.notebook-badge {
  left: 66%;
  top: 61%;
  width: 15%;
  height: 19%;
  border-radius: 7px;
  background:
    linear-gradient(#4a7fb3, #4a7fb3) 50% 28% / 65% 8% no-repeat,
    linear-gradient(#4a7fb3, #4a7fb3) 50% 50% / 65% 8% no-repeat,
    linear-gradient(#4a7fb3, #4a7fb3) 35% 72% / 35% 8% no-repeat,
    #fff6d7;
}

.accessory.candy-mask {
  left: 33%;
  top: 39%;
  width: 36%;
  height: 18%;
  border-radius: 42%;
  background:
    radial-gradient(ellipse at 32% 52%, #fff6d7 0 16%, transparent 17%),
    radial-gradient(ellipse at 68% 52%, #fff6d7 0 16%, transparent 17%),
    #e96656;
}

.pet-stage {
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, .2),
    inset 0 -28px 0 rgba(36, 48, 47, .08);
  isolation: isolate;
}

.pet-stage::before,
.pet-stage::after,
.sky-dots::before,
.sky-dots::after,
.parade-road::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.pet-stage::before {
  left: 5%;
  right: 5%;
  top: 4%;
  z-index: 0;
  height: 14%;
  border-top: 5px solid rgba(36, 48, 47, .22);
  background:
    radial-gradient(circle at 10% 38%, var(--gold) 0 7px, var(--ink) 8px 10px, transparent 11px),
    radial-gradient(circle at 28% 16%, #fff6d7 0 6px, var(--ink) 7px 9px, transparent 10px),
    radial-gradient(circle at 48% 34%, var(--coral) 0 7px, var(--ink) 8px 10px, transparent 11px),
    radial-gradient(circle at 68% 16%, #fff6d7 0 6px, var(--ink) 7px 9px, transparent 10px),
    radial-gradient(circle at 90% 38%, var(--gold) 0 7px, var(--ink) 8px 10px, transparent 11px);
  opacity: .9;
}

.pet-stage::after {
  left: 0;
  right: 0;
  bottom: 20%;
  z-index: 0;
  height: 20%;
  background:
    linear-gradient(90deg, rgba(36, 48, 47, .08) 0 9%, transparent 9% 91%, rgba(36, 48, 47, .08) 91%),
    radial-gradient(ellipse at 16% 88%, rgba(255, 255, 255, .4) 0 14%, transparent 15%),
    radial-gradient(ellipse at 84% 88%, rgba(255, 255, 255, .4) 0 14%, transparent 15%);
}

.sky-dots {
  z-index: 0;
}

.sky-dots::before {
  left: 10%;
  top: 16%;
  width: 16%;
  height: 16%;
  border: 4px solid rgba(36, 48, 47, .2);
  border-radius: 50%;
  background: rgba(255, 246, 215, .55);
  box-shadow:
    230px 34px 0 -13px rgba(255, 246, 215, .65),
    118px -20px 0 -14px rgba(255, 255, 255, .85);
}

.sky-dots::after {
  right: 10%;
  top: 10%;
  width: 14%;
  height: 7%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  box-shadow:
    -190px 48px 0 2px rgba(255, 255, 255, .34),
    -92px 8px 0 -8px rgba(255, 255, 255, .8);
}

.parade-road {
  z-index: 1;
  border-top: 5px solid rgba(36, 48, 47, .72);
  background:
    linear-gradient(0deg, rgba(36, 48, 47, .15), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .42) 0 34px, transparent 34px 68px),
    repeating-linear-gradient(90deg, #31586b 0 34px, #8ea5af 34px 68px);
}

.parade-road::after {
  left: 0;
  right: 0;
  top: 10%;
  height: 24%;
  background:
    radial-gradient(ellipse at 14% 80%, rgba(255, 255, 255, .3) 0 17%, transparent 18%),
    radial-gradient(ellipse at 72% 50%, rgba(255, 255, 255, .24) 0 20%, transparent 21%);
}

.pet-stage[data-theme="space"] {
  background:
    radial-gradient(circle at 80% 21%, #f9f0a7 0 12px, transparent 13px),
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, .9) 0 3px, transparent 4px),
    linear-gradient(180deg, #273866 0%, #46698f 65%, #263f52 65% 100%);
}

.pet-stage[data-theme="space"] .sky-dots::before {
  left: 12%;
  top: 18%;
  width: 17%;
  height: 17%;
  border-color: rgba(255, 246, 215, .85);
  background:
    radial-gradient(circle at 35% 34%, rgba(255, 255, 255, .55) 0 10%, transparent 11%),
    #7680c8;
  box-shadow:
    180px 18px 0 -10px #9ad5e8,
    92px -22px 0 -15px #fff6d7;
}

.pet-stage[data-theme="space"] .sky-dots::after {
  width: 18%;
  height: 5%;
  border: 3px solid rgba(255, 246, 215, .85);
  border-left-color: transparent;
  border-right-color: transparent;
  background: transparent;
  transform: rotate(-14deg);
  box-shadow: none;
}

.pet-stage[data-theme="royal"] {
  background:
    linear-gradient(90deg, rgba(112, 69, 103, .34) 0 12%, transparent 12% 88%, rgba(112, 69, 103, .34) 88%),
    radial-gradient(ellipse at 50% 76%, rgba(255, 246, 215, .7) 0 24%, transparent 25%),
    linear-gradient(180deg, #7e5275 0%, #f5db99 70%, #725042 70% 100%);
}

.pet-stage[data-theme="royal"] .sky-dots::before {
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 0 33%, #f1bd46 33% 66%, transparent 66%),
    #704567;
  box-shadow: 210px 16px 0 -12px #f1bd46;
}

.pet-stage[data-theme="rainbow"] {
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 35%, rgba(255, 255, 255, .52) 36% 39%, transparent 40%),
    conic-gradient(from 220deg at 50% 62%, #e96656, #f1bd46, #79d3d6, #4a7fb3, transparent 34%),
    linear-gradient(180deg, #87d8ef 0%, #fff4b0 70%, #3f7182 70% 100%);
}

.pet-stage[data-theme="school"] {
  background:
    linear-gradient(90deg, rgba(255, 246, 215, .5) 0 22%, transparent 22% 78%, rgba(255, 246, 215, .5) 78%),
    repeating-linear-gradient(0deg, rgba(36, 48, 47, .06) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, #d7eef1 0%, #fff6d7 70%, #53754a 70% 100%);
}

.pet-stage[data-theme="monster"] {
  background:
    radial-gradient(circle at 20% 29%, rgba(184, 227, 142, .95) 0 7px, var(--ink) 8px 10px, transparent 11px),
    radial-gradient(circle at 84% 24%, rgba(184, 227, 142, .95) 0 8px, var(--ink) 9px 11px, transparent 12px),
    linear-gradient(180deg, #4a3759 0%, #8fae7a 70%, #4c3946 70% 100%);
}

.pet-shadow {
  z-index: 1;
  width: 55%;
  height: 34px;
  background:
    radial-gradient(ellipse at center, rgba(36, 48, 47, .28) 0 62%, transparent 63%);
  filter: blur(3px);
}

.pet-css {
  animation: petIdle 2.6s ease-in-out infinite;
  transform-origin: 50% 78%;
}

@keyframes petIdle {
  0%, 100% {
    transform: translateY(0) rotate(-.4deg);
  }
  50% {
    transform: translateY(-5px) rotate(.4deg);
  }
}

.pet-css .body,
.pet-css .head,
.pet-css .ear,
.pet-css .tail,
.pet-css .leg,
.pet-css .belly,
.pet-css .paw,
.pet-css .face-patch,
.pet-css .cheek,
.pet-css .brow,
.pet-css .sparkle-mark {
  position: absolute;
}

.pet-css .body {
  background:
    radial-gradient(ellipse at 32% 22%, rgba(255, 255, 255, .42) 0 10%, transparent 11%),
    radial-gradient(ellipse at 74% 79%, rgba(36, 48, 47, .16) 0 23%, transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(36, 48, 47, .08)),
    var(--pet-color);
}

.pet-css .head {
  background:
    radial-gradient(ellipse at 31% 24%, rgba(255, 255, 255, .42) 0 10%, transparent 11%),
    radial-gradient(ellipse at 67% 73%, rgba(36, 48, 47, .12) 0 26%, transparent 27%),
    var(--pet-color);
}

.pet-css .belly {
  left: 38%;
  top: 64%;
  width: 24%;
  height: 24%;
  z-index: 5;
  border: 4px solid rgba(36, 48, 47, .65);
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 38% 26%, rgba(255, 255, 255, .5) 0 15%, transparent 16%),
    var(--pet-detail);
  opacity: .88;
}

.pet-css .face-patch {
  left: 39%;
  top: 35%;
  width: 22%;
  height: 22%;
  z-index: 7;
  border: 0;
  border-radius: 45% 45% 48% 48%;
  background: rgba(255, 246, 215, .28);
}

.pet-css .paw {
  top: 88%;
  width: 9%;
  height: 6%;
  z-index: 8;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 40%, rgba(255, 255, 255, .45) 0 12%, transparent 13%),
    var(--pet-detail);
}

.pet-css .paw.left {
  left: 35%;
}

.pet-css .paw.right {
  right: 35%;
}

.pet-css .cheek {
  top: 51%;
  width: 8%;
  height: 6%;
  z-index: 9;
  border: 0;
  border-radius: 50%;
  background: rgba(233, 102, 86, .32);
}

.pet-css .cheek.left {
  left: 35%;
}

.pet-css .cheek.right {
  right: 35%;
}

.pet-css .brow {
  top: 38%;
  width: 8%;
  height: 4%;
  z-index: 10;
  border-top: 4px solid rgba(36, 48, 47, .7);
  border-radius: 50%;
}

.pet-css .brow.left {
  left: 38%;
  transform: rotate(-8deg);
}

.pet-css .brow.right {
  right: 38%;
  transform: rotate(8deg);
}

.pet-css .eye {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .2),
    inset 0 -4px 0 rgba(255, 255, 255, .12);
}

.pet-css .eye::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 58%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}

.pet-css .nose {
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .25);
}

.pet-css .sparkle-mark {
  z-index: 14;
  display: none;
  width: 5%;
  height: 5%;
  border: 0;
  background: #fff6d7;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 1px 0 var(--ink));
}

.pet-puppy .face-patch {
  left: 42%;
  top: 31%;
  width: 16%;
  height: 23%;
  background: rgba(255, 246, 215, .24);
  border-radius: 50% 50% 40% 40%;
}

.pet-puppy .detail-mark {
  display: block;
  left: 30%;
  top: 38%;
  width: 13%;
  height: 12%;
  border-width: 0;
  border-radius: 50%;
  background: rgba(255, 246, 215, .23);
  z-index: 8;
}

.pet-kitten .face-patch {
  left: 36%;
  top: 30%;
  width: 28%;
  height: 18%;
  border-radius: 42% 42% 50% 50%;
  background:
    linear-gradient(90deg, transparent 0 22%, var(--pet-accent) 22% 30%, transparent 30% 45%, var(--pet-accent) 45% 55%, transparent 55% 70%, var(--pet-accent) 70% 78%, transparent 78%);
  opacity: .72;
}

.pet-kitten .cheek {
  background: transparent;
}

.pet-kitten .cheek::before,
.pet-kitten .cheek::after {
  position: absolute;
  content: "";
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: var(--ink);
}

.pet-kitten .cheek.left::before {
  right: 7px;
  top: 0;
  transform: rotate(8deg);
}

.pet-kitten .cheek.left::after {
  right: 7px;
  top: 9px;
  transform: rotate(-8deg);
}

.pet-kitten .cheek.right::before {
  left: 7px;
  top: 0;
  transform: rotate(-8deg);
}

.pet-kitten .cheek.right::after {
  left: 7px;
  top: 9px;
  transform: rotate(8deg);
}

.pet-bunny .belly {
  left: 37%;
  top: 64%;
  width: 26%;
  height: 23%;
  background: #fffaf2;
}

.pet-bunny .face-patch {
  left: 41%;
  top: 50%;
  width: 18%;
  height: 10%;
  border-radius: 50%;
  background: rgba(212, 138, 155, .25);
}

.pet-bunny .cheek {
  background: rgba(212, 138, 155, .45);
}

.pet-slime .belly {
  display: block;
  left: 32%;
  top: 62%;
  width: 39%;
  height: 19%;
  border: 0;
  background:
    radial-gradient(ellipse at 32% 35%, rgba(255, 255, 255, .22) 0 18%, transparent 19%),
    rgba(45, 127, 134, .2);
  z-index: 7;
}

.pet-slime .face-patch,
.pet-slime .brow {
  display: none;
}

.pet-slime .sparkle-mark {
  display: block;
}

.pet-slime .sparkle-mark.one {
  left: 31%;
  top: 37%;
  background: rgba(255, 255, 255, .8);
  border-radius: 50%;
  clip-path: none;
}

.pet-slime .sparkle-mark.two {
  left: 67%;
  top: 54%;
  width: 4%;
  height: 4%;
  background: rgba(255, 255, 255, .62);
  border-radius: 50%;
  clip-path: none;
}

.pet-dragon .belly {
  left: 39%;
  top: 61%;
  width: 22%;
  height: 27%;
  background:
    repeating-linear-gradient(0deg, var(--pet-detail) 0 10px, #fff6d7 10px 14px);
}

.pet-dragon .face-patch {
  left: 41%;
  top: 31%;
  width: 19%;
  height: 18%;
  background: rgba(241, 189, 70, .28);
  clip-path: polygon(50% 0, 68% 42%, 100% 44%, 72% 68%, 84% 100%, 50% 78%, 16% 100%, 28% 68%, 0 44%, 32% 42%);
}

.pet-dragon .wing {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 42%),
    linear-gradient(45deg, transparent 0 44%, rgba(36, 48, 47, .28) 44% 50%, transparent 50%),
    var(--pet-accent);
}

.pet-dragon .sparkle-mark {
  display: block;
  left: 47.5%;
  top: 70%;
  width: 6%;
  height: 6%;
  background: var(--pet-detail);
}

.outfit-back.galaxy-cape {
  background:
    radial-gradient(circle at 28% 36%, #fff6d7 0 3px, transparent 4px),
    radial-gradient(circle at 70% 62%, #fff6d7 0 4px, transparent 5px),
    radial-gradient(circle at 52% 82%, #fff6d7 0 3px, transparent 4px),
    linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 42%),
    #1f2f58;
}

.outfit-back.velvet-cape {
  background:
    radial-gradient(ellipse at 50% 14%, rgba(255, 246, 215, .22) 0 20%, transparent 21%),
    linear-gradient(90deg, transparent 0 46%, #f1bd46 46% 54%, transparent 54%),
    linear-gradient(160deg, rgba(255, 255, 255, .13), transparent 48%),
    #704567;
}

.outfit-front.parade-sash {
  filter: drop-shadow(0 2px 0 rgba(36, 48, 47, .25));
}

.outfit-front.rainbow-vest {
  background:
    linear-gradient(90deg, #e96656 0 20%, #f1bd46 20% 40%, #79d3d6 40% 60%, #4a7fb3 60% 80%, #b8e38e 80%),
    linear-gradient(160deg, rgba(255, 255, 255, .24), transparent 42%);
}

.hat.sunny-bow {
  filter: drop-shadow(2px 3px 0 rgba(36, 48, 47, .22));
}

.hat.tiny-crown {
  background:
    radial-gradient(circle at 50% 62%, #e96656 0 8%, transparent 9%),
    radial-gradient(circle at 25% 72%, #4a7fb3 0 7%, transparent 8%),
    radial-gradient(circle at 75% 72%, #fff6d7 0 7%, transparent 8%),
    #f1bd46;
  filter: drop-shadow(2px 3px 0 rgba(36, 48, 47, .22));
}

.accessory.treat-pouch,
.accessory.notebook-badge {
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .22);
}

.accessory.prism-spinner {
  animation: spinnerTwirl 2.4s linear infinite;
}

@keyframes spinnerTwirl {
  to {
    transform: rotate(360deg);
  }
}

.pet-art.is-parading {
  animation: petParade 1.5s ease-in-out 2;
}

@keyframes petParade {
  0% {
    transform: translateX(-16px) rotate(-1deg);
  }
  50% {
    transform: translateX(16px) rotate(1deg);
  }
  100% {
    transform: translateX(-16px) rotate(-1deg);
  }
}

.confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.confetti {
  position: absolute;
  top: -18px;
  width: 10px;
  height: 16px;
  border: 2px solid rgba(36, 48, 47, .25);
  border-radius: 3px;
  animation: confettiDrop 1.1s ease-in forwards;
}

@keyframes confettiDrop {
  to {
    transform: translateY(420px) rotate(240deg);
    opacity: 0;
  }
}

.pet-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pet-summary h2 {
  margin-top: 3px;
  font-size: 1.25rem;
}

.pet-summary p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.score-preview {
  flex: 0 0 112px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #eef7f2;
  text-align: center;
}

.score-preview strong {
  display: block;
  margin-top: 5px;
  color: var(--teal-dark);
  font-size: 1.55rem;
  line-height: 1;
}

.quick-actions,
.result-actions,
.mini-actions {
  display: flex;
  gap: 10px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  box-shadow: 4px 4px 0 rgba(36, 48, 47, .18);
  cursor: pointer;
}

.primary-button {
  background: var(--gold);
}

.secondary-button {
  background: var(--panel);
}

.primary-button:disabled,
.secondary-button:disabled {
  color: #8b8f8a;
  background: #ece7dd;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.control-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.tab-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px;
  border-bottom: 2px solid var(--line);
  background: #f3eadb;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.tab-button.is-active {
  border-color: var(--ink);
  background: var(--panel);
  box-shadow: 3px 3px 0 rgba(36, 48, 47, .14);
}

.tab-panel {
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.tab-panel.is-hidden,
.is-hidden {
  display: none !important;
}

.panel-heading {
  margin-bottom: 12px;
}

.panel-heading h2 {
  font-size: 1.18rem;
}

.panel-heading p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

.item-card,
.game-card,
.theme-card {
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.item-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 208px;
  padding: 10px;
}

.item-card.is-selected {
  border-color: var(--teal-dark);
  box-shadow: inset 0 0 0 3px rgba(45, 127, 134, .18);
}

.item-card.is-locked {
  background: #f7f1e7;
}

.item-thumb {
  position: relative;
  display: grid;
  place-items: center;
  height: 82px;
  overflow: hidden;
  border: 2px solid rgba(36, 48, 47, .16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(242, 191, 70, .22)),
    var(--thumb-color, #eaf7f3);
}

.item-thumb .pet-css {
  width: 86px;
  height: 86px;
  transform: translateY(7px);
}

.item-thumb .closet-preview {
  width: 66px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--item-color, var(--teal));
  box-shadow: 5px 5px 0 rgba(36, 48, 47, .14);
}

.item-thumb .closet-preview.hat {
  width: 62px;
  height: 42px;
  border-radius: 50% 50% 8px 8px;
}

.item-thumb .closet-preview.accessory {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .85) 0 7px, transparent 8px),
    var(--item-color, var(--coral));
}

.lock-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
}

.lock-chip .css-icon {
  width: 16px;
  height: 16px;
}

.item-card h3 {
  font-size: 1rem;
  line-height: 1.18;
}

.item-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.32;
}

.tag-row,
.cost-row,
.reward-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-chip,
.cost-chip,
.reward-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1;
}

.tag-chip {
  color: #213030;
  background: #ddeedc;
}

.cost-chip {
  color: var(--ink);
  background: #f0e2c4;
}

.reward-chip {
  border: 2px solid rgba(36, 48, 47, .18);
  color: var(--ink);
  background: var(--cream);
}

.item-card .primary-button,
.item-card .secondary-button {
  width: 100%;
}

.closet-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.closet-tab {
  min-height: 40px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}

.closet-tab.is-active {
  border-color: var(--ink);
  background: #e8f5ef;
}

.fit-editor {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px;
  border: 2px solid rgba(36, 48, 47, .24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 254, 249, .94), rgba(232, 245, 239, .88));
}

.fit-editor-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.fit-editor-empty strong {
  color: var(--ink);
}

.fit-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fit-editor-header span,
.fit-color-picker span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fit-editor-header h3 {
  font-size: .98rem;
}

.fit-editor-header .secondary-button {
  min-height: 34px;
  padding: 7px 10px;
}

.fit-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fit-control {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.fit-control span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fit-control b {
  color: var(--ink);
  white-space: nowrap;
}

.fit-control input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

.fit-color-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.fit-color-picker {
  display: inline-grid;
  gap: 4px;
}

.fit-color-picker input {
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 2px solid rgba(36, 48, 47, .54);
  border-radius: 8px;
  background: var(--panel);
}

.fit-color-swatch {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border: 2px solid rgba(36, 48, 47, .42);
  border-radius: 8px;
  background: var(--swatch, var(--panel));
  box-shadow: 0 3px 0 rgba(36, 48, 47, .1);
  cursor: pointer;
}

.fit-color-swatch.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(45, 127, 134, .18);
}

.fit-original {
  padding: 0 9px;
  color: var(--ink);
  background: var(--panel);
  font-size: .76rem;
  font-weight: 800;
}

.game-list {
  display: grid;
  gap: 10px;
}

.game-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.game-card h3 {
  font-size: 1.05rem;
}

.game-card p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.game-icon {
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 5px 5px 0 rgba(36, 48, 47, .14);
}

.treat-icon {
  background:
    radial-gradient(circle at 48% 45%, #fff6d7 0 10px, transparent 11px),
    radial-gradient(circle at 28% 30%, #f1bd46 0 9px, transparent 10px),
    radial-gradient(circle at 70% 65%, #e96656 0 10px, transparent 11px),
    #dff1ee;
}

.fabric-icon {
  background:
    linear-gradient(45deg, transparent 0 18px, rgba(255, 255, 255, .5) 18px 22px, transparent 22px),
    repeating-linear-gradient(90deg, #4a7fb3 0 12px, #e96656 12px 24px, #f1bd46 24px 36px, #6f9d4b 36px 48px);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
}

.theme-card {
  min-height: 116px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.theme-card.is-active {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px rgba(242, 191, 70, .42);
}

.theme-swatch {
  display: flex;
  gap: 4px;
  height: 24px;
  margin-bottom: 9px;
}

.theme-swatch span {
  flex: 1;
  border: 2px solid rgba(36, 48, 47, .2);
  border-radius: 6px;
}

.theme-card strong {
  display: block;
  font-size: 1rem;
}

.theme-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.28;
}

.show-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #eef7f2;
}

.show-panel strong {
  display: block;
  margin-top: 3px;
  font-size: 1.6rem;
}

.mini-game-overlay,
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(36, 48, 47, .42);
}

.mini-game-shell,
.result-sheet {
  width: min(100%, 820px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.mini-game-shell {
  display: grid;
  grid-template-rows: auto auto minmax(280px, 1fr) auto;
  min-height: min(680px, calc(100vh - 32px));
}

.mini-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 2px solid var(--line);
  background: #f3eadb;
}

.mini-game-header h2 {
  margin-top: 3px;
  font-size: 1.25rem;
}

.mini-game-header span,
.result-kicker {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 8px;
}

.mini-stats > div {
  min-width: 0;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-align: center;
}

.mini-stats strong {
  display: block;
  margin-top: 3px;
  font-size: 1.2rem;
  line-height: 1;
}

.mini-instruction {
  padding: 10px 14px;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}

.mini-arena {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #dff3f1, #fff6d7 72%, #c5dfb2 72% 100%);
}

.falling-target {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold);
  box-shadow: 4px 4px 0 rgba(36, 48, 47, .18);
  cursor: pointer;
  animation: driftDown 2.4s linear forwards;
}

.falling-target::before,
.falling-target::after {
  position: absolute;
  content: "";
}

.falling-target.treat::before {
  width: 22px;
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff6d7;
}

.falling-target.fabric {
  border-radius: 8px;
  background: var(--blue);
}

.falling-target.fabric::before {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(36, 48, 47, .5);
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .7) 0 5px, transparent 5px 10px),
    var(--coral);
}

@keyframes driftDown {
  to {
    transform: translateY(360px) rotate(35deg);
    opacity: .18;
  }
}

.sort-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 12px;
  width: min(100%, 600px);
  margin: 24px auto;
  padding: 0 14px;
}

.sort-prompt {
  margin: 18px auto 0;
  width: min(100% - 28px, 600px);
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  text-align: center;
}

.sort-prompt strong {
  color: var(--teal-dark);
}

.sort-choice {
  display: grid;
  place-items: center;
  min-height: 86px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 4px 4px 0 rgba(36, 48, 47, .15);
  cursor: pointer;
}

.sort-choice span {
  display: block;
  width: 58px;
  height: 35px;
  margin-bottom: 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--choice-color);
}

.mini-actions {
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 2px solid var(--line);
}

.result-sheet {
  padding: 18px;
}

.result-sheet h2 {
  margin-top: 4px;
  font-size: 1.7rem;
}

.result-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.result-scores > div {
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #f7f1e7;
}

.result-scores strong {
  display: block;
  margin-top: 5px;
  font-size: 1.8rem;
}

#resultMessage {
  color: var(--muted);
  line-height: 1.4;
}

.reward-row {
  margin-top: 12px;
}

.result-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--cream);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 980px) {
  .topbar,
  .workspace {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .wallet {
    width: 100%;
  }

  .workspace {
    display: grid;
  }

  .stage-panel {
    grid-template-rows: auto minmax(300px, auto) auto auto;
  }

  .control-panel {
    min-height: 520px;
  }
}

@media (max-width: 620px) {
  .app-shell {
    gap: 10px;
    width: 100%;
    max-width: 100vw;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .brand-mark {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .brand-block h1 {
    font-size: 1.2rem;
  }

  .brand-block > div:last-child {
    max-width: calc(100vw - 76px);
  }

  .brand-block p {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .wallet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  .wallet-item {
    padding: 8px 6px;
    min-width: 0;
  }

  .wallet-item span {
    font-size: .64rem;
  }

  .wallet-item strong {
    font-size: 1.1rem;
  }

  .stage-panel,
  .control-panel {
    width: 100%;
    max-width: calc(100vw - 16px);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(38, 34, 28, .12);
  }

  .pet-stage {
    min-height: clamp(245px, 43dvh, 340px);
  }

  .pet-summary,
  .quick-actions,
  .show-panel,
  .mini-game-header {
    display: grid;
  }

  .stage-panel {
    gap: 10px;
    padding: 8px;
  }

  .theme-strip {
    min-width: 0;
    padding: 8px;
  }

  .theme-strip strong {
    font-size: 1.08rem;
  }

  .icon-button {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .control-panel {
    min-height: 0;
    overflow: visible;
  }

  .tab-panel {
    padding: 10px;
    overflow: visible;
  }

  .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .item-card {
    min-height: 198px;
    padding: 8px;
  }

  .item-thumb {
    height: 74px;
  }

  .item-card h3 {
    font-size: .94rem;
  }

  .item-card p {
    font-size: .8rem;
  }

  .tag-chip,
  .cost-chip,
  .reward-chip {
    min-height: 22px;
    padding: 4px 6px;
    font-size: .7rem;
  }

  .primary-button,
  .secondary-button,
  .tab-button {
    min-height: 48px;
  }

  .score-preview {
    width: 100%;
    flex-basis: auto;
  }

  .tab-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .game-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .game-card .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .sort-board {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
  }

  .mini-game-overlay,
  .result-overlay {
    align-items: stretch;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .mini-game-shell {
    grid-template-rows: auto auto minmax(330px, 1fr) auto;
    min-height: 0;
  }

  .mini-arena {
    min-height: min(58dvh, 430px);
  }

  .falling-target {
    width: 66px;
    height: 66px;
  }

  .mini-stats,
  .result-scores {
    grid-template-columns: 1fr;
  }

  .result-actions,
  .mini-actions {
    display: grid;
  }
}

@media (hover: none) {
  .icon-button:hover,
  .primary-button:hover,
  .secondary-button:hover,
  .tab-button:hover {
    transform: none;
  }
}

/* Generated image art pass. These rules intentionally override the older
   CSS-only mascot stage while preserving the same game logic and controls. */
.pet-stage {
  background: url("assets/generated/parade-stage.png") center / cover no-repeat !important;
}

.pet-stage::before,
.pet-stage::after,
.sky-dots,
.parade-road {
  display: none;
}

.pet-shadow {
  bottom: 9%;
  width: 46%;
  height: 28px;
  background: rgba(36, 48, 47, .24);
  filter: blur(7px);
}

.pet-art {
  width: min(78%, 360px);
  transform: translateY(7%);
}

.pet-image-stack {
  display: block;
  filter: drop-shadow(0 15px 11px rgba(27, 34, 34, .24));
}

.pet-image-stack .pet-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.item-thumb .pet-image-stack {
  width: 92px;
  height: 92px;
  transform: translateY(7px);
  animation: none;
}

.item-thumb .pet-image-stack .pet-sprite {
  width: 100%;
  height: 100%;
}

.pet-image-stack .outfit-back,
.pet-image-stack .outfit-front,
.pet-image-stack .hat,
.pet-image-stack .accessory {
  z-index: 9;
}

.pet-image-stack .outfit-back {
  z-index: 4;
}

.pet-image-stack .outfit-front {
  left: 27%;
  top: 57%;
  width: 48%;
  height: 27%;
  border-width: 4px;
}

.pet-image-stack .outfit-front.parade-sash {
  left: 30%;
  top: 56%;
  width: 43%;
  height: 34%;
  background:
    linear-gradient(47deg, transparent 0 36%, rgba(36, 48, 47, .28) 36% 38%, #fff6d7 38% 43%, #f1bd46 43% 55%, #fff6d7 55% 60%, rgba(36, 48, 47, .22) 60% 62%, transparent 62%);
  opacity: .95;
  filter: drop-shadow(0 3px 2px rgba(36, 48, 47, .24));
}

.pet-image-stack .outfit-front.rainbow-vest,
.pet-image-stack .outfit-front.plaid-jacket {
  left: 31%;
  top: 59%;
  width: 38%;
  height: 22%;
  border-width: 4px;
  opacity: .92;
}

.pet-image-stack .outfit-front.galaxy-cape,
.pet-image-stack .outfit-front.velvet-cape {
  left: 34%;
  top: 56%;
  width: 35%;
  height: 13%;
  border-width: 4px;
}

.pet-image-stack .outfit-back.galaxy-cape,
.pet-image-stack .outfit-back.velvet-cape {
  left: 22%;
  top: 42%;
  width: 58%;
  height: 50%;
  opacity: .82;
  filter: drop-shadow(0 4px 0 rgba(36, 48, 47, .18));
}

.pet-image-stack .outfit-back.bat-wings {
  left: 7%;
  top: 44%;
  width: 86%;
  height: 34%;
  opacity: .86;
}

.pet-image-stack .hat.sunny-bow {
  left: 40%;
  top: 25%;
  width: 22%;
  height: 13%;
  opacity: .96;
}

.pet-image-stack .hat.tiny-crown {
  left: 40%;
  top: 17%;
  width: 22%;
  height: 13%;
}

.pet-image-stack .hat.star-helmet {
  left: 24%;
  top: 14%;
  width: 54%;
  height: 54%;
  opacity: .72;
}

.pet-image-stack .hat.school-cap {
  left: 35%;
  top: 18%;
  width: 32%;
  height: 18%;
}

.pet-image-stack .hat.monster-horns {
  left: 32%;
  top: 12%;
  width: 38%;
  height: 22%;
}

.pet-image-stack .accessory.treat-pouch,
.pet-image-stack .accessory.notebook-badge {
  left: 63%;
  top: 63%;
  width: 10%;
  height: 12%;
  border-width: 3px;
}

.pet-image-stack .accessory.moon-wand {
  left: 67%;
  top: 42%;
}

.pet-image-stack .accessory.pearl-collar {
  left: 35%;
  top: 50%;
  width: 32%;
}

.pet-image-stack .accessory.prism-spinner {
  left: 66%;
  top: 60%;
  width: 12%;
  height: 12%;
}

.pet-image-stack .accessory.candy-mask {
  left: 36%;
  top: 37%;
  width: 29%;
  height: 13%;
  opacity: .86;
}

.pet-image-stack.pet-dragon .hat,
.pet-image-stack.pet-dragon .accessory,
.pet-image-stack.pet-dragon .outfit-front {
  transform: translateY(3%);
}

.pet-image-stack.pet-slime .hat {
  transform: translateY(18%);
}

.pet-image-stack.pet-bunny .hat {
  transform: translateY(-8%);
}

@media (max-width: 620px) {
  .pet-art {
    width: min(74%, 330px);
    transform: translateY(8%);
  }
}

/* Premium costume, mini-game, and show pass using CSS and PNG assets. */
.game-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.game-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 246, 215, .74)),
    var(--panel);
}

.game-card::after {
  position: absolute;
  content: "";
  inset: auto 12px 10px 84px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(45, 127, 134, .26), rgba(233, 102, 86, .18), transparent);
}

.game-icon {
  position: relative;
  overflow: hidden;
  border-color: rgba(36, 48, 47, .86);
  box-shadow: 0 8px 0 rgba(36, 48, 47, .14), inset 0 0 0 3px rgba(255, 255, 255, .34);
}

.game-icon::before,
.game-icon::after {
  position: absolute;
  content: "";
}

.treat-icon {
  background:
    radial-gradient(circle at 56% 46%, #fff6d7 0 9px, #a96030 10px 13px, transparent 14px),
    radial-gradient(circle at 26% 31%, #f1bd46 0 8px, #b56a24 9px 11px, transparent 12px),
    radial-gradient(circle at 70% 69%, #e96656 0 9px, #93362f 10px 12px, transparent 13px),
    linear-gradient(150deg, #dff1ee, #fff6d7);
}

.treat-icon::after {
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 11px;
  border-radius: 999px;
  background: rgba(36, 48, 47, .16);
}

.fabric-icon {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), transparent 32%),
    repeating-linear-gradient(90deg, #4a7fb3 0 11px, #e96656 11px 22px, #f1bd46 22px 33px, #6f9d4b 33px 44px);
}

.fabric-icon::before {
  inset: 11px;
  border: 3px solid rgba(36, 48, 47, .62);
  border-radius: 9px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .72) 0 5px, transparent 5px 11px),
    rgba(255, 255, 255, .18);
}

.ribbon-icon {
  background: linear-gradient(145deg, #fff6d7, #ffd9a0 44%, #7ccfd2);
}

.ribbon-icon::before {
  left: 14px;
  top: 9px;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(36, 48, 47, .82);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff6d7 0 7px, #f1bd46 8px 14px, #d4763a 15px);
  box-shadow: 0 4px 0 rgba(36, 48, 47, .12);
}

.ribbon-icon::after {
  left: 19px;
  top: 37px;
  width: 26px;
  height: 22px;
  background:
    linear-gradient(135deg, #e96656 0 48%, transparent 49%),
    linear-gradient(225deg, #4a7fb3 0 48%, transparent 49%);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 50% 72%, 18% 100%);
}

.spotlight-icon {
  background:
    radial-gradient(circle at 50% 68%, rgba(255, 246, 215, .98) 0 10px, transparent 11px),
    conic-gradient(from 205deg at 50% 18%, transparent 0 21%, rgba(255, 246, 215, .88) 22% 35%, transparent 36%),
    linear-gradient(155deg, #31476f, #7f4d76 58%, #f1bd46);
}

.spotlight-icon::before {
  left: 20px;
  top: 8px;
  width: 24px;
  height: 15px;
  border: 3px solid rgba(36, 48, 47, .82);
  border-radius: 7px 7px 3px 3px;
  background: #26364d;
  transform: rotate(-8deg);
}

.spotlight-icon::after {
  left: 16px;
  bottom: 9px;
  width: 32px;
  height: 9px;
  border: 2px solid rgba(36, 48, 47, .52);
  border-radius: 50%;
  background: rgba(255, 246, 215, .72);
}

.closet-preview {
  position: relative;
  overflow: visible;
}

.closet-preview::before,
.closet-preview::after {
  position: absolute;
  content: "";
  box-sizing: border-box;
}

.closet-preview.preview-none-hat {
  width: 62px;
  height: 42px;
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 55%, rgba(45, 127, 134, .32) 0 11px, transparent 12px),
    #fffef9;
}

.closet-preview.preview-sunny-bow {
  width: 68px;
  height: 42px;
  border: 0;
  background: radial-gradient(circle at 50% 50%, #f1bd46 0 8px, #7d392c 9px 10px, transparent 11px);
}

.closet-preview.preview-sunny-bow::before,
.closet-preview.preview-sunny-bow::after {
  top: 7px;
  width: 30px;
  height: 28px;
  border: 3px solid var(--ink);
  background: linear-gradient(135deg, #ff8f7f, #e96656 62%, #a83c34);
}

.closet-preview.preview-sunny-bow::before {
  left: 4px;
  border-radius: 72% 36% 72% 42%;
  transform: rotate(14deg);
}

.closet-preview.preview-sunny-bow::after {
  right: 4px;
  border-radius: 36% 72% 42% 72%;
  transform: rotate(-14deg);
}

.closet-preview.preview-star-helmet {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9) 0 8px, transparent 9px),
    radial-gradient(circle at 58% 58%, rgba(191, 234, 255, .42) 0 20px, transparent 21px),
    rgba(191, 234, 255, .36);
}

.closet-preview.preview-tiny-crown {
  height: 48px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 54%, #e96656 0 4px, transparent 5px),
    radial-gradient(circle at 50% 34%, #4a7fb3 0 5px, transparent 6px),
    radial-gradient(circle at 76% 54%, #2d7f86 0 4px, transparent 5px),
    linear-gradient(180deg, #ffe88c, #f1bd46 62%, #bf7c20);
  clip-path: polygon(0 100%, 8% 38%, 28% 67%, 50% 12%, 72% 67%, 92% 38%, 100% 100%);
}

.closet-preview.preview-school-cap {
  border: 0;
  background: transparent;
}

.closet-preview.preview-school-cap::before {
  left: 6px;
  top: 9px;
  width: 54px;
  height: 28px;
  border: 3px solid var(--ink);
  background: linear-gradient(145deg, #38a39c, #2d7f86 70%);
  clip-path: polygon(50% 0, 100% 58%, 50% 100%, 0 58%);
}

.closet-preview.preview-monster-horns {
  border: 0;
  background: transparent;
}

.closet-preview.preview-monster-horns::before,
.closet-preview.preview-monster-horns::after {
  top: 5px;
  width: 25px;
  height: 44px;
  border: 3px solid var(--ink);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 5px, transparent 5px 10px),
    #b8e38e;
}

.closet-preview.preview-monster-horns::before {
  left: 8px;
  border-radius: 80% 18% 52% 34%;
  clip-path: polygon(100% 100%, 0 0, 20% 96%);
}

.closet-preview.preview-monster-horns::after {
  right: 8px;
  border-radius: 18% 80% 34% 52%;
  clip-path: polygon(0 100%, 100% 0, 80% 96%);
}

.closet-preview.preview-parade-sash,
.closet-preview.preview-galaxy-cape,
.closet-preview.preview-velvet-cape,
.closet-preview.preview-rainbow-vest,
.closet-preview.preview-plaid-jacket,
.closet-preview.preview-bat-wings {
  width: 70px;
  height: 52px;
}

.closet-preview.preview-parade-sash {
  border: 0;
  background:
    linear-gradient(46deg, transparent 0 28%, #7a4a19 29% 32%, #fff6d7 33% 39%, #f1bd46 40% 60%, #fff6d7 61% 67%, #7a4a19 68% 71%, transparent 72%);
}

.closet-preview.preview-galaxy-cape {
  border-radius: 34% 34% 24% 24%;
  background:
    radial-gradient(circle at 28% 30%, #fff6d7 0 3px, transparent 4px),
    radial-gradient(circle at 67% 50%, #bfeaff 0 4px, transparent 5px),
    linear-gradient(145deg, #384e9b, #1f2f58 70%);
}

.closet-preview.preview-velvet-cape {
  border-radius: 34% 34% 24% 24%;
  background:
    linear-gradient(90deg, transparent 0 44%, #f1bd46 45% 55%, transparent 56%),
    linear-gradient(145deg, #8b5784, #704567 70%, #442a4f);
}

.closet-preview.preview-rainbow-vest {
  background:
    linear-gradient(90deg, #e96656 0 20%, #f1bd46 20% 40%, #79d3d6 40% 62%, #4a7fb3 62% 82%, #6f9d4b 82%),
    #fff6d7;
}

.closet-preview.preview-plaid-jacket {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 246, 215, .78) 12px 16px),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(242, 189, 70, .88) 14px 18px),
    #53754a;
}

.closet-preview.preview-bat-wings {
  border: 0;
  background: transparent;
}

.closet-preview.preview-bat-wings::before,
.closet-preview.preview-bat-wings::after {
  top: 9px;
  width: 36px;
  height: 34px;
  border: 3px solid var(--ink);
  background: linear-gradient(145deg, #6b4c7c, #4a3759);
}

.closet-preview.preview-bat-wings::before {
  left: 0;
  clip-path: polygon(100% 18%, 0 0, 16% 42%, 0 74%, 100% 100%);
}

.closet-preview.preview-bat-wings::after {
  right: 0;
  clip-path: polygon(0 18%, 100% 0, 84% 42%, 100% 74%, 0 100%);
}

.closet-preview.preview-treat-pouch,
.closet-preview.preview-moon-wand,
.closet-preview.preview-pearl-collar,
.closet-preview.preview-prism-spinner,
.closet-preview.preview-notebook-badge,
.closet-preview.preview-candy-mask {
  border-width: 3px;
  box-shadow: 0 7px 0 rgba(36, 48, 47, .12);
}

.closet-preview.preview-moon-wand {
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, transparent 0 47%, #fff6d7 48% 54%, transparent 55%);
  box-shadow: none;
}

.closet-preview.preview-moon-wand::after {
  right: 4px;
  top: 1px;
  width: 27px;
  height: 27px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #bfeaff;
  box-shadow: inset -9px 0 0 #fff6d7;
}

.closet-preview.preview-pearl-collar {
  border: 0;
  border-bottom: 10px dotted #fff0c9;
  border-radius: 0 0 50% 50%;
  background: transparent;
  box-shadow: none;
}

.closet-preview.preview-prism-spinner {
  background:
    radial-gradient(circle, #fff6d7 0 8px, transparent 9px),
    conic-gradient(#e96656, #f1bd46, #79d3d6, #4a7fb3, #e96656);
}

.closet-preview.preview-notebook-badge {
  border-radius: 7px;
  background:
    linear-gradient(#4a7fb3, #4a7fb3) 50% 28% / 66% 8% no-repeat,
    linear-gradient(#4a7fb3, #4a7fb3) 50% 50% / 66% 8% no-repeat,
    linear-gradient(#4a7fb3, #4a7fb3) 35% 72% / 38% 8% no-repeat,
    #fff6d7;
}

.closet-preview.preview-candy-mask {
  border-radius: 45%;
  background:
    radial-gradient(ellipse at 32% 52%, #fff6d7 0 7px, transparent 8px),
    radial-gradient(ellipse at 68% 52%, #fff6d7 0 7px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 8px, transparent 8px 16px),
    #e96656;
}

.mini-arena {
  isolation: isolate;
}

.mini-arena::before,
.mini-arena::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.mini-arena::before {
  inset: 0;
  z-index: 0;
  opacity: .95;
}

.mini-arena::after {
  left: 8%;
  right: 8%;
  bottom: 8%;
  z-index: 0;
  height: 18px;
  border-radius: 50%;
  background: rgba(36, 48, 47, .16);
  filter: blur(6px);
}

.arena-catch {
  background:
    linear-gradient(180deg, #a9e5f1 0%, #fff6d7 72%, #98c982 72% 100%);
}

.arena-catch::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, .86) 0 28px, transparent 29px),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .7) 0 42px, transparent 43px),
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, .34) 35% 44%, transparent 45%);
}

.arena-sort {
  background:
    linear-gradient(180deg, #c7e9ef 0%, #fff6d7 68%, #b6d49b 68% 100%);
}

.arena-sort::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 22px, transparent 22px 44px),
    radial-gradient(circle at 50% 18%, rgba(242, 189, 70, .32) 0 74px, transparent 75px);
}

.arena-ribbon {
  background:
    linear-gradient(180deg, #ffd5bf 0%, #fff6d7 62%, #69b2bd 62% 100%);
}

.arena-ribbon::before {
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, .44) 19% 26%, transparent 27% 44%, rgba(255, 255, 255, .34) 45% 52%, transparent 53%),
    repeating-linear-gradient(90deg, rgba(233, 102, 86, .28) 0 42px, rgba(242, 189, 70, .24) 42px 84px, rgba(45, 127, 134, .22) 84px 126px);
}

.arena-spotlight {
  background:
    radial-gradient(circle at 50% 80%, rgba(255, 246, 215, .95) 0 82px, transparent 83px),
    linear-gradient(180deg, #263653 0%, #7b4e76 66%, #24302f 100%);
}

.arena-spotlight::before {
  background:
    conic-gradient(from 205deg at 26% 0%, transparent 0 15%, rgba(255, 246, 215, .32) 16% 25%, transparent 26%),
    conic-gradient(from 135deg at 74% 0%, transparent 0 15%, rgba(255, 246, 215, .3) 16% 25%, transparent 26%),
    radial-gradient(circle at 50% 18%, rgba(255, 246, 215, .22) 0 96px, transparent 97px);
}

.falling-target {
  z-index: 2;
  border-color: rgba(36, 48, 47, .86);
  box-shadow: 0 7px 0 rgba(36, 48, 47, .16), inset 0 0 0 3px rgba(255, 255, 255, .28);
}

.falling-target.treat {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .68) 0 7px, transparent 8px),
    linear-gradient(145deg, #f8c95a, #c47727);
}

.falling-target.treat::before {
  background:
    radial-gradient(circle at 38% 32%, #6c3822 0 3px, transparent 4px),
    radial-gradient(circle at 64% 60%, #6c3822 0 3px, transparent 4px),
    #fff6d7;
}

.falling-target.fabric {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .42), transparent 34%),
    #4a7fb3;
}

.falling-target.star {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.falling-target.star::before {
  width: 58px;
  height: 58px;
  border: 3px solid rgba(36, 48, 47, .82);
  background:
    radial-gradient(circle at 38% 32%, #fffad9 0 8px, transparent 9px),
    linear-gradient(145deg, #fff6a7, #f1bd46 64%, #d98228);
  clip-path: polygon(50% 0, 62% 34%, 100% 36%, 70% 58%, 80% 100%, 50% 76%, 20% 100%, 30% 58%, 0 36%, 38% 34%);
  filter: drop-shadow(0 7px 0 rgba(36, 48, 47, .16));
}

.ribbon-target {
  position: absolute;
  z-index: 2;
  width: 74px;
  height: 70px;
  border: 0;
  background: transparent;
  cursor: pointer;
  animation: ribbonSweep 2s ease-in-out forwards;
}

.ribbon-target::before,
.ribbon-target::after {
  position: absolute;
  content: "";
  box-sizing: border-box;
}

.ribbon-target::before {
  left: 12px;
  top: 2px;
  width: 48px;
  height: 48px;
  border: 4px solid rgba(36, 48, 47, .84);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff6d7 0 10px, transparent 11px),
    repeating-conic-gradient(#f1bd46 0 18deg, #e96656 18deg 36deg);
  box-shadow: 0 8px 0 rgba(36, 48, 47, .16);
}

.ribbon-target::after {
  left: 22px;
  top: 42px;
  width: 30px;
  height: 28px;
  border-left: 4px solid rgba(36, 48, 47, .75);
  border-right: 4px solid rgba(36, 48, 47, .75);
  background:
    linear-gradient(135deg, #4a7fb3 0 48%, transparent 49%),
    linear-gradient(225deg, #e96656 0 48%, transparent 49%);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 50% 74%, 18% 100%);
}

.ribbon-target.scrap {
  opacity: .62;
  filter: grayscale(.85) saturate(.65);
}

.ribbon-target.scrap::before {
  background:
    radial-gradient(circle, #ece7dd 0 10px, transparent 11px),
    repeating-conic-gradient(#b7afa3 0 18deg, #817a71 18deg 36deg);
}

@keyframes ribbonSweep {
  0% {
    transform: translateX(-20px) rotate(-8deg) scale(.86);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateX(42px) rotate(14deg) scale(1.04);
    opacity: .16;
  }
}

.spotlight-prompt,
.spotlight-board {
  position: relative;
  z-index: 1;
}

.spotlight-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100% - 28px, 620px);
  margin: 18px auto 0;
  padding: 12px;
  border: 2px solid rgba(36, 48, 47, .84);
  border-radius: 8px;
  color: #fffef9;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16), transparent),
    linear-gradient(90deg, var(--spot-a), var(--spot-b), var(--spot-c));
  box-shadow: 0 8px 0 rgba(36, 48, 47, .16);
  text-align: center;
}

.spotlight-badge {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(36, 48, 47, .68);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0 6px, #f1bd46 7px);
}

.spotlight-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 12px;
  width: min(100% - 28px, 720px);
  margin: 22px auto;
}

.spotlight-choice {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 136px;
  overflow: hidden;
  padding: 12px 10px 10px;
  border: 2px solid rgba(36, 48, 47, .84);
  border-radius: 8px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 246, 215, .8) 0 32px, transparent 33px),
    linear-gradient(180deg, var(--spot-b), #fffef9 72%);
  box-shadow: 0 7px 0 rgba(36, 48, 47, .15);
  cursor: pointer;
}

.spotlight-beam {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 210deg at 50% 0%, transparent 0 18%, rgba(255, 246, 215, .52) 19% 34%, transparent 35%);
}

.pose-token {
  position: relative;
  width: 56px;
  height: 56px;
  border: 3px solid rgba(36, 48, 47, .82);
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 35% 34%, rgba(255, 255, 255, .78) 0 8px, transparent 9px),
    linear-gradient(145deg, var(--spot-a), var(--spot-c));
  box-shadow: 0 6px 0 rgba(36, 48, 47, .12);
}

.pose-token::before,
.pose-token::after {
  position: absolute;
  content: "";
  box-sizing: border-box;
}

.pose-token::before {
  left: 13px;
  top: 18px;
  width: 8px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 18px 0 0 var(--ink);
}

.pose-token::after {
  left: 18px;
  top: 34px;
  width: 20px;
  height: 9px;
  border-bottom: 3px solid var(--ink);
  border-radius: 0 0 50% 50%;
}

.spotlight-choice strong {
  position: relative;
  z-index: 1;
  margin-top: 8px;
}

.sort-prompt,
.sort-board,
.sort-choice {
  position: relative;
  z-index: 1;
}

.sort-choice {
  min-height: 96px;
  background:
    linear-gradient(145deg, #fffef9, #fff6d7);
}

.sort-choice span {
  position: relative;
  overflow: hidden;
  height: 42px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .7), transparent 38%),
    var(--choice-color);
}

.sort-choice span::after {
  position: absolute;
  content: "";
  inset: 6px;
  border: 2px dashed rgba(36, 48, 47, .36);
  border-radius: 6px;
}

.show-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(255, 246, 215, .64)),
    #eef7f2;
  box-shadow: inset 0 0 0 3px rgba(242, 189, 70, .2);
}

.result-sheet {
  width: min(100%, 920px);
  background:
    linear-gradient(180deg, rgba(255, 246, 215, .86), rgba(255, 254, 249, .98) 34%),
    var(--panel);
}

.showdown-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  min-height: 310px;
  margin: 14px 0;
  overflow: hidden;
  border: 3px solid rgba(36, 48, 47, .88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 246, 215, .2)),
    url("assets/generated/parade-stage.png") center 58% / cover no-repeat;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .22);
}

.showdown-stage::before {
  position: absolute;
  content: "";
  inset: 0;
  background:
    conic-gradient(from 208deg at 26% 0%, transparent 0 17%, rgba(255, 246, 215, .28) 18% 28%, transparent 29%),
    conic-gradient(from 132deg at 74% 0%, transparent 0 17%, rgba(255, 246, 215, .26) 18% 28%, transparent 29%);
  pointer-events: none;
}

.contestant-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: end;
  min-width: 0;
  min-height: 282px;
  padding: 12px 8px 14px;
  color: var(--ink);
}

.contestant-card.is-winner::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 28px;
  width: 166px;
  height: 166px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 215, .84) 0 36%, rgba(242, 189, 70, .28) 37% 62%, transparent 63%);
  transform: translateX(-50%);
  pointer-events: none;
}

.contestant-label,
.contestant-score {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 2px solid rgba(36, 48, 47, .62);
  border-radius: 999px;
  background: rgba(255, 254, 249, .92);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.contestant-pet {
  position: relative;
  z-index: 2;
  width: min(88%, 210px);
  aspect-ratio: 1;
  margin-top: 4px;
}

.contestant-pet .pet-css {
  width: 100%;
  height: 100%;
}

.contestant-pet .pet-image-stack {
  filter: drop-shadow(0 14px 12px rgba(27, 34, 34, .26));
}

.contestant-card strong {
  position: relative;
  z-index: 3;
  display: block;
  max-width: 100%;
  margin-top: -6px;
  overflow-wrap: anywhere;
  padding: 7px 10px;
  border: 2px solid rgba(36, 48, 47, .66);
  border-radius: 8px;
  background: rgba(255, 254, 249, .9);
  text-align: center;
}

.contestant-score {
  margin-top: 7px;
  color: #fffef9;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.contestant-card.is-winner .contestant-score {
  color: var(--ink);
  background: linear-gradient(135deg, #fff6d7, #f1bd46);
}

.versus-badge {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 3px solid rgba(36, 48, 47, .86);
  border-radius: 50%;
  background: linear-gradient(135deg, #fffef9, #f1bd46);
  box-shadow: 0 8px 0 rgba(36, 48, 47, .16);
  font-weight: 900;
}

.pet-image-stack .outfit-back,
.pet-image-stack .outfit-front,
.pet-image-stack .hat,
.pet-image-stack .accessory {
  border-color: rgba(32, 30, 36, .72);
  filter: drop-shadow(0 5px 3px rgba(27, 34, 34, .22));
}

.pet-image-stack .outfit-front::before,
.pet-image-stack .outfit-front::after,
.pet-image-stack .outfit-back::before,
.pet-image-stack .outfit-back::after,
.pet-image-stack .hat::before,
.pet-image-stack .hat::after,
.pet-image-stack .accessory::before,
.pet-image-stack .accessory::after {
  box-sizing: border-box;
}

.pet-image-stack .outfit-front.parade-sash {
  left: 29%;
  top: 54%;
  width: 46%;
  height: 38%;
  background:
    linear-gradient(47deg, transparent 0 31%, rgba(83, 50, 16, .4) 32% 35%, #fff6d7 36% 41%, #f8d66b 42% 56%, #c87627 57% 61%, #fff6d7 62% 67%, rgba(83, 50, 16, .32) 68% 71%, transparent 72%);
  opacity: .98;
  filter: drop-shadow(0 5px 4px rgba(27, 34, 34, .28));
}

.pet-image-stack .outfit-front.parade-sash::before {
  position: absolute;
  content: "";
  left: 61%;
  top: 58%;
  width: 19%;
  height: 19%;
  border: 3px solid rgba(36, 48, 47, .72);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff6d7 0 30%, transparent 31%),
    repeating-conic-gradient(#f1bd46 0 22deg, #e96656 22deg 44deg);
}

.pet-image-stack .outfit-front.parade-sash::after {
  position: absolute;
  content: "";
  left: 39%;
  top: 14%;
  width: 10%;
  height: 70%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  transform: rotate(47deg);
}

.pet-image-stack .outfit-back.galaxy-cape,
.pet-image-stack .outfit-back.velvet-cape {
  left: 17%;
  top: 38%;
  width: 68%;
  height: 56%;
  border: 0;
  border-radius: 40% 40% 22% 22%;
  clip-path: polygon(18% 4%, 82% 4%, 96% 94%, 69% 82%, 51% 98%, 32% 82%, 4% 94%);
  opacity: .9;
}

.pet-image-stack .outfit-back.galaxy-cape {
  background:
    radial-gradient(circle at 30% 28%, #fff6d7 0 2.5%, transparent 3%),
    radial-gradient(circle at 66% 38%, #bfeaff 0 3%, transparent 3.5%),
    radial-gradient(circle at 46% 70%, #fff6d7 0 2.2%, transparent 2.8%),
    linear-gradient(140deg, #4c6ccb 0%, #1f2f58 52%, #151a3e 100%);
}

.pet-image-stack .outfit-back.velvet-cape {
  background:
    linear-gradient(90deg, transparent 0 45%, rgba(255, 232, 140, .95) 46% 54%, transparent 55%),
    radial-gradient(circle at 50% 12%, rgba(255, 246, 215, .48) 0 20%, transparent 21%),
    linear-gradient(145deg, #9b5c91 0%, #704567 58%, #3a2246 100%);
}

.pet-image-stack .outfit-front.galaxy-cape,
.pet-image-stack .outfit-front.velvet-cape {
  left: 32%;
  top: 54%;
  width: 39%;
  height: 15%;
  border-width: 3px;
  border-radius: 46% 46% 55% 55%;
  background:
    radial-gradient(circle at 25% 52%, #fffef9 0 7%, transparent 8%),
    radial-gradient(circle at 50% 56%, #fffef9 0 8%, transparent 9%),
    radial-gradient(circle at 75% 52%, #fffef9 0 7%, transparent 8%),
    linear-gradient(180deg, #fff6d7, #e3c16f);
}

.pet-image-stack .outfit-front.rainbow-vest,
.pet-image-stack .outfit-front.plaid-jacket {
  left: 30%;
  top: 58%;
  width: 41%;
  height: 24%;
  border-width: 3px;
  border-radius: 28% 28% 38% 38%;
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, .22),
    inset 0 -8px 0 rgba(36, 48, 47, .1);
}

.pet-image-stack .outfit-front.rainbow-vest {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .32), transparent 36%),
    linear-gradient(90deg, #e96656 0 19%, #f1bd46 20% 39%, #79d3d6 40% 61%, #4a7fb3 62% 81%, #6f9d4b 82%);
}

.pet-image-stack .outfit-front.rainbow-vest::before {
  position: absolute;
  content: "";
  left: 47%;
  top: 0;
  bottom: 0;
  width: 5px;
  background: rgba(36, 48, 47, .44);
}

.pet-image-stack .outfit-front.plaid-jacket {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .28), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 16%, rgba(255, 246, 215, .75) 16% 21%),
    repeating-linear-gradient(0deg, transparent 0 22%, rgba(242, 189, 70, .78) 22% 28%),
    #53754a;
}

.pet-image-stack .outfit-front.plaid-jacket::before,
.pet-image-stack .outfit-front.plaid-jacket::after {
  position: absolute;
  content: "";
  top: 5%;
  width: 27%;
  height: 58%;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 246, 215, .7);
}

.pet-image-stack .outfit-front.plaid-jacket::before {
  left: 18%;
  clip-path: polygon(0 0, 100% 0, 28% 100%);
}

.pet-image-stack .outfit-front.plaid-jacket::after {
  right: 18%;
  clip-path: polygon(0 0, 100% 0, 72% 100%);
}

.pet-image-stack .outfit-back.bat-wings {
  left: 4%;
  top: 42%;
  width: 92%;
  height: 38%;
  opacity: .92;
}

.pet-image-stack .outfit-back.bat-wings::before,
.pet-image-stack .outfit-back.bat-wings::after {
  border-color: rgba(32, 30, 36, .78);
  background:
    radial-gradient(circle at 60% 28%, rgba(255, 255, 255, .18) 0 13%, transparent 14%),
    linear-gradient(145deg, #705182, #4a3759 66%, #2a1e34);
}

.pet-image-stack .outfit-front.bat-wings {
  left: 45%;
  top: 59%;
  width: 12%;
  height: 12%;
  border-width: 3px;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .48) 0 18%, transparent 19%),
    #b8e38e;
}

.pet-image-stack .hat.sunny-bow {
  left: 36%;
  top: 20%;
  width: 29%;
  height: 17%;
  background: radial-gradient(circle at 50% 50%, #f1bd46 0 15%, #7b3a27 16% 21%, transparent 22%);
}

.pet-image-stack .hat.sunny-bow::before,
.pet-image-stack .hat.sunny-bow::after {
  position: absolute;
  content: "";
  top: 14%;
  width: 44%;
  height: 72%;
  border: 3px solid rgba(32, 30, 36, .74);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .42) 0 15%, transparent 16%),
    linear-gradient(145deg, #ff9582, #e96656 64%, #a63c34);
}

.pet-image-stack .hat.sunny-bow::before {
  left: 0;
  border-radius: 70% 34% 70% 42%;
  transform: rotate(12deg);
}

.pet-image-stack .hat.sunny-bow::after {
  right: 0;
  border-radius: 34% 70% 42% 70%;
  transform: rotate(-12deg);
}

.pet-image-stack .hat.star-helmet {
  left: 22%;
  top: 11%;
  width: 58%;
  height: 58%;
  border-width: 4px;
  border-color: rgba(137, 211, 237, .9);
  background:
    radial-gradient(circle at 33% 24%, rgba(255, 255, 255, .82) 0 8%, transparent 9%),
    radial-gradient(circle at 64% 68%, rgba(191, 234, 255, .28) 0 30%, transparent 31%),
    rgba(210, 245, 255, .26);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .48),
    inset 0 -14px 24px rgba(74, 127, 179, .18);
}

.pet-image-stack .hat.star-helmet::before {
  left: 49%;
  top: -24%;
  width: 4px;
  height: 25%;
  border-radius: 999px;
  background: rgba(36, 48, 47, .8);
}

.pet-image-stack .hat.star-helmet::after {
  left: 41%;
  top: -38%;
  width: 20%;
  height: 20%;
  border-width: 3px;
  background: linear-gradient(145deg, #fff6a7, #f1bd46);
}

.pet-image-stack .hat.tiny-crown {
  left: 39%;
  top: 14%;
  width: 25%;
  height: 16%;
  background:
    radial-gradient(circle at 24% 58%, #e96656 0 6%, transparent 7%),
    radial-gradient(circle at 50% 34%, #4a7fb3 0 7%, transparent 8%),
    radial-gradient(circle at 76% 58%, #2d7f86 0 6%, transparent 7%),
    linear-gradient(180deg, #ffe88c, #f1bd46 62%, #bf7c20);
  filter: drop-shadow(0 5px 3px rgba(27, 34, 34, .26));
}

.pet-image-stack .hat.school-cap {
  left: 33%;
  top: 15%;
  width: 37%;
  height: 22%;
}

.pet-image-stack .hat.school-cap::before {
  border-width: 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .24), transparent 34%),
    #2d7f86;
}

.pet-image-stack .hat.school-cap::after {
  right: 4%;
  top: 45%;
  width: 4px;
  height: 44%;
  background: rgba(36, 48, 47, .82);
  box-shadow: 0 16px 0 3px #f1bd46;
}

.pet-image-stack .hat.monster-horns {
  left: 29%;
  top: 8%;
  width: 45%;
  height: 25%;
}

.pet-image-stack .hat.monster-horns::before,
.pet-image-stack .hat.monster-horns::after {
  border-width: 4px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 8%, transparent 8% 16%),
    linear-gradient(145deg, #d7f4b9, #b8e38e 70%, #73a64f);
}

.pet-image-stack .accessory.treat-pouch,
.pet-image-stack .accessory.notebook-badge {
  left: 61%;
  top: 62%;
  width: 14%;
  height: 16%;
  border-width: 3px;
  filter: drop-shadow(0 5px 3px rgba(27, 34, 34, .22));
}

.pet-image-stack .accessory.treat-pouch {
  border-radius: 9px 9px 12px 12px;
  background:
    radial-gradient(circle at 50% 68%, #f1bd46 0 16%, #8d5424 17% 20%, transparent 21%),
    linear-gradient(#fff6d7, #fff6d7) center 28% / 68% 10% no-repeat,
    linear-gradient(145deg, #d48c55, #8f542f);
}

.pet-image-stack .accessory.treat-pouch::before {
  position: absolute;
  content: "";
  left: 14%;
  right: 14%;
  top: -18%;
  height: 36%;
  border: 3px solid rgba(32, 30, 36, .72);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.pet-image-stack .accessory.moon-wand {
  left: 65%;
  top: 38%;
  width: 29%;
  height: 34%;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(36, 48, 47, .4) 48% 50%, #fff6d7 51% 56%, transparent 57%);
  filter: drop-shadow(0 5px 3px rgba(27, 34, 34, .24));
}

.pet-image-stack .accessory.moon-wand::after {
  right: 1%;
  top: -2%;
  width: 43%;
  height: 43%;
  border-width: 4px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .82) 0 13%, transparent 14%),
    #bfeaff;
  box-shadow: inset -11px 0 0 #fff6d7;
}

.pet-image-stack .accessory.pearl-collar {
  left: 34%;
  top: 49%;
  width: 35%;
  height: 17%;
  border-bottom-width: 10px;
  filter: drop-shadow(0 4px 2px rgba(27, 34, 34, .18));
}

.pet-image-stack .accessory.pearl-collar::after {
  left: 42%;
  top: 58%;
  width: 18%;
  height: 36%;
  border-width: 3px;
  background: radial-gradient(circle at 38% 32%, #fff6d7 0 24%, #f1bd46 25%);
}

.pet-image-stack .accessory.prism-spinner {
  left: 64%;
  top: 58%;
  width: 15%;
  height: 15%;
  border-width: 3px;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .72) 0 15%, transparent 16%),
    conic-gradient(#e96656, #f1bd46, #79d3d6, #4a7fb3, #e96656);
  animation: prismTurn 3s linear infinite;
}

@keyframes prismTurn {
  to {
    rotate: 360deg;
  }
}

.pet-image-stack .accessory.notebook-badge {
  border-radius: 7px;
  background:
    linear-gradient(#4a7fb3, #4a7fb3) 50% 28% / 65% 8% no-repeat,
    linear-gradient(#4a7fb3, #4a7fb3) 50% 50% / 65% 8% no-repeat,
    linear-gradient(#4a7fb3, #4a7fb3) 35% 72% / 35% 8% no-repeat,
    linear-gradient(145deg, #fffef9, #fff6d7);
}

.pet-image-stack .accessory.candy-mask {
  left: 34%;
  top: 36%;
  width: 33%;
  height: 15%;
  border-width: 3px;
  border-radius: 42%;
  background:
    radial-gradient(ellipse at 32% 52%, #fff6d7 0 15%, transparent 16%),
    radial-gradient(ellipse at 68% 52%, #fff6d7 0 15%, transparent 16%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 9%, transparent 9% 18%),
    linear-gradient(145deg, #ff8b78, #e96656 68%, #9f3630);
}

.pet-image-stack.pet-slime .outfit-front {
  transform: translateY(8%);
}

.pet-image-stack.pet-slime .accessory {
  transform: translateY(10%);
}

.pet-image-stack.pet-bunny .hat {
  transform: translateY(-10%);
}

.pet-image-stack.pet-dragon .hat,
.pet-image-stack.pet-dragon .accessory,
.pet-image-stack.pet-dragon .outfit-front {
  transform: translateY(2%);
}

@media (max-width: 760px) {
  .game-list {
    grid-template-columns: 1fr;
  }

  .spotlight-board {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
  }

  .showdown-stage {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 620px;
    background-position: center;
  }

  .contestant-card {
    min-height: 270px;
  }

  .contestant-pet {
    width: min(62vw, 210px);
  }

  .versus-badge {
    justify-self: center;
    margin: -10px 0;
  }
}

@media (max-width: 620px) {
  .game-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .game-icon {
    width: 56px;
    height: 56px;
  }

  .spotlight-board {
    gap: 8px;
  }

  .spotlight-choice {
    min-height: 124px;
    padding-inline: 8px;
  }

  .showdown-stage {
    min-height: 560px;
  }

  .contestant-card {
    min-height: 244px;
    padding-inline: 6px;
  }

  .contestant-pet {
    width: min(58vw, 190px);
  }
}

/* Painterly outfit pass: soften costume pieces so they match the PNG pets. */
.trunk-panel {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  overflow: hidden;
  border: 2px solid rgba(36, 48, 47, .78);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 246, 215, .9) 0 36px, transparent 37px),
    linear-gradient(135deg, rgba(121, 211, 214, .25), rgba(242, 189, 70, .28)),
    #fffef9;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .42), 0 8px 0 rgba(36, 48, 47, .08);
}

.trunk-panel::after {
  position: absolute;
  content: "";
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(233, 102, 86, .22) 0 28px, transparent 29px),
    linear-gradient(100deg, transparent 0 55%, rgba(255, 255, 255, .3) 56% 62%, transparent 63%);
  pointer-events: none;
}

.trunk-panel h3 {
  font-size: 1rem;
}

.trunk-panel p {
  margin-top: 3px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.3;
}

.trunk-art {
  position: relative;
  width: 64px;
  height: 58px;
  border-radius: 12px 12px 9px 9px;
  background:
    linear-gradient(90deg, transparent 0 43%, rgba(255, 246, 215, .72) 44% 56%, transparent 57%),
    linear-gradient(145deg, #f1bd46, #c9782b 62%, #7a4424);
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, .34), 0 7px 0 rgba(36, 48, 47, .16);
}

.trunk-art::before,
.trunk-art::after {
  position: absolute;
  content: "";
  box-sizing: border-box;
}

.trunk-art::before {
  left: 9px;
  right: 9px;
  top: -9px;
  height: 20px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(145deg, #fff6d7, #f1bd46);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .42);
}

.trunk-art::after {
  left: 24px;
  top: 24px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #fff6d7 0 4px, transparent 5px),
    #2d7f86;
}

.pet-image-stack::before {
  position: absolute;
  content: "";
  inset: 10% 8% 8%;
  z-index: 3;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  filter: blur(1px);
}

.pet-image-stack.look-parade-sash::before {
  opacity: .72;
  background:
    radial-gradient(circle at 62% 72%, rgba(242, 189, 70, .35) 0 8%, transparent 9%),
    radial-gradient(circle at 48% 56%, rgba(255, 246, 215, .26) 0 28%, transparent 29%);
}

.pet-image-stack.look-galaxy-cape::before {
  opacity: .86;
  background:
    radial-gradient(circle at 24% 25%, #fff6d7 0 1.5%, transparent 2%),
    radial-gradient(circle at 74% 34%, #bfeaff 0 1.8%, transparent 2.3%),
    radial-gradient(circle at 42% 74%, #fff6d7 0 1.4%, transparent 2%),
    radial-gradient(circle at 50% 58%, rgba(82, 111, 205, .32) 0 40%, transparent 58%);
}

.pet-image-stack.look-velvet-cape::before {
  opacity: .84;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 232, 140, .42) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 66%, rgba(112, 69, 103, .24) 0 42%, transparent 58%);
}

.pet-image-stack.look-rainbow-vest::before {
  opacity: .82;
  background:
    conic-gradient(from 210deg at 50% 50%, rgba(233, 102, 86, .28), rgba(242, 189, 70, .28), rgba(121, 211, 214, .28), rgba(74, 127, 179, .28), rgba(233, 102, 86, .28));
}

.pet-image-stack.look-plaid-jacket::before {
  opacity: .62;
  background:
    repeating-linear-gradient(90deg, rgba(255, 246, 215, .2) 0 16px, transparent 16px 32px),
    radial-gradient(circle at 50% 60%, rgba(83, 117, 74, .3) 0 36%, transparent 56%);
}

.pet-image-stack.look-bat-wings::before {
  opacity: .85;
  background:
    radial-gradient(circle at 30% 55%, rgba(184, 227, 142, .24) 0 16%, transparent 17%),
    radial-gradient(circle at 70% 55%, rgba(233, 102, 86, .2) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 62%, rgba(74, 55, 89, .35) 0 44%, transparent 60%);
}

.pet-image-stack .outfit-back,
.pet-image-stack .outfit-front,
.pet-image-stack .hat,
.pet-image-stack .accessory {
  border: 0 !important;
  filter: drop-shadow(0 7px 7px rgba(27, 34, 34, .2));
}

.pet-image-stack .outfit-front.parade-sash {
  border-radius: 12px;
  background:
    linear-gradient(47deg, transparent 0 31%, rgba(93, 58, 20, .24) 32% 35%, rgba(255, 246, 215, .96) 36% 41%, #f7d25f 42% 56%, #d88b37 57% 61%, rgba(255, 246, 215, .92) 62% 67%, rgba(93, 58, 20, .18) 68% 71%, transparent 72%);
}

.pet-image-stack .outfit-front.parade-sash::before {
  border: 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 5px rgba(27, 34, 34, .24);
}

.pet-image-stack .outfit-back.galaxy-cape,
.pet-image-stack .outfit-back.velvet-cape {
  opacity: .78;
  filter: drop-shadow(0 10px 8px rgba(27, 34, 34, .18));
}

.pet-image-stack .outfit-back.galaxy-cape::after,
.pet-image-stack .outfit-back.velvet-cape::after {
  position: absolute;
  content: "";
  inset: 4% 8% 10%;
  border-radius: 46% 46% 24% 24%;
  background: linear-gradient(120deg, rgba(255, 255, 255, .28), transparent 34%);
}

.pet-image-stack .outfit-front.galaxy-cape,
.pet-image-stack .outfit-front.velvet-cape {
  background:
    radial-gradient(circle at 25% 52%, #fffef9 0 7%, transparent 8%),
    radial-gradient(circle at 50% 56%, #fffef9 0 8%, transparent 9%),
    radial-gradient(circle at 75% 52%, #fffef9 0 7%, transparent 8%),
    linear-gradient(180deg, rgba(255, 246, 215, .95), rgba(216, 178, 92, .92));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .44), 0 4px 5px rgba(27, 34, 34, .16);
}

.pet-image-stack .outfit-front.rainbow-vest,
.pet-image-stack .outfit-front.plaid-jacket {
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, .24),
    inset 0 -10px 14px rgba(36, 48, 47, .13),
    0 5px 8px rgba(27, 34, 34, .18);
}

.pet-image-stack .outfit-front.rainbow-vest {
  opacity: .88;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .44), transparent 38%),
    linear-gradient(90deg, #ee6f62 0 19%, #f4c84f 20% 39%, #82dfe0 40% 61%, #568bc5 62% 81%, #79b45c 82%);
}

.pet-image-stack .outfit-front.plaid-jacket {
  opacity: .86;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .36), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 16%, rgba(255, 246, 215, .65) 16% 21%),
    repeating-linear-gradient(0deg, transparent 0 22%, rgba(242, 189, 70, .68) 22% 28%),
    #5f8756;
}

.pet-image-stack .outfit-back.bat-wings::before,
.pet-image-stack .outfit-back.bat-wings::after {
  border: 0;
  opacity: .86;
  box-shadow: inset 0 8px 12px rgba(255, 255, 255, .12), 0 8px 10px rgba(27, 34, 34, .18);
}

.pet-image-stack .outfit-front.bat-wings {
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .58) 0 18%, transparent 19%),
    linear-gradient(145deg, #d5f2a7, #8bbf61);
  box-shadow: 0 4px 7px rgba(27, 34, 34, .22);
}

.pet-image-stack .hat.sunny-bow {
  background: radial-gradient(circle at 50% 50%, #f6c64c 0 15%, rgba(119, 57, 36, .52) 16% 21%, transparent 22%);
}

.pet-image-stack .hat.sunny-bow::before,
.pet-image-stack .hat.sunny-bow::after {
  border: 0;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .52) 0 15%, transparent 16%),
    linear-gradient(145deg, #ff9c8b, #e96656 64%, #b84840);
  box-shadow: inset 0 -5px 9px rgba(126, 42, 36, .22), 0 4px 6px rgba(27, 34, 34, .22);
}

.pet-image-stack .hat.star-helmet {
  border: 0 !important;
  opacity: .76;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .9) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 68%, rgba(191, 234, 255, .35) 0 30%, transparent 31%),
    rgba(210, 245, 255, .22);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, .52),
    inset 0 -16px 28px rgba(74, 127, 179, .18),
    0 5px 9px rgba(27, 34, 34, .14);
}

.pet-image-stack .hat.star-helmet::before {
  background: rgba(255, 246, 215, .92);
  box-shadow: 0 0 6px rgba(255, 246, 215, .8);
}

.pet-image-stack .hat.star-helmet::after {
  border: 0;
  box-shadow: 0 0 8px rgba(242, 189, 70, .7);
}

.pet-image-stack .hat.tiny-crown {
  background:
    radial-gradient(circle at 24% 58%, #e96656 0 6%, transparent 7%),
    radial-gradient(circle at 50% 34%, #4a7fb3 0 7%, transparent 8%),
    radial-gradient(circle at 76% 58%, #2d7f86 0 6%, transparent 7%),
    linear-gradient(180deg, #fff1a7, #f1bd46 62%, #c7832e);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .34), 0 5px 7px rgba(27, 34, 34, .2);
}

.pet-image-stack .hat.school-cap::before {
  border: 0;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .2), 0 5px 7px rgba(27, 34, 34, .2);
}

.pet-image-stack .hat.school-cap::after {
  background: rgba(255, 246, 215, .9);
  box-shadow: 0 15px 0 3px #f1bd46;
}

.pet-image-stack .hat.monster-horns::before,
.pet-image-stack .hat.monster-horns::after {
  border: 0;
  box-shadow: inset 0 5px 7px rgba(255, 255, 255, .22), 0 4px 7px rgba(27, 34, 34, .2);
}

.pet-image-stack .accessory.treat-pouch,
.pet-image-stack .accessory.notebook-badge,
.pet-image-stack .accessory.prism-spinner,
.pet-image-stack .accessory.candy-mask {
  border: 0 !important;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .25), 0 5px 7px rgba(27, 34, 34, .2);
}

.pet-image-stack .accessory.treat-pouch::before {
  border-color: rgba(110, 65, 34, .48);
}

.pet-image-stack .accessory.moon-wand {
  filter: drop-shadow(0 5px 6px rgba(27, 34, 34, .22)) drop-shadow(0 0 8px rgba(191, 234, 255, .34));
}

.pet-image-stack .accessory.moon-wand::after {
  border: 0;
  box-shadow: inset -11px 0 0 rgba(255, 246, 215, .95), 0 0 10px rgba(191, 234, 255, .78);
}

.pet-image-stack .accessory.pearl-collar {
  border: 0 !important;
  border-bottom: 10px dotted rgba(255, 240, 201, .96) !important;
  filter: drop-shadow(0 3px 3px rgba(27, 34, 34, .18));
}

.pet-image-stack .accessory.pearl-collar::after {
  border: 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 5px rgba(27, 34, 34, .2);
}

.pet-image-stack .accessory.prism-spinner {
  filter: drop-shadow(0 0 8px rgba(121, 211, 214, .42));
}

.pet-image-stack .accessory.candy-mask {
  opacity: .82;
}

@media (max-width: 620px) {
  .trunk-panel {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .trunk-art {
    width: 54px;
    height: 50px;
  }

  .trunk-panel .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ImageGen costume PNG pass. */
.pet-image-stack .outfit-back,
.pet-image-stack .outfit-front,
.pet-image-stack .hat,
.pet-image-stack .accessory {
  overflow: visible;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  filter: drop-shadow(0 8px 8px rgba(27, 34, 34, .22));
}

.pet-image-stack .outfit-back::before,
.pet-image-stack .outfit-back::after,
.pet-image-stack .outfit-front::before,
.pet-image-stack .outfit-front::after,
.pet-image-stack .hat::before,
.pet-image-stack .hat::after,
.pet-image-stack .accessory::before,
.pet-image-stack .accessory::after {
  display: none !important;
  content: none !important;
}

.pet-image-stack .hat {
  z-index: 12;
  background-image: url("assets/generated/costume-hats.png") !important;
  --costume-mask: url("assets/generated/costume-hats.png");
}

.pet-image-stack .hat.sunny-bow {
  left: 29%;
  top: 15%;
  width: 43%;
  height: 26%;
  background-position: 0% 0% !important;
  --costume-position: 0% 0%;
}

.pet-image-stack .hat.star-helmet {
  left: 16%;
  top: 4%;
  width: 70%;
  height: 68%;
  opacity: .9;
  background-position: 50% 0% !important;
  --costume-position: 50% 0%;
}

.pet-image-stack .hat.tiny-crown {
  left: 31%;
  top: 8%;
  width: 42%;
  height: 29%;
  background-position: 100% 0% !important;
  --costume-position: 100% 0%;
}

.pet-image-stack .hat.school-cap {
  left: 22%;
  top: 11%;
  width: 58%;
  height: 36%;
  background-position: 0% 100% !important;
  --costume-position: 0% 100%;
}

.pet-image-stack .hat.monster-horns {
  left: 23%;
  top: 5%;
  width: 57%;
  height: 38%;
  background-position: 50% 100% !important;
  --costume-position: 50% 100%;
}

.pet-image-stack .outfit-front {
  z-index: 9;
  background-image: url("assets/generated/costume-outfits.png") !important;
  --costume-mask: url("assets/generated/costume-outfits.png");
}

.pet-image-stack .outfit-back {
  display: none !important;
}

.pet-image-stack .outfit-front.parade-sash {
  left: 18%;
  top: 43%;
  width: 67%;
  height: 49%;
  opacity: .96;
  background-position: 0% 0% !important;
  --costume-position: 0% 0%;
}

.pet-image-stack .outfit-front.galaxy-cape {
  left: 16%;
  top: 40%;
  width: 70%;
  height: 52%;
  opacity: .94;
  background-position: 50% 0% !important;
  --costume-position: 50% 0%;
}

.pet-image-stack .outfit-front.velvet-cape {
  left: 15%;
  top: 39%;
  width: 72%;
  height: 54%;
  opacity: .94;
  background-position: 100% 0% !important;
  --costume-position: 100% 0%;
}

.pet-image-stack .outfit-front.rainbow-vest {
  left: 17%;
  top: 50%;
  width: 70%;
  height: 48%;
  opacity: .95;
  background-position: 0% 100% !important;
  --costume-position: 0% 100%;
}

.pet-image-stack .outfit-front.plaid-jacket {
  left: 16%;
  top: 47%;
  width: 72%;
  height: 52%;
  opacity: .95;
  background-position: 50% 100% !important;
  --costume-position: 50% 100%;
}

.pet-image-stack .outfit-front.bat-wings {
  left: 4%;
  top: 36%;
  width: 94%;
  height: 58%;
  opacity: .95;
  z-index: 5;
  background-position: 100% 100% !important;
  --costume-position: 100% 100%;
}

.pet-image-stack .accessory {
  z-index: 13;
  background-image: url("assets/generated/costume-accessories.png") !important;
  --costume-mask: url("assets/generated/costume-accessories.png");
}

.pet-image-stack .accessory.treat-pouch {
  left: 57%;
  top: 58%;
  width: 29%;
  height: 29%;
  background-position: 0% 0% !important;
  --costume-position: 0% 0%;
}

.pet-image-stack .accessory.moon-wand {
  left: 59%;
  top: 35%;
  width: 34%;
  height: 43%;
  background-position: 50% 0% !important;
  --costume-position: 50% 0%;
}

.pet-image-stack .accessory.pearl-collar {
  left: 29%;
  top: 44%;
  width: 45%;
  height: 28%;
  background-position: 100% 0% !important;
  --costume-position: 100% 0%;
}

.pet-image-stack .accessory.prism-spinner {
  left: 57%;
  top: 56%;
  width: 30%;
  height: 30%;
  animation: none;
  background-position: 0% 100% !important;
  --costume-position: 0% 100%;
}

.pet-image-stack .accessory.notebook-badge {
  left: 58%;
  top: 55%;
  width: 30%;
  height: 34%;
  background-position: 50% 100% !important;
  --costume-position: 50% 100%;
}

.pet-image-stack .accessory.candy-mask {
  left: 28%;
  top: 33%;
  width: 46%;
  height: 28%;
  opacity: .92;
  background-position: 100% 100% !important;
  --costume-position: 100% 100%;
}

.pet-image-stack.pet-slime .hat {
  transform: translateY(12%);
}

.pet-image-stack.pet-slime .outfit-front {
  transform: translateY(8%) scale(.98);
}

.pet-image-stack.pet-dragon .hat,
.pet-image-stack.pet-dragon .outfit-front,
.pet-image-stack.pet-dragon .accessory {
  transform: translateY(2%);
}

.pet-image-stack.pet-bunny .hat {
  transform: translateY(-8%);
}

/* Player-adjustable costume fit controls. */
.pet-image-stack .fit-layer {
  --species-x: 0%;
  --species-y: 0%;
  --species-scale: 1;
  --fit-x: 0%;
  --fit-y: 0%;
  --fit-scale: 1;
  --fit-rotate: 0deg;
  --fit-color: #ffffff;
  --fit-tint: 0;
  transform:
    translate(var(--species-x), var(--species-y))
    translate(var(--fit-x), var(--fit-y))
    rotate(var(--fit-rotate))
    scale(var(--species-scale))
    scale(var(--fit-scale));
  transform-origin: center;
  touch-action: none;
}

.pet-image-stack.pet-slime .hat {
  --species-y: 12%;
}

.pet-image-stack.pet-slime .outfit-front {
  --species-y: 8%;
  --species-scale: .98;
}

.pet-image-stack.pet-dragon .hat,
.pet-image-stack.pet-dragon .outfit-front,
.pet-image-stack.pet-dragon .accessory {
  --species-y: 2%;
}

.pet-image-stack.pet-bunny .hat {
  --species-y: -8%;
}

.pet-image-stack .fit-layer::after {
  position: absolute;
  content: "" !important;
  display: block !important;
  inset: 0;
  border-radius: inherit;
  background: var(--fit-color);
  opacity: var(--fit-tint);
  pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--costume-mask);
  mask-image: var(--costume-mask);
  -webkit-mask-position: var(--costume-position, 0% 0%);
  mask-position: var(--costume-position, 0% 0%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 300% 200%;
  mask-size: 300% 200%;
}

.pet-art.is-fitting .fit-layer {
  pointer-events: none;
}

.pet-art.is-fitting .fit-layer.is-editable-fit {
  cursor: grab;
  outline: 2px solid rgba(45, 127, 134, .56);
  outline-offset: 4px;
  pointer-events: auto;
}

.pet-art.is-dragging-fit .fit-layer.is-editable-fit {
  cursor: grabbing;
  outline-color: rgba(233, 102, 86, .72);
}

@media (max-width: 620px) {
  .fit-control-grid {
    grid-template-columns: 1fr;
  }

  .fit-editor-header {
    align-items: flex-start;
  }
}

.closet-preview {
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  box-shadow: none !important;
}

.closet-preview::before,
.closet-preview::after {
  display: none !important;
  content: none !important;
}

.closet-preview.preview-none-hat {
  border: 2px dashed rgba(36, 48, 47, .28) !important;
  background:
    radial-gradient(circle at 50% 55%, rgba(45, 127, 134, .24) 0 11px, transparent 12px),
    #fffef9 !important;
}

.closet-preview.preview-sunny-bow,
.closet-preview.preview-star-helmet,
.closet-preview.preview-tiny-crown,
.closet-preview.preview-school-cap,
.closet-preview.preview-monster-horns {
  width: 78px !important;
  height: 64px !important;
  background-image: url("assets/generated/costume-hats.png") !important;
}

.closet-preview.preview-sunny-bow { background-position: 0% 0% !important; }
.closet-preview.preview-star-helmet { background-position: 50% 0% !important; }
.closet-preview.preview-tiny-crown { background-position: 100% 0% !important; }
.closet-preview.preview-school-cap { background-position: 0% 100% !important; }
.closet-preview.preview-monster-horns { background-position: 50% 100% !important; }

.closet-preview.preview-parade-sash,
.closet-preview.preview-galaxy-cape,
.closet-preview.preview-velvet-cape,
.closet-preview.preview-rainbow-vest,
.closet-preview.preview-plaid-jacket,
.closet-preview.preview-bat-wings {
  width: 86px !important;
  height: 66px !important;
  background-image: url("assets/generated/costume-outfits.png") !important;
}

.closet-preview.preview-parade-sash { background-position: 0% 0% !important; }
.closet-preview.preview-galaxy-cape { background-position: 50% 0% !important; }
.closet-preview.preview-velvet-cape { background-position: 100% 0% !important; }
.closet-preview.preview-rainbow-vest { background-position: 0% 100% !important; }
.closet-preview.preview-plaid-jacket { background-position: 50% 100% !important; }
.closet-preview.preview-bat-wings { background-position: 100% 100% !important; }

.closet-preview.preview-treat-pouch,
.closet-preview.preview-moon-wand,
.closet-preview.preview-pearl-collar,
.closet-preview.preview-prism-spinner,
.closet-preview.preview-notebook-badge,
.closet-preview.preview-candy-mask {
  width: 78px !important;
  height: 64px !important;
  background-image: url("assets/generated/costume-accessories.png") !important;
}

.closet-preview.preview-treat-pouch { background-position: 0% 0% !important; }
.closet-preview.preview-moon-wand { background-position: 50% 0% !important; }
.closet-preview.preview-pearl-collar { background-position: 100% 0% !important; }
.closet-preview.preview-prism-spinner { background-position: 0% 100% !important; }
.closet-preview.preview-notebook-badge { background-position: 50% 100% !important; }
.closet-preview.preview-candy-mask { background-position: 100% 100% !important; }

/* Animated parade results. */
.result-sheet {
  position: relative;
  overflow: hidden auto;
}

.result-confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.result-confetti {
  position: absolute;
  top: -26px;
  width: 11px;
  height: 18px;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(36, 48, 47, .12);
  animation: resultConfettiDrop 2.15s cubic-bezier(.16, .7, .2, 1) forwards;
}

.result-confetti.piece-1 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.result-confetti.piece-2 {
  width: 18px;
  height: 9px;
}

.result-confetti.piece-3 {
  width: 13px;
  height: 13px;
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 70% 58%, 82% 100%, 50% 76%, 18% 100%, 30% 58%, 0 35%, 38% 35%);
}

@keyframes resultConfettiDrop {
  to {
    transform: translate(var(--drift, 0), 760px) rotate(var(--spin, 180deg));
    opacity: 0;
  }
}

.parade-beat {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  margin-top: 10px;
  padding: 7px 10px;
  border: 2px solid rgba(36, 48, 47, .68);
  border-radius: 999px;
  background: rgba(255, 254, 249, .9);
  box-shadow: 0 5px 0 rgba(36, 48, 47, .09);
  font-size: .82rem;
  text-transform: uppercase;
}

.parade-beat span {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e96656;
  box-shadow: 0 0 0 4px rgba(233, 102, 86, .18), 0 0 16px rgba(233, 102, 86, .56);
  animation: paradeBeatPulse .8s ease-in-out infinite alternate;
}

@keyframes paradeBeatPulse {
  to {
    background: #f1bd46;
    box-shadow: 0 0 0 5px rgba(242, 189, 70, .2), 0 0 18px rgba(242, 189, 70, .75);
  }
}

.showdown-stage {
  min-height: 344px;
}

.showdown-stage::after {
  position: absolute;
  content: "";
  left: 8%;
  right: 8%;
  bottom: 8%;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 246, 215, .4) 0 38%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.runway-sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.runway-sparkles span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff6d7;
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 70% 58%, 82% 100%, 50% 76%, 18% 100%, 30% 58%, 0 35%, 38% 35%);
  filter: drop-shadow(0 0 8px rgba(255, 246, 215, .86));
  opacity: 0;
  animation: sparklePop 1.7s ease-in-out infinite;
}

.runway-sparkles span:nth-child(1) { left: 12%; top: 24%; animation-delay: .2s; }
.runway-sparkles span:nth-child(2) { left: 34%; top: 14%; animation-delay: .55s; }
.runway-sparkles span:nth-child(3) { left: 62%; top: 20%; animation-delay: .9s; }
.runway-sparkles span:nth-child(4) { right: 12%; top: 34%; animation-delay: 1.15s; }
.runway-sparkles span:nth-child(5) { left: 50%; bottom: 18%; animation-delay: 1.35s; }

@keyframes sparklePop {
  0%, 100% {
    transform: scale(.35) rotate(0deg);
    opacity: 0;
  }
  44% {
    transform: scale(1.05) rotate(18deg);
    opacity: .88;
  }
}

.result-overlay.is-parade-animating .player-contestant,
.result-overlay.is-parade-animating .rival-contestant {
  opacity: 0;
}

.showdown-stage.is-entering .player-contestant {
  animation: contestantEnterLeft .9s cubic-bezier(.2, .88, .24, 1.1) forwards;
}

.showdown-stage.is-entering .rival-contestant {
  animation: contestantEnterRight .9s cubic-bezier(.2, .88, .24, 1.1) forwards;
}

@keyframes contestantEnterLeft {
  from {
    opacity: 0;
    transform: translateX(-64px) translateY(12px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes contestantEnterRight {
  from {
    opacity: 0;
    transform: translateX(64px) translateY(12px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

.showdown-stage.is-posing .contestant-pet {
  animation: paradePose 1.55s ease-in-out infinite;
}

.showdown-stage.is-posing .rival-contestant .contestant-pet {
  animation-delay: .28s;
}

@keyframes paradePose {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}

.result-overlay.is-parade-animating .versus-badge {
  animation: versusPulse .9s ease-in-out infinite alternate;
}

@keyframes versusPulse {
  to {
    transform: scale(1.08);
    box-shadow: 0 8px 0 rgba(36, 48, 47, .16), 0 0 22px rgba(242, 189, 70, .58);
  }
}

.contestant-card.is-winner::before {
  opacity: 0;
  transform: translateX(-50%) scale(.72);
  transition: opacity .28s ease, transform .34s ease;
}

.result-overlay.is-finished .contestant-card.is-winner::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: winnerGlow 1.2s ease-in-out infinite alternate;
}

@keyframes winnerGlow {
  to {
    box-shadow: 0 0 34px rgba(242, 189, 70, .45);
  }
}

.result-overlay.is-finished .contestant-card.is-winner .contestant-pet {
  animation: winnerBounce .72s ease-in-out 2;
}

.winner-ribbon {
  position: absolute;
  left: 50%;
  top: 9px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  border: 2px solid rgba(36, 48, 47, .78);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff6d7, #f1bd46);
  box-shadow: 0 6px 0 rgba(36, 48, 47, .14), 0 0 22px rgba(242, 189, 70, .42);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -10px) scale(.82);
  transition: opacity .28s ease, transform .34s cubic-bezier(.2, .9, .22, 1.25);
}

.result-overlay.is-finished .winner-ribbon {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.result-overlay.is-finished .showdown-stage {
  grid-template-columns: minmax(0, .72fr) minmax(220px, 1.2fr) minmax(0, .72fr);
  align-items: end;
}

.result-overlay.is-finished .versus-badge {
  grid-column: 2;
  grid-row: 1;
  opacity: 0;
  transform: scale(.5);
}

.result-overlay.is-finished.winner-player .player-contestant,
.result-overlay.is-finished.winner-rival .rival-contestant {
  grid-column: 2;
  grid-row: 1;
}

.result-overlay.is-finished.winner-player .rival-contestant {
  grid-column: 3;
  grid-row: 1;
}

.result-overlay.is-finished.winner-rival .player-contestant {
  grid-column: 1;
  grid-row: 1;
}

.result-overlay.is-finished .contestant-card {
  transition: opacity .38s ease, filter .38s ease, transform .48s cubic-bezier(.2, .9, .22, 1.16);
}

.result-overlay.is-finished .contestant-card.is-winner {
  z-index: 6;
  transform: translateY(-10px) scale(1.17);
  animation: winnerCenterPop .58s cubic-bezier(.2, .9, .22, 1.18) both;
}

.result-overlay.is-finished .contestant-card:not(.is-winner) {
  opacity: .64;
  filter: saturate(.78) brightness(.95);
  transform: translateY(22px) scale(.78);
}

.result-overlay.is-finished .contestant-card.is-winner::before {
  width: 220px;
  height: 220px;
  top: 8px;
}

.result-overlay.is-finished .contestant-card.is-winner .contestant-pet {
  width: min(94%, 250px);
}

@keyframes winnerCenterPop {
  from {
    transform: translateY(18px) scale(.92);
  }
  to {
    transform: translateY(-10px) scale(1.17);
  }
}

@keyframes winnerBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-12px) scale(1.05);
  }
}

.judge-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}

.judge-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 2px solid rgba(36, 48, 47, .18);
  border-radius: 8px;
  background: rgba(255, 254, 249, .82);
  box-shadow: 0 5px 0 rgba(36, 48, 47, .07);
  opacity: .26;
  transform: translateY(10px) scale(.97);
  transition: opacity .24s ease, transform .24s ease, border-color .24s ease;
}

.judge-card.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(242, 189, 70, .58);
}

.judge-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(36, 48, 47, .42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .86) 0 7px, transparent 8px),
    linear-gradient(145deg, #79d3d6, #4a7fb3);
  box-shadow: inset 0 -7px 0 rgba(36, 48, 47, .08);
}

.judge-avatar.judge-2 {
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .86) 0 7px, transparent 8px),
    linear-gradient(145deg, #f1bd46, #e96656);
}

.judge-avatar.judge-3 {
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .86) 0 7px, transparent 8px),
    linear-gradient(145deg, #b8e38e, #2d7f86);
}

.judge-card strong {
  display: block;
  font-size: .9rem;
  line-height: 1.1;
}

.judge-card p {
  margin-top: 3px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.2;
}

.judge-card b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(135deg, #fff6d7, #f1bd46);
  font-size: 1rem;
}

.score-meter {
  height: 9px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(36, 48, 47, .12);
}

.score-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral));
  transition: width .12s linear;
}

.result-overlay.is-parade-animating .reward-row {
  opacity: .2;
  transform: translateY(8px);
}

.reward-row {
  transition: opacity .24s ease, transform .24s ease;
}

.result-overlay.is-finished .reward-row {
  opacity: 1;
  transform: translateY(0);
}

.result-overlay.is-finished .reward-chip {
  animation: rewardPop .42s cubic-bezier(.2, .9, .22, 1.25) both;
}

.result-overlay.is-finished .reward-chip:nth-child(2) {
  animation-delay: .08s;
}

.result-overlay.is-finished .reward-chip:nth-child(3) {
  animation-delay: .16s;
}

@keyframes rewardPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .judge-panel {
    grid-template-columns: 1fr;
  }

  .showdown-stage {
    min-height: 660px;
  }

  .result-overlay.is-finished .showdown-stage {
    grid-template-columns: 1fr;
    align-items: end;
    gap: 28px;
    min-height: 720px;
  }

  .result-overlay.is-finished.winner-player .player-contestant,
  .result-overlay.is-finished.winner-rival .rival-contestant {
    grid-column: 1;
    grid-row: 1;
  }

  .result-overlay.is-finished.winner-player .rival-contestant,
  .result-overlay.is-finished.winner-rival .player-contestant {
    grid-column: 1;
    grid-row: 2;
  }

  .result-overlay.is-finished .versus-badge {
    display: none;
  }

  .result-overlay.is-finished .contestant-card.is-winner {
    transform: translateY(0) scale(1.07);
    animation-name: winnerCenterPopMobile;
  }

  .result-overlay.is-finished .contestant-card:not(.is-winner) {
    transform: translateY(18px) scale(.82);
  }

  @keyframes winnerCenterPopMobile {
    from {
      transform: translateY(16px) scale(.92);
    }
    to {
      transform: translateY(0) scale(1.07);
    }
  }
}

@media (max-width: 620px) {
  .parade-beat {
    width: 100%;
    justify-content: center;
    font-size: .76rem;
  }

  .showdown-stage {
    min-height: 585px;
  }

  .judge-card {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    padding: 8px;
  }

  .judge-avatar,
  .judge-card b {
    width: 38px;
    height: 38px;
  }
}