/* Fruit Rabbit Match Puzzle - v1.7.4 */
:root {
    --primary-bg: #0f172a;
    /* Deep dark gray/blue */
    --accent-color: #ec4899;
    --glass-bg: rgba(255, 255, 255, 0.05);
    /* Adjusted for dark mode */
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-color: #f3f4f6;
    /* Light text for dark mode */
    --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    --safe-area-top: 0px;
    --safe-area-bottom: 0px;
    --special-glow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px var(--accent-color);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Outfit', 'Gowun Dodum', sans-serif;
    background: #000 !important;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    position: fixed !important;
}

#game-container {
    width: 100%;
    max-width: 500px;
    height: 100vh;
    height: 100dvh;
    position: relative;
    margin: 0 auto !important;
    background: #000 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media screen and (orientation: landscape) {
    #game-container {
        height: 100vh !important;
        aspect-ratio: 9/16; /* Force portrait ratio */
        width: auto !important;
    }
}

/* Butterfly System - 입체적인 날개짓 개선 */
.butterfly {
    position: absolute;
    width: 48px;
    height: 48px;
    pointer-events: none;
    z-index: 99999 !important;
    transition: left 2s ease-in-out, top 2s ease-in-out;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    will-change: left, top, transform;
}

/* 회전 전용 (JS에서 제어) */
.butterfly-rotator {
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease-in-out;
    transform-style: preserve-3d;
}

/* 흔들림/부유 전용 애니메이션 */
.butterfly-bob {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: butterfly-bob 2s infinite ease-in-out;
}

.butterfly-wing {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-size: 200% 100%;
    background-repeat: no-repeat;
    transform-style: preserve-3d;
}

.butterfly-wing.left {
    left: 0;
    background-position: left center;
    transform-origin: right center;
    animation: flap-left 0.15s infinite ease-in-out alternate;
}

.butterfly-wing.right {
    left: 50%;
    background-position: right center;
    transform-origin: left center;
    animation: flap-right 0.15s infinite ease-in-out alternate;
}

@keyframes flap-left {
    0% {
        transform: rotateY(0deg) rotateZ(0deg);
    }

    100% {
        /* 단순 접기가 아닌 뒤쪽으로 살짝 꺾이는 느낌 추가 */
        transform: rotateY(80deg) rotateZ(-10deg);
    }
}

@keyframes flap-right {
    0% {
        transform: rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateY(-80deg) rotateZ(10deg);
    }
}

@keyframes butterfly-bob {

    0%,
    100% {
        transform: translateY(0px) rotate(-10deg);
    }

    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

.start-card {
    width: 90%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 36px;
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}

.start-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.start-logo {
    width: 240px;
    max-width: 90%;
    margin-bottom: 30px;
    height: auto;
    object-fit: contain;
}

.match-input {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    border: 1px solid #334155;
    background: #000;
    color: white;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    outline: none;
    margin-bottom: 2px;
}

.match-start-btn {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    color: white;
    font-weight: 1000;
    border: none;
    font-size: 1.4rem;
    box-shadow: 0 8px 0 #0e7490;
    margin-bottom: 20px;
    cursor: pointer;
    transition: 0.1s;
}

.match-start-btn:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0 #0e7490;
}

.match-secondary-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.match-mini-btn {
    flex: 1;
    height: 50px;
    border-radius: 14px;
    background: #1e293b;
    color: white;
    border: none;
    font-weight: 800;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 0 #0f172a;
    cursor: pointer;
    transition: 0.1s;
}

.match-mini-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #0f172a;
}

.version-tag {
    font-size: 11px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 1px;
}

.copyright {
    font-size: 10px;
    color: #64748b;
    font-weight: 400;
}

/* Juice: Screen Shake */
.shake-lite {
    animation: shake 0.2s cubic-bezier(.36, .07, .19, .97) both;
}

.shake-heavy {
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    display: none;
    flex-direction: column;
    justify-content: space-between;
    /* V1.1.48: Sticky Header/Footer policy */
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
    overflow: hidden;
}

/* Hide butterflies in Photo Zone and Login */
body:has(#photo-zone-screen.active) .butterfly,
body:has(#login-screen.active) .butterfly,
body:has(#eye-game-screen.active) .butterfly {
    display: none !important;
}

#login-screen {
    justify-content: center !important;
}

.screen.sticky-layout {
    justify-content: space-between;
}

.screen.active {
    display: flex;
}

.hidden {
    display: none !important;
}

/* Header */
.game-header {
    width: 100%;
    padding: calc(200px + env(safe-area-inset-top)) 20px 0 20px; /* Force lowered to 200px */
    display: flex;
    flex-direction: column;
    z-index: 100;
    flex-shrink: 0;
}

.hud-top-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px !important;
    box-sizing: border-box;
}

.stats-group {
    display: flex;
    gap: 3px;
    justify-content: center;
}
.stat-box .label {
    display: none !important;
}
.stat-box {
    min-width: 45px !important;
    height: 32px !important;
    padding: 0 4px !important;
}

.hud-bottom-row {
    width: 98%;
    display: flex;
    justify-content: center;
    margin-top: 2px;
}

.header-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.control-group {
    margin-right: 15px !important;
    gap: 3px !important;
    display: flex !important;
}

/* UNIFIED 3D BLOCK SYSTEM (MASTER STYLE) */
.header-icon-btn-3d,
.stat-box,
.target-box {
    background: #111827 !important;
    border: none !important;
    border-radius: 12px !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    cursor: pointer;
    overflow: hidden;
    transform: perspective(800px) rotateX(15deg);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 0 #1f2937,
        0 6px 12px rgba(0, 0, 0, 0.4);
}

