/* ===== CSS Variables - Pixel Treasure Map Theme ===== */
:root {
    /* Colors */
    --brown-dark: #5c4033;
    --brown-light: #8b7355;

    /* Parchment backgrounds */
    --parchment: #f5ece3;
    --parchment-dark: #efe3d6;
    --parchment-accent: #e8dacb;

    /* Accent colors */
    --orange: #ff8c42;
    --orange-light: #ff9f58;
    --orange-dark: #e87a30;
    --blue: #1e5aa8;
    --blue-light: #2e7ad1;

    /* Status colors (for admin panels) */
    --green: #10B981;
    --green-light: #34D399;
    --red: #EF4444;
    --red-light: #F87171;
    --purple: #8B5CF6;
    --purple-light: #A78BFA;

    /* Sky colors */
    --sky-top: #5bc4f1;
    --sky-bottom: #c5effc;

    /* Nature colors */
    --grass-light: #6ab856;
    --grass: #5da04a;
    --grass-dark: #4a8c3f;
    --dirt: #8b5a2b;
    --dirt-dark: #5c3a1d;

    /* Pixel corners - asymmetric design (large top-left, small others) */
    --pixel-corners: polygon(
            /* Top-left - large stair (3 layers) */
            0 8px,
            3px 8px,
            3px 5px,
            5px 5px,
            5px 3px,
            8px 3px,
            8px 0,
            /* Top edge to top-right */
            calc(100% - 5px) 0,
            /* Top-right - small stair (2 layers) */
            calc(100% - 5px) 2px,
            calc(100% - 2px) 2px,
            calc(100% - 2px) 5px,
            100% 5px,
            /* Right edge to bottom-right */
            100% calc(100% - 5px),
            /* Bottom-right - small stair (2 layers) */
            calc(100% - 2px) calc(100% - 5px),
            calc(100% - 2px) calc(100% - 2px),
            calc(100% - 5px) calc(100% - 2px),
            calc(100% - 5px) 100%,
            /* Bottom edge to bottom-left */
            5px 100%,
            /* Bottom-left - small stair (2 layers) */
            5px calc(100% - 2px),
            2px calc(100% - 2px),
            2px calc(100% - 5px),
            0 calc(100% - 5px));

    /* RPG dialog box - asymmetric pixel stairs (large top-left, small others) */
    --pixel-corners-large: polygon(
            /* Top-left - large 4-layer stair (12px cut) */
            0 12px,
            3px 12px,
            3px 9px,
            6px 9px,
            6px 6px,
            9px 6px,
            9px 3px,
            12px 3px,
            12px 0,
            /* Top edge to top-right */
            calc(100% - 6px) 0,
            /* Top-right - small 2-layer stair (6px cut) */
            calc(100% - 6px) 3px,
            calc(100% - 3px) 3px,
            calc(100% - 3px) 6px,
            100% 6px,
            /* Right edge to bottom-right */
            100% calc(100% - 6px),
            /* Bottom-right - small 2-layer stair */
            calc(100% - 3px) calc(100% - 6px),
            calc(100% - 3px) calc(100% - 3px),
            calc(100% - 6px) calc(100% - 3px),
            calc(100% - 6px) 100%,
            /* Bottom edge to bottom-left */
            6px 100%,
            /* Bottom-left - medium 3-layer stair (9px cut) */
            6px calc(100% - 3px),
            3px calc(100% - 3px),
            3px calc(100% - 6px),
            0 calc(100% - 6px));

    /* User message - large top-right, small others (bubble pointing right) */
    --pixel-corners-user: polygon(
            /* Top-left - small 2-layer stair */
            0 6px,
            3px 6px,
            3px 3px,
            6px 3px,
            6px 0,
            /* Top edge to top-right */
            calc(100% - 12px) 0,
            /* Top-right - large 4-layer stair (main decoration corner) */
            calc(100% - 12px) 3px,
            calc(100% - 9px) 3px,
            calc(100% - 9px) 6px,
            calc(100% - 6px) 6px,
            calc(100% - 6px) 9px,
            calc(100% - 3px) 9px,
            calc(100% - 3px) 12px,
            100% 12px,
            /* Right edge to bottom-right */
            100% calc(100% - 6px),
            /* Bottom-right - small 2-layer stair */
            calc(100% - 3px) calc(100% - 6px),
            calc(100% - 3px) calc(100% - 3px),
            calc(100% - 6px) calc(100% - 3px),
            calc(100% - 6px) 100%,
            /* Bottom edge to bottom-left */
            6px 100%,
            /* Bottom-left - small 2-layer stair */
            6px calc(100% - 3px),
            3px calc(100% - 3px),
            3px calc(100% - 6px),
            0 calc(100% - 6px));
}