:root {
    --pink-light: #fff0f5;
    --pink-100: #ffe4e1;
    --pink-200: #ffd6e0;
    --pink-300: #ffccd5;
    --pink-400: #ffe0ec;
    --pink-500: #fff5f7;
    --pink-600: #fce4ec;
    --accent-pink: #ff8ca0;
    --accent-rose: #ff96aa;
    --accent-blush: #ff91a5;
    --accent-coral: #ff9baf;
    --accent-peach: #ff94a8;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-hover-shadow: rgba(255, 150, 170, 0.35);
    --card-border-hover: #f9a8c4;
    --slot-border: #fbc4d4;
    --container-shadow: rgba(255, 160, 180, 0.25);
    --container-border: rgba(255, 192, 203, 0.35);
    --mask-bg: rgba(0, 0, 0, 0.5);
    --tool-amber: #f59e0b;
    --tool-sky: #38bdf8;
    --warning-yellow: #fbbf24;
    --sparkle-color: rgba(255, 200, 210, 0.5);
    --card-width: 56px;
    --card-height: 56px;
    --col-spacing: 60px;
    --row-spacing: 60px;
    --layer-offset: 22px;
    --grid-cols: 6;
    --slot-max: 7;
    --match-count: 3;
    --card-border-radius: 0.75rem;
    --transition-speed: 0.2s;
}