.header-icon-btn-3d {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.header-ico-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stat-box {
    min-width: 45px;
    height: 32px;
}

/* Internal Typography Consistency */
.label {
    font-size: 11px !important;
    font-weight: 1000 !important;
    color: #f472b6 !important;
    /* Vibrant Pink for labels to match theme */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
    text-shadow: 0 0 5px rgba(244, 114, 182, 0.3);
}

.val,
#current-level,
#current-score,
#total-score {
    font-size: 18px;
    /* Increased further for visibility */
    font-weight: 1000;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.2);
}

#current-level {
    color: #22d3ee;
}

/* Cyan for Stage Level */
#current-score {
    color: #ffffff;
}

/* Pure White for Current Score */
#total-score {
    color: #facc15;
}

/* Bright Lemon Yellow for Total Score */

/* Adjust Icon Buttons now that labels are gone */
.header-icon-btn-3d .val {
    font-size: 22px;
    margin-top: 2px;
}

#sidebar-logout-btn .val,
#reset-btn .val {
    color: #f87171;
}

/* Global Interaction Logic */
.header-icon-btn-3d:hover,
.stat-box:hover,
.target-box:hover {
    transform: perspective(800px) rotateX(10deg) translateY(-2px);
    background: #1f2937 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        0 1px 0 #374151,
        0 3px 0 #1f2937,
        0 6px 0 #020617,
        0 15px 25px rgba(0, 0, 0, 0.6);
}

.header-icon-btn-3d:active,
.stat-box:active,
.target-box:active {
    transform: perspective(800px) rotateX(25deg) translateY(4px);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.5),
        0 1px 0 #020617,
        0 2px 0 #020617,
        0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Cleaned up redundant ruleset */

.stat-box:hover,
.target-box:hover {
    transform: perspective(800px) rotateX(10deg) translateY(-2px);
}

.timer-container {
    flex: 0 1 60px;
    /* Reduced basis and allowed to shrink */
    min-width: 40px;
    height: 16px;
    border-radius: 8px;
    position: relative;
    background: #000;
    /* Darker for 3D look */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transform: perspective(800px) rotateX(20deg);
    margin: 0 2px;
    z-index: 5;
}

#timer-bar {
    height: 100%;
    width: 100%;
    /* Initial full width */
    background: linear-gradient(to bottom, #f472b6 0%, #db2777 50%, #9d174d 100%);
    border-radius: 8px;
    transition: width 0.1s linear;
    position: relative;
    box-shadow: 0 0 10px rgba(219, 39, 119, 0.3);
}

/* V27: Glossy Highlight on Timer Bar */
#timer-bar::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    border-radius: 5px;
    pointer-events: none;
}

/* Grid Area - Portrait 6:8 Resolution-Based Adaptive Layout */
.grid-container {
    width: 100%;
    flex: 1;
    min-height: 0;
    margin-top: 40px; /* Lower the entire block set */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 5;
    background: transparent !important;
    border: none !important;
}
#grid-parent {
    background: transparent !important;
    border: none !important;
}

#game-grid {
    /* RESOLUTION-BASED DYNAMIC SCALING: Fixed visibility and scaling */
    aspect-ratio: 5 / 9; 
    margin: 0 auto;
    max-height: 80%; 
    width: 96vw; /* Maximize width to fill phone screen */
    height: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px; /* Minimal gap for largest blocks */
    gap: 0;
    background: transparent;
    border-radius: 12px;
    padding: 2px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    z-index: 10;
    opacity: 1;
    /* Zero lag character reveal - RESTORED */
    will-change: transform;
    transition: none !important;
    animation: none !important;
}

@keyframes grid-reveal {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.grid-cell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    background: transparent;
    box-shadow: none;
    border: none;
}

.fruit-token {
    width: 96%;
    height: 96%;
    margin: 2%;
    aspect-ratio: 1/1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20%;
    /* V490: Tighter rounded for premium look */
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: 10;
    opacity: 1;
    filter: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
    /* Critical for smooth mobile falling/swapping */

    /* V32: Mild Breathing Animation - Gentle movement */
    animation: idle-float 4s infinite ease-in-out;
    animation-delay: var(--delay, 0s);
}

@keyframes idle-float {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-3px, -4px) rotate(-1deg);
    }

    50% {
        transform: translate(0, -8px) rotate(0deg) scale(1.02);
    }

    75% {
        transform: translate(3px, -4px) rotate(1deg);
    }
}

@keyframes character-wobble {

    0%,
    100% {
        transform: scale(1) rotate(0);
    }

    50% {
        transform: scale(1.1) rotate(5deg);
    }
}

.wobble-anim {
    animation: character-wobble 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

.shake-anim {
    animation: side-shake 0.4s ease-in-out !important;
}

@keyframes side-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px) rotate(-3deg);
    }

    50% {
        transform: translateX(6px) rotate(3deg);
    }

    75% {
        transform: translateX(-3px);
    }
}

/* Hover effect for even more life */
.grid-cell:hover .fruit-token {
    transform: scale(1.15) !important;
    z-index: 10;
}

