.TowerDefence #World{--toolTipDelay: 0.5s;}
.TowerDefence #Player .Image {display: none;}
.TowerDefence .Chunk {transition: transform 0.1s; --rotateTransform: perspective(2300px) rotateX(30deg) scale(1); transform-origin: center center;}
.TowerDefence .Chunk {transform: perspective(2300px) rotateX(0deg) scale(0.75); transform-origin: center center;}

.TowerDefence .Chunk:before {background-image: url('graphics/games/towerdefence/locations/grass/ground.jpg'); content: ""; display: block; position: absolute; width: 400%; height: 400%; left: -150%; top: -150%; background-size: 10% 10%; background-color: gray; background-repeat: repeat; display: block;}


.TowerPath {background-image: url('graphics/games/towerdefence/locations/grass/path.jpg');}

.TowerDefence .ShieldItem {width: 49px; height: 49px; transition: none;}
    .TowerDefence .ShieldItem .Body {border-radius: 30px;}
    .TowerDefence .ShieldItem .Text {font-size: 22pt; padding-top: 6px; transition: opacity 0.5s;}
    .TowerDefence .ShieldItem .Image {display: block; border: solid 1px black; opacity: 1; animation: none; background-image: url('graphics/entities/chipholder.png');}
    .TowerDefence .ShieldItem .Explosion {display: block; box-sizing: border-box; animation: none; opacity: 0; transform: scale(1.2); transition: opacity 0.5s, transform 0.5s; background-image: url('graphics/entities/goldcoin.png'); background-size: contain; border: solid 1px black; border-radius: 40px;}
    .TowerDefence .ShieldItem.Collected {pointer-events: none; cursor: default;}
        .TowerDefence .ShieldItem.Collected .Explosion {display: block; opacity: 1 !important; transform: scale(1);}
    .TowerDefence .ShieldItem.EnemyCollected {pointer-events: none; cursor: default;}
        .TowerDefence .ShieldItem.EnemyCollected .Explosion {display: block; opacity: 1; background-image: url('graphics/entities/redcoin.png'); transform: scale(1);}
        .TowerDefence .ShieldItem.EnemyCollected .Text {opacity: 0;}


#TowerSelectorBox {position: absolute; bottom: 0px; width: 28%; left: calc((100% - 28%) / 2); height: 74px; background-image: url('graphics/games/towerdefence/panel.png'); background-size: contain; z-index: 5; pointer-events: none; transition-delay: 0.3s; transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1); transform: translateY(100%);}
#TowerSelectorBox.Active {pointer-events: all; transform: translateY(0%);}
#TowerSelectorBox:hover {animation: DelayTowerSelectorBoxToolTip 1s step-end forwards;}
@keyframes DelayTowerSelectorBoxToolTip {
    0% {--toolTipDelay: 0.5s;}
    99% {--toolTipDelay: 0.5s;}
    100% {--toolTipDelay: 0.1s;}
}

.TowerButton {position: relative; display: inline-block; vertical-align: top; margin: 2px; width: 50px; height: 50px; background-color: rgba(0,0,0,0.8); border: 1px solid silver; border-radius: 10px; cursor: pointer; background-size: contain; transition: filter 0.1s linear; color: white; font-family: var(--DefaultFontFamily); font-size: 20pt; text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black; background-position: center center; background-repeat: no-repeat;}
.TowerButton .ToolTip {pointer-events: none; position: absolute; transition: opacity 0.2s var(--toolTipDelay); opacity: 0; bottom: 60px; background: rgba(0,0,0,0.8); color: white; font-size: 10pt; width: 200px; left: -70px; border-radius: 9px; text-shadow: none; line-height: 1.2; box-sizing: border-box; padding: 4px; border: solid 1px white;}
.TowerButton .ToolTip h3 {margin: 0; font-weight: normal; color: gold;}
.TowerButton .ToolTip div {font-family: "open sans", sans-serif; text-align: left;}
.TowerButton:hover .ToolTip {opacity: 1;}
#TowerSelectorBox:not(.Active) .TowerButton:hover .ToolTip {display: none;}
.TowerButton:hover {border-color: white;}
.TowerButton:hover .Cost {filter: brightness(1.3);}
.TowerButton:active {filter: brightness(2);}
.TowerButton.Disabled {opacity: 0.5;}
.TowerButton .Cost {font-size: 14pt; position: absolute; bottom: 2px; right: 2px;}
#ButtonNextWave .ToolTip {right: -10px; left: unset;}

#ButtonSellTower {background-image: url('graphics/games/towerdefence/sell.png');}
#ButtonUpgradeTower {background-image: url('graphics/games/towerdefence/upgrade.png');}
#ButtonNextWave {position: absolute; bottom: 10px; right: 10px; z-index: 5; background-image: url('graphics/games/towerdefence/nextwave.png');}
    #ButtonNextWave.Disabled {opacity: 0.5;}

