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

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;
}

#loading-cover {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
    opacity: 0.55;
}