/* CASCADING FALL ANIMATION - DISABLED FOR INSTANT START */
.falling {
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.landing-bounce {
    animation: bounceHeavyV42 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes bounceHeavyV42 {
    0% {
        transform: scale(1, 1) translateY(0);
    }

    15% {
        transform: scale(1.3, 0.7) translateY(0);
    }

    /* Heavy Squash */
    30% {
        transform: scale(0.8, 1.2) translateY(-45px);
    }

    /* High Bounce 1 */
    45% {
        transform: scale(1.2, 0.8) translateY(0);
    }

    /* Hit 2 */
    60% {
        transform: scale(0.9, 1.1) translateY(-15px);
    }

    /* Low Bounce 2 */
    75% {
        transform: scale(1.05, 0.95) translateY(0);
    }

    /* Final Hit */
    80% {
        transform: translateX(-2px) rotate(-1deg);
    }

    84% {
        transform: translateX(2px) rotate(1deg);
    }

    88% {
        transform: translateX(-2px) rotate(-1deg);
    }

    92% {
        transform: translateX(2px) rotate(1deg);
    }

    100% {
        transform: scale(1, 1) translateY(0);
    }
}

/* EXPLOSIVE 3D SHATTER & MEGA SHARDS */
.shatter-3d {
    animation: shatterV10 0.6s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Reduced from 1.0s */
    z-index: 5000 !important;
}

@keyframes shatterV10 {
    0% {
        transform: scale(1) translateZ(0);
        filter: brightness(1);
    }

    30% {
        transform: scale(1.6) translateZ(150px) rotate3d(1, 1, 0, 15deg);
        filter: brightness(2) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    }

    60% {
        transform: scale(1.4) translateZ(200px) rotate3d(1, 1, 0, 25deg);
        filter: brightness(1.5);
        opacity: 0.8;
        /* Stay visible longer */
    }

    100% {
        transform: scale(0) translateZ(300px);
        opacity: 0;
    }
}

.shard {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    z-index: 9999;
}

/* [V1.8.35] Virtual Fullscreen */
body.virtual-fullscreen {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}
.shard {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
    animation: shardBlastV20 1.2s forwards cubic-bezier(0.1, 0.5, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

@keyframes shardBlastV20 {
    0% {
        transform: translate3d(var(--sx), var(--sy), 0) scale(1.2) rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: translate3d(var(--tx), var(--ty), var(--tz)) scale(0) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--ra));
        opacity: 0;
    }
}

/* 3D RENDERED VOLUMETRIC CLOUDS */
.boom-container {
    position: absolute;
    pointer-events: none;
    z-index: 9000;
}

/* OPTIMIZED 3D CLOUDS (High Performance) */
.puff {
    position: absolute;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f1f5f9 40%, #94a3b8 100%);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Slightly optimized shadow */
    opacity: 0;
    forced-color-adjust: none !important;
    filter: invert(0) !important;
    color-scheme: light !important;
    animation: puff-optimized 0.6s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes puff-optimized {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(5);
        opacity: 0;
    }
}

.boom-flash {
    position: absolute;
    width: 180px;
    height: 180px;
    /* Soft volumetric glow core */
    background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.4) 30%,
            rgba(255, 255, 255, 0.1) 60%,
            transparent 85%);
    transform: translate(-50%, -50%) scale(0);
    filter: blur(5px);
    animation: flash-volumetric 0.6s cubic-bezier(0.1, 0.5, 0.5, 1) forwards;
    /* Reduced from 1.2s */
}