.TowerCell {border: solid 1px rgba(0,0,0,0.1); background: transparent; cursor: pointer; contain: none; --range: 50px;}
.TowerCell:hover {border-color: white;}
.TowerCell.Selected {contain: none; background-color: rgba(0, 255, 26, 0.5);}
.TowerCell.Selected:has(.Tower):before {content: ""; position: absolute; pointer-events: none; border: solid 1px #ffffff66; background-color: rgba(255,255,255,0.2); box-shadow: 0px 0px 20px rgba(255,255,255,0.4); border-radius: var(--range); left: calc((var(--range) - 50px) / -2); top: calc((var(--range) - 50px) / -2); width: var(--range); height: var(--range); transition: left 1s, width 1s, top 1s, height 1s;}
.TowerCell.Selected:after {content: ""; pointer-events: none; animation: SelectTowerGlow 0.2s cubic-bezier(0.23, 1, 0.320, 1) forwards; display: block; width: 100%; height: 100%; box-shadow: 0px 0px 20px rgba(255,255,255,0.8);}

.TowerPath {contain: none; background-color: wheat; --curve: 30px; --darkShadowColor: rgba(0,0,0,0.4); --lightShadowColor: rgba(255,255,255,0.4); background-size: 100% 100%;}
.TowerPathStart {background-size: 33% 100%; width: calc(var(--WallWidth) * 3); margin-left: calc(var(--WallWidth) * -2); xborder-radius: var(--curve) 0 0 var(--curve); xbox-shadow: -2px -2px 2px var(--darkShadowColor);}
.TowerPathEnd {background-size: 33% 100%; width: calc(var(--WallWidth) * 3); xborder-radius: 0 var(--curve) var(--curve) 0; xbox-shadow: 2px -2px 2px var(--darkShadowColor);}
.LeftTopPath {border-bottom-right-radius: var(--curve); box-shadow: 2px 2px 2px var(--lightShadowColor);}
.LeftBottomPath {border-top-right-radius: var(--curve); box-shadow: 2px -2px 2px var(--darkShadowColor);}
    .LeftBottomPath:after {border-top-right-radius: var(--curve); content: ""; display: block; position: absolute; top: 50%; right: 0px; width: 2px; height: 50%; box-shadow: 2px 0px 2px var(--lightShadowColor);}
.RightTopPath {border-bottom-left-radius: var(--curve); box-shadow: -2px 2px 2px var(--lightShadowColor);}
    .RightTopPath:after {border-top-right-radius: var(--curve); content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 2px; height: 50%; box-shadow: -2px 0px 2px var(--darkShadowColor);}

.RightBottomPath {border-top-left-radius: var(--curve); box-shadow: -2px -2px 2px var(--darkShadowColor);}

.VerticalPath:before {content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 2px; height: 100%; box-shadow: -2px 0px 2px var(--darkShadowColor);}
.VerticalPath:after {content: ""; display: block; position: absolute; top: 0px; right: 0px; width: 2px; height: 100%; box-shadow: 2px 0px 2px var(--lightShadowColor);}
.HorizontalPath {box-shadow: 2px 0px 2px var(--darkShadowColor);}
.HorizontalPath:before {content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 4px; box-shadow: 0px -2px 1px var(--darkShadowColor);}
.HorizontalPath:after {content: ""; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 4px; box-shadow: 0px 2px 1px var(--lightShadowColor);}


.TowerCell:has(.Tower) {z-index: 1;}
.Tower {position: absolute; top: 0px; left: 0px; width: calc(100% - 2px); height: calc(100% - 2px); background-size: contain; background-repeat: no-repeat; background-position: center center; filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.8));}
    .Tower .Barrel {position: absolute; --size: calc((100% - var(--size)) / 2); top: calc((100% - var(--size)) / 2); left: calc((100% - var(--size)) / 2); width: var(--size); height: var(--size); background-size: contain; background-repeat: no-repeat; background-position: center center; transform-origin: center center; xfilter: drop-shadow(0px 8px 10px rgba(0,0,0,0.8)); transform: 0deg; transition: transform 0.1s;}
    .Tower.CanRotate:not(.Constructing) .Barrel:not(.Firing), .LightningTower:not(.Constructing) .Barrel {animation: TowerBarrelIdle 2s linear infinite; animation-play-state: var(--AnimationPlayState);}
    .LaserTower {background-image: url('graphics/games/towerdefence/lasertower.png');}
        .LaserTower .Barrel {background-image: url('graphics/games/towerdefence/laserbarrel.png'); --size: 130%;}
    .LightningTower {background-image: url('graphics/games/towerdefence/lightningtower.png');}
        .LightningTower .Barrel {background-image: url('graphics/games/towerdefence/lightningbarrel.png'); --size: 70%;}
        .LightningTower:has(.Barrel.Firing):before {content: ""; display: block; position: absolute; top: calc(50% - var(--range) / 2); left: calc(50% - var(--range) / 2); width: var(--range); height: var(--range); background-image: url('graphics/effects/spark.png'); background-size: 800% 100%; background-repeat: no-repeat; background-position: 0 0; animation: EightFrameSprite 0.1s step-end forwards; animation-play-state: var(--AnimationPlayState); opacity: 0.7;}
    .SlowTower {background-image: url('graphics/games/towerdefence/slowtower.png');}
        .SlowTower .Barrel {background-image: url('graphics/games/towerdefence/slowbarrel.png'); --size: 98%;}
        .SlowTower:not(.Constructing) .Barrel {filter: drop-shadow(0px 0px 0px dodgerblue); animation: TowerGlowPulse 2s linear alternate infinite;}
    .AirTower {background-image: url('graphics/games/towerdefence/airtower.png');}
        .AirTower .Barrel {background-image: url('graphics/games/towerdefence/airbarrel.png'); --size: 98%;}
    .ArtilleryTower {background-image: url('graphics/games/towerdefence/artillerytower.png');}
        .ArtilleryTower .Barrel {background-image: url('graphics/games/towerdefence/artillerybarrel.png'); --size: 98%;}
    .Constructing {animation: ConstructTower 0.2s linear;}
    .Constructing .Barrel {animation: ConstructBarrel 2s ease-in forwards; animation-delay: 0.2s; transform: scale(0%);}
    .Deconstructing {animation: DeconstructTower 1s linear;}
    .Upgrading .Barrel {animation: UpgradingBarrel 5s linear !important;}


