/* ═══════════════════════════════════════════════════════
   TILE STYLES — Image-based tiles with cozy village feel
   ═══════════════════════════════════════════════════════ */

/* ─── Base Tile ─── */
.tile {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f5ead0, #e8d9b8, #f0e2c4);
    border: 2px solid #c9b896;
    box-shadow:
        0 3px 0 #b8a47e,
        0 5px 8px rgba(120, 90, 40, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(160, 130, 80, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: grab;
    overflow: hidden;
}

.tile:hover {
    filter: brightness(1.08);
    border-color: #d4c4a0;
    box-shadow:
        0 3px 0 #b8a47e,
        0 5px 10px rgba(120, 90, 40, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.tile:active {
    cursor: grabbing;
    filter: brightness(0.95);
    box-shadow:
        0 1px 0 #b8a47e,
        0 2px 4px rgba(120, 90, 40, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ─── Tile Image ─── */
.tile-img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    filter: drop-shadow(0 1px 2px rgba(80, 60, 20, 0.2));
    z-index: 1;
    image-rendering: -webkit-optimize-contrast;
}

/* ─── Sparkle Effect for Higher Tiers ─── */
.tile-sparkle {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: 14px;
    overflow: hidden;
}

.tile-sparkle::before,
.tile-sparkle::after {
    content: '✦';
    position: absolute;
    font-size: 10px;
    color: rgba(255, 220, 100, 0.9);
    animation: sparkleFloat 2s ease-in-out infinite;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.tile-sparkle::before {
    top: 8%;
    right: 12%;
    animation-delay: 0s;
}

.tile-sparkle::after {
    bottom: 15%;
    left: 10%;
    animation-delay: 1s;
    font-size: 8px;
}

@keyframes sparkleFloat {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    30% {
        opacity: 1;
        transform: translateY(-4px) scale(1);
    }

    70% {
        opacity: 0.8;
        transform: translateY(-8px) scale(0.8);
    }
}

/* ─── Merge Pop-In ─── */
.pop-in {
    animation: mergePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mergePopIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    60% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* ─── Upgrade Flash ─── */
.upgrade-flash {
    animation: upgradeFlashTile 0.6s ease-out;
}

@keyframes upgradeFlashTile {
    0% {
        filter: brightness(1);
    }

    30% {
        filter: brightness(2.5) saturate(1.5);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 3px 0 #b8a47e;
    }

    100% {
        filter: brightness(1);
    }
}

/* ═══════════════════════════════════════════════════════
   TIER-SPECIFIC STYLING — Subtle tint & glow per tier
   ═══════════════════════════════════════════════════════ */

/* Tier 1 - Campfire (warm orange) */
.tile-t1 {
    background: linear-gradient(145deg, #f7edd5, #f0e0c0);
    border-color: #d4bf96;
}

/* Tier 2 - Spark (golden) */
.tile-t2 {
    background: linear-gradient(145deg, #f9f0d8, #f2e4c4);
    border-color: #d8c59e;
}

/* Tier 3 - Stone (cool grey) */
.tile-t3 {
    background: linear-gradient(145deg, #eee8da, #e2d8c6);
    border-color: #c8baa0;
}

/* Tier 4-5 - Village/Houses (warm wood) */
.tile-t4,
.tile-t5 {
    background: linear-gradient(145deg, #f5ead0, #eaded2);
    border-color: #ceb892;
}

/* Tier 6-7 - Towns (slightly richer) */
.tile-t6,
.tile-t7 {
    background: linear-gradient(145deg, #f8efd8, #f0e4c8);
    border-color: #d2be96;
    box-shadow:
        0 3px 0 #b8a47e,
        0 5px 10px rgba(120, 90, 40, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 12px rgba(255, 200, 80, 0.1);
}

/* Tier 8-10 - Cities (premium feel) */
.tile-t8,
.tile-t9,
.tile-t10 {
    background: linear-gradient(145deg, #f8edd0, #eee0be);
    border-color: #c8ad84;
    box-shadow:
        0 3px 0 #a89468,
        0 5px 12px rgba(120, 90, 40, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 16px rgba(255, 200, 80, 0.15);
}

/* Tier 11-14 - Advanced (golden glow) */
.tile-t11,
.tile-t12,
.tile-t13,
.tile-t14 {
    background: linear-gradient(145deg, #faf2da, #f4e8c8);
    border-color: #c8a870;
    box-shadow:
        0 3px 0 #a08850,
        0 5px 14px rgba(180, 140, 40, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 200, 60, 0.2);
}

/* Tier 15-17 - Cosmic (ethereal glow) */
.tile-t15,
.tile-t16,
.tile-t17 {
    background: linear-gradient(145deg, #fdf6e0, #f6ecd2);
    border-color: #c4a468;
    box-shadow:
        0 3px 0 #9c8450,
        0 5px 16px rgba(200, 160, 40, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 0 24px rgba(255, 215, 0, 0.25);
}

/* Tier 18-19 - Transcendent (bright glow) */
.tile-t18,
.tile-t19 {
    background: linear-gradient(145deg, #fff8e4, #f8eece);
    border-color: #c0a060;
    box-shadow:
        0 3px 0 #988048,
        0 5px 18px rgba(220, 180, 40, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 30px rgba(255, 215, 0, 0.3);
}

/* Tier 20 - Omniverse (legendary) */
.tile-t20 {
    background: linear-gradient(145deg, #fffae8, #fcf2d8);
    border-color: #d4aa44;
    box-shadow:
        0 3px 0 #b08830,
        0 6px 20px rgba(255, 200, 40, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 35px rgba(255, 215, 0, 0.4);
    animation: legendaryPulse 2.5s ease-in-out infinite;
}

@keyframes legendaryPulse {

    0%,
    100% {
        box-shadow:
            0 3px 0 #b08830,
            0 6px 20px rgba(255, 200, 40, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            0 0 35px rgba(255, 215, 0, 0.35);
    }

    50% {
        box-shadow:
            0 3px 0 #b08830,
            0 8px 25px rgba(255, 200, 40, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            0 0 50px rgba(255, 215, 0, 0.55);
    }
}

/* ─── Tile Tooltip ─── */
.tile-tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(60, 40, 20, 0.92);
    color: #f5ead0;
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 50;
    border: 1px solid rgba(200, 170, 100, 0.3);
    font-weight: 500;
    font-family: var(--font-body);
}

.grid-cell:hover .tile-tooltip {
    opacity: 1;
}