@keyframes flash-volumetric {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    10% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.screen-shake {
    animation: shakeV9 0.4s both;
}

@keyframes shakeV9 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10%,
    90% {
        transform: translate(-5px, 0);
    }

    20%,
    80% {
        transform: translate(5px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate(-8px, 0);
    }

    40%,
    60% {
        transform: translate(8px, 0);
    }
}

/* Removed selected::after to avoid double boxing */
.selected {
    filter: brightness(1.2) drop-shadow(0 0 5px white);
}

@keyframes pulse {
    from {
        transform: scale(0.96);
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

/* Stage Clear Celebration */
#clear-overlay {
    background: rgba(0, 0, 0, 0.92);
    /* More opaque, no blur */
    display: none;
    flex-direction: column;
}

#clear-overlay.active {
    display: flex;
    animation: fadeIn 0.5s forwards;
}

.clear-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.clear-rabbit-bounce {
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 20px gold);
    animation: cute-bounce 0.8s infinite alternate cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cute-bounce {
    0% {
        transform: translateY(0) scale(1) rotate(-5deg);
    }

    100% {
        transform: translateY(-40px) scale(1.1) rotate(5deg);
    }
}

.clear-text-3d {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    font-family: 'Outfit', sans-serif;
    text-shadow:
        0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
        0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
        0 0 20px gold, 0 0 50px #ffcc00;
    animation: text-pop 0.5s cubic-bezier(0.175, 0.885, 0.4, 1.5) forwards;
}

@keyframes text-pop {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.clear-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(circle, gold 1px, transparent 1px);
    background-size: 50px 50px;
    animation: sparkle-move 2s infinite linear;
    opacity: 0.5;
}

@keyframes sparkle-move {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hint-shake {
    animation: hintScaleShake 0.6s infinite alternate cubic-bezier(0.36, 0.07, 0.19, 0.97);
    z-index: 100;
}

@keyframes hintScaleShake {
    0% {
        transform: rotate(0) scale(1.1);
    }

    100% {
        transform: rotate(10deg) scale(1.2);
    }
}

/* V17/V19/V1.1.22: HIGH-CONTRAST VOLUMETRIC MAGIC SCORE */
.magic-score-3d {
    position: absolute;
    transform: translate(-50%, -50%) translateZ(400px);
    color: #ffd700;
    /* Gold Face */
    font-size: 3.5rem;
    /* V44: Reduced from 5rem to avoid clipping */
    font-weight: 1000;
    /* V1.1.22: DEEP BRONZE EXTRUSION for clarity */
    text-shadow:
        0 1px 0 #b45309,
        0 2px 0 #b45309,
        0 3px 0 #92400e,
        0 4px 0 #92400e,
        0 5px 0 #78350f,
        0 6px 0 #78350f,
        0 7px 0 #451a03,
        0 8px 10px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 215, 0, 0.5);
    /* Outer glow */
    pointer-events: none;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: magicPopV19 1.4s forwards cubic-bezier(0.17, 0.67, 0.83, 0.67);
    font-family: 'Outfit', sans-serif;
    letter-spacing: 2px;
    /* Increased to prevent overlap */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
    /* Sublte outline for sharpness */
}

.combo-tag {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 900;
    padding: 4px 12px;
    background: linear-gradient(to right, #ec4899, #db2777);
    border-radius: 20px;
    margin-top: -10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

@keyframes magicPopV19 {
    0% {
        transform: translate(-50%, -50%) translateZ(0) scale(0.1) rotateX(90deg);
        opacity: 0;
        filter: brightness(5);
    }

    40% {
        transform: translate(-50%, -50%) translateZ(500px) scale(2.0) rotateX(0deg);
        opacity: 1;
    }

    70% {
        transform: translate(-50%, -55%) translateZ(600px) scale(1.8);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -100%) translateZ(800px) scale(0);
        opacity: 0;
    }
}

.game-footer {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: max(5px, var(--safe-area-bottom));
    width: 100%;
    flex-shrink: 0;
    /* Protect footer size */
}

.target-box {
    width: auto;
    min-width: 90px;
    height: 38px;
    /* Reduced from 42px */
    flex-direction: row !important;
    gap: 8px;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.target-box .label {
    margin-bottom: 0 !important;
    font-size: 15px !important;
    /* Request 2: Scale label to match number */
    color: #f472b6 !important;
}

#target-score {
    font-size: 18px;
    /* Reduced font size */
    font-weight: 900;
    color: #ffffff;
}





.glass {
    background: transparent !important;
    border: none !important;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay.hidden {
    display: none !important;
}

.info-card {
    width: 95%;
    max-width: 400px;
    padding: 8px 10px;
    border-radius: 24px;
    text-align: center;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
    color: white;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.05);
    transform: perspective(1000px) rotateX(2deg);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* V48: Unified 3D Header Block for Rabbit + Name */
.info-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 10px;
    /* Reduced from 12px 15px */
    background: #111827;
    border-radius: 20px;
    transform: perspective(800px) rotateX(10deg);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 0 #1f2937,
        0 2px 0 #1f2937,
        0 4px 0 #111827,
        0 6px 0 #0f172a,
        0 8px 0 #020617,
        0 10px 15px rgba(0, 0, 0, 0.4);
}

/* Gloss Bubble for Unified Header */
.info-header-row::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 22px 22px 4px 4px;
    pointer-events: none;
    z-index: 5;
}

.info-rabbit {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    background-color: white;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.fruit-name-badge {
    color: #f3f4f6;
    font-size: 0.95rem;
    font-weight: 900;
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.info-score-badge {
    background: #111827;
    color: #fbbf24;
    padding: 6px 20px;
    /* Reduced from 8px 25px */
    border-radius: 15px;
    display: inline-block;
    margin: 0 auto 10px;
    /* Reduced from 20px */
    font-weight: 1000;
    font-size: 1.0rem;
    /* Slightly smaller */
    transform: perspective(800px) rotateX(15deg);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 1px 0 #0f172a,
        0 2px 0 #0f172a,
        0 4px 0 #020617,
        0 6px 0 #020617,
        0 10px 15px rgba(0, 0, 0, 0.5);
    letter-spacing: 1.5px;
}

/* Social login classes kept for potential JS compatibility, but hidden */
.social-login-grid,
.social-btn {
    display: none !important;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.info-section {
    background: #111827;
    padding: 6px 8px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    text-align: left;
    transform: perspective(800px) rotateX(10deg);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 0 #1f2937,
        0 2px 0 #1f2937,
        0 4px 0 #111827,
        0 6px 0 #0f172a,
        0 8px 0 #020617,
        0 10px 15px rgba(0, 0, 0, 0.4);
    border: none;
}

/* Gloss Bubble for Info Sections */
.info-section::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
    border-radius: 18px 18px 4px 4px;
    pointer-events: none;
}

.info-section h3 {
    font-size: 0.7rem !important;
    background: #db2777;
    color: white;
    padding: 3px 8px !important;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 4px !important;
    font-weight: 800;
}

.info-section p {
    font-size: 0.72rem;
    line-height: 1.3;
    color: #e2e8f0;
    font-weight: 500;
}

#start-screen {
    z-index: 9000;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
    padding: 0;
}

.start-screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.start-logo {
    width: 240px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.title-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* V23: MAHJONG-BLOCK EXTREME 3D HUD */
/* Version cr1.1.0 HUD Refinement */
.stat-box {
    min-width: 60px;
    /* Adjusted from 80px */
}

.target-box {
    min-width: 90px;
}


/* Gloss bubble removed per request */
.stat-box::after,
.target-box::after {
    display: none;
}

.stat-box .label,
.target-box .label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #9ca3af;
    /* Light gray for dark background */
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

#current-level,
#current-score,
#target-score {
    font-weight: 900;
    color: #ffffff;
}

/* Settings & Reset Buttons (Cleaned up) */
#settings-btn {
    font-size: 18px;
    animation: gear-rotate 10s infinite linear;
}

@keyframes gear-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.game-logo {
    width: 256px;
    max-width: 85%;
    aspect-ratio: 128 / 93;
    object-fit: contain;
    height: auto;
    margin: 0 auto;
    display: block;
    transform: translate3d(0, 0, 0);
    /* Snappy entrance + float */
    animation:
        logo-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        float 3.5s infinite ease-in-out 0.4s;
    opacity: 0;
}

@keyframes logo-pop {
    from {
        transform: scale(0.5) translate3d(0, 30px, 0);
        opacity: 0;
    }

    to {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes logo-entrance {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.start-screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex: 1;
    width: 100%;
}

.start-btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.start-btn {
    padding: 18px 45px;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    background: linear-gradient(to bottom, #f472b6, #db2777);
    border: none;
    border-radius: 24px;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    transform: perspective(800px) rotateX(15deg);
    transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Extreme Multi-layered 3D Extrusion */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        0 1px 0 #be185d,
        0 2px 0 #be185d,
        0 4px 0 #9d174d,
        0 6px 0 #831843,
        0 8px 0 #701037,
        0 15px 25px rgba(219, 39, 119, 0.4);
}

.start-btn:active {
    transform: perspective(800px) rotateX(25deg) translateY(6px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 2px 0 #701037,
        0 4px 10px rgba(0, 0, 0, 0.3);
}

.rank-btn-intro {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 800;
    color: #451a03;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
    transform: perspective(800px) rotateX(10deg);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    margin-top: 0;
    flex: 1;
    max-width: 150px;
}

.rank-btn-intro:hover {
    transform: translateY(-2px);
    background: #374151;
}

.rank-btn-intro:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #020617;
}

.policy-body {
    background: #111827;
    /* Unified dark background */
    border-radius: 12px;
    padding: 15px;
    font-size: 13px;
    line-height: 1.6;
    height: 180px;
    /* Reduced from 300px */
    overflow-y: auto;
    margin-bottom: 15px;
    text-align: left;
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mini-btn {
    padding: 6px 15px;
    font-size: 0.8rem;
    font-weight: 800;
    background: #db2777;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* Settings Specific */
.settings-section {
    margin-bottom: 20px;
}

.settings-options {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 15px 0;
    padding: 0 5px;
}

.option-btn {
    flex: 1;
    padding: 15px 10px;
    border-radius: 16px;
    border: none;
    background: #1f2937;
    color: #94a3b8;
    font-size: 1.1rem;
    /* Increased font size */
    font-weight: 1000;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: perspective(800px) rotateX(15deg);
    position: relative;
    overflow: hidden;
    /* 3D Inactive State */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 0 #111827,
        0 2px 0 #111827,
        0 4px 0 #020617,
        0 6px 10px rgba(0, 0, 0, 0.3);
}

.option-btn::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 14px 14px 4px 4px;
    pointer-events: none;
}

.option-btn.active {
    background: linear-gradient(to bottom, #ec4899, #db2777);
    color: white;
    /* 3D Active State (Vibrant) */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 1px 0 #be185d,
        0 2px 0 #be185d,
        0 4px 0 #9d174d,
        0 6px 0 #831843,
        0 8px 15px rgba(219, 39, 119, 0.4);
}

.option-btn.active::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
}

.option-btn:active {
    transform: perspective(800px) rotateX(25deg) translateY(4px);
    box-shadow: 0 2px 0 #020617;
}

.policy-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.policy-btn {
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.policy-btn:hover {
    background: white;
}

.policy-display {
    position: absolute;
    inset: 15px;
    background: #1e1b4b;
    /* Match info card theme */
    z-index: 100;
    border-radius: 30px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-height: 340px;
    /* Constraint height */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Unified Start Screen (TokTok/Tetris Sync) --- */
.start-screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.start-logo {
    width: 280px;
    max-width: 85%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    margin-bottom: 30px;
    animation: startLogoFloat 3.5s ease-in-out infinite;
}

@keyframes startLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.start-btn-primary {
    width: 240px;
    height: 68px;
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    color: white !important;
    border: none !important;
    border-radius: 34px !important;
    font-size: 1.5rem !important;
    font-weight: 950 !important;
    cursor: pointer;
    box-shadow: 0 8px 0 #9d174d, 0 15px 30px rgba(236, 72, 153, 0.4) !important;
    transition: transform 0.1s;
    margin-bottom: 25px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-btn-primary:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0 #9d174d, 0 10px 20px rgba(236, 72, 153, 0.3) !important;
}

.start-secondary-row {
    display: flex;
    gap: 15px;
    margin-bottom: 60px;
}

.start-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 12px 24px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.start-btn-secondary:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}

.start-footer-mini {
    position: absolute;
    bottom: 25px;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    width: 100%;
    pointer-events: none;
    z-index: 20;
}

.rank-btn-intro:hover {
    background: white;
    transform: scale(1.05);
}

.start-btn-primary:active {
    transform: translateY(4px);
    border-bottom-width: 2px;
    box-shadow: 0 5px 10px rgba(219, 39, 119, 0.3);
}

.fruit-btn {
    padding: 14px 40px;
    font-size: 1.2rem;
    font-weight: 900;
    background: linear-gradient(to bottom, #f472b6, #db2777);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        0 1px 0 #be185d,
        0 2px 0 #be185d,
        0 4px 0 #9d174d,
        0 6px 0 #831843,
        0 8px 0 #701037,
        0 15px 25px rgba(219, 39, 119, 0.4);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: perspective(800px) rotateX(15deg);
}

.fruit-btn:hover {
    transform: perspective(800px) rotateX(10deg) translateY(-2px);
    filter: brightness(1.1);
}

.fruit-btn:active {
    transform: perspective(800px) rotateX(20deg) translateY(4px);
    box-shadow: 0 2px 0 #701037;
}

.score-popup {
    position: absolute;
    left: 50%;
    color: #ffffff;
    /* White face */
    font-weight: 1000;
    font-size: 32px;
    /* V1.1.22: Pink Extrusion 3D */
    text-shadow:
        0 1px 0 #db2777,
        0 2px 0 #db2777,
        0 3px 0 #9d174d,
        0 4px 5px rgba(0, 0, 0, 0.4);
    animation: scorePop 0.8s forwards;
    z-index: 10001;
    pointer-events: none;
    letter-spacing: 1px;
}

@keyframes scorePop {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -40px) scale(1.4);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -100px) scale(0.8);
        opacity: 0;
    }
}

/* V25: 3D VOLUMETRIC LOGIN SYSTEM */
#login-screen {
    z-index: 9500;
    justify-content: center;
    align-items: center;
}

.login-card {
    background: linear-gradient(145deg, #1e1b4b 0%, #312e81 100%) !important;
    color: #f3f4f6;
    border: 2px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    max-width: 340px;
    /* Slimmer max-width */
    padding: 15px 20px;
    border-radius: 24px;
    text-align: center;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.5),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    transform: perspective(1000px) rotateX(5deg);
    max-height: 92vh;
    overflow-y: auto;
}

/* Compact Login Overrides */
.login-compact {
    padding: 10px 20px !important;
}

.login-compact .login-logo-mini img {
    height: 60px !important;
    width: auto;
    margin-bottom: 2px !important;
}

.login-compact .login-title {
    margin: 2px 0 10px 0 !important;
    font-size: 1.1rem !important;
    letter-spacing: 2px;
}

.login-compact .input-group {
    margin-bottom: 8px !important;
    text-align: left;
}

.login-compact .input-group label {
    font-size: 0.6rem !important;
    margin-bottom: 2px !important;
    display: block;
    opacity: 0.8;
}

.login-compact input {
    height: 38px !important;
    font-size: 0.85rem !important;
    padding: 0 12px !important;
}

.login-compact .login-submit {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
}

.login-compact .login-policy-note {
    font-size: 0.6rem !important;
    margin-top: 5px;
    opacity: 0.6;
}

.login-compact .login-policy-note span {
    text-decoration: underline;
    cursor: pointer;
}

.login-compact .text-link {
    font-size: 0.75rem !important;
    opacity: 0.7;
}

.contact-box {
    background: #111827;
    padding: 12px;
    border-radius: 15px;
    transform: perspective(800px) rotateX(10deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 0 #0f172a,
        0 8px 15px rgba(0, 0, 0, 0.3);
    margin-top: 5px;
}

.contact-email {
    color: #fbbf24;
    font-weight: 900;
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 1px;
    display: block;
}

.contact-email:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.settings-section h3 {
    font-size: 1rem;
    font-weight: 1000;
    color: #ffffff;
    background: #db2777;
    padding: 8px 15px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transform: perspective(800px) rotateX(10deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 0 #9d174d,
        0 6px 12px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.settings-section h3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
}

.login-title,
#overlay-title {
    font-size: 1.8rem;
    font-weight: 1000;
    color: #ffffff;
    background: linear-gradient(to bottom, #4f46e5, #3730a3);
    padding: 15px 30px;
    border-radius: 20px;
    display: table;
    margin: 0 auto 20px;
    transform: perspective(1000px) rotateX(20deg);
    position: relative;
    letter-spacing: 2px;
    width: fit-content;

    /* Extreme 3D extrusion */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 0 #1f2937,
        0 4px 0 #1f2937,
        0 6px 0 #111827,
        0 8px 0 #0f172a,
        0 10px 0 #020617,
        0 20px 30px rgba(0, 0, 0, 0.5);

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.login-title::after,
#overlay-title::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 45%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
    border-radius: 18px 18px 5px 5px;
}

#overlay-title {
    font-size: 1.2rem;
    padding: 10px 20px;
}

/* Character Name logic moved to consolidated Info Section */

.fruit-name-badge {
    background: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
    color: white;
    font-size: 1.1rem;
    /* Reduced for side layout */
    font-weight: 1000;
    padding: 8px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    transform: perspective(800px) rotateX(10deg);
    flex: 1;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 4px 0 #9d174d,
        0 6px 15px rgba(219, 39, 119, 0.3);

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 50;
}

.brick,
.ice {
    position: relative;
    z-index: 5;
}

.ice::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.8), rgba(30, 64, 175, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    z-index: 20;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: ice-sparkle 3s infinite alternate;
}

.ice::after {
    content: '❄️';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1.2rem;
    z-index: 21;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes ice-sparkle {
    0% {
        filter: brightness(1) contrast(1);
    }

    100% {
        filter: brightness(1.3) contrast(1.2);
    }
}

.shatter-ice {
    animation: ice-shatter-anim 0.5s forwards;
}

@keyframes ice-shatter-anim {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
        filter: brightness(2);
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.fruit-name-badge::before {
    content: '✨';
    margin-right: 8px;
}

.fruit-name-badge::after {
    content: '✨';
    margin-left: 8px;
}

.input-group {
    text-align: left;
    margin-bottom: 8px;
    /* Greatly reduced from 15px */
}

.input-group label {
    font-size: 10px;
    font-weight: 900;
    color: #666;
    margin-left: 10px;
    margin-bottom: 5px;
    display: block;
}

.input-group input {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 18px;
    background: #f1f5f9;
    font-family: inherit;
    font-weight: 700;
    color: #334155;
    /* V25: Recessed 3D Look */
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.1),
        0 1px 0 white;
    outline: none;
    transition: box-shadow 0.2s;
}

.input-group input:focus {
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.15),
        0 0 0 3px rgba(219, 39, 119, 0.2);
}

.login-submit {
    width: 100%;
    margin-top: 10px;
}

/* V28: 3D VOLUMETRIC RESET BUTTON */
.reset-icon-btn {
    background: #fb923c;
    /* Orange to contrast with pink */
    padding: 8px 12px;
    border: none;
    border-radius: 12px 12px 16px 16px;
    font-size: 1.2rem;
    font-weight: 1000;
    color: white;
    cursor: pointer;
    position: relative;
    /* V28: Match 3D Body Style */
    box-shadow:
        0 1px 0 #ea580c,
        0 2px 0 #ea580c,
        0 3px 0 #ea580c,
        0 4px 0 #ea580c,
        0 5px 0 #c2410c,
        0 6px 4px rgba(0, 0, 0, 0.25);
    transform: perspective(800px) rotateX(20deg);
    transition: transform 0.1s;
    margin-left: 5px;
}

.reset-icon-btn:active {
    transform: perspective(800px) rotateX(20deg) translateY(2px);
    box-shadow:
        0 1px 0 #c2410c,
        0 2px 2px rgba(0, 0, 0, 0.2);
}

.reset-icon-btn::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
    border-radius: 6px;
    pointer-events: none;
}

.game-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 15px 30px;
    border-radius: 40px;
    font-weight: 700;
    z-index: 15000;
    white-space: nowrap;
    width: max-content;
}

/* V29: Special Items & Juice */
.shake-lite {
    animation: shake 0.2s both;
}

.shake-heavy {
    animation: shake 0.4s both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.fruit-token.special-line-h::after,
.fruit-token.special-line-v::after {
    display: none;
    /* Removed glowing effect */
}

.fruit-token.special-line-h::before {
    content: '↔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.fruit-token.special-line-v::before {
    content: '↕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
}



@keyframes pulse-glow {
    from {
        opacity: 0.5;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes rainbow-glow {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 5px white);
    }

    to {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px #ec4899);
    }
}

/* V31: Leaderboard Styling */
.rank-list {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sticker-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 columns to fit all at once */
    gap: 10px;
    padding: 5px;
    overflow-y: auto;
    max-height: 100%;
}

.sticker-shelf {
    height: 180px;
    /* Increased height to show grid */
    flex-shrink: 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow-y: auto;
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.rank-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-weight: 700;
    transition: none !important;
}

.rank-item:hover {
    transform: translateX(5px);
}

.rank-pos {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.9rem;
}

.rank-item.top-1 .rank-pos {
    background: #fbbf24;
    color: white;
}

.rank-item.top-2 .rank-pos {
    background: #94a3b8;
    color: white;
}

.rank-item.top-3 .rank-pos {
    background: #b45309;
    color: white;
}

.rank-name {
    flex: 1;
    margin-left: 15px;
    color: #333;
    text-align: left;
}

.rank-score {
    color: #db2777;
    font-family: 'Outfit', sans-serif;
}

.rank-card {
    border-color: #fbbf24 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(254, 243, 199, 0.8) 100%) !important;
}

/* HUD Bottom Row for Mission, Fever, Timer */
.hud-bottom-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 2px 10px;
    flex-shrink: 0;
    /* Protect item/mission bar size */
}

.mission-box,
.fever-container {
    flex: 0 0 auto;
}

/* Item Bar System - RESTORED HORIZONTAL */
.item-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
    /* Request 4: Increased spacing between icons */
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    z-index: 1000;
    flex-shrink: 0;
    min-height: 48px;
    margin: 0 !important;
}

