@font-face {
  font-family: GoodGreith;
  src: url(Fonts/Greith.otf);
}

body {
  counter-reset: points;
  cursor: url(img/background/cursors/Cursor.svg),
    url(img/background/Pointer.svg), auto;
  text-align: center;
  color: green;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
}

/* Game container - clips overflow */
#game {
  margin-top: 0;
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  cursor: url("img/background/TargetCursor.svg") 16 16, crosshair;
  isolation: isolate;
  background-image: url(img/background/Cloudere.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

/* Ensure background covers full height on narrow screens */
@media screen and (max-aspect-ratio: 3/4) {
  #game {
    background-size: auto 100%;
    background-position: center bottom;
  }
}

#game,
#game * {
  cursor: url("img/background/TargetCursor.svg") 16 16, crosshair;
}

.game .start {
  top: 0;
}

/* Content stays within game bounds */
.content {
  position: fixed;
  top: 0;
  right: 100px;
  bottom: 0;
  left: 100px;
  opacity: 0;
  transition: transform opacity 1.5s ease-out;
  max-height: 100vh;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  cursor: url("img/background/TargetCursor.svg") 16 16, crosshair !important;
  clip-path: inset(0 0 0 0);
  z-index: 1;
}

.game:target .content {
  opacity: 1;
  pointer-events: auto;
  cursor: url("img/background/TargetCursor.svg") 16 16, crosshair !important;
}

/* Prefooter and footer above game content */
.prefooter,
.bbc-footer {
  position: relative;
  z-index: 100;
  clear: both;
  background-color: inherit;
  cursor: url("img/background/cursors/Cursor.svg"),
    url("img/background/Cursor.svg") !important;
}

.prefooter a:hover,
.prefooter button:hover,
.prefooter img:hover,
.prefooter a img:hover,
.bbc-footer a:hover,
.bbc-footer button:hover,
.bbc-footer img:hover,
.bbc-footer a img:hover {
  cursor: url("img/background/Pointer.svg"),
    url("img/background/cursors/Finger%20cursor.png"), pointer !important;
}

.prefooter *:not(a):not(button):not(img),
.bbc-footer *:not(a):not(button):not(img) {
  cursor: url("img/background/cursors/Cursor.svg"),
    url("img/background/Pointer.svg"), auto !important;
}

/* General link and button cursors */
a,
button,
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/Pointer.svg"),
    url("img/background/cursors/Finger%20cursor.png"), pointer !important;
}

/* Prefooter and footer specific cursor rules - must come AFTER general rules */
.prefooter *:not(a):not(button),
.bbc-footer *:not(a):not(button) {
  cursor: url("img/background/cursors/Cursor.svg"),
    url("img/background/Pointer.svg"), auto !important;
}

.prefooter a,
.prefooter button,
.bbc-footer a,
.bbc-footer button {
  cursor: url("img/background/Pointer.svg"),
    url("img/background/cursors/Finger%20cursor.png"), pointer !important;
}

.start {
  text-shadow: 1px 1px 0px #02a95b;
  transition: transform opacity 1.5s ease-out;
  animation: opacityPulse 1.2s ease-out;
  animation-iteration-count: infinite;
  font-family: "GoodGreith", cursive;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  text-decoration: none;
  color: #e4003b;
  text-shadow: 2px 2px 0 #0087dc;
}

.start h1 {
  text-shadow: 1px 1px 0px #02a95b;
  transition: transform opacity 1.5s ease-out;
  animation: opacityPulse 1.2s ease-out;
  animation-iteration-count: infinite;
  font-family: "GoodGreith", cursive;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5dvw;
  text-decoration: none;
  color: #e4003b;
  text-shadow: 2px 2px 0 #0087dc;
}

.game:target .start {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

.start span {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 1.4em;
  text-shadow: none;
}

/* Gun barrel circle that follows cursor */
.spotlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  border: 4px solid #b50938;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity 0.3s ease-out;
}

.game:target .spotlight-overlay {
  opacity: 1;
}

h1 .news-title {
  font-family: "Helvetica Neue", Helvetica, Arial, Helvetica, sans-serif;
}

label {
  position: absolute;
  top: -180px;
  width: 150px;
  height: 150px;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}

label:nth-of-type(1) {
  left: 40%;
  animation-duration: 3.5s;
  animation-delay: 2s;
}

label:nth-of-type(2) {
  left: 32%;
  animation-duration: 3s;
  animation-delay: 6s;
}