body {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 182, 193, 0.45) 0%, transparent 45%),
        radial-gradient(circle at 78% 15%, rgba(255, 218, 185, 0.38) 0%, transparent 42%),
        radial-gradient(circle at 65% 72%, rgba(255, 192, 203, 0.4) 0%, transparent 48%),
        radial-gradient(circle at 25% 68%, rgba(255, 228, 225, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 48% 40%, rgba(255, 240, 245, 0.55) 0%, transparent 55%),
        radial-gradient(circle at 88% 55%, rgba(255, 182, 193, 0.32) 0%, transparent 44%),
        linear-gradient(155deg,
            var(--pink-light) 0%,
            var(--pink-100) 22%,
            var(--pink-200) 40%,
            var(--pink-300) 58%,
            var(--pink-400) 74%,
            var(--pink-500) 90%,
            var(--pink-600) 100%);
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
    background:
        radial-gradient(circle 14px at 12% 18%, rgba(255, 140, 160, 0.9) 0%, transparent 100%),
        radial-gradient(circle 7px at 10.5% 15.5%, rgba(255, 140, 160, 0.9) 0%, transparent 100%),
        radial-gradient(circle 7px at 12.7% 15.2%, rgba(255, 140, 160, 0.9) 0%, transparent 100%),
        radial-gradient(circle 6.5px at 11.6% 14.3%, rgba(255, 140, 160, 0.9) 0%, transparent 100%),
        radial-gradient(circle 13px at 72% 28%, rgba(255, 150, 170, 0.85) 0%, transparent 100%),
        radial-gradient(circle 6.5px at 70.6% 25.7%, rgba(255, 150, 170, 0.85) 0%, transparent 100%),
        radial-gradient(circle 6.5px at 72.8% 25.4%, rgba(255, 150, 170, 0.85) 0%, transparent 100%),
        radial-gradient(circle 6px at 71.7% 24.5%, rgba(255, 150, 170, 0.85) 0%, transparent 100%),
        radial-gradient(circle 12px at 35% 76%, rgba(255, 145, 165, 0.8) 0%, transparent 100%),
        radial-gradient(circle 6px at 33.8% 73.9%, rgba(255, 145, 165, 0.8) 0%, transparent 100%),
        radial-gradient(circle 6px at 35.9% 73.6%, rgba(255, 145, 165, 0.8) 0%, transparent 100%),
        radial-gradient(circle 5.5px at 34.9% 72.8%, rgba(255, 145, 165, 0.8) 0%, transparent 100%),
        radial-gradient(circle 11px at 82% 62%, rgba(255, 155, 175, 0.75) 0%, transparent 100%),
        radial-gradient(circle 5.5px at 80.9% 60.1%, rgba(255, 155, 175, 0.75) 0%, transparent 100%),
        radial-gradient(circle 5.5px at 82.8% 59.8%, rgba(255, 155, 175, 0.75) 0%, transparent 100%),
        radial-gradient(circle 5px at 81.9% 59.1%, rgba(255, 155, 175, 0.75) 0%, transparent 100%),
        radial-gradient(circle 10px at 52% 88%, rgba(255, 148, 168, 0.7) 0%, transparent 100%),
        radial-gradient(circle 5px at 51% 86.3%, rgba(255, 148, 168, 0.7) 0%, transparent 100%),
        radial-gradient(circle 5px at 53.1% 86%, rgba(255, 148, 168, 0.7) 0%, transparent 100%),
        radial-gradient(circle 4.5px at 52.1% 85.3%, rgba(255, 148, 168, 0.7) 0%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#bgDecorations {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.float-decor {
    position: absolute;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    font-size: clamp(18px, 4vw, 38px);
    line-height: 1;
}

.float-slow { animation: floatSlow 7s ease-in-out infinite; }
.float-medium { animation: floatMedium 5.5s ease-in-out infinite; }
.float-fast { animation: floatFast 4s ease-in-out infinite; }
.float-drift { animation: floatDrift 9s ease-in-out infinite; }
.float-wiggle { animation: floatWiggle 6s ease-in-out infinite; }
.float-pulse { animation: floatPulse 3.5s ease-in-out infinite; }
.float-spin-slow { animation: floatSpinSlow 12s linear infinite; }

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-18px) translateX(6px); }
    50% { transform: translateY(-6px) translateX(-4px); }
    75% { transform: translateY(-22px) translateX(-8px); }
}
@keyframes floatMedium {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    30% { transform: translateY(-14px) translateX(-7px); }
    60% { transform: translateY(-20px) translateX(5px); }
    85% { transform: translateY(-8px) translateX(10px); }
}
@keyframes floatFast {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    40% { transform: translateY(-10px) translateX(4px); }
    70% { transform: translateY(-16px) translateX(-6px); }
    90% { transform: translateY(-4px) translateX(3px); }
}
@keyframes floatDrift {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    33% { transform: translateX(16px) translateY(-8px); }
    66% { transform: translateX(-12px) translateY(-16px); }
}
@keyframes floatWiggle {
    0%, 100% { transform: rotate(0deg) translateY(0px); }
    25% { transform: rotate(4deg) translateY(-10px); }
    50% { transform: rotate(-3deg) translateY(-18px); }
    75% { transform: rotate(5deg) translateY(-6px); }
}
@keyframes floatPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 0.35; }
}
@keyframes floatSpinSlow {
    0% { transform: rotate(0deg) translateY(0px); }
    25% { transform: rotate(90deg) translateY(-6px); }
    50% { transform: rotate(180deg) translateY(-12px); }
    75% { transform: rotate(270deg) translateY(-6px); }
    100% { transform: rotate(360deg) translateY(0px); }
}
@keyframes sparkleGlow {
    0%, 100% { opacity: 0.25; transform: scale(0.6); }
    50% { opacity: 0.9; transform: scale(1.5); }
}
@keyframes fadeIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.sparkle {
    position: absolute;
    pointer-events: none;
    user-select: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 8px 3px var(--sparkle-color);
    animation: sparkleGlow 2.8s ease-in-out infinite;
    will-change: transform, opacity;
    width: clamp(2.5px, 0.6vw, 5px);
    height: clamp(2.5px, 0.6vw, 5px);
}