/* Mission Box Style - V1.2.4: Precisely matches header icon groups */
.mission-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    border-radius: 12px;
    background: #111827 !important;
    border: none !important;
    position: relative;
    flex: 1;
    /* Allow to take available space */
    min-width: 120px;
    height: 28px;
    /* Slimmer for V1.2.6 */
    gap: 6px;
    transform: perspective(800px) rotateX(15deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 0 #1f2937,
        0 4px 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    flex-shrink: 0;
}

.mission-box::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 46%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    border-radius: 11px 11px 4px 4px;
    pointer-events: none;
    z-index: 10;
}

.mission-box .m-label {
    font-size: 15px;
    /* Request 2: Scale label to match number */
    /* Increased from 8.5px */
    color: #f472b6;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}

.mission-box .m-text {
    font-size: 13px;
    /* Increased from 10.5px */
    color: #ffffff;
    font-weight: 1000;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 20;
    white-space: nowrap;
}

/* Fever Bar Style */
.fever-container {
    width: 100px;
    height: 28px;
    /* Slimmer */
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.fever-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, #fbbf24, #f59e0b, #ef4444);
    box-shadow: 0 0 10px #fbbf24;
    transition: width 0.3s ease;
}

.fever-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 900;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Cloud (Formerly Jelly) Tile Style - Idea #2: Clear the Clouds */
/* --- V2.0: Guide Highlights for Level 5-10 --- */
.cell-guide-red {
    box-shadow: 0 0 0 4px #ef4444 !important;
    border-radius: 12px;
    z-index: 100;
    position: relative;
    animation: guide-pulse 1.5s infinite;
}

@keyframes guide-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px #ef4444;
    }

    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.4);
    }
}