@keyframes ConstructTower {
    0% {transform: scale(20%) rotate(0deg); filter: brightness(0.8) drop-shadow(0px 0px 0px rgba(0,0,0,0));}
    100% {transform: scale(100%) rotate(0deg); filter: brightness(1) drop-shadow(0px 8px 10px rgba(0,0,0,0.8));}
}

@keyframes ConstructBarrel {
    0% {transform: scale(0%) rotate(0deg); filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));}
    100% {transform: scale(100%) rotate(0deg); filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.8));}
}

@keyframes TowerBarrelIdle {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@keyframes TowerGlowPulse {
    0% {filter: brightness(1) drop-shadow(0px 0px 0px dodgerblue);}
    100% {filter: brightness(1.5) drop-shadow(0px 0px 4px white) drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 6px dodgerblue);}
}

@keyframes DeconstructTower {
    0% {transform: scale(100%) rotate(0deg); filter: brightness(1) drop-shadow(0px 8px 10px rgba(0,0,0,0.8));}
    100% {transform: scale(20%) rotate(100deg); filter: brightness(0.8) drop-shadow(0px 0px 0px rgba(0,0,0,0));}
}

@keyframes UpgradingBarrel {
    0% {transform: scale(100%) rotate(0deg);}
    50% {transform: scale(0%) rotate(0deg);}
    100% {transform: scale(100%) rotate(0deg);}
}

@keyframes SelectTowerGlow {
    0% {transform: scale(0%);}
    90% {transform: scale(110%);}
    99.99% {transform: scale(100%); border: none;}
    100% {transform: scale(100%); border: solid 1px white;}
}

.TowerShot {position: absolute; top: 0px; left: 0px; width: 30px; height: 30px; border-radius: 30px; z-index: 10000; animation-play-state: var(--AnimationPlayState);}
    .TowerShot:before {position: absolute; top: 0px; left: 0px; width:100%; height: 100%; text-shadow: 0 0 5px rgba(0,0,0,0.7); font-size: 20pt; transform: rotateZ(var(--rotateZ)); transform-origin: center center; text-align: center;}
    .TowerShot .Body {transform: rotateZ(var(--rotateZ)); transform-origin: center center;}
    .LaserTowerShot .Image {background-image: url('graphics/games/towerdefence/laser.png');}
    .SlowTowerShot .Image {background-image: url('graphics/effects/waterball.png'); background-size: 500% 100%; background-repeat: no-repeat; background-position: center center; animation: FiveFrameSprite 0.5s step-end infinite; animation-play-state: var(--AnimationPlayState);}
    /* .LightningTowerShot .Image {background-image: url('graphics/effects/spark.png'); background-size: 800% 100%; background-repeat: no-repeat; background-position: center center; animation: EightFrameSprite 0.3s step-end infinite; animation-play-state: var(--AnimationPlayState);} */
    .AirTowerShot .Image {background-image: url('graphics/games/towerdefence/airshot.png');}
    .ArtilleryTowerShot .Image {background-image: url('graphics/games/towerdefence/artilleryshot.png');}

.TowerEnemy {width: 50px; height: 50px; filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.3));}
.TowerEnemy .Image {background-image: url('graphics/games/towerdefence/enemy.png');}
    .TowerEnemy1 .Image {background-image: url('graphics/games/towerdefence/enemy.png');}
    .TowerEnemy2 .Image {background-image: url('graphics/games/towerdefence/enemy2.png');}
    .TowerEnemy.Flying .Image {--flyingHeight: 40px; transform: translateY(calc(-1 * var(--flyingHeight))); filter: drop-shadow(0px var(--flyingHeight) 5px rgba(0,0,0,0.3));}
    .TowerEnemy.Slowed:not(.Exploding) .Body {filter: sepia(1) hue-rotate(152deg);}
    .TowerEnemy.Hit:not(.Exploding) .Body {filter: brightness(10);}

.TowerDefence .BarrierBoulderPermanent {contain: unset;}
.TowerDefence .BarrierBoulderPermanent .Image {background-image: url('graphics/games/towerdefence/stump.png'); top: -20%; height: 120%}