:root {
    --page-bg: #FFF8E7;
}

/* Nunito 700 is bundled (subset woff2, Google Fonts v32) instead of fetched
   from the CDN at runtime: on native the runtime fetch was a network request
   on every cold start, so on flaky connections the title rendered in the
   system fallback and visibly swapped later — and Phaser canvas texts baked
   before the swap stayed in the fallback for good. main.ts additionally
   awaits document.fonts before booting Phaser. */
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/nunito-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/nunito-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--page-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>\
<g fill='%23FF8A3D' opacity='0.18'>\
<path d='M30 40l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/>\
<path d='M180 75l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/>\
<path d='M95 165l2.5 7.5 7.5 2.5-7.5 2.5-2.5 7.5-2.5-7.5-7.5-2.5 7.5-2.5z'/>\
<path d='M210 200l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/>\
<path d='M55 215l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5z'/>\
</g>\
<g stroke='%234DA6FF' stroke-width='1.4' stroke-linecap='round' opacity='0.18' fill='none'>\
<g transform='translate(140,30)'><line x1='-7' y1='0' x2='7' y2='0'/><line x1='0' y1='-7' x2='0' y2='7'/><line x1='-5' y1='-5' x2='5' y2='5'/><line x1='-5' y1='5' x2='5' y2='-5'/></g>\
<g transform='translate(60,110)'><line x1='-6' y1='0' x2='6' y2='0'/><line x1='0' y1='-6' x2='0' y2='6'/><line x1='-4' y1='-4' x2='4' y2='4'/><line x1='-4' y1='4' x2='4' y2='-4'/></g>\
<g transform='translate(200,140)'><line x1='-5' y1='0' x2='5' y2='0'/><line x1='0' y1='-5' x2='0' y2='5'/><line x1='-3.5' y1='-3.5' x2='3.5' y2='3.5'/><line x1='-3.5' y1='3.5' x2='3.5' y2='-3.5'/></g>\
<g transform='translate(25,165)'><line x1='-7' y1='0' x2='7' y2='0'/><line x1='0' y1='-7' x2='0' y2='7'/><line x1='-5' y1='-5' x2='5' y2='5'/><line x1='-5' y1='5' x2='5' y2='-5'/></g>\
<g transform='translate(155,215)'><line x1='-6' y1='0' x2='6' y2='0'/><line x1='0' y1='-6' x2='0' y2='6'/><line x1='-4' y1='-4' x2='4' y2='4'/><line x1='-4' y1='4' x2='4' y2='-4'/></g>\
</g>\
</svg>");
    background-repeat: repeat;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

#game-container {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
}

/* The cover sits on screen for the whole pre-Phaser boot — including the UMP
   consent fetch, which can take seconds on a bad connection — so it has to
   read as "loading", not as a frozen screen: the wordmark breathes and three
   dots cycle below it, all pure CSS (no JS needed to keep it alive). */
#loading-cover {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background-color: var(--page-bg);
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

#loading-cover.hidden {
    opacity: 0;
    pointer-events: none;
}

#loading-cover span {
    font-family: "Nunito", system-ui, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.3em;
    color: #FF8A3D;
    animation: cover-breathe 1.8s ease-in-out infinite;
}

@keyframes cover-breathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.75; }
}

#loading-cover .dots {
    display: flex;
    gap: 10px;
}

#loading-cover .dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #4DA6FF;
    opacity: 0.25;
    animation: cover-dot 1.2s ease-in-out infinite;
}

#loading-cover .dots i:nth-child(2) { animation-delay: 0.2s; }
#loading-cover .dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes cover-dot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30% { opacity: 0.9; transform: translateY(-5px); }
}