label:nth-of-type(3) {
  left: 68%;
  animation-duration: 3.5s;
  animation-delay: 6.5s;
}

label:nth-of-type(4) {
  left: 56%;
  animation-duration: 2.5s;
  animation-delay: 10.5s;
}

label:nth-of-type(5) {
  left: 24%;
  animation-duration: 3s;
  animation-delay: 13.5s;
}

label:nth-of-type(6) {
  left: 72%;
  animation-duration: 3s;
  animation-delay: 14s;
}

label:nth-of-type(7) {
  left: 45%;
  animation-duration: 2.5s;
  animation-delay: 17.5s;
}

label:nth-of-type(8) {
  left: 38%;
  animation-duration: 3s;
  animation-delay: 20.5s;
}

label:nth-of-type(9) {
  left: 65%;
  animation-duration: 2.5s;
  animation-delay: 21s;
}

label:nth-of-type(10) {
  left: 30%;
  animation-duration: 2.5s;
  animation-delay: 24s;
}

label:nth-of-type(11) {
  left: 52%;
  animation-duration: 2.5s;
  animation-delay: 24.5s;
}

label:nth-of-type(12) {
  left: 74%;
  animation-duration: 2.5s;
  animation-delay: 25s;
}

label:nth-of-type(13) {
  left: 42%;
  animation-duration: 2s;
  animation-delay: 28s;
}

label:nth-of-type(14) {
  left: 60%;
  animation-duration: 2s;
  animation-delay: 28.2s;
}

label:nth-of-type(15) {
  left: 35%;
  animation-duration: 2.5s;
  animation-delay: 31s;
}

label:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1s ease-in-out;
}

/* Specific SVG for each target */
label:nth-of-type(1):before {
  background-image: url("img/background/Target1.svg");
}

label:nth-of-type(2):before {
  background-image: url("img/background/Target2.svg");
}

label:nth-of-type(3):before {
  background-image: url("img/background/Target3.svg");
}

label:nth-of-type(4):before {
  background-image: url("img/background/Target4.svg");
}

label:nth-of-type(5):before {
  background-image: url("img/background/Target5.svg");
}

label:nth-of-type(6):before {
  background-image: url("img/background/Target6.svg");
}

label:nth-of-type(7):before {
  background-image: url("img/background/Target7.svg");
}

label:nth-of-type(8):before {
  background-image: url("img/background/Target3.svg");
}

label:nth-of-type(9):before {
  background-image: url("img/background/Target2.svg");
}

label:nth-of-type(10):before {
  background-image: url("img/background/Target5.svg");
}

label:nth-of-type(11):before {
  background-image: url("img/background/Target4.svg");
}

label:nth-of-type(12):before {
  background-image: url("img/background/Target6.svg");
}

label:nth-of-type(13):before {
  background-image: url("img/background/Target7.svg");
}

label:nth-of-type(14):before {
  background-image: url("img/background/Target4.svg");
}

label:nth-of-type(15):before {
  background-image: url("img/background/Target1.svg");
}

input:checked + label:before {
  opacity: 0;
  filter: grayscale(100%);
}

label:after {
  content: "+1";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.7em;
  color: white;
  text-shadow: 2px 2px 0px #b50938;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation-fill-mode: forwards;
}

.game:target label {
  animation-name: crosshair-on;
}

input:checked + label {
  animation-play-state: paused;
  pointer-events: none;
}

input:checked + label:after {
  animation: score-on 1.5s;
}

input {
  opacity: 0;
}

input:checked {
  counter-increment: points;
  pointer-events: none;
}

.score:before {
  content: counter(points) " ";
}

.game:target .score {
  transform: translateY(calc(100% - 50vh)) scale(2.2);
  transition: transform 0.4s 34s ease-in-out;
  opacity: 1 !important;
}

.score {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  color: #faa61a;
  text-shadow: 2px 2px 0px #e4003b;
  pointer-events: none;
  z-index: 7;
}

@keyframes opacityPulse {
  30% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}

@keyframes crosshair-on {
  100% {
    transform: translateY(calc(110vh + 130px));
  }
}