.level-guide-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    background: rgba(0, 0, 0, 0.85);
    padding: 20px;
    border-radius: 20px;
    border: 2px solid #ef4444;
    z-index: 10000;
    text-align: center;
    color: white;
}

.level-guide-overlay h3 {
    color: #ef4444;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.guide-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.guide-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
}

.brick {
    filter: grayscale(0.8) contrast(1.2) brightness(0.6);
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0V0zm2 2v17h36V2H2zm0 19v17h36V21H2z' fill='%23666'/%3E%3C/svg%3E");
    background-color: #333 !important;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Character Skill Effects */
.skill-active {
    box-shadow: none;
    border-radius: 12px;
}

@keyframes skill-soft-glow {
    from {
        filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
        transform: scale(0.98);
    }

    to {
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9));
        transform: scale(1.02);
    }
}

.item-btn-3d {
    width: 40px;
    /* Reduced from 44px */
    height: 40px;
    /* Reduced from 44px */
    background: #111827;
    border: none;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: perspective(800px) rotateX(15deg);
    transition: all 0.15s;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 3px 0 #1f2937,
        0 6px 10px rgba(0, 0, 0, 0.4);
}

.item-btn-3d .val {
    font-size: 20px;
    /* Smaller icon */
    z-index: 2;
}

