/* ===================================================
   resar.one - Pixel Art Honeycomb World
   Colors: #F5E6CA #3B2F2F #2A1F1A #B5651D #8A9A5B #D4A843 #5B7065 #CC7755
   Fonts: Silkscreen, Nunito, Press Start 2P
   =================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #2A1F1A;
    color: #3B2F2F;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: auto;
}

/* ---- Parallax Layers ---- */
.parallax-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

#bg-layer {
    z-index: 0;
}

#float-layer {
    z-index: 1;
}

#content-layer {
    position: relative;
    z-index: 2;
}

/* ---- Bokeh Circles ---- */
.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: bokehFadeIn 2s forwards;
}

@keyframes bokehFadeIn {
    to { opacity: var(--bokeh-opacity, 0.2); }
}

/* ---- Floating Elements ---- */
.float-leaf {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #8A9A5B;
    animation: floatLeaf var(--leaf-duration, 16s) linear infinite;
    opacity: 0.6;
}

.float-leaf::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 2px;
    width: 4px;
    height: 4px;
    background: #5B7065;
}

@keyframes floatLeaf {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translate(120px, 100vh) rotate(360deg);
        opacity: 0;
    }
}

.float-dust {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #D4A843;
    animation: floatDust var(--dust-duration, 8s) ease-in-out infinite;
    opacity: 0.5;
}

@keyframes floatDust {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-20px); opacity: 0.3; }
}

.float-hex-outline {
    position: absolute;
    width: 24px;
    height: 24px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border: 1px solid #5B7065;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(91, 112, 101, 0.2);
    opacity: 0.2;
    animation: floatHexOutline var(--hex-duration, 20s) linear infinite;
}

@keyframes floatHexOutline {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-100vh) rotate(180deg);
        opacity: 0;
    }
}

/* ---- Compass ---- */
#compass {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
    display: grid;
    grid-template-columns: repeat(16, 3px);
    grid-template-rows: repeat(16, 3px);
    cursor: pointer;
    z-index: 100;
    opacity: 0.8;
    transition: opacity 0.3s;
}

#compass:hover {
    opacity: 1;
}

.compass-pixel {
    pointer-events: none;
}

/* ---- Minimap Overlay ---- */
#minimap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 31, 26, 0.92);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s, visibility 0.4s;
    opacity: 1;
    visibility: visible;
}

#minimap.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.minimap-inner {
    text-align: center;
}

.minimap-title {
    font-family: 'Silkscreen', monospace;
    font-size: 32px;
    color: #F5E6CA;
    margin-bottom: 40px;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.minimap-biome {
    cursor: pointer;
    margin-bottom: 24px;
    padding: 12px 24px;
    transition: transform 0.2s;
}

.minimap-biome:hover {
    transform: scale(1.05);
}

.minimap-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #F5E6CA;
    display: block;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.minimap-bar {
    width: 200px;
    height: 6px;
    margin: 0 auto;
    border-radius: 0;
}

/* ---- Biomes ---- */
.biome {
    position: relative;
    overflow: hidden;
}

.biome-surface {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #2A1F1A 0%, #3B2F2F 100%);
}

.biome-core {
    min-height: 200vh;
    background: linear-gradient(180deg, #3B2F2F 0%, #2A1F1A 50%, #3B2F2F 100%);
    padding: 80px 0;
}

.biome-horizon {
    min-height: 100vh;
    background: linear-gradient(180deg, #3B2F2F 0%, #2A1F1A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

.biome-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---- Hex Grid ---- */
.hex-grid {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.hex-grid-sparse {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    max-width: 1200px;
    margin: 0 auto;
}

.hex-grid-dense {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

.hex-grid-scatter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.hex-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: -30px;
}

.hex-row-offset {
    padding-left: calc(clamp(180px, 22vw, 280px) / 2);
}

/* ---- Hex Cell ---- */
.hex-cell {
    width: clamp(180px, 22vw, 280px);
    height: clamp(180px, 22vw, 280px);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: scale(0.3);
}

.hex-cell.hex-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hex-cell.hex-large {
    width: clamp(220px, 28vw, 320px);
    height: clamp(220px, 28vw, 320px);
}

.hex-cell.hex-small {
    width: clamp(120px, 16vw, 180px);
    height: clamp(120px, 16vw, 180px);
}

.hex-cell.hex-final {
    width: clamp(200px, 25vw, 300px);
    height: clamp(200px, 25vw, 300px);
}

.hex-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F5E6CA;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    border: none;
    transition: background 0.3s;
    overflow: hidden;
}

/* Stitched border effect using box-shadow on a pseudo-element */
.hex-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #B5651D;
    z-index: -1;
}

.hex-inner-accent {
    background: #CC7755;
}

.hex-inner-sage {
    background: #8A9A5B;
}

.hex-inner-accent .hex-label,
.hex-inner-sage .hex-label {
    color: #F5E6CA;
}

/* ---- Hex Cell Hover ---- */
.hex-cell:hover .hex-inner {
    background: #f0dbb5;
}

.hex-cell:hover .hex-inner-accent {
    background: #d4896a;
}

.hex-cell:hover .hex-inner-sage {
    background: #7a8a4b;
}

.hex-cell:hover {
    transform: scale(0.97);
}

.hex-cell.hex-visible:hover {
    transform: scale(0.97);
}

/* Marching ants on hover */
.hex-cell:hover::before {
    animation: marchingAnts 1s linear infinite;
}

@keyframes marchingAnts {
    to { background-position: 8px 0; }
}

/* ---- Sparkle effect ---- */
.hex-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #D4A843;
    pointer-events: none;
    animation: sparkle 0.3s ease-out forwards;
    z-index: 10;
}

@keyframes sparkle {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.5); }
}

