.tile {
    width: 64px; /* Tile width, matching the JavaScript tile size */
    height: 64px; /* Tile height, matching the JavaScript tile size */
    position: relative; /* Use absolute positioning within the game-box */
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: transform 0.3s ease;
    image-rendering: pixelated; /* Keep that pixel-art crispness */

}

.tile {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard */
  cursor: pointer;
  z-index: 10;
}

/* Tile images */
.rock-tile, .long-grass-tile, .fire-gaunlet-tile, .crystal-tile, .broken-crystal-tile,
.tree-tile, .grass-tile, .water-tile, .ruined-column-tile, .rock-path-tile, .rucksack-tile, .small-silver-tile, .medium-silver-tile, .skeleton-remains-tile,
.skull-stick-tile, .rune-tile, .flag-banner-tile, .thin-flag-banner-tile, .ruined-flag-banner-tile, .campfire-tile, 
.tier-1-chest-tile, .tier-2-chest-tile, .tier-3-chest-tile, .tier-4-chest-tile,
.tier-1-open-chest-tile, .tier-2-open-chest-tile, .tier-3-open-chest-tile, .tier-4-open-chest-tile,
.tier-1-opening-chest-tile, .tier-2-opening-chest-tile, .tier-3-opening-chest-tile, .tier-4-opening-chest-tile,
.broken-rock-path-tile, .well-tile, .poisoned-well-tile, .flag-banner2-tile, .animal-skull-tile, .stone1-tile, .stone2-tile, .shrine-tile, .shelter-tile, 
.chasm-tile, .chasm-top-tile, .chasm-bottom-tile, .chasm-path-top-tile, .chasm-path-bottom-tile, .chasm-path-tile, .shrine-tile,
.kraktar-ruins-1-tile, .kraktar-ruins-2-tile, .kraktar-ruins-3-tile, 
.tent-1, .tent-2, .tent-3, .tent-4, .tent2-1, .tent2-2, .tent2-3, .tent2-4,
.rune-1, .rune-2, .rune-2-charged, .rune-3, .rune-4, .rune-5, .rune-6,
.large-obilisk-1, .large-obilisk-2, .small-obilisk,
.sacrifice-stone-tile, .sacrifice-stone-2-tile,
.small-elixir-tile, .big-elixir-tile, .empty-elixir-tile,
.wood-spikes-horizontal-tile, .wood-spikes-vertical-tile, .wood-totem-tile, .stone-totem-tile, .meditation-statue-tile, .warrior-statue-tile,
.table-tile {
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

.rock-tile {
    background-image: url("ForestTiles/Animated_Rock.png");
}
.fire-gaunlet-tile {
    background-image: url("ForestTiles/Fire_Gaunlet.png");
}

.long-grass-tile {
    background-image: url("ForestTiles/Animated_LongGrass.png");
}

.crystal-tile {
    background-image: url("ForestTiles/Crystal_Tile_Animation.png");
}

.broken-crystal-tile {
    background-image: url("ForestTiles/Crystal_Mined.png");
}

.tree-tile {
    background-image: url("ForestTiles/TreeHD.png");
}

.grass-tile {
    background-image: url("ForestTiles/Grass.png");
}

.water-tile {
    background-image: none;
}

.table-tile {
    background-image: url("ForestTiles/Table.png");
}

.ruined-column-tile {
    background-image: url("ForestTiles/Ruined_Column.png");
}

.rock-path-tile {
    background-image: url("ForestTiles/Rock_Path.png");
}

.broken-rock-path-tile {
    background-image: url("ForestTiles/Broken_Rock_Path.png");
}

.backpack-tile {
    background-image: none;
}

.small-silver-tile {
    background-image: url("ForestTiles/Small_Silver.png");
}

.medium-silver-tile {
    background-image: url("ForestTiles/Medium_Silver.png");
}

.rune-tile {
    background-image: url("ForestTiles/Rune.png");
}

.skull-stick-tile {
    background-image: url("ForestTiles/Skull_Stick.png");
}

.skeleton-remains-tile {
    background-image: url("ForestTiles/Skeleton_Remains.png");
}

.flag-banner-tile {
    background-image: url("ForestTiles/Flag_Banner.png");
}

.ruined-flag-banner-tile {
    background-image: url("ForestTiles/Ruined_Flag_Banner.png");
}

.tier-1-chest-tile {
    background-image: url("ForestTiles/Tier_1_Chest.png");
}

.tier-2-chest-tile {
    background-image: url("ForestTiles/Tier_2_Chest.png");
}

.tier-3-chest-tile {
    background-image: url("ForestTiles/Tier_3_Chest.png");
}

.tier-4-chest-tile {
    background-image: url("ForestTiles/Tier_4_Chest.png");
}

.tier-1-open-chest-tile {
    background-image: url("ForestTiles/Tier_1_Open_Chest_Animation.png");
}

.tier-2-open-chest-tile {
    background-image: url("ForestTiles/Tier_2_Open_Chest.png");
}

.tier-3-open-chest-tile {
    background-image: url("ForestTiles/Tier_3_Open_Chest.png");
}

.tier-4-open-chest-tile {
    background-image: url("ForestTiles/Tier_4_Open_Chest.png");
}

.shelter-tile {
    background-image: url("ForestTiles/Shelter.png");
}

.campfire-tile {
    background-image: url("ForestTiles/CampFire.png");
}


.kraktar-ruins-1-tile {
    background-image: url("ForestTiles/Kraktar_Ruins_1.png");
}

.kraktar-ruins-2-tile {
    background-image: url("ForestTiles/Kraktar_Ruins_2.png");
}

.kraktar-ruins-3-tile {
    background-image: url("ForestTiles/Kraktar_Ruins_3.png");
}

.well-tile {
    background-image: url("ForestTiles/Well.png");
}

.buffed-well-tile {
    background-image: url("ForestTiles/Well_Buffed.png");
}

.poisoned-well-tile {
    background-image: url("ForestTiles/Poisoned_Well.png");
}

.animal-skull-tile {
    background-image: url("ForestTiles/Animal_Skull.png");
}

.flag-banner2-tile {
    background-image: url("ForestTiles/Flag_Banner2.png");
}

.stone1-tile {
    background-image: url("ForestTiles/Stone_1.png");
}

.stone2-tile{
    background-image: url("ForestTiles/Stone_2.png");
}

.chasm-tile{
    background-image: url("ForestTiles/Chasm.png");
}

.chasm-top-tile{
    background-image: url("ForestTiles/Chasm_Top.png");
}

.chasm-bottom-tile{
    background-image: url("ForestTiles/Chasm_Bottom.png");
}

.chasm-path-top-tile{
    background-image: url("ForestTiles/Chasm_Path_Top.png");
}

.chasm-path-bottom-tile{
    background-image: url("ForestTiles/Chasm_Path_Bottom.png");
}

.chasm-path-tile{
    background-image: url("ForestTiles/Chasm_Path.png");
}

.shrine-tile{
    background-image: url("ForestTiles/Shrine.png");
}

.tent-1 {
    background-image: url("ForestTiles/Tent_1.png");
}

.tent-2 {
    background-image: url("ForestTiles/Tent_2.png");
}

.tent-3 {
    background-image: url("ForestTiles/Tent_3.png");
}

.tent-4 {
    background-image: url("ForestTiles/Tent_4.png");
} 

.tent2-1 {
    background-image: url("ForestTiles/Tent2_1.png");
}

.tent2-2 {
    background-image: url("ForestTiles/Tent2_2.png");
}

.tent2-3 {
    background-image: url("ForestTiles/Tent2_3.png");
}

.tent2-4 {
    background-image: url("ForestTiles/Tent2_4.png");
}

.rune-1 {
    background-image: url("ForestTiles/Rune_1.png");
}

.rune-2 {
    background-image: url("ForestTiles/Rune_2.png");
}

.rune-2-charged {
    background-image: url("ForestTiles/Rune_2_Charged.png");
}

.rune-3 {
    background-image: url("ForestTiles/Rune_3.png");
}

.rune-4 {
    background-image: url("ForestTiles/Rune_4.png");
}

.rune-5 {
    background-image: url("ForestTiles/Rune_5.png");
}

.rune-6 {
    background-image: url("ForestTiles/Rune_6.png");
}

.shrine-tile {
    background-image: url("ForestTiles/Shrine.png");
}

.wood-spikes-horizontal-tile {
    background-image: url("ForestTiles/Wood_Spikes_Horizontal.png");
}

.wood-spikes-vertical-tile {
    background-image: url("ForestTiles/Wood_Spikes_Vertical.png");
} 

.hidden-wood-totem-tile {
    background-image: url("ForestTiles/Wood_Totem_Hidden.png");
}

.animated-wood-totem-tile {
    background-image: url("ForestTiles/Wood_Totem_Animation.png");
}

.wood-totem-tile {
    background-image: url("ForestTiles/Wood_Totem.png");
} 

.stone-totem-tile {
    background-image: url("ForestTiles/Stone_Totem.png");
} 

.meditation-statue-tile {
    background-image: url("ForestTiles/Meditate_Statue.png");
} 

.warrior-statue-tile {
    background-image: url("ForestTiles/Warrior_Statue.png");
} 

.sacrifice-stone-tile {
    background-image: url("ForestTiles/Sacrifice_Stone.png");
} 

.sacrifice-stone-2-tile {
    background-image: url("ForestTiles/Sacrifice_Stone_2.png");
} 

.small-elixir-tile {
    background-image: url("ForestTiles/Small_Elixir.png");
} 

.big-elixir-tile {
    background-image: url("ForestTiles/Big_Elixir.png");
}

.empty-elixir-tile {
    background-image: url("ForestTiles/Empty_Elixir.png");
} 

.large-obilisk-1 {
    background-image: url("ForestTiles/Large_Obilisk_1.png");
} 

.large-obilisk-2 {
    background-image: url("ForestTiles/Large_Obilisk_2.png");
} 

.small-obilisk {
    background-image: url("ForestTiles/Small_Obilisk.png");
} 


.rucksack-overlay {
    position: absolute;
    top: 0.75%; 
    left: 0.75%; 
    width: 100%;
    height: 100%;
  
    background-image: url("ForestTiles/rucksack.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  
    pointer-events: none; /* so the tile itself handles clicks, if desired */
    z-index: 10;        /* or something high so it’s visible on top */
    transform-origin: center center; /* keep pulse centered */
  }




/* ANIMATIONS */

.tier-1-opening-chest-tile {
    background-image: url("ForestTiles/Tier_1_Opening_Chest_Animation.png");
}

.tier-2-opening-chest-tile {
    background-image: url("ForestTiles/Tier_2_Opening_Chest_Animation.png");
}

.tier-3-opening-chest-tile {
    background-image: url("ForestTiles/Tier_3_Opening_Chest_Animation.png");
}

.tier-4-opening-chest-tile {
    background-image: url("ForestTiles/Tier_4_Opening_Chest_Animation.png");
}

.arrow {
    width: 64px;
    height: 64px;
    background-image: url("GameItems/Thrown_Items/Arrow.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 20;
  }  

/* The #player container: 64×64 collision box, allowing overflow */
#player {
    position: absolute;
    width: 64px;
    height: 64px;
    z-index: 10;
    overflow: visible; /* Ensures the larger child sprite won't get clipped */
    will-change: transform;
    backface-visibility: hidden;
}

/* Player sprite: each frame is 64×64, total sheet = 256×256 
   (4 columns x 64 wide = 256; 4 rows x 64 high = 256). 
*/
.player-sprite {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* The sprite itself is one 64×64 frame at a time */
    width: 64px;
    height: 64px;
    
    /* Center on the tile’s 64×64 collision box */
    transform: translate(-50%, -53%) scale(2);
    transform-origin: center; /* or bottom, if you prefer */
    
    /* The new sprite sheet */
    background-image: url("Sprites/User_Sprite.png");
    background-repeat: no-repeat;
    background-size: 256px 256px; /* Full sheet is 256×256 */
    
    image-rendering: pixelated; /* Keep that pixel-art crispness */
    will-change: background-position;
    backface-visibility: hidden;
  }
  
  /* If the player is walking, animate across 4 columns horizontally */
  .player-sprite.moving {
    animation: playerWalkCycle var(--player-walk-cycle-duration, 0.25s) steps(4, end) infinite;
  }

  .player-sprite.attacking {
    animation: playerAttackCycle 0.25s steps(4, end) 1;
  }
  
  /* 4 columns across the sheet is 256px wide in total (64px × 4 frames).
     So we shift from 0 to -256 in the background X. */
@keyframes playerWalkCycle {
    0%   { background-position-x: 0; }
    100% { background-position-x: -256px; }
  }

@keyframes playerAttackCycle {
    0%   { background-position-x: 0; }
    100% { background-position-x: -256px; }
  }

@keyframes playerMeditateCycle {
    0%   { background-position-x: 0; }
    100% { background-position-x: -256px; }
  }
  
  /* Now the 4 directions for vertical offset in multiples of -64. 
     We'll assume the top row is 'down', then second row is 'right', 
     third row is 'left', and fourth row is 'up'. 
     You can reorder them if your sheet differs, but here's the typical approach: 
  */
  .player-sprite[data-direction="down"] {
    background-position-y: 0;        /* row 0 => y=0 */
  }
  .player-sprite[data-direction="right"] {
    background-position-y: -64px;    /* row 1 => y=-64 */
  }
  .player-sprite[data-direction="left"] {
    background-position-y: -128px;   /* row 2 => y=-128 */
  }
  .player-sprite[data-direction="up"] {
    background-position-y: -192px;   /* row 3 => y=-192 */
  }

  .player-sprite.meditating {
    background-image: url("Sprites/User_Meditate.png");
    background-size: 256px 64px;
    background-position-y: 0 !important;
    animation: playerMeditateCycle 0.9s steps(4, end) infinite;
  }

  #runeActivationCutsceneLayer .player-sprite {
    opacity: 1 !important;
  }



/* -------------------------------
   Rucksack flash (all rucksacks)
   ------------------------------- */
.rucksack-overlay.rucksack-flash,
.letter-overlay.rucksack-flash,
.table-letter-overlay.rucksack-flash {
    animation: rucksackFlash 1.25s ease-in-out infinite;
}

.letter-overlay,
.table-letter-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 2;
}

