:root {
  --ink: #fff7ff;
  --deep: #180b42;
  --panel: rgba(43, 25, 107, 0.92);
  --panel-2: rgba(92, 38, 174, 0.94);
  --pink: #ff42d0;
  --purple: #7b38ff;
  --lime: #9cff1f;
  --gold: #ffd44f;
  --cyan: #45e9ff;
  --line: rgba(255, 255, 255, 0.24);
  --shadow: 0 18px 44px rgba(24, 6, 55, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 66, 208, 0.34), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(69, 233, 255, 0.25), transparent 28%),
    linear-gradient(135deg, #25106a, #5b1695 52%, #140733);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.app {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

.screen {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
}

.start-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  align-items: center;
  gap: 24px;
  background:
    linear-gradient(90deg, rgba(24, 7, 51, 0.52), rgba(24, 7, 51, 0.12)),
    url("assets/studio-bg.png") center / cover no-repeat;
  border: 3px solid #0b0423;
  border-radius: 0;
  padding: clamp(18px, 3.2vw, 38px);
  box-shadow: none;
}

.start-copy {
  min-width: 0;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

.kicker {
  margin: 0 0 8px;
  color: #ffe8ff;
  font-weight: 950;
  text-transform: uppercase;
}

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

h1 {
  margin-bottom: 16px;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(3.8rem, 8.8vw, 8rem);
  line-height: 0.86;
  letter-spacing: 0;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 7px 7px 0 #2e075c, 0 0 32px rgba(255, 66, 208, 0.9);
}

.start-copy p:not(.kicker) {
  max-width: 42rem;
  padding: 14px 16px;
  border: 3px solid #0b0423;
  border-radius: 12px;
  background: rgba(255, 247, 255, 0.92);
  color: #270d49;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 850;
  box-shadow: 6px 6px 0 #0b0423;
}

.setup-panel,
.game-dialog {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 3px solid #0b0423;
  border-radius: 12px;
  background: rgba(255, 247, 255, 0.94);
  color: #270d49;
  box-shadow: var(--shadow), 6px 6px 0 #0b0423;
}

.setup-panel {
  position: relative;
  z-index: 2;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 950;
}

input {
  min-height: 48px;
  padding: 0 12px;
  border: 3px solid #0b0423;
  border-radius: 10px;
  color: #270d49;
  font-weight: 850;
}

.start-actions,
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-button,
.secondary-button,
.top-icon,
.side-action,
.next-phase,
.choice-card,
.category-tabs button,
.icon-button {
  border: 3px solid #0b0423;
  border-radius: 10px;
  font-weight: 950;
  box-shadow: 4px 4px 0 #0b0423;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  text-decoration: none;
}

.primary-button,
.next-phase {
  background: linear-gradient(135deg, var(--lime), #dbff3f);
  color: #102400;
}

.secondary-button {
  background: #fff;
  color: #270d49;
}

.game-screen {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 6px;
}

.game-topbar {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(140px, 210px) auto auto auto auto auto auto;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 10px;
  border: 3px solid #0b0423;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(74, 32, 154, 0.98), rgba(36, 17, 91, 0.98));
  box-shadow: var(--shadow), 6px 6px 0 #0b0423;
}

.brand-mark strong {
  display: block;
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 0.88;
  text-shadow: 3px 3px 0 #2e075c;
}

.brand-mark span,
.status-pill span {
  display: block;
  color: #f6dfff;
  font-size: 0.78rem;
  font-weight: 900;
}

.status-pill,
.top-icon,
.xp-meter {
  min-height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: rgba(13, 6, 44, 0.62);
  color: #fff;
  padding: 7px 10px;
}

.status-pill strong {
  display: block;
  font-size: 1.1rem;
}

.xp-meter {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
}

.xp-meter span {
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime), var(--gold));
}

.xp-meter strong {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 0 #0b0423;
}

.top-icon {
  background: linear-gradient(180deg, #8b58ff, #4a249e);
  color: #fff;
}

.makeover-board {
  display: grid;
  grid-template-columns: 190px minmax(430px, 1fr) 360px;
  gap: 12px;
  height: calc(100vh - 102px);
  min-height: 620px;
}

.phase-panel,
.option-panel,
.monster-zone {
  border: 3px solid #0b0423;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow), 6px 6px 0 #0b0423;
}

.phase-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  overflow: hidden;
}