.item-btn-3d .count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ec4899;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.item-btn-3d:active {
    transform: perspective(800px) rotateX(25deg) translateY(4px);
    box-shadow: 0 2px 0 #020617;
}

.item-btn-3d.active {
    box-shadow: 0 0 15px #ec4899, inset 0 0 5px white;
    background: #312e81;
}

/* Obstacles: Brick */
.brick {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    border-radius: 8px !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.3) !important;
    position: relative;
}

.brick::before {
    content: '🧱';
    font-size: 24px;
}

/* Special Items */
.special-bomb::after {
    content: '💣';
    position: absolute;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.special-rocket::after {
    content: '🚀';
    position: absolute;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}


/* Responsive Strategy: High-Aspect Ratio (Tall phones like Galaxy S, iPhone Pro) */
@media (min-aspect-ratio: 1/2) and (max-width: 500px) {
    .grid-container {
        padding: 0;
        /* v1.8.21: Removed 5% padding to fix space/cutoff issue */
    }
}

/* Responsive Strategy: Low-Aspect Ratio (Short/Wide phones or Tablets) */
@media (max-aspect-ratio: 13/19) {
    .game-header {
        padding: 2px 10px;
        transform: scale(0.9);
        /* Scale down HUD on short screens to save space */
    }

    .item-bar {
        min-height: 44px;
        padding-bottom: 5px;
    }
}

@media (max-width: 380px) {
    .game-header {
        padding: 5px 5px 0px;
        /* Adjusted for narrow screens */
    }

    .hud-top-row {
        gap: 4px;
    }

    .stats-group {
        gap: 2px;
    }

    .stat-box {
        min-width: 45px;
        height: 32px;
    }

    .header-icon-btn-3d {
        width: 36px;
        height: 32px;
    }

    .label {
        font-size: 9px !important;
    }

    .val,
    #current-level,
    #current-score,
    #total-score {
        font-size: 14px;
    }

    .header-icon-btn-3d .val {
        font-size: 18px;
    }

    .item-bar {
        gap: 8px;
        padding: 8px 10px;
    }

    .item-btn-3d {
        width: 50px;
        height: 50px;
    }

    .target-box {
        min-width: 90px;
        height: 50px;
        padding: 0 10px !important;
    }

    .item-btn-3d .val {
        font-size: 22px;
    }

    #target-score {
        font-size: 18px;
    }
}

