/* Self-hosted UI font: Montserrat Alternates (cyrillic+latin), weights 700/800/900.
   woff2 live in public/assets/fonts/; this replaces the former Google Fonts CDN
   <link> in index.html (no external request, works offline / on a game-portal
   subdomain). Paths are relative to this stylesheet's URL — i.e. /style.css — so
   they resolve under the project's base: './' wherever the build is hosted. Keep
   the cyrillic subset: the UI ships Russian copy and would otherwise fall back
   to Arial. */
@font-face {
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/montserrat-alternates-v18-cyrillic_latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/montserrat-alternates-v18-cyrillic_latin-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('assets/fonts/montserrat-alternates-v18-cyrillic_latin-900.woff2') format('woff2');
}

html, body {
    margin: 0;
    padding: 0;
    color: #4a3318;
    background: linear-gradient(#a7e0ff, #d6f1ff);
    overflow: hidden;
}

#app {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Scale.FIT keeps the whole game visible and undistorted, letterboxing as
   needed — nothing is ever cropped. */
#game-container {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
    /* Suppress browser pinch/double-tap zoom & scroll over the play area so
       pointerdown is the only spawn signal and the HTML overlay stays aligned. */
    touch-action: none;
}

/* ====================== First-paint loading screen ====================== */
/* Sky gradient matches the game so the loader dissolves seamlessly into play. */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#a7e0ff, #d6f1ff);
    opacity: 1;
    transition: opacity 0.5s ease;
}
#loader.loader-done {
    opacity: 0;
    pointer-events: none;
}
.loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
}
.loader-capy {
    width: 200px;
    height: 163px;
    overflow: visible;
}
/* SVG sub-parts need their own pivot for transforms. */
.capy, .capy-ears, .capy-eyes, .capy-cookie, .capy-crumbs {
    transform-box: fill-box;
    transform-origin: center;
}
.capy-shadow { fill: rgba(74, 51, 24, 0.18); animation: capy-shadow 1.6s ease-in-out infinite; }
.body   { fill: #c0895a; }
.ear    { fill: #ac774a; }
.ear-in { fill: #774f30; }
.muzzle { fill: #d8b486; }
.nostril{ fill: #6e472a; }
.eye    { fill: #3a2a1a; }
.glint  { fill: #fff; }
.cheek  { fill: #f3a39d; opacity: 0.55; }
.cookie { fill: #ecb457; stroke: #b9823a; stroke-width: 2; }
.chip   { fill: #7a4a1a; }
.crumb  { fill: #b9823a; }

.capy        { animation: capy-bob 1.6s ease-in-out infinite; }
.capy-ears   { animation: capy-ears 2.6s ease-in-out infinite; }
.capy-eyes   { animation: capy-blink 3.6s ease-in-out infinite; }
.capy-cookie { animation: capy-munch 0.9s ease-in-out infinite; transform-origin: 130px 180px; }
.crumb       { animation: capy-crumb 0.9s ease-in infinite; }
.crumb:nth-child(2) { animation-delay: 0.45s; }

@keyframes capy-bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes capy-shadow{ 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(0.86); } }
@keyframes capy-ears  { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes capy-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes capy-munch { 0%,100% { transform: scale(1); } 50% { transform: scale(0.82) translateY(2px); } }
@keyframes capy-crumb {
    0% { transform: translateY(0); opacity: 0.9; }
    100% { transform: translateY(14px); opacity: 0; }
}

.loader-title {
    font-family: 'Montserrat Alternates', system-ui, sans-serif;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow:
        -2px -2px 0 #6e4717, 2px -2px 0 #6e4717,
        -2px 2px 0 #6e4717, 2px 2px 0 #6e4717,
        0 5px 6px rgba(0, 0, 0, 0.18);
}
.loader-bar {
    position: relative;
    width: 240px;
    height: 18px;
    border-radius: 12px;
    background: #fff2cf;
    border: 3px solid #6e4717;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.loader-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffd86b, #ffb43c);
    transition: width 0.35s ease;
}
/* Moving sheen so the bar feels alive even while a slow phase sits at one %. */
.loader-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: loader-sheen 1.3s ease-in-out infinite;
}
@keyframes loader-sheen { to { transform: translateX(100%); } }
.loader-pct {
    font-family: 'Montserrat Alternates', system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #6e4717;
    margin-top: -4px;
}
@media (prefers-reduced-motion: reduce) {
    .capy, .capy-ears, .capy-eyes, .capy-cookie, .capy-shadow, .crumb, .loader-bar::after {
        animation: none;
    }
}