.card {
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    background: var(--card-bg);
    backdrop-filter: blur(2px);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif;
    user-select: none;
}
.card:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 25px var(--card-hover-shadow);
    border-color: var(--card-border-hover) !important;
}
.card.hidden {
    opacity: 0;
    pointer-events: none;
}
.card.covered {
    opacity: 0.55;
    filter: brightness(0.9);
    pointer-events: none;
}
/* Blind box: lower cards completely hidden - can't see through */
.card.blind-hidden {
    opacity: 0.15;
    filter: brightness(0.5) blur(2px);
    pointer-events: none;
}
/* Blind box card itself has a special border indicating mystery */
.card.blind-box-card {
    border-color: #c084fc;
    border-style: dashed;
    border-width: 2px;
}
/* Visible bottom area cards */
.card.visible-card {
    border-color: #86efac;
    border-style: solid;
}

.slot-item {
    animation: fadeIn 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--slot-border) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif;
    user-select: none;
}
#slotBox {
    box-shadow: 0 0 20px rgba(255, 170, 190, 0.2), 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(255, 192, 203, 0.3);
    transition: border-color 0.3s, box-shadow 0.3s;
}
#slotBox.warning {
    border-color: var(--warning-yellow);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.5);
}

#gameMask, #startScreen {
    backdrop-filter: blur(8px);
}
#gameContainer {
    box-shadow: 0 0 40px var(--container-shadow), 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--container-border);
    min-height: 360px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#cardArea {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 360px;
}
#gameContainer.level3 {
    height: calc(100vh - 220px);
    max-height: 560px;
}
#gameContainer.level-hard {
    height: calc(100vh - 260px);
    max-height: 620px;
    min-height: 420px;
}
.tool-btn {
    transition: 0.2s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.tool-btn:active { scale: 0.95; }
.tool-btn:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}
.tool-btn.bg-pink-500 {
    box-shadow: 0 3px 10px rgba(236, 72, 153, 0.3);
}
.tool-btn.bg-pink-500:hover {
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.45);
}
#startCard {
    box-shadow: 0 0 60px rgba(255, 150, 180, 0.35), 0 20px 50px rgba(0, 0, 0, 0.1);
}
.lang-btn.active {
    background-color: #f472b6;
    color: white;
}

/* Region labels for blind box areas */
.region-label {
    transition: opacity 0.3s ease;
}

/* Mask extra button animation */
#maskExtraBtn {
    transition: 0.2s;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
}
#maskExtraBtn:hover {
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

/* Blind Box Special Styles */
.blind-box-container {
    transition: transform 0.2s ease;
}
.blind-box-container:active {
    transform: scale(0.95);
}

.blind-box {
    transition: all 0.3s ease;
}

/* Card Collect Animation */
@keyframes cardCollect {
    0% { transform: scale(1); }
    50% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(0) rotate(360deg); }
}
@keyframes cardFlyToSlot {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--fly-x), var(--fly-y)) scale(0.6); opacity: 0; }
}
.card.collecting {
    animation: cardCollect 0.4s ease forwards;
    pointer-events: none;
}

/* Eliminate Animation */
@keyframes cardEliminate {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5) rotate(15deg); }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
.slot-item.eliminating {
    animation: cardEliminate 0.5s ease forwards;
}

/* Dead Lock Warning Animation */
@keyframes deadLockPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}
#deadLockWarning {
    animation: deadLockPulse 1.5s ease-in-out infinite;
}

/* Enhanced Covered/Uncovered Styles for Yang Style */
.card.covered {
    opacity: 0.35 !important;
    filter: grayscale(0.7) brightness(0.6) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.card.uncovered {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    border-color: #fbbf24 !important;
    border-width: 3px !important;
}
.card.uncovered:hover {
    transform: scale(1.12) translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    border-color: #f59e0b !important;
}

/* Blind Box Card Fly Animation */
@keyframes blindBoxPop {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    70% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes blindBoxShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}
.blind-box.shaking {
    animation: blindBoxShake 0.5s ease-in-out 3;
}
.card-from-blindbox {
    animation: blindBoxPop 0.5s ease-out;
}