/* Safe area overrides removed */

/* --- Eye Match Mini-Game Screen (V1.0) --- */
#eye-game-screen {
    z-index: 10001;
    background: #000;
}

.eye-game-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.eye-camera-preview {
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0.3;
}

#eye-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.eye-game-bg {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.eye-header {
    position: absolute;
    padding: 10px;
    top: max(var(--safe-area-top), 10px);
    left: 0;
    right: 0;
    z-index: 100 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eye-row {
    width: 200%;
    height: 100px;
    display: flex;
    gap: 30px;
    align-items: center;
    position: relative;
}

.eye-rabbit-item {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.eye-rabbit-item img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.eye-rabbit-item.pulsating {
    transform: scale(1.4);
    box-shadow: 0 0 25px #ec4899;
    background: rgba(236, 72, 153, 0.4);
    z-index: 50;
    border-color: #ec4899;
}

.eye-stat-box {
    background: #111827;
    padding: 8px 16px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.eye-stat-box .label {
    font-size: 10px;
    color: #94a3b8;
}

.eye-target-badge {
    background: #db2777;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 15px rgba(219, 39, 119, 0.4);
}

#eye-target-text {
    font-weight: 900;
    font-size: 1.4rem;
    color: white;
}

.eye-guide-text {
    position: absolute;
    bottom: max(var(--safe-area-bottom), 40px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 1.1rem;
    z-index: 200;
    animation: eyeBlinkAnim 2s infinite;
}

@keyframes eyeBlinkAnim {

    0%,
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.4;
        transform: translateX(-50%) scale(0.95);
    }
}

.eye-match-splash {
    position: fixed;
    pointer-events: none;
    z-index: 100000;
    font-size: 2.5rem;
    font-weight: 1000;
    color: #fcd34d;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    animation: matchFloat 0.8s ease-out forwards;
    white-space: nowrap;
}

@keyframes matchFloat {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    30% {
        transform: translateY(-40px) scale(1.6);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* SOCIAL LOGIN PREMIUM STYLING (FIXED POSITION) */
.social-login-grid {
    display: none !important;
}

.social-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-icon {
    font-size: 1.2rem;
    font-weight: 900;
}

.social-btn.gmail,
.social-btn.google {
    background: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
}

.social-btn.apple {
    background: #000000 !important;
    color: #ffffff !important;
}

.social-btn.naver {
    background: #03C75A !important;
    color: #ffffff !important;
}

.social-btn.kakao {
    background: #FEE500 !important;
    color: #191919 !important;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-weight: 600;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.divider:not(:empty)::before {
    margin-right: 15px;
}

.divider:not(:empty)::after {
    margin-left: 15px;
}