.letter-overlay {
    background-image: url("ForestTiles/Letter.png");
}

.table-letter-overlay {
    background-image: url("ForestTiles/Letter_Table.png");
}

@keyframes rucksackFlash {
    0%   { filter: brightness(1) saturate(1); transform: scale(1); }
    40%  { filter: brightness(1.9) saturate(1.2); transform: scale(1); }
    60%  { filter: brightness(1.9) saturate(1.2); transform: scale(1); }
    100% { filter: brightness(1) saturate(1); transform: scale(1); }
}


/* Layer container */
#particleLayer {
  position: absolute;
  inset: 0;                 /* left:0; top:0; right:0; bottom:0 */
  pointer-events: none;     /* NEVER block clicks */
  z-index: 25;              /* above world sprites; below selection, HUD, and external menus */
}

/* One emitter per tile */
.particle-container {
  position: absolute;
  width: 64px;
  height: 64px;
  overflow: visible;
  pointer-events: none;
}

/* A single particle "dot" */
.particle-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background-image: url("Particles/Aura_Particles.png"); /* change if needed */
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: 0.95;
  will-change: transform, opacity;
  pointer-events: none;
  animation: particleFloat var(--life, 1200ms) linear forwards,
             particleFade  var(--life, 1200ms) ease-out forwards;
}

@keyframes particleFloat {
  from { transform: translate(-50%, -50%) translate(0, 0) }
  to   { transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, -18px)) }
}

@keyframes particleFade {
  from { opacity: 0.95 }
  to   { opacity: 0 }
}