/* ---- Typography ---- */
.site-title {
    font-family: 'Silkscreen', monospace;
    font-size: clamp(2.5rem, 7vw, 5rem);
    color: #3B2F2F;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}

.biome-title {
    font-family: 'Silkscreen', monospace;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: #3B2F2F;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}

.biome-title-end {
    font-size: clamp(1.2rem, 3vw, 2rem);
    margin-bottom: 8px;
}

.hex-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
    color: #3B2F2F;
    line-height: 1.65;
}

.hex-text-small {
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
}

.hex-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #5B7065;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Floating Hex in Biome 3 ---- */
.hex-float {
    animation: hexFloat 6s ease-in-out infinite;
}

@keyframes hexFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1); }
}

.hex-float.hex-visible {
    animation: hexFloatVisible 6s ease-in-out infinite;
}

@keyframes hexFloatVisible {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-15px) scale(1); opacity: 1; }
}

.hex-final-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

/* ---- Mountains ---- */
.mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1;
    background:
        linear-gradient(135deg, transparent 33.3%, #3B2F2F 33.3%, #3B2F2F 33.5%, transparent 33.5%),
        linear-gradient(225deg, transparent 33.3%, #3B2F2F 33.3%, #3B2F2F 33.5%, transparent 33.5%);
    background-size: 60px 80px;
    background-position: bottom;
    background-repeat: repeat-x;
    opacity: 0.5;
}

/* ---- Pixel Art: House ---- */
.pixel-house {
    width: 64px;
    height: 64px;
    position: relative;
}

.pixel-house::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    background: transparent;
    box-shadow:
        /* Roof */
        12px 0px 0 0 #B5651D,
        16px 0px 0 0 #B5651D,
        20px 0px 0 0 #B5651D,
        24px 0px 0 0 #B5651D,
        28px 0px 0 0 #B5651D,
        32px 0px 0 0 #B5651D,
        36px 0px 0 0 #B5651D,
        8px 4px 0 0 #B5651D,
        12px 4px 0 0 #CC7755,
        16px 4px 0 0 #CC7755,
        20px 4px 0 0 #CC7755,
        24px 4px 0 0 #CC7755,
        28px 4px 0 0 #CC7755,
        32px 4px 0 0 #CC7755,
        36px 4px 0 0 #CC7755,
        40px 4px 0 0 #B5651D,
        4px 8px 0 0 #B5651D,
        8px 8px 0 0 #CC7755,
        12px 8px 0 0 #CC7755,
        16px 8px 0 0 #CC7755,
        20px 8px 0 0 #CC7755,
        24px 8px 0 0 #CC7755,
        28px 8px 0 0 #CC7755,
        32px 8px 0 0 #CC7755,
        36px 8px 0 0 #CC7755,
        40px 8px 0 0 #CC7755,
        44px 8px 0 0 #B5651D,
        /* Walls */
        8px 12px 0 0 #F5E6CA,
        12px 12px 0 0 #F5E6CA,
        16px 12px 0 0 #F5E6CA,
        20px 12px 0 0 #F5E6CA,
        24px 12px 0 0 #F5E6CA,
        28px 12px 0 0 #F5E6CA,
        32px 12px 0 0 #F5E6CA,
        36px 12px 0 0 #F5E6CA,
        40px 12px 0 0 #F5E6CA,
        8px 16px 0 0 #F5E6CA,
        12px 16px 0 0 #F5E6CA,
        16px 16px 0 0 #5B7065,
        20px 16px 0 0 #5B7065,
        24px 16px 0 0 #F5E6CA,
        28px 16px 0 0 #F5E6CA,
        32px 16px 0 0 #5B7065,
        36px 16px 0 0 #5B7065,
        40px 16px 0 0 #F5E6CA,
        8px 20px 0 0 #F5E6CA,
        12px 20px 0 0 #F5E6CA,
        16px 20px 0 0 #5B7065,
        20px 20px 0 0 #5B7065,
        24px 20px 0 0 #F5E6CA,
        28px 20px 0 0 #F5E6CA,
        32px 20px 0 0 #5B7065,
        36px 20px 0 0 #5B7065,
        40px 20px 0 0 #F5E6CA,
        8px 24px 0 0 #F5E6CA,
        12px 24px 0 0 #F5E6CA,
        16px 24px 0 0 #F5E6CA,
        20px 24px 0 0 #3B2F2F,
        24px 24px 0 0 #3B2F2F,
        28px 24px 0 0 #F5E6CA,
        32px 24px 0 0 #F5E6CA,
        36px 24px 0 0 #F5E6CA,
        40px 24px 0 0 #F5E6CA,
        8px 28px 0 0 #F5E6CA,
        12px 28px 0 0 #F5E6CA,
        16px 28px 0 0 #F5E6CA,
        20px 28px 0 0 #3B2F2F,
        24px 28px 0 0 #3B2F2F,
        28px 28px 0 0 #F5E6CA,
        32px 28px 0 0 #F5E6CA,
        36px 28px 0 0 #F5E6CA,
        40px 28px 0 0 #F5E6CA,
        /* Chimney smoke */
        40px -4px 0 0 #5B7065,
        40px -8px 0 0 #5B7065,
        44px -12px 0 0 #5B7065,
        40px -16px 0 0 #5B7065;
}

