:root {
    --macaron-bg: #FFF5F5;          
    --theme-main: #FD7979;          
    --theme-light: #FFCDC9;         
    --theme-med: #FDACAC;           
    --pixel-border: 4px solid #000; 
}

* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
    font-family: 'DotGothic16', monospace, sans-serif;
}

body {
    width: 100vw; 
    height: 100vh;
    overflow: hidden;
    background-color: var(--macaron-bg); 
    background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"><rect x="2" y="1" width="4" height="1" fill="%23000"/><rect x="1" y="2" width="1" height="2" fill="%23000"/><rect x="6" y="2" width="1" height="2" fill="%23000"/><rect x="2" y="2" width="4" height="2" fill="%23FD7979"/><rect x="1" y="4" width="6" height="1" fill="%23000"/><rect x="1" y="5" width="1" height="2" fill="%23000"/><rect x="6" y="5" width="1" height="2" fill="%23000"/><rect x="2" y="5" width="4" height="2" fill="%23ffffff"/><rect x="2" y="7" width="4" height="1" fill="%23000"/></svg>');
    background-size: 100px 100px; 
    animation: bgScroll 8s linear infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

@keyframes bgScroll {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

#canvas-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}

canvas {
    image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges; image-rendering: pixelated; outline: none;
}

#loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 28px; font-weight: 900; color: var(--theme-main); 
    letter-spacing: 2px; text-transform: uppercase;
    z-index: 20; background: rgba(255,255,255,0.9);
    padding: 15px 30px; border: var(--pixel-border);
}

#result-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center;
    z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
#result-overlay.show { opacity: 1; pointer-events: auto; }

.result-box {
    background: var(--macaron-bg); border: var(--pixel-border); padding: 40px 60px; text-align: center;
    box-shadow: 12px 12px 0 rgba(0,0,0,1); transform: scale(0.5); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#result-overlay.show .result-box { transform: scale(1); }

.result-number {
    font-size: 120px; color: var(--theme-main); text-shadow: 8px 8px 0 #000;
    margin: 0 0 30px 0; line-height: 1; font-weight: bold;
}

.pixel-btn {
    background: var(--theme-main); color: #FFF; border: var(--pixel-border);
    padding: 15px 40px; font-size: 24px; font-weight: bold; cursor: pointer;
    box-shadow: 6px 6px 0 #000; transition: all 0.1s;
}
.pixel-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 #000; }