:root {
    --ink: #4d3168;
    --panel-border: rgba(255, 255, 255, 0.92);
    --purple: #8b52c2;
    --pink: #ff6ea9;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    background: #8060ac;
}

button { font: inherit; }

.dressup-game,
.dressup-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scene-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
}

.game-header {
    position: fixed;
    z-index: 50;
    top: max(10px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    align-items: start;
    pointer-events: none;
}

.round-btn {
    width: 52px;
    height: 52px;
    border: 3px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    text-decoration: none;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 6px 0 rgba(65, 39, 87, 0.2), 0 8px 22px rgba(54, 31, 77, 0.18);
    backdrop-filter: blur(8px);
    cursor: pointer;
    pointer-events: auto;
}

.round-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(65, 39, 87, 0.2);
}

.title-wrap {
    justify-self: center;
    min-width: min(620px, 74vw);
    padding: 3px 22px 8px;
    text-align: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(8px);
    box-shadow: 0 7px 22px rgba(72, 40, 94, 0.15);
}

.title-wrap h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.08;
    text-shadow: 0 3px 0 rgba(255, 255, 255, 0.78);
}

.title-wrap p {
    margin: 3px 0 0;
    color: rgba(66, 40, 88, 0.82);
    font-size: clamp(13px, 1.8vw, 18px);
    font-weight: 800;
}

.collection-badge {
    position: absolute;
    z-index: 20;
    left: max(18px, env(safe-area-inset-left));
    top: 96px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 5px 14px rgba(58, 31, 71, 0.14);
    font-size: 14px;
    font-weight: 800;
    backdrop-filter: blur(7px);
}

.collection-badge strong {
    display: grid;
    min-width: 42px;
    height: 26px;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: var(--purple);
}

.monster-stage {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 42%;
    width: clamp(320px, 35vw, 460px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    transform-origin: 50% 82%;
    border-radius: 42%;
    transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.monster-stage.drop-ready {
    box-shadow: inset 0 0 0 5px rgba(255, 246, 183, 0.92), 0 0 34px rgba(255, 237, 128, 0.78);
    filter: brightness(1.04);
}

.monster-stage.complete {
    animation: monsterCelebrate 0.74s cubic-bezier(0.2, 0.9, 0.3, 1.25) 2;
}

.monster-stage.reveal .monster-base { animation: bodyReveal 0.62s cubic-bezier(0.2, 0.9, 0.3, 1.25); }

.monster-shadow {
    position: absolute;
    z-index: 0;
    left: 19%;
    right: 19%;
    bottom: 3%;
    height: 10%;
    border-radius: 50%;
    background: rgba(50, 25, 64, 0.25);
    filter: blur(7px);
}

.monster-base,
.placed-part {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 11px 10px rgba(58, 31, 71, 0.22));
}

.monster-base {
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter:
        hue-rotate(var(--body-hue, 0deg))
        saturate(var(--body-saturation, 1))
        contrast(var(--body-contrast, 1))
        brightness(var(--body-brightness, 1))
        drop-shadow(0 11px 10px rgba(58, 31, 71, 0.22));
}

.placed-layer {
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
}

.placed-part {
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

.placed-part.show { animation: partPop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.35); }
.placed-part.moving {
    cursor: grabbing;
    opacity: 0.9;
    scale: 1.08;
    filter: drop-shadow(0 18px 14px rgba(54, 28, 68, 0.34));
}

.parts-tray {
    position: absolute;
    z-index: 25;
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(900px, 98vw);
    display: grid;
    gap: 3px;
    padding: 6px 14px 9px;
    border: 3px solid var(--panel-border);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,241,253,.88));
    box-shadow: 0 13px 30px rgba(50, 25, 64, 0.23), inset 0 2px 0 white;
    backdrop-filter: blur(9px);
}

.tray-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 25px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.tray-heading span {
    display: grid;
    min-width: 40px;
    height: 23px;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: linear-gradient(180deg, #a56bdd, #7b43b2);
}

.parts-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 3px 8px;
}

.drag-item {
    position: relative;
    min-width: 0;
    height: clamp(58px, 7.2vw, 76px);
    border: 0;
    border-radius: 14px;
    padding: 0 3px 16px;
    background: rgba(255, 255, 255, 0.2);
    cursor: grab;
    touch-action: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.drag-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 6px 5px rgba(55, 29, 70, 0.24));
}

