.Archery #Player {display: none;}

.Archery:not(.GameOver) #World.CursorOff {cursor: none !important;}

.Archery #ShieldStatus {display: none;}
.Archery #ScoreStatus {position: absolute; bottom: 3px; left: 3px; text-align: left;}
.Archery #PlaceStatus {display: block; bottom: 3px; right: 3px; left: unset; top: unset;}
    .Archery .PlaceItem.StatusIcon {--itemColor: black; background-image: url('graphics/items/arrow.png'); background-size: 100% 100%; background-position: 0% 0%;}

.Archery #ChallengeList {--top: 10px; --left: 10px; width: 400px; height: 300px; opacity: 0; font-size: 11pt; text-align: left; pointer-events: none;}
.Archery #ChallengeList.On {opacity: 1;}
    .Archery #ChallengeList h4 {margin-top: 0px; margin-bottom: 4px;}
    .Archery #ChallengeList h4 div:last-child {display: none;}
    .CheckBox {margin-right: 10px;}

.Archery .ChallengeScreen {top: 160px; left: 270px; width: 520px; height: 300px; background: dodgerblue; background: linear-gradient(135deg, rgba(73,155,234,1) 0%,rgba(0,109,226,1) 100%); border: solid 2px white; border-radius: 20px; font-size: 18pt; color: white; box-sizing: border-box; opacity: 0; transition: opacity 0.5s; pointer-events: none;}
    .GameOver .ChallengeScreen {display: none;}
    .Archery .ChallengeScreen.On {opacity: 1; cursor: default; pointer-events: auto;}
    
    .Archery .ChallengeScreen h4 {text-align: center; margin-top: 0px; margin-bottom: 24px; font-size: 32pt; height: 48px;--FancyTextOutline: darkorange; --FancyTextFill: linear-gradient(to bottom, rgba(255,212,0,1) 0%,rgba(255,202,79,1) 49%,rgba(239,155,0,1) 51%,rgba(255,106,0,1) 100%); letter-spacing: 1px; position: relative;}
    .Archery .ChallengeScreen h4 div:first-child, .Archery .ChallengeScreen h4 div:last-child {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
    .Archery .ChallengeScreen h4 div:first-child {text-shadow: 1px 1px black, -1px -1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: black;}
    .Archery .ChallengeScreen h4 div:last-child {-webkit-text-stroke-width: 0.2px; -webkit-text-stroke-color: var(--FancyTextOutline); background: var(--FancyTextFill); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;}

    .Archery #ChallengeStartScreenText, .Archery #ChallengeEndScreenText {padding: 15px; text-align: left; width: 100%; box-sizing: border-box; font-family: var(--DefaultFontFamily);}
        .Archery #ChallengeStartScreenText div {margin-bottom: 4px;}
        .Archery #ChallengeEndScreenText {text-align: center;}
    .Archery .ChallengeScreenButton {position: absolute; bottom: 0px; --left: 200px; width: 100px;}
    .Archery .Star {font-size: 66pt; color: transparent; display: inline-block; vertical-align: top; padding: 9px; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black;}
    .Archery .Star.On {animation: ShowStar 0.5s linear forwards;}
    .Archery #Star1 {animation-delay: 0.5s !important;}
    .Archery #Star2 {animation-delay: 1s !important;}
    .Archery #Star3 {animation-delay: 1.5s !important;}

@keyframes ChallengeScreenEntrance {
    0% {xtransform: translateY(0px) scale(0); opacity: 0;}
    10% {xopacity: 1;}
    100% {xtransform: translateY(0px) scale(1); opacity: 1;}
}

@keyframes ShowStar {
    0% {color: transparent;}
    50% {color: white; text-shadow: 0px 0px 20px white}
    100% {color: gold;}
}

.Archery #Background7 {display: block; background: url('graphics/backgrounds/common/bluesky.png'); background-color: skyblue;}
.Archery #Background2 {display: block; background: url('graphics/backgrounds/archery/background.png'); top: -100px; width: 100%; height: 100%; background-size: 100% 100%; background-repeat: repeat-x;}
.Archery #Background1 {display: block; background: url('graphics/backgrounds/archery/clouds.png'); top: -40px; animation: ParallaxLeftwardsBackground 200s linear infinite; animation-play-state: var(--AnimationPlayState); width: 100%; height: 33.33%; background-size: 200% 100%; background-repeat: repeat-x;}

.Archery .Hill {background: url('graphics/backgrounds/archery/hills.png'); background-repeat: repeat-x; width: 100%; height: 170px; background-size: 105% 105%; background-position: 20% 0%;}
    #Hill1 {display: none; --top: 60px; --scaleX: -1; --left: 0px; filter: brightness(1);}
    #Hill2 {--top: 380px; --left: 0px; filter: brightness(1);}
    #Hill3 {--top: 460px; --left: 0px; --scaleX: -1; filter: brightness(1.1);}
    #Hill4 {--top: 540px; --left: 0px; filter: brightness(0.9);}

.Archery .Target {overflow: visible; background: url('graphics/enemies/archerytargettall.png'); background-repeat: no-repeat; width: 100px; height: 400px; background-size: 100% 100%; transition: margin 0.5s ease-out;}
.Archery .Target.Closed {margin-top: 340px; pointer-events: none;}
.Archery .Target .Text {transition: opacity 0.3s linear; width: 100%; height: 100px; top: 0px; left: 0px; padding-top: 26px; font-size: 36pt; color: white; font-family: 'Anton', impact, arial, sans-serif; text-shadow: 0px 0px 2px black, 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black;}
    .Literacy.Archery .Target .Text {font-family: QuicksandAlternate, Quicksand, sans-serif; padding-top: 20px;}
.Archery .Target .Text.Hover, .Archery .Target .Text.HideText {opacity: 0;}

    #Hill1Target1 {--top: 210px; --left: 70px;}
    #Hill1Target2 {--top: 210px; --left: 270px;}
    #Hill1Target3 {--top: 210px; --left: 470px;}
    #Hill1Target4 {--top: 210px; --left: 670px;}
    #Hill1Target5 {--top: 210px; --left: 870px;}

    #Hill2Target1 {--top: 315px; --left: 100px;}
    #Hill2Target2 {--top: 315px; --left: 300px;}
    #Hill2Target3 {--top: 315px; --left: 500px;}
    #Hill2Target4 {--top: 315px; --left: 700px;}
    #Hill2Target5 {--top: 315px; --left: 900px;}
    
    #Hill3Target1 {--top: 420px; --left: 70px;}
    #Hill3Target2 {--top: 420px; --left: 270px;}
    #Hill3Target3 {--top: 420px; --left: 470px;}
    #Hill3Target4 {--top: 420px; --left: 670px;}
    #Hill3Target5 {--top: 420px; --left: 870px;}

    .Archery .BonusText {opacity: 0; font-size: 22pt; color: white; font-family: 'Anton', impact, arial, sans-serif; text-shadow: 0px 0px 2px black, 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black;}
    .Archery .Target.ShowBonusText .BonusText {margin-top: 40px; animation: BonusTextRise 1s linear; animation-delay: 0.5s; width: 100%; text-align: center; -webkit-text-stroke: 1px white;}
        .Archery .ShowBonusText.Yellow .BonusText {color: #E5DA30;}
        .Archery .ShowBonusText.Red .BonusText {color: #D43437;}
        .Archery .ShowBonusText.Blue .BonusText {color: #2F78E5;}
        .Archery .ShowBonusText.Black .BonusText {color: #303030;}
        .Archery .ShowBonusText.White .BonusText {color: #E5E5E5;}

@keyframes BonusTextRise {
    0% {transform: translateY(0px); opacity: 0;}
    5% {opacity: 1;}
    70% {transform: translateY(-100px); opacity: 1;}
    100% {transform: translateY(-130px); opacity: 0; font-size: 42pt;}
}

.Archery #Cursor {display: none; position: absolute; width: 80px; height: 80px; --top: 250px; --left: 400px; pointer-events: none;}
.Archery:not(.GameOver) #World.CursorOff #Cursor {display: block;}
.Archery #CrossHair {position: absolute; background: url('graphics/entities/crosshair.png'); background-size: 100% 100%; width: 30px; height: 30px; transition: margin 0.5s linear;}
.Archery #Arrow {position: absolute; width: 20px; height: 20px; --left: 500px; --top: 600px; transition: transform 0.3s linear; overflow: visible;}
.Archery #ArrowShaft {position: absolute; width: 1px; height: 100px; transform-origin: 0 0;}
.Archery #ArrowImage {position: absolute; left: -5px; width: 11px; height: 100px; background: url('graphics/entities/arrow.png');}
.Archery #Arrow.Reset {transition: none; opacity: 0;}
.Archery.GameOver #Cursor {display: none;}