/* Grid container and panning viewport */
:root {
    /* Fine-tune how much the tile PNG is scaled inside the 500x500 tile box.
       Increase slightly to remove transparent padding around the isometric shape.
       This is a constant base scale (not a hover/click zoom). */
    --tile-image-scale: 1.084;
    /* Optional fine-tuning if some exports are not perfectly centered. */
    --tile-image-offset-x: 0px;
    --tile-image-offset-y: 0px;
    /* Target baseline (in tile box px) where the tile "stands" on the ground. */
    --tile-baseline-y: 498px;

    /* Hitbox footprint tuning (isometric ground plane).
       We intentionally only make the lower diamond clickable to avoid selecting overlapped tiles. */
    --tile-hitbox-height: 302px;
    --tile-hitbox-offset-y: 200px;

    /* Grid row spacing (vertical step between rows).
       This is the most direct knob for "Zeilenabstand".
       - Higher = more space between rows
       - Lower  = tighter overlap
       `--grid-row-spacing-extra-px` can be used for small pixel tweaks. */
    --grid-row-spacing-factor: 0.305; /* 0.28*/
    --grid-row-spacing-extra-px: 0px;

    /* Debug: per-row helper guides (magenta, 1px).
       These are drawn as two repeating horizontal lines per row to help align tile corners.
       Set `--debug-row-guides-opacity: 1` to enable. */
    --debug-row-guides-opacity: 0;
    /* Position of the two lines *within a row block* (in px, relative to the tile box). */
    --debug-row-guide-corners-y: 358px;
    --debug-row-guide-bottom-y: 48px;
}

.grid-viewport {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: none; /* Prevent default touch behaviors */
}

.grid-viewport.panning {
    cursor: grabbing;
}

.grid-container {
    position: absolute;
    /* Dimensions will be set by JavaScript based on grid size */
    will-change: transform; /* Optimize for panning */
    transform-origin: 0 0; /* Critical: keep zoom math stable (scale around top-left) */
}

/* Debug overlay: two helper lines repeated every row step.
   JS sets:
   - --debug-row-step-px: row-to-row vertical step in px
   - --debug-row-origin-y: y offset where row 0 starts (outer padding) */
.grid-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: var(--debug-row-guides-opacity);
    background-repeat: repeat;
    background-size: 100% var(--debug-row-step-px, 450px);
    background-position: 0 var(--debug-row-origin-y, 0px);
    background-image:
        linear-gradient(
            to bottom,
            transparent calc(var(--debug-row-guide-corners-y) - 0.5px),
            magenta calc(var(--debug-row-guide-corners-y) - 0.5px),
            magenta calc(var(--debug-row-guide-corners-y) + 0.5px),
            transparent calc(var(--debug-row-guide-corners-y) + 0.5px)
        ),
        linear-gradient(
            to bottom,
            transparent calc(var(--debug-row-guide-bottom-y) - 0.5px),
            magenta calc(var(--debug-row-guide-bottom-y) - 0.5px),
            magenta calc(var(--debug-row-guide-bottom-y) + 0.5px),
            transparent calc(var(--debug-row-guide-bottom-y) + 0.5px)
        );
}

.tile {
    position: absolute;
    width: 500px;
    height: 500px;
    cursor: pointer;
    transition: filter 0.2s ease;
    border-radius: 0;
    /* Allow drop-shadows to render outside the 500x500 box (isometric PNG with alpha). */
    overflow: visible;
    pointer-events: none; /* Only hitboxes are interactive */
}

/* Visual effects should follow the PNG alpha shape (isometric tile). */
.tile img {
    transition: transform 0.22s ease, filter 0.22s ease;
    width: 100%;
    height: 100%;
    /* `cover` crops the left/right corners because tiles are not square.
       `contain` shows the full PNG (including isometric corners) without cropping. */
    object-fit: contain;
    object-position: center;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform-origin: center;
    transform:
        translate(var(--tile-image-offset-x), var(--tile-image-offset-y))
        scale(var(--tile-image-scale));
}

.tile.hovered {
    z-index: 1000;
}

.tile.hovered img {
    /* Hover highlight following alpha edges (no rectangular outline). */
    filter:
        brightness(1.05)
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.18))
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

.tile.clicked {
    z-index: 2000;
}

.tile.clicked img {
    /* Stronger click highlight following alpha edges. */
    filter:
        brightness(1.08)
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.22))
        drop-shadow(0 18px 34px rgba(0, 0, 0, 0.6));
}

/* Pinned while a details UI (modal/bottom-sheet) is open. */
.tile.pinned {
    z-index: 2100;
}

.tile.pinned img {
    filter:
        brightness(1.08)
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.22))
        drop-shadow(0 18px 34px rgba(0, 0, 0, 0.6));
}

/* Variant switcher button */
.variant-switcher {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

.tile:hover .variant-switcher {
    opacity: 1;
}

.variant-switcher:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.variant-switcher:active {
    transform: scale(0.95);
}

.variant-indicator {
    display: block;
    line-height: 1;
}

/* Invisible hitbox overlay for each tile - always on top and always interactive */
.tile-hitbox {
    position: absolute;
    width: 500px;
    height: 500px;
    cursor: pointer;
    z-index: 10001;
    background: transparent;
    pointer-events: auto;
    transition: background 0.18s ease;
    /* Shape hitbox as a diamond/rhombus, but smaller than tile to prevent corner overlap */
    /* The padding (15px) creates a safety margin so hitboxes don't touch at corners */
    clip-path: polygon(
        calc(50% + 0px) calc(0% + 15px),
        calc(100% - 15px) calc(50% + 0px),
        calc(50% + 0px) calc(100% - 15px),
        calc(0% + 15px) calc(50% + 0px)
    );
    /* Keep hitbox aligned with any image offsets (but do NOT scale the hitbox). */
    transform-origin: center;
    transform: translate(var(--tile-image-offset-x), var(--tile-image-offset-y));
    /* Remove Android/Chrome tap highlight (often appears as a cyan flash).
       Comments in English per project convention. */
    -webkit-tap-highlight-color: transparent;
}

/* Touch devices (iOS): avoid expensive filters/blur and use the existing hitbox shape
   as a lightweight highlight. Comments in English per project convention. */
@media (hover: none) and (pointer: coarse) {
    .tile.hovered img,
    .tile.clicked img,
    .tile.pinned img {
        filter: none !important;
    }

    /* iOS-only click feedback: Android shows a cyan tap highlight otherwise.
       We scope the background highlight to iOS via a runtime class on <html>.
       Comments in English per project convention. */
    .is-ios .tile.clicked + .tile-hitbox,
    .is-ios .tile.pinned + .tile-hitbox {
        background: rgba(255, 255, 255, 0.06);
    }

    /* Blur is expensive on iOS; keep the UI readable with a slightly more opaque bg. */
    .variant-switcher {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.88);
    }

    /* iOS Safari can spend extra time on non-default image-rendering modes. */
    .tile img {
        image-rendering: auto;
    }
}

/* Hitbox outlines removed for production */
/* Uncomment for debugging:
.tile-hitbox {
    outline: 2px solid rgba(255, 0, 0, 0.5);
    outline-offset: -2px;
}
*/

/* Ensure viewport can receive events even when hitboxes are present */
.grid-viewport {
    pointer-events: auto;
}

/* Make sure container doesn't block events */
.grid-container {
    pointer-events: none;
}

/* Only hitboxes should capture pointer events */
.tile-hitbox {
    pointer-events: auto;
}

/* Debug: Temporarily disable hitboxes to test panning */
/* .tile-hitbox {
    pointer-events: none !important;
} */