.drag-item span {
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    min-width: 42px;
    padding: 1px 6px;
    border-radius: 10px;
    color: var(--ink);
    background: rgba(255,255,255,.86);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.drag-item:hover { transform: translateY(-2px); background: rgba(255,255,255,.52); }
.drag-item.selected { transform: translateY(-4px) scale(1.04); background: #fff6bd; box-shadow: 0 0 0 3px #ffd65a; }
.drag-item.used { opacity: 0.24; transform: scale(0.82); filter: grayscale(0.65); pointer-events: none; }
.drag-item.dragging { opacity: 0.18; }
.drag-item.wrong { animation: wrongPart 0.34s ease; }

.drag-ghost {
    position: fixed;
    z-index: 1000;
    display: block;
    width: 112px;
    height: 112px;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(1.08);
    pointer-events: none;
    filter: drop-shadow(0 18px 16px rgba(54, 28, 68, 0.32));
}

.celebration {
    position: absolute;
    z-index: 24;
    left: 50%;
    top: 12%;
    transform: translate(-50%, -15px) scale(0.8);
    display: grid;
    gap: 1px;
    text-align: center;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
}

.celebration strong { font-size: clamp(24px, 3.6vw, 38px); text-shadow: 0 3px 0 #fff, 0 8px 20px rgba(61, 35, 78, 0.24); }
.celebration-stars { color: #ffd333; font-size: clamp(18px, 2.6vw, 28px); letter-spacing: 8px; text-shadow: 0 2px 0 #b97213; }
.celebration.show { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.9,.3,1.3); }

.next-panel {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(580px, 92vw);
    min-height: 108px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border: 3px solid white;
    border-radius: 28px;
    color: var(--ink);
    background: rgba(255,250,255,.94);
    box-shadow: 0 13px 30px rgba(50,25,64,.24);
    backdrop-filter: blur(9px);
}

.next-panel:not([hidden]) { display: flex; animation: panelUp .45s cubic-bezier(.2,.9,.3,1.2); }
.next-panel div { display: grid; }
.next-panel strong { font-size: clamp(18px, 2.5vw, 25px); }
.next-panel span { font-size: 14px; font-weight: 700; }
.next-panel button {
    border: 0;
    border-radius: 22px;
    padding: 13px 18px;
    color: white;
    background: linear-gradient(180deg, #a56bdd, #7b43b2);
    box-shadow: 0 5px 0 #56307a, 0 8px 18px rgba(84,46,119,.25);
    font-size: clamp(16px, 2.2vw, 21px);
    font-weight: 900;
    cursor: pointer;
}
.next-panel button:active { transform: translateY(4px); box-shadow: 0 1px 0 #56307a; }

@keyframes partPop { from { opacity: 0; scale: .35; } 65% { opacity: 1; scale: 1.12; } to { opacity: 1; scale: 1; } }
@keyframes bodyReveal { from { opacity: 0; transform: translateY(20px) scale(.75); } to { opacity: 1; transform: none; } }
@keyframes monsterCelebrate { 0%,100% { transform: translate(-50%,-50%) rotate(0) scale(1); } 35% { transform: translate(-50%,-54%) rotate(-4deg) scale(1.04); } 70% { transform: translate(-50%,-54%) rotate(4deg) scale(1.04); } }
@keyframes wrongPart { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-9px) rotate(-5deg); } 70% { transform: translateX(9px) rotate(5deg); } }
@keyframes panelUp { from { opacity: 0; transform: translate(-50%,30px) scale(.9); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }

@media (max-width: 600px) {
    .game-header { grid-template-columns: 44px minmax(0,1fr) 44px; left: 8px; right: 8px; }
    .round-btn { width: 43px; height: 43px; border-width: 2px; font-size: 25px; }
    .title-wrap { min-width: 0; width: min(285px, 74vw); padding: 3px 8px 6px; }
    .title-wrap h1 { font-size: 27px; }
    .title-wrap p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .collection-badge { top: 74px; left: 10px; padding: 5px 8px; font-size: 12px; }
    .collection-badge strong { min-width: 36px; height: 23px; }
    .monster-stage { top: 40%; width: min(86vw, 365px); }
    .celebration { top: 13%; }
    .parts-tray { width: 99vw; padding: 4px 4px 6px; border-radius: 20px; }
    .tray-heading { min-height: 23px; font-size: 12px; }
    .tray-heading span { min-width: 35px; height: 20px; }
    .parts-list { gap: 2px 1px; }
    .drag-item { height: clamp(56px, 17vw, 68px); padding: 0 1px 14px; border-radius: 10px; }
    .drag-item span { min-width: 35px; padding: 1px 4px; font-size: 10px; }
    .next-panel { min-height: 95px; padding: 11px 13px; border-radius: 23px; }
    .next-panel button { padding: 11px 13px; border-radius: 18px; }
}

@media (max-height: 560px) {
    .game-header { top: 5px; }
    .title-wrap h1 { font-size: 24px; }
    .title-wrap p { font-size: 11px; }
    .collection-badge { display: none; }
    .monster-stage { top: 38%; width: min(32vw, 250px); }
    .parts-tray { bottom: 3px; width: min(760px, 96vw); padding: 2px 8px 4px; border-radius: 18px; }
    .tray-heading { min-height: 20px; font-size: 11px; }
    .tray-heading span { height: 18px; }
    .parts-list { gap: 1px 5px; }
    .drag-item { height: 47px; padding-bottom: 12px; }
    .drag-item span { font-size: 9px; }
    .celebration { top: 10%; }
    .next-panel { min-height: 78px; padding: 8px 12px; }
}

@media (orientation: portrait) and (min-width: 700px) {
    .monster-stage { top: 42%; width: min(57vw, 500px); }
    .parts-tray { width: min(94vw, 900px); }
    .drag-item { height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}