:root {
    --bg-village: #78e08f;
    --border-main: #2d3436;
    --shadow-pop: 6px 6px 0px rgba(0,0,0,0.15);
    --bubble-bg: #ffffff;
    --ui-accent: #ff7675;
}

* {
    box-sizing: border-box;
    margin: 0; padding: 0;
    font-family: 'Jua', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure the body takes full dynamic viewport height */
html, body {
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: #2c3e50;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🌿 Strict Mobile-First Container */
.app-container {
    width: 100%;
    max-width: 480px;
    height: 100dvh; /* Use dynamic viewport height */
    background: linear-gradient(180deg, #ade8f4 0%, #ebf8ff 25%, #78e08f 26%, #38b000 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 100px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* 🌳 Game View (Village Area) */
.game-view {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0; /* Important for flex overflow handling */
}

/* Ground Depth Textures */
.game-view::before {
    content: ''; position: absolute; width: 200%; height: 100%; top: 26%; left: -50%;
    background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
    opacity: 0.1; z-index: 1; pointer-events: none;
}

/* 🐶 Premium Character Refinement */
.stocky-wrapper {
    position: absolute;
    width: 80px; /* Reduced base size for better mobile fit */
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    touch-action: none;
}

.pet-visual-container {
    position: relative;
    width: 100%; height: 80px;
    display: flex; justify-content: center; align-items: flex-end;
}

.pet-body-main {
    width: 65px; height: 70px;
    background: #fff; border: 4px solid var(--border-main);
    border-radius: 25px 25px 20px 20px;
    position: relative; z-index: 5;
    box-shadow: inset -4px -4px 0 rgba(0,0,0,0.05), 0 5px 0 rgba(0,0,0,0.1);
}

.pet-ear { position: absolute; background: inherit; border: 4px solid var(--border-main); z-index: 1; }
.type-shiba { background-color: #ff9f43; }
.type-shiba .pet-ear { width: 22px; height: 22px; border-radius: 50% 50% 10% 10%; top: -8px; transform: rotate(-15deg); }
.type-shiba .pet-ear.right { right: 5px; transform: rotate(15deg); }
.type-shiba .pet-ear.left { left: 5px; }

.type-snowcat { background-color: #f5f6fa; }
.type-snowcat .pet-ear { width: 18px; height: 18px; border-radius: 50% 50% 0 0; top: -10px; transform: rotate(-10deg); }
.type-snowcat .pet-ear.right { right: 8px; transform: rotate(10deg); }
.type-snowcat .pet-ear.left { left: 8px; }

.type-beagle { background-color: #ced6e0; }
.type-beagle .pet-ear { width: 24px; height: 45px; border-radius: 12px; top: 8px; z-index: 6; }
.type-beagle .pet-ear.left { left: -10px; transform: rotate(-5deg); }
.type-beagle .pet-ear.right { right: -10px; transform: rotate(5deg); }

/* Face Parts */
.pet-eyes { position: absolute; top: 35%; width: 100%; display: flex; justify-content: space-around; padding: 0 15px; z-index: 10; }
.pet-eye { width: 8px; height: 10px; background: var(--border-main); border-radius: 50%; position: relative; }
.pet-eye::after { content: ''; position: absolute; top: 1px; left: 1px; width: 2px; height: 2px; background: #fff; border-radius: 50%; }
.pet-mouth { position: absolute; top: 52%; left: 50%; transform: translateX(-50%); width: 12px; height: 6px; border-bottom: 2px solid var(--border-main); border-radius: 0 0 10px 10px; z-index: 10; }

/* ☘️ World Items */
.world-item {
    position: absolute; font-size: 1.8rem; z-index: 3;
    animation: item-float 2.5s infinite ease-in-out;
    pointer-events: none; /* Character detects collision, not touch */
}

/* 📊 Floating Stats */
.stocky-stats-bubble {
    position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
    background: #fff; border: 3px solid var(--border-main); border-radius: 20px;
    padding: 10px; width: 160px; z-index: 1000; box-shadow: var(--shadow-pop);
    display: none; flex-direction: column; gap: 8px;
}
.stat-bar-container { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; }
.bar-bg { width: 100%; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; border: 2px solid var(--border-main); }
.bar-fill { height: 100%; transition: width 0.4s cubic-bezier(0.1, 0.7, 1.0, 0.1); }
.fill-lucky { background: #2ecc71; }
.fill-intel { background: #3498db; }

/* 🗞️ News Bubble */
.stocky-bubble {
    position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
    background: #fff; border: 3px solid var(--border-main);
    padding: 10px 15px; border-radius: 15px; font-size: 0.8rem; width: 180px;
    z-index: 100; text-align: center; display: none;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.1);
}

/* 🎮 Action Menu (Mobile Optimized) */
.action-menu {
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 15px 10px; background: #fff; border-top: 5px solid var(--border-main);
    padding-bottom: env(safe-area-inset-bottom, 15px); /* iOS Safe Area */
}

.action-btn { display: flex; flex-direction: column; align-items: center; background: none; border: none; }
.action-btn .icon {
    width: 55px; height: 55px; border-radius: 18px;
    border: 3px solid var(--border-main); background: #fff;
    box-shadow: 4px 4px 0px var(--border-main);
    display: flex; justify-content: center; align-items: center; font-size: 1.6rem;
}
.action-btn:active .icon { transform: translate(3px, 3px); box-shadow: none; }
.action-btn .label { font-size: 0.75rem; font-weight: 800; margin-top: 5px; color: var(--border-main); }

/* 🖼️ Modals (Responsive & Scrollable) */
.modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
    background: rgba(0,0,0,0.6); z-index: 10000; justify-content: center; align-items: center; padding: 20px;
}
.modal-content {
    background: #fff; border: 4px solid var(--border-main); border-radius: 25px;
    width: 100%; max-width: 400px; padding: 25px; box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
    max-height: 85dvh; overflow-y: auto;
}

.news-results { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.news-item {
    background: #f8fafc; border: 2px solid var(--border-main); border-radius: 15px;
    padding: 12px; text-align: left;
}
.news-title { font-size: 0.85rem; font-weight: 800; line-height: 1.3; display: block; margin-bottom: 5px; }
.news-link { font-size: 0.75rem; color: #3498db; font-weight: bold; }

/* 💫 Mobile Animations */
.walking { animation: walk-wobble 0.8s infinite ease-in-out; }
@keyframes walk-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-4px); } }
.bouncing { animation: bounce-high 0.5s infinite ease-in-out; }
@keyframes bounce-high { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px) scale(0.95, 1.05); } }

/* Fixes */
.facing-left .pet-visual-container { transform: scaleX(-1); }
.empty-msg { position: absolute; top: 40%; width: 100%; text-align: center; color: #555; padding: 0 20px; font-size: 0.9rem; }