.phase-card {
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: rgba(12, 6, 43, 0.72);
  text-align: center;
}

.phase-card span {
  display: block;
  margin-bottom: 6px;
  color: #ffe1ff;
  font-weight: 950;
  text-transform: uppercase;
}

.phase-card strong {
  display: block;
  font-size: 1.25rem;
}

.phase-card p {
  margin: 8px 0 0;
  color: #f1d9ff;
  font-size: 0.9rem;
  font-weight: 750;
}

.phase-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.monster-picker {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: rgba(12, 6, 43, 0.58);
}

.monster-picker > span {
  color: #ffe1ff;
  font-size: 0.78rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.monster-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.monster-picker button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 78px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 950;
}

.monster-picker button.active {
  border-color: var(--gold);
  background: linear-gradient(135deg, #ff42d0, #7b38ff);
}

.monster-picker strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monster-thumb {
  width: 42px;
  height: 46px;
  background: var(--monster-image) center bottom / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(11, 4, 35, 0.35));
}

.phase-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(17, 8, 54, 0.64);
}

.phase-list li span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 950;
}

.phase-list li strong {
  font-size: 0.84rem;
}

.phase-list li.active {
  background: linear-gradient(135deg, #ff42d0, #7b38ff);
}

.phase-list li.done span {
  background: var(--lime);
  color: #102400;
}

.side-action {
  min-height: 42px;
  background: linear-gradient(180deg, #f56bff, #9a37d6);
  color: #fff;
}

.monster-zone {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background:
    radial-gradient(circle at 49% 32%, rgba(255, 225, 255, 0.26), transparent 30%),
    linear-gradient(90deg, rgba(31, 8, 72, 0.28), rgba(31, 8, 72, 0.02), rgba(31, 8, 72, 0.28)),
    url("assets/studio-bg.png") center / cover no-repeat;
}

.wish-bubble {
  position: absolute;
  z-index: 4;
  left: 8%;
  top: 8%;
  width: min(250px, 42%);
  padding: 14px;
  border: 3px solid #ffb8ff;
  border-radius: 14px;
  background: rgba(255, 247, 255, 0.94);
  color: #8b1179;
  text-align: center;
  box-shadow: 0 8px 24px rgba(41, 8, 64, 0.28);
}

.wish-bubble span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.wish-bubble strong {
  display: block;
  font-size: 0.98rem;
}

.monster-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.studio-light {
  position: absolute;
  left: 50%;
  top: 5%;
  width: min(410px, 62%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 66%);
}

.platform {
  display: none;
}

.platform::after {
  content: none;
}

.platform::before {
  content: none;
}

.monster-figure,
.mini-monster {
  position: relative;
  width: min(218px, 33vw);
  aspect-ratio: 914 / 1104;
  background: var(--monster-image, url("assets/monster-slimbert-reference.png")) center bottom / contain no-repeat;
  filter: drop-shadow(0 18px 18px rgba(27, 8, 45, 0.28));
}

.monster-figure {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 174px;
  transform: translateX(-50%) translateY(var(--feet-offset, 0px));
  transform-origin: 50% 100%;
}

.monster-figure.reacting {
  animation: happy-bounce 520ms ease;
}

.monster-purple {
  aspect-ratio: 418 / 779;
  --monster-image: url("assets/monster-purple-clean.png");
  --feet-offset: 0px;
}

.monster-blue {
  aspect-ratio: 411 / 808;
  --monster-image: url("assets/monster-blue-clean.png");
  --feet-offset: 0px;
}

.monster-green {
  aspect-ratio: 914 / 1104;
  --monster-image: url("assets/monster-slimbert-reference.png");
  --feet-offset: 0px;
}

.monster-orange {
  aspect-ratio: 1 / 1;
  --monster-image: url("assets/monster-disco-dino.png");
  --feet-offset: 8px;
}

.monster-figure.monster-green {
  width: min(300px, 36vw);
}

.monster-figure.monster-purple {
  width: min(230px, 30vw);
}

.monster-figure.monster-blue {
  width: min(230px, 30vw);
}

.monster-figure.monster-orange {
  width: min(330px, 39vw);
}

.dirt-layer,
.makeup-layer,
.hair-layer,
.accessory-layer,
.final-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dirt-layer {
  display: none;
  background:
    radial-gradient(circle at 38% 35%, rgba(82, 44, 14, 0.78) 0 5%, transparent 6%),
    radial-gradient(circle at 63% 49%, rgba(82, 44, 14, 0.72) 0 5%, transparent 6%),
    radial-gradient(circle at 45% 63%, rgba(54, 28, 8, 0.72) 0 6%, transparent 7%),
    radial-gradient(circle at 52% 29%, rgba(82, 44, 14, 0.5) 0 3%, transparent 4%),
    radial-gradient(circle at 31% 58%, rgba(54, 28, 8, 0.46) 0 4%, transparent 5%);
  opacity: var(--dirt-opacity, 1);
  mix-blend-mode: multiply;
  transition: opacity 120ms linear;
}

.prep-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: var(--monster-image, url("assets/monster-slimbert-reference.png"));
  mask-image: var(--monster-image, url("assets/monster-slimbert-reference.png"));
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.prep-dirt {
  z-index: 3;
  mix-blend-mode: multiply;
}

.prep-wet {
  z-index: 4;
  mix-blend-mode: screen;
}

.prep-hair {
  z-index: 5;
}

.prep-fx {
  z-index: 11;
}

.dirt-layer.clean-1,
.dirt-layer.clean-2,
.dirt-layer.clean-3,
.dirt-layer.clean-4 {
  opacity: var(--dirt-opacity, 1);
}

.monster-zone.tool-active {
  cursor: none;
  touch-action: none;
}

.sponge-cursor {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 2.5rem;
  filter: drop-shadow(0 4px 4px rgba(18, 4, 38, 0.42));
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-10deg);
}

.makeup-layer { z-index: 6; }
.hair-layer { z-index: 7; }
.accessory-layer { z-index: 8; }
.final-layer { z-index: 9; }

.makeup-mark {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
}

.makeup-mark.blush {
  width: 30px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 87, 180, 0.7), transparent 72%);
}

