/* Kirby NES Color Palette */
:root {
    --kirby-sky: #8ed2ff;
    --kirby-pink: #f6a5c0;
    --kirby-pink-deep: #d84a8b;
    --kirby-peach: #ffd6bd;
    --kirby-cream: #fff1d8;
    --kirby-yellow: #f8e36f;
    --kirby-blue: #4b8cff;
    --kirby-mint: #93e3c1;
    --kirby-ink: #1b1020;
    --kirby-ink-soft: #2a1a31;
    --kirby-white: #ffffff;
    --kirby-gray: #b9a7b2;
    --kirby-danger: #ff5f7a;
    --px: 4px;
}

/* Pixel-perfect rendering */
* {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Kirby-style backdrop */
body {
    background-color: var(--kirby-sky);
}

/* Pixel art border effect */
.pixel-border {
    position: relative;
}

.pixel-border::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--px));
    left: calc(-1 * var(--px));
    right: calc(-1 * var(--px));
    bottom: calc(-1 * var(--px));
    background: var(--kirby-pink);
    z-index: -1;
}

.pixel-border::after {
    content: '';
    position: absolute;
    top: calc(-2 * var(--px));
    left: calc(-2 * var(--px));
    right: calc(-2 * var(--px));
    bottom: calc(-2 * var(--px));
    background: var(--kirby-ink);
    z-index: -2;
}

/* NES-style text shadow for readability */
h1, h2, h3, h4, h5, h6 {
    text-shadow:
        2px 0 0 var(--kirby-ink),
        -2px 0 0 var(--kirby-ink),
        0 2px 0 var(--kirby-ink),
        0 -2px 0 var(--kirby-ink);
}

/* Retro button press effect */
.nes-btn,
.nes-btn-small {
    transition: transform 0.08s steps(2);
    position: relative;
}

.nes-btn::after,
.nes-btn-small::after {
    content: '';
    position: absolute;
    top: var(--px);
    left: var(--px);
    right: calc(-1 * var(--px));
    bottom: calc(-1 * var(--px));
    background: var(--kirby-ink);
    z-index: -1;
}

.nes-btn:hover::after,
.nes-btn-small:hover::after {
    background: var(--kirby-blue);
}

/* Canvas styling */
#outside-canvas,
#inside-canvas {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Interaction cursor */
canvas {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect width='16' height='16' fill='none'/><path d='M8 1 L10 6 L15 6 L11 9 L12 14 L8 11 L4 14 L5 9 L1 6 L6 6 Z' fill='%23f8e36f' stroke='%231b1020' stroke-width='1'/></svg>") 8 8, crosshair;
}

/* Retro loading animation */
@keyframes pixelPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.08);
        filter: brightness(1.2);
    }
}

.loading {
    animation: pixelPulse 1s steps(3) infinite;
}

/* 8-bit style scrollbar */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: var(--kirby-ink);
    border: 2px solid var(--kirby-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--kirby-pink);
    border: 2px solid var(--kirby-cream);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kirby-yellow);
}

/* Screen transition effect */
.screen {
    animation: pixelIn 0.35s steps(5);
}

@keyframes pixelIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pixel art hover effect */
.pixel-hover:hover {
    filter: brightness(1.1);
    transform: translate(-2px, -2px);
}