/* ---- Pixel Art: Plant ---- */
.pixel-plant {
    width: 48px;
    height: 56px;
    position: relative;
}

.pixel-plant::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 56px;
    background: transparent;
    box-shadow:
        /* Pot */
        12px 40px 0 0 #B5651D,
        16px 40px 0 0 #B5651D,
        20px 40px 0 0 #B5651D,
        24px 40px 0 0 #B5651D,
        28px 40px 0 0 #B5651D,
        32px 40px 0 0 #B5651D,
        16px 44px 0 0 #B5651D,
        20px 44px 0 0 #CC7755,
        24px 44px 0 0 #CC7755,
        28px 44px 0 0 #B5651D,
        16px 48px 0 0 #B5651D,
        20px 48px 0 0 #B5651D,
        24px 48px 0 0 #B5651D,
        28px 48px 0 0 #B5651D,
        /* Stem */
        20px 32px 0 0 #5B7065,
        20px 36px 0 0 #5B7065,
        24px 28px 0 0 #5B7065,
        24px 32px 0 0 #5B7065,
        /* Leaf 1 (light sage) */
        12px 20px 0 0 #8A9A5B,
        16px 20px 0 0 #8A9A5B,
        16px 24px 0 0 #8A9A5B,
        20px 24px 0 0 #8A9A5B,
        /* Leaf 2 (medium sage) */
        28px 16px 0 0 #5B7065,
        32px 16px 0 0 #5B7065,
        28px 20px 0 0 #5B7065,
        24px 20px 0 0 #5B7065,
        /* Leaf 3 (dark sage) */
        16px 8px 0 0 #3B5045,
        20px 8px 0 0 #3B5045,
        20px 12px 0 0 #3B5045,
        24px 12px 0 0 #5B7065;
}

/* ---- Pixel Art: Sun ---- */
.pixel-sun {
    width: 64px;
    height: 64px;
    position: relative;
    animation: rotateSun 60s linear infinite;
}

@keyframes rotateSun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.pixel-sun::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    background: transparent;
    box-shadow:
        /* Center */
        24px 24px 0 0 #D4A843,
        28px 24px 0 0 #D4A843,
        32px 24px 0 0 #D4A843,
        24px 28px 0 0 #D4A843,
        28px 28px 0 0 #D4A843,
        32px 28px 0 0 #D4A843,
        24px 32px 0 0 #D4A843,
        28px 32px 0 0 #D4A843,
        32px 32px 0 0 #D4A843,
        /* Rays */
        28px 12px 0 0 #D4A843,
        28px 8px 0 0 #D4A843,
        28px 44px 0 0 #D4A843,
        28px 48px 0 0 #D4A843,
        12px 28px 0 0 #D4A843,
        8px 28px 0 0 #D4A843,
        44px 28px 0 0 #D4A843,
        48px 28px 0 0 #D4A843,
        /* Diagonal rays */
        16px 16px 0 0 #D4A843,
        12px 12px 0 0 #D4A843,
        40px 16px 0 0 #D4A843,
        44px 12px 0 0 #D4A843,
        16px 40px 0 0 #D4A843,
        12px 44px 0 0 #D4A843,
        40px 40px 0 0 #D4A843,
        44px 44px 0 0 #D4A843;
}

/* ---- Pixel Art: Bird ---- */
.pixel-bird {
    width: 48px;
    height: 40px;
    position: relative;
    animation: birdIdle 1.6s step-end infinite;
}