.makeup-mark.glimmer,
.makeup-mark.eye-glimmer {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #fff7a8 21% 50%, transparent 55%);
  filter: drop-shadow(0 0 6px #fff);
}

.makeup-mark.stars {
  width: 14px;
  height: 14px;
  background: #fff56a;
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 57%, 82% 100%, 50% 72%, 18% 100%, 31% 57%, 0 35%, 38% 35%);
  filter: drop-shadow(0 0 5px #fff);
}

.makeup-mark.freckles {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(108, 54, 22, 0.7);
}

.makeup-mark.rainbow {
  width: 46px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 55, 110, 0.82), rgba(255, 219, 64, 0.82), rgba(72, 232, 118, 0.82), rgba(67, 156, 255, 0.82));
}

.makeup-mark.eyeshadow {
  width: 32px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(130, 49, 255, 0.78), transparent 72%);
}

.makeup-mark.lenses {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(63, 194, 255, 0.75);
}

.makeup-mark.lipstick {
  width: 58px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 42%, rgba(255, 40, 144, 0.7) 0 14%, transparent 18%),
    radial-gradient(ellipse at 65% 42%, rgba(255, 40, 144, 0.7) 0 14%, transparent 18%),
    radial-gradient(ellipse at 50% 68%, rgba(255, 40, 144, 0.58) 0 26%, transparent 31%);
  filter: drop-shadow(0 0 2px rgba(255, 90, 190, 0.55));
}

.makeup-mark.gloss {
  width: 50px;
  height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 38%, rgba(255, 255, 255, 0.92) 0 10%, transparent 14%),
    radial-gradient(ellipse at 60% 42%, rgba(255, 255, 255, 0.82) 0 8%, transparent 12%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 145, 225, 0.28) 0 38%, transparent 45%);
  filter: drop-shadow(0 0 5px rgba(255, 210, 255, 0.92));
  mix-blend-mode: screen;
}

