* { 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; }
#app-container { width: 100%; height: 100%; position: relative; max-width: 500px; margin: 0 auto; background: #fff; 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; }
.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: url('../garden.png') no-repeat center center; background-size: cover; }
.login-compact { padding: 40px; width: 85%; max-width: 340px; text-align: center; }
.login-title { font-size: 28px; color: #ff4757; margin: 15px 0; font-weight: 800; 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: #555; 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; }
.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: 800; box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4); cursor: pointer; transition: transform 0.2s; }
.start-btn-primary:active { transform: scale(0.95); }

/* Game Screen Background */
.game-bg { position: absolute; width: 100%; height: 100%; background: url('../garden.png') no-repeat center top; background-size: cover; z-index: -1; }

/* Top Area */
.top-area { position: relative; height: 35%; display: flex; justify-content: center; align-items: flex-end; overflow: visible; padding-top: 0; padding-bottom: 0; }
.top-status-bar { 
    position: absolute; 
    top: 10px !important; 
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 350px;
    height: 48px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 100; 
    background: rgba(255, 182, 193, 0.5); 
    backdrop-filter: blur(25px); 
    -webkit-backdrop-filter: blur(25px); 
    border-radius: 50px; 
    padding: 0 8px; 
    border: 2px solid rgba(255, 255, 255, 0.6); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.2); 
}
.top-left-group, .top-right-group { display: flex; gap: 3px; align-items: center; width: 80px; }
.top-right-group { justify-content: flex-end; }
.top-center-group { display: flex; flex-grow: 1; justify-content: center; align-items: center; gap: 4px; pointer-events: none; }
.circle-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 2px solid #ddd; box-shadow: 0 4px 8px rgba(0,0,0,0.1); cursor: pointer; font-size: 20px; color: #555; display: flex; justify-content: center; align-items: center; transition: transform 0.2s; }
.circle-btn:active { transform: scale(0.9); }
.status-box, .status-pill { background: rgba(255,255,255,0.85); padding: 4px 8px; border-radius: 20px; font-size: 12px; font-weight: 800; color: #444; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border: 1px solid #fff; }
#score-val { color: #ff4757; }
#turns-val { color: #3742fa; }
.version-lab { position: absolute; top: 12px; left: 15px; font-size: 8px; font-weight: 800; color: rgba(255,255,255,0.6); pointer-events: none; z-index: 100; }

#chr-img { 
    height: 140% !important; 
    max-width: 450px !important;
    object-fit: contain; 
    transform-origin: bottom center; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s; 
    margin-bottom: -160px !important; 
    z-index: 1;
}
.chr-happy { transform: scale(1.05) translateY(-5px); filter: brightness(1.1) drop-shadow(0 0 25px rgba(255, 255, 255, 0.8)); }

/* Side Buttons (Aligned to 350px Header) */
.side-buttons { 
    position: absolute; 
    right: 50%; 
    transform: translateX(170px); 
    top: 70px !important; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    z-index: 50; 
}
.side-btn { 
    position: relative; 
    width: 48px; height: 48px; 
    border-radius: 50%; border: 2px solid #fff; 
    background: rgba(255,255,255,0.4); 
    backdrop-filter: blur(15px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.25); 
    cursor: pointer; padding: 6px; 
    display: flex; justify-content: center; align-items: center; 
    transition: all 0.2s; 
}
.side-btn:active { transform: scale(0.9); }
.side-btn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }

.badge { position: absolute; bottom: -5px; right: -5px; background: #ff4757; color: #fff; font-size: 12px; font-weight: bold; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; z-index: 5; }

/* Heart Gauge */
.gauge-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1; border-radius: 50%; overflow: hidden; }
.gauge-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: rgba(255, 71, 87, 0.4); transition: height 0.3s; }
.skill-ready { animation: skillGlow 1s infinite alternate; border-color: #ff4757; }
@keyframes skillGlow { 0% { box-shadow: 0 0 10px rgba(255,71,87,0.5); } 100% { box-shadow: 0 0 25px rgba(255,71,87,1); } }
.chr-skill { transform: scale(1.15) translateY(-5px); filter: brightness(1.2) drop-shadow(0 0 30px rgba(255, 71, 87, 0.9)); }

/* Puzzle Grid */
.board-area { height: 65%; padding: 0 12px 10px 12px; display: flex; justify-content: center; align-items: flex-end; z-index: 10; touch-action: none; margin-top: 0 !important; }
#puzzle-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2px; width: 100%; max-width: 450px; aspect-ratio: 7/8; touch-action: none; }

/* Translucent Rounded Cells */
.cell { background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 14px; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: inset 0 2px 5px rgba(255,255,255,0.5); backdrop-filter: blur(3px); cursor: pointer; }
.cell.selected { background: rgba(255, 255, 255, 0.7); border: 2px solid #ff4757; transform: scale(1.03); }

/* Flower Piece */
.flower-piece { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.3)); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: absolute; cursor: pointer; pointer-events: none; }

/* Fireworks Layer */
#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)); } }

/* [v5.1.2] Match Animations */
@keyframes cellMatchWobble {
    0% { transform: scale(1) rotate(0); }
    20% { transform: scale(1.1) rotate(3deg); }
    40% { transform: scale(1.1) rotate(-3deg); }
    60% { transform: scale(1.1) rotate(3deg); }
    80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}
.cell-matching {
    animation: cellMatchWobble 0.35s ease-in-out;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: #ff6b81 !important;
}

@keyframes pieceMatchWobble {
    0% { transform: scale(1) rotate(0); opacity: 1; }
    50% { transform: scale(1.3) rotate(8deg); opacity: 1; }
    80% { transform: scale(1.3) rotate(-8deg); opacity: 1; }
    100% { transform: scale(0) rotate(0); opacity: 0; }
}
.piece-matching {
    animation: pieceMatchWobble 0.45s forwards;
    z-index: 101 !important;
}