@keyframes score-on {
  10% {
    transform: translate(-50%, calc(-50% - 3em));
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Game Over Screen */
.game-over {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
  max-height: 100vh;
}

.game:target .game-over {
  animation: showGameOver 0.5s 34s forwards;
}

.game:target .game-over-content {
  animation: scaleIn 0.5s 34.5s forwards;
}

.game-over h1 {
  font-size: 4em;
  color: #e4003b;
  text-shadow: 3px 3px 0px #02a95b, 6px 6px 0px rgba(0, 0, 0, 0.5);
  margin: 0 0 30px 0;
  letter-spacing: 5px;
}

/* Victory messages - hide by default, show with .active class */
.victory-message {
  display: none;
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 20px;
  color: #faa61a;
  text-shadow: 2px 2px 0px #e4003b;
}

.victory-message.active {
  display: block;
}

.final-score {
  font-size: 2em;
  color: #02a95b;
  text-shadow: 2px 2px 0px #e4003b;
  margin: 20px 0 40px 0;
}

.score-display:before {
  content: counter(points);
}

.play-again {
  display: inline-block;
  padding: 20px 40px;
  font-size: 1.5em;
  color: #faa61a;
  background-color: #02a95b;
  text-decoration: none;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  border: 4px solid white;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.play-again:hover {
  background-color: #e4003b;
  transform: scale(1.1);
  box-shadow: 0 0 20px #02a95b;
}

@keyframes showGameOver {
  to {
    opacity: 1;
    pointer-events: all;
  }
}

@keyframes scaleIn {
  to {
    transform: scale(1);
  }
}

/* Create space after game for footer */
#game::after {
  content: "";
  display: block;
  height: 0;
}

/* Responsive Design for Tablets and Mobile */
@media screen and (max-width: 1024px) {
  .content {
    right: 50px;
    left: 50px;
  }

  .score {
    font-size: 1.3em;
    bottom: 30px;
    color: #faa61a;
  }

  .start {
    font-size: 32px;
    padding: 0 20px;
  }

  label {
    width: 120px;
    height: 120px;
    top: -150px;
  }

  .spotlight-overlay {
    width: 150px;
    height: 150px;
    border: 3px solid #b50938;
  }

  .game-over h1 {
    font-size: 3em;
  }

  .final-score {
    font-size: 1.5em;
  }

  .play-again {
    padding: 15px 30px;
    font-size: 1.2em;
  }
}

@media screen and (max-width: 768px) {
  .content {
    right: 20px;
    left: 20px;
  }

  .score {
    font-size: 1.1em;
    bottom: 20px;
  }

  .start {
    font-size: 24px;
    padding: 0 15px;
  }

  label {
    width: 100px;
    height: 100px;
    top: -130px;
  }

  label:nth-of-type(1),
  label:nth-of-type(2),
  label:nth-of-type(3),
  label:nth-of-type(4),
  label:nth-of-type(5),
  label:nth-of-type(6) {
    left: 50%;
    transform: translateX(-50%);
  }

  .spotlight-overlay {
    width: 120px;
    height: 120px;
  }

  label:after {
    font-size: 1.4em;
  }

  .game-over h1 {
    font-size: 2.5em;
    margin: 0 0 20px 0;
  }

  .final-score {
    font-size: 1.3em;
    margin: 15px 0 30px 0;
  }

  .play-again {
    padding: 12px 25px;
    font-size: 1em;
  }
}

@media screen and (max-width: 480px) {
  .content {
    right: 10px;
    left: 10px;
  }

  .score {
    font-size: 1em;
    bottom: 15px;
  }

  .start {
    font-size: 18px;
    padding: 0 10px;
  }

  .start span {
    font-size: 1.2em;
  }

  label {
    width: 80px;
    height: 80px;
    top: -110px;
  }

  .spotlight-overlay {
    width: 100px;
    height: 100px;
  }

  label:after {
    font-size: 1.2em;
  }

  .game-over h1 {
    font-size: 2em;
    margin: 0 0 15px 0;
    letter-spacing: 3px;
  }

  .final-score {
    font-size: 1.1em;
    margin: 10px 0 20px 0;
  }

  .play-again {
    padding: 10px 20px;
    font-size: 0.9em;
    border: 3px solid white;
  }

  .game:target .score {
    transform: translateY(calc(100% - 50vh)) scale(1.8);
  }
}

/* Final cursor overrides - must be at end of file */
body:not(#game) .prefooter,
body:not(#game) .prefooter *,
body:not(#game) .bbc-footer,
body:not(#game) .bbc-footer * {
  cursor: url("img/background/cursors/Cursor.svg"), pointer !important;
}

/* Final cursor overrides - must be at end of file */
body:not(#game) .prefooter a:hover,
body:not(#game) .prefooter a:hover *,
body:not(#game) .bbc-footer a:hover,
body:not(#game) .bbc-footer a:hover * {
  cursor: url("img/background/cursors/Pointer.svg"), pointer !important;
}