.makeup-mark.teeth {
  width: 64px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 50%, rgba(255, 255, 240, 0.82) 0 16%, transparent 18%),
    radial-gradient(ellipse at 42% 45%, rgba(255, 255, 240, 0.88) 0 15%, transparent 17%),
    radial-gradient(ellipse at 58% 45%, rgba(255, 255, 240, 0.88) 0 15%, transparent 17%),
    radial-gradient(ellipse at 72% 50%, rgba(255, 255, 240, 0.82) 0 16%, transparent 18%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.82));
  mix-blend-mode: screen;
}

.makeup-mark.goldtooth {
  width: 13px;
  height: 12px;
  border-radius: 3px;
  background: #ffd84f;
}

.hair-pink::before,
.hair-green::before,
.hair-punk::before,
.hair-rainbow::before {
  content: "";
  position: absolute;
  left: 24%;
  top: 0;
  width: 52%;
  height: 18%;
  border: 4px solid rgba(28, 6, 48, 0.72);
  filter: drop-shadow(0 5px 0 rgba(28, 6, 48, 0.22));
}

.hair-pink::before {
  border-radius: 60% 60% 42% 42%;
  background: linear-gradient(135deg, #ff6fcf, #ff2c9f);
}

.hair-green::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 24% 48%, #9bff5e 0 18%, transparent 19%),
    radial-gradient(circle at 48% 34%, #32e279 0 20%, transparent 21%),
    radial-gradient(circle at 72% 52%, #a6ff64 0 18%, transparent 19%),
    #35d66f;
}

.hair-punk::before {
  top: -3%;
  height: 24%;
  clip-path: polygon(5% 90%, 18% 6%, 32% 88%, 48% 0, 62% 90%, 78% 10%, 94% 92%);
  background: linear-gradient(135deg, #2cb5ff, #153dff);
}

.hair-rainbow::before {
  border-radius: 48% 52% 44% 44%;
  background: linear-gradient(90deg, #ff4b76, #ffd94f, #5dff8b, #42e8ff, #ad62ff);
}

.accessory-sunglasses::before,
.accessory-lashes::before,
.accessory-brows::before,
.accessory-horns::before,
.accessory-earrings::before,
.accessory-crown::before,
.accessory-bowtie::before,
.accessory-wand::before {
  content: "";
  position: absolute;
}

.accessory-sunglasses::before {
  left: 34%;
  top: 28%;
  width: 32%;
  height: 10%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 22% 58%, #10101c 0 22%, transparent 23%),
    radial-gradient(ellipse at 78% 58%, #10101c 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 18%, #10101c 0 16%, transparent 17%),
    linear-gradient(#10101c, #10101c) center 58% / 86% 14% no-repeat;
}

.accessory-lashes::before {
  left: 33%;
  top: 21%;
  width: 34%;
  height: 18%;
  background:
    radial-gradient(ellipse 26px 11px at 18% 70%, transparent 0 55%, #13051c 57% 66%, transparent 68%),
    radial-gradient(ellipse 25px 10px at 50% 24%, transparent 0 55%, #13051c 57% 66%, transparent 68%),
    radial-gradient(ellipse 26px 11px at 82% 70%, transparent 0 55%, #13051c 57% 66%, transparent 68%),
    linear-gradient(110deg, transparent 16%, #13051c 17% 19%, transparent 20% 100%) 4% 56% / 20% 34% no-repeat,
    linear-gradient(80deg, transparent 16%, #13051c 17% 19%, transparent 20% 100%) 41% 4% / 20% 34% no-repeat,
    linear-gradient(70deg, transparent 16%, #13051c 17% 19%, transparent 20% 100%) 78% 56% / 20% 34% no-repeat;
  opacity: 0.92;
}

.accessory-brows::before {
  left: 33%;
  top: 18%;
  width: 34%;
  height: 18%;
  background:
    radial-gradient(ellipse 28px 9px at 18% 76%, #15051e 0 31%, transparent 34%),
    radial-gradient(ellipse 26px 8px at 50% 20%, #15051e 0 30%, transparent 33%),
    radial-gradient(ellipse 28px 9px at 82% 76%, #15051e 0 31%, transparent 34%);
  filter: blur(0.2px);
  opacity: 0.88;
}

.accessory-horns::before {
  left: 27%;
  top: 2%;
  width: 46%;
  height: 18%;
  background:
    conic-gradient(from 205deg at 24% 100%, transparent 0 28%, #ffd8ff 29% 52%, transparent 53%),
    conic-gradient(from 155deg at 76% 100%, transparent 0 48%, #ffd8ff 49% 72%, transparent 73%);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

.accessory-earrings::before {
  left: 16%;
  top: 30%;
  width: 68%;
  height: 14%;
  background:
    radial-gradient(circle at 5% 50%, #ffe44d 0 7%, transparent 8%),
    radial-gradient(circle at 95% 50%, #ffe44d 0 7%, transparent 8%);
}

.accessory-crown::before {
  left: 33%;
  top: -4%;
  width: 34%;
  height: 13%;
  clip-path: polygon(0 100%, 0 40%, 20% 70%, 36% 10%, 50% 68%, 65% 10%, 82% 70%, 100% 40%, 100% 100%);
  background: linear-gradient(#fff36b, #ffb72d);
}

.accessory-bowtie::before {
  left: 40%;
  top: 49%;
  width: 20%;
  height: 7%;
  background:
    conic-gradient(from 90deg at 50% 50%, #ff42d0 0 25%, transparent 0 50%, #ff42d0 0 75%, transparent 0);
}

.accessory-wand::before {
  right: 7%;
  top: 52%;
  width: 6px;
  height: 28%;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px #8b58ff, 0 -16px 12px #fff56a;
  transform: rotate(26deg);
}

.final-sparkle {
  background:
    radial-gradient(circle at 24% 35%, rgba(255, 255, 255, 0.9) 0 5px, transparent 6px),
    radial-gradient(circle at 76% 30%, rgba(255, 255, 255, 0.9) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 15%, rgba(255, 244, 106, 0.9) 0 6px, transparent 7px);
}

.final-spotlight {
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.26), transparent 58%);
}

.final-confetti,
.final-disco {
  background-image:
    radial-gradient(circle at 24% 30%, #ff42d0 0 4px, transparent 5px),
    radial-gradient(circle at 62% 25%, #45e9ff 0 4px, transparent 5px),
    radial-gradient(circle at 72% 58%, #ffd44f 0 4px, transparent 5px),
    radial-gradient(circle at 34% 66%, #9cff1f 0 4px, transparent 5px);
}

.keychain-preview {
  position: absolute;
  z-index: 8;
  right: calc(50% - 138px);
  bottom: 168px;
  width: 58px;
  height: 76px;
  animation: swing 1.8s ease-in-out infinite;
}

.keychain-preview::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 0;
  width: 15px;
  height: 15px;
  border: 4px solid #1c0630;
  border-radius: 50%;
  background: #fff;
}

.keychain-shape {
  position: absolute;
  left: 9px;
  top: 22px;
  width: 42px;
  height: 42px;
  border: 4px solid #1c0630;
  background: var(--pink);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
}

.keychain-shape.heart {
  transform: rotate(45deg);
  border-radius: 10px;
}

.mood-wrap {
  position: absolute;
  z-index: 3;
  left: 50%;
  right: 16px;
  bottom: 16px;
  left: auto;
  display: grid;
  grid-template-columns: auto minmax(170px, 230px) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(19, 7, 51, 0.72);
}

.mood-meter {
  height: 20px;
  overflow: hidden;
  border: 2px solid #0b0423;
  border-radius: 999px;
  background: linear-gradient(90deg, #a3ff25, #ffdf3f, #ff5a5a);
}

.mood-meter span {
  display: block;
  width: 20%;
  height: 100%;
  background: rgba(255, 255, 255, 0.42);
}

.reaction {
  position: absolute;
  z-index: 5;
  right: 18px;
  top: 88px;
  width: min(300px, calc(100% - 36px));
  margin: 0;
  padding: 11px 14px;
  border: 3px solid #0b0423;
  border-radius: 12px;
  background: rgba(255, 247, 255, 0.94);
  color: #270d49;
  font-weight: 950;
  text-align: center;
}

.tool-tray {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 8px;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 3px solid #0b0423;
  border-radius: 12px;
  background: rgba(47, 23, 102, 0.94);
}

.tool-tray span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 1.35rem;
}

.option-panel {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}

.option-head {
  padding: 12px;
  border-radius: 12px;
  background: rgba(12, 6, 43, 0.62);
}

.option-head h2 {
  margin: 0 0 6px;
  font-size: 1.55rem;
}

.option-head p {
  margin-bottom: 0;
  color: #f1d9ff;
  font-weight: 780;
}

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.category-tabs button {
  min-height: 42px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.category-tabs button.active {
  background: linear-gradient(135deg, #ffdc67, #ff42d0);
  color: #26073e;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.choice-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 130px;
  padding: 10px;
  background: rgba(255, 247, 255, 0.94);
  color: #270d49;
  text-align: left;
}

.choice-card.selected {
  outline: 4px solid var(--gold);
}

.choice-card.locked {
  opacity: 0.64;
}

.choice-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid #0b0423;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, #f7c9ff);
  font-size: 1.7rem;
}

.choice-text strong,
.choice-text span {
  display: block;
}

.choice-text span {
  margin-top: 4px;
  color: #5a3678;
  font-size: 0.86rem;
  font-weight: 800;
}

.next-phase {
  min-height: 58px;
  font-size: 1.08rem;
}

.result-screen {
  display: grid;
  align-content: start;
  gap: 16px;
}

.result-hero,
.score-panel,
.before-after article {
  border: 3px solid #0b0423;
  border-radius: 14px;
  background: rgba(255, 247, 255, 0.94);
  color: #270d49;
  box-shadow: var(--shadow), 6px 6px 0 #0b0423;
}

.result-hero {
  min-height: 220px;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(255, 247, 255, 0.96), rgba(255, 247, 255, 0.48)),
    url("assets/victory-scene.png") center / cover no-repeat;
}

.result-hero h2 {
  max-width: 620px;
  margin-bottom: 8px;
  font-size: clamp(2.1rem, 5vw, 4.4rem);
}

.before-after,
.score-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.before-after article {
  display: grid;
  justify-items: center;
  min-height: 300px;
  padding: 16px;
}

.before-after article > span {
  justify-self: start;
  font-weight: 950;
  text-transform: uppercase;
}

.mini-monster {
  width: min(180px, 38vw);
}

.score-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}

.score-panel div {
  min-height: 86px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, #f1ffb0);
}

.score-panel span,
.score-panel strong {
  display: block;
}

.score-panel strong {
  margin-top: 8px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.game-dialog {
  width: min(680px, calc(100% - 28px));
  z-index: 50;
}

.game-dialog:not([open]) {
  display: none;
}

.game-dialog::backdrop {
  background: rgba(17, 5, 44, 0.68);
}

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

.dialog-top h2 {
  margin: 0;
}

.icon-button {
  width: 42px;
  height: 42px;
  background: #fff;
  color: #270d49;
  font-size: 1.6rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.gallery-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 2px solid rgba(39, 13, 73, 0.18);
  border-radius: 10px;
  background: #fff;
}

@keyframes happy-bounce {
  0%, 100% { transform: translateX(-50%) translateY(var(--feet-offset, 0px)) scale(1); }
  42% { transform: translateX(-50%) translateY(var(--feet-offset, 0px)) scale(1.035, 0.985); }
}

@keyframes swing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(7deg); }
}

@media (max-width: 1080px) {
  .game-topbar,
  .makeover-board {
    grid-template-columns: 1fr;
  }

  .game-topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .makeover-board {
    height: auto;
    min-height: auto;
  }

  .phase-panel {
    order: 2;
  }

  .phase-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monster-zone {
    min-height: 620px;
  }
}

@media (max-width: 640px) {
  .app {
    overflow: auto;
  }

  .screen {
    min-height: 100vh;
  }

  .start-screen,
  .game-topbar,
  .score-panel,
  .before-after {
    grid-template-columns: 1fr;
  }

  .monster-zone {
    min-height: 560px;
  }

  .monster-figure {
    width: min(190px, 52vw);
    bottom: 152px;
  }

  .platform {
    width: min(390px, 82%);
    bottom: 88px;
  }

  .wish-bubble {
    left: 14px;
    top: 14px;
    width: min(260px, calc(100% - 28px));
  }

  .choice-grid {
    grid-template-columns: 1fr;
  }

  .phase-list {
    grid-template-columns: 1fr;
  }
}