* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-drag: none; }
body { font-family: 'Outfit', sans-serif; background: #000; overflow: hidden; width: 100vw; height: 100dvh; color: #fff; }
#app-container { width: 100%; height: 100%; position: relative; max-width: 500px; margin: 0 auto; background: #000; overflow: hidden; }

/* Screens & Glassmorphism */
.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; opacity: 1; transition: opacity 0.5s; z-index: 10; background: #000; }
.screen.hidden { opacity: 0; pointer-events: none; z-index: -1; }
.glass { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); }

/* Login Screen */
#login-screen { justify-content: center; align-items: center; background: linear-gradient(135deg, #fff5f5 0%, #ffc1c1 100%); }
.login-compact { padding: 40px; width: 85%; max-width: 340px; text-align: center; }
.login-title { font-size: 28px; color: #d35400; margin: 15px 0; font-weight: 900; text-shadow: 0 2px 4px rgba(255,255,255,0.8); }
.input-group { margin-bottom: 20px; text-align: left; }
.input-group label { display: block; font-size: 12px; font-weight: 800; color: #885a5a; margin-bottom: 6px; }
.input-group input { width: 100%; padding: 15px; border: 2px solid transparent; border-radius: 12px; font-size: 16px; background: rgba(255,255,255,0.9); outline: none; transition: border 0.3s; font-family: inherit; font-weight: bold; color: #885a5a; }
.input-group input:focus { border: 2px solid #ff4757; }
.start-btn-primary { width: 100%; padding: 18px; background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%); color: white; border: none; border-radius: 40px; font-size: 20px; font-weight: 900; box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4); cursor: pointer; transition: transform 0.2s; }
.menu-btn { 
    background: #27ae60; color: white; border: none; padding: 15px 45px; 
    font-size: 20px; font-weight: 900; border-radius: 50px; cursor: pointer; 
    box-shadow: 0 8px 0 #1e8449; transition: all 0.1s; width: 100%; max-width: 250px; 
}
.menu-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 #1e8449; }

/* Settings 3D Button Style (Tetris Match) */
.login-btn-3d {
    width: 80px; height: 45px; border-radius: 12px;
    border: none; color: #fff; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.1s;
}
.login-btn-3d:active { transform: translateY(2px); }
.start-btn-primary:active { transform: scale(0.95); }

/* Game Screen Background */
.game-bg { position: absolute; width: 100%; height: 100%; background: #000; z-index: -1; }

/* Top Area & Header (Screenshot Style) */
.top-area { position: relative; height: 46%; display: flex; justify-content: center; align-items: flex-end; overflow: visible; background: transparent; }
.top-status-bar { 
    position: absolute; top: 0; left: 0; width: 100%; height: 48px;
    background: rgba(40, 40, 40, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 10px; z-index: 100;
}
.top-left-group { display: flex; align-items: center; justify-content: flex-start; }
.top-right-group { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.top-center-group { display: flex; flex-grow: 1; justify-content: center; align-items: center; gap: 12px; }

.circle-btn-header { 
    width: 32px; height: 32px; border: none; outline: none;
    background: none !important; box-shadow: none !important;
    cursor: pointer; display: flex; align-items: center; justify-content: center; 
    transition: transform 0.2s; 
}
.circle-btn-header img { width: 100%; height: 100%; object-fit: contain; }
.circle-btn-header:active { transform: scale(0.9); }

.hud-item { 
    display: flex; align-items: center; gap: 8px; 
}
.hud-label { color: rgba(255,255,255,0.7); font-size: 10px; font-weight: 900; letter-spacing: 0.5px; }
#score-display, #level-val { color: #fff; font-size: 15px; font-weight: 900; word-break: keep-all; white-space: nowrap; }

/* Video Character */
#character-container { 
    position: absolute; width: 100%; height: 100%; top: 0;
    display: flex; justify-content: center; align-items: flex-end; 
    z-index: 1; pointer-events: none; 
}
#chr-video { width: 100%; height: 100%; object-fit: contain; transform: scale(0.92) translateY(40px); transform-origin: center bottom; }

/* Side Skills (High floating) */
.side-buttons { 
    position: absolute; 
    right: 12px; top: 90px; 
    display: flex; flex-direction: column; gap: 16px; z-index: 50; 
}
.side-skill-btn { 
    position: relative; width: 40px; height: 40px; 
    border-radius: 50%; border: 2px solid #fff; 
    background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); cursor: pointer; 
    display: flex; justify-content: center; align-items: center; 
    transition: 0.1s; padding: 5px;
}
.side-skill-btn:active { transform: scale(0.9); }
.side-skill-btn img { width: 100%; height: 100%; object-fit: contain; }
.badge { position: absolute; top: -5px; right: -5px; background: #ff4757; color: #fff; font-size: 12px; font-weight: 900; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; z-index: 5; }

/* Puzzle Grid Pieces (Pastel Round Style) */
/* Board Area - Lowered to align with system bottom bar */
.board-area { height: 54%; padding: 0; display: flex; justify-content: center; align-items: flex-end; z-index: 2; background: transparent; position: absolute; bottom: 0; width: 100%; }
#puzzle-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: repeat(7, 1fr); 
    gap: 0; 
    width: 92%; max-width: 480px; 
    aspect-ratio: 6/7;
    background: transparent;
    touch-action: none;
    border-radius: 12px;
    padding: 2px;
    overflow: hidden;
    position: relative; z-index: 10;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.cell { background: transparent; border: none; position: relative; }
.flower-piece { 
    width: 100%; height: 100%; border-radius: 4px;
    position: absolute; left: 0; top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Premium 3D Bevel & Depth Effect */
    box-shadow: inset 3px 3px 6px rgba(255,255,255,0.45), 
                inset -3px -3px 6px rgba(0,0,0,0.22);
    border: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
    z-index: 5;
}
.flower-piece.landing {
    animation: bounceLand 0.5s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
@keyframes bounceLand {
    0% { transform: translateY(-400px); opacity: 0; }
    50% { transform: translateY(0); opacity: 1; }
    75% { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}
.flower-piece img { width: 100%; height: 100%; object-fit: contain; }

/* Diverse Pastel Backgrounds */
.bg-pastel-1 { background-color: #ff9ff3 !important; } /* Pink */
.bg-pastel-2 { background-color: #feca57 !important; } /* Peach */
.bg-pastel-3 { background-color: #ff9f43 !important; } /* Orange-ish */
.bg-pastel-4 { background-color: #48dbfb !important; } /* Blue */
.bg-pastel-5 { background-color: #1dd1a1 !important; } /* Mint */
.bg-pastel-6 { background-color: #c8d6e5 !important; } /* Lavender/Gray */
.bg-pastel-7 { background-color: #54a0ff !important; } /* Azure */
.bg-pastel-8 { background-color: #5f27cd !important; } /* Purple */

/* Overlays */
.overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); display: none; justify-content: center; 
    align-items: center; z-index: 1000; backdrop-filter: blur(10px); 
}
.overlay.active, .overlay:not(.hidden) { display: flex; }
.card { padding: 30px; text-align: center; width: 90%; max-width: 360px; }
.card-title { font-size: 24px; font-weight: 900; margin-bottom: 20px; color: #fff; }

/* Sub-Style Cleanup: Removing duplicate PZ styles to avoid config collisions */

/* Fireworks */
#firework-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; overflow: hidden; }
.fw-particle { position: absolute; font-size: 26px; animation: fwExplode 1s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }
@keyframes fwExplode { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(var(--rot)); } }