@keyframes birdIdle {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 1; }
}

.pixel-bird::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 40px;
    background: transparent;
    animation: birdFrame 1.6s step-end infinite;
    box-shadow:
        /* Body */
        16px 16px 0 0 #B5651D,
        20px 16px 0 0 #B5651D,
        24px 16px 0 0 #B5651D,
        12px 20px 0 0 #CC7755,
        16px 20px 0 0 #CC7755,
        20px 20px 0 0 #CC7755,
        24px 20px 0 0 #CC7755,
        28px 20px 0 0 #B5651D,
        16px 24px 0 0 #CC7755,
        20px 24px 0 0 #CC7755,
        24px 24px 0 0 #CC7755,
        /* Head */
        28px 12px 0 0 #B5651D,
        32px 12px 0 0 #B5651D,
        28px 16px 0 0 #B5651D,
        32px 16px 0 0 #3B2F2F,
        36px 16px 0 0 #D4A843,
        /* Tail */
        4px 16px 0 0 #B5651D,
        8px 16px 0 0 #CC7755,
        4px 12px 0 0 #B5651D,
        /* Legs */
        16px 28px 0 0 #3B2F2F,
        24px 28px 0 0 #3B2F2F,
        16px 32px 0 0 #3B2F2F,
        24px 32px 0 0 #3B2F2F;
}

@keyframes birdFrame {
    0%, 49% {
        box-shadow:
            16px 16px 0 0 #B5651D,
            20px 16px 0 0 #B5651D,
            24px 16px 0 0 #B5651D,
            12px 20px 0 0 #CC7755,
            16px 20px 0 0 #CC7755,
            20px 20px 0 0 #CC7755,
            24px 20px 0 0 #CC7755,
            28px 20px 0 0 #B5651D,
            16px 24px 0 0 #CC7755,
            20px 24px 0 0 #CC7755,
            24px 24px 0 0 #CC7755,
            28px 12px 0 0 #B5651D,
            32px 12px 0 0 #B5651D,
            28px 16px 0 0 #B5651D,
            32px 16px 0 0 #3B2F2F,
            36px 16px 0 0 #D4A843,
            4px 16px 0 0 #B5651D,
            8px 16px 0 0 #CC7755,
            4px 12px 0 0 #B5651D,
            16px 28px 0 0 #3B2F2F,
            24px 28px 0 0 #3B2F2F,
            16px 32px 0 0 #3B2F2F,
            24px 32px 0 0 #3B2F2F;
    }
    50%, 100% {
        box-shadow:
            16px 16px 0 0 #B5651D,
            20px 16px 0 0 #B5651D,
            24px 16px 0 0 #B5651D,
            12px 20px 0 0 #CC7755,
            16px 20px 0 0 #CC7755,
            20px 20px 0 0 #CC7755,
            24px 20px 0 0 #CC7755,
            28px 20px 0 0 #B5651D,
            16px 24px 0 0 #CC7755,
            20px 24px 0 0 #CC7755,
            24px 24px 0 0 #CC7755,
            28px 12px 0 0 #B5651D,
            32px 12px 0 0 #B5651D,
            28px 16px 0 0 #B5651D,
            32px 16px 0 0 #3B2F2F,
            36px 16px 0 0 #D4A843,
            4px 16px 0 0 #B5651D,
            8px 16px 0 0 #CC7755,
            8px 12px 0 0 #B5651D,
            16px 28px 0 0 #3B2F2F,
            20px 28px 0 0 #3B2F2F,
            16px 32px 0 0 #3B2F2F,
            20px 32px 0 0 #3B2F2F;
    }
}

/* Smaller pixel art variant */
.pixel-art-small {
    transform: scale(0.6);
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .hex-grid-sparse,
    .hex-grid-dense,
    .hex-grid-scatter {
        flex-direction: column;
        align-items: center;
    }

    .hex-row {
        flex-direction: column;
        align-items: center;
        margin-bottom: 12px;
    }

    .hex-row-offset {
        padding-left: 0;
    }

    .hex-cell {
        width: clamp(140px, 45vw, 220px);
        height: clamp(140px, 45vw, 220px);
        margin-bottom: 12px;
    }

    .hex-cell.hex-large {
        width: clamp(160px, 55vw, 260px);
        height: clamp(160px, 55vw, 260px);
    }

    .hex-cell.hex-small {
        width: clamp(120px, 40vw, 180px);
        height: clamp(120px, 40vw, 180px);
    }

    .hex-inner {
        padding: 20px;
    }

    .site-title {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }

    #compass {
        top: 10px;
        left: 10px;
        width: 36px;
        height: 36px;
        grid-template-columns: repeat(16, 2.25px);
        grid-template-rows: repeat(16, 2.25px);
    }

    .mountains {
        height: 50px;
        background-size: 40px 50px;
    }
}