/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: linear-gradient(135deg, #1f2833, #0b0c10);
  color: #ffffff;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Header */
header {
  text-align: center;
  margin-bottom: 50px;
}

header h1 {
  font-size: 3rem;
  color: #38ef7d;
}

header p {
  font-size: 1.2rem;
  color: #c5c6c7;
}

/* Game Container */
.game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 40px auto;
  width: 50vh;  /* Vertical rectangle size */
  height: 80vh; /* Adjust height for a vertical shape */
  background: linear-gradient(180deg, #1f2833, #0b0c10);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* Game Screen */
.screen {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #1f2833;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* Buttons */
button {
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #38ef7d;
  color: #0b0c10;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: #11998e;
  transform: scale(1.05);
}

/* Modal Styles */
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
}

.modal-content {
  background: #1f2833;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  text-align: center;
  width: 100%;
  max-width: 400px;
}

/* Paste your game-specific CSS below this comment */
/* Layout */
body {
  margin: 0;
  background-color: black;
  counter-reset: points;
}

.screen {
  position: relative;
  margin: 0 auto;
  max-width: 100vw;
  width: 75vh;
  height: 100vh;
  overflow: hidden;
}

/* Sky */
.sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.sky > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.sky > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  height: 1000vh;
}

.sky > div + div {
  animation: opacity 30s linear infinite forwards paused;
}

/* All gradients except last are from https://uigradients.com/ */
.sky > div::before {
  background: linear-gradient(
    #f12711,
    #f5af19 10%,
    #91eae4 11%,
    #86a8e7,
    #7f7fd5 21%,
    #f64f59 22%,
    #c471ed,
    #12c2e9 32%,
    #f7797d 33%,
    #fbd786,
    #c6ffdd 43%,
    #8a2387 44%,
    #e94057,
    #f27121 54%,
    #3a1c71 55%,
    #d76d77,
    #fdbb2d 65%,
    #22c1c3 66%,
    #fdbb2d 76%,
    #1a2a6c 77%,
    #b21f1f,
    #fdbb2d 87%
  );
  animation: sky 240s steps(8, end) infinite forwards paused;
}

.sky > div + div::before {
  background: linear-gradient(
    #ff0080,
    #ff8c00,
    #40e0d0 10%,
    #1d2671 11%,
    #c33764 21%,
    #78ffd6 22%,
    #a8ff78 32%,
    #4b1248 33%,
    #f0c27b 43%,
    #2980b9 44%,
    #6dd5fa,
    #fff 54%,
    #03001e 55%,
    #7303c0,
    #ec38bc,
    #fdeff9 65%,
    #56ccf2 66%,
    #2f80ed 76%,
    #0c0510 77%,
    #160b3e,
    #5f4282,
    #cecc99 87%
  );
  animation: sky 240s steps(8, end) -15s infinite forwards paused;
}

/* Inputs and Last Label */
input,
.last {
  z-index: 1;
  position: absolute;
  display: none;
  width: 300vh;
  height: 300vh;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-150vh, -150vh);
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#last {
  display: initial;
  pointer-events: none;
}

input:checked,
#last:checked {
  display: none !important;
}

/* Base */
.base {
  position: relative;
  left: calc(50% - 15vh);
  top: 50vh;
  width: 30vh;
  height: 30vh;
  background-color: red;
  pointer-events: none;
  transform: rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

/* Base Sides */
.base::before,
.base::after {
  content: "";
  z-index: -1;
  position: absolute;
  display: block;
}

.base::before {
  right: 0;
  width: 50vh;
  height: 100%;
  background: linear-gradient(to left, #d00, rgba(221, 0, 0, 0));
  transform: rotateY(-90deg);
  transform-origin: right;
}

.base::after {
  bottom: 0;
  width: 100%;
  height: 50vh;
  background: linear-gradient(to top, #e00, rgba(238, 0, 0, 0));
  transform: rotateX(90deg);
  transform-origin: bottom;
}

/* Containers */
.container {
  position: absolute;
  display: flex;
  transform-style: preserve-3d;
}

.container.horizontal {
  left: -45vh;
  flex-direction: row;
  width: calc(90vh + 100%);
  height: 100%;
}

.container.vertical {
  top: -45vh;
  flex-direction: column;
  width: 100%;
  height: calc(90vh + 100%);
}

/* Spacers */
.container::before,
.container::after {
  content: "";
}

.container.horizontal::before,
.container.horizontal::after {
  max-width: calc(100% - 45vh);
  min-width: 45vh;
  height: 100%;
}

.container.vertical::before,
.container.vertical::after {
  width: 100%;
  max-height: calc(100% - 45vh);
  min-height: 45vh;
}

/* Blocks */
.block {
  position: relative;
  visibility: hidden;
  flex-grow: 1;
  background-color: currentColor;
  transform: translateZ(6vh);
  transform-style: preserve-3d;
}

.block.horizontal {
  height: 100%;
}

.block.vertical {
  width: 100%;
}

.block.floating {
  position: absolute;
  display: none;
  visibility: visible;
}

.block.floating.horizontal {
  width: calc(100% - 90vh);
  animation: left 2s linear alternate infinite both;
}

.block.floating.vertical {
  height: calc(100% - 90vh);
  animation: top 2s linear alternate infinite both;
}

/* Block Sides */
.block::before,
.block::after {
  content: "";
  z-index: -1;
  position: absolute;
  display: block;
  background-color: currentColor;
}

.block::before {
  right: 0;
  width: 6vh;
  height: 100%;
  box-shadow: inset -6vh 0 rgba(0, 0, 0, 0.2);
  transform: rotateY(-90deg);
  transform-origin: right;
}

.block::after {
  bottom: 0;
  width: 100%;
  height: 6vh;
  box-shadow: inset 0 -6vh rgba(0, 0, 0, 0.1);
  transform: rotateX(90deg);
  transform-origin: bottom;
}

/* End Labels */
.end {
  position: absolute;
  left: -200vh;
  top: -300vh;
  visibility: visible;
  max-width: 400vh;
  max-height: 600vh;
  pointer-events: auto;
  cursor: pointer;
  transform: rotateZ(-45deg) rotateX(-45deg) translateZ(100vh);
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.end.horizontal {
  width: calc(400vh - 100000%);
  height: 600vh;
}

.end.vertical {
  width: 400vh;
  height: calc(600vh - 100000%);
}

/* Points */
.points {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: none;
  text-align: center;
  color: white;
  font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
  font-size: 9vh;
  font-weight: lighter;
  pointer-events: none;
}

.points::before {
  content: "YOU'VE REACHED THE TOP!";
  display: block;
  margin: 4vh auto;
  font-size: 4vh;
  opacity: 0;
  transition: opacity 0.25s;
}

.points::after {
  content: counter(points);
  display: block;
}

/* Start Label */
.start {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 15vh 0;
  text-align: center;
  color: transparent;
  text-shadow: 0 0 0 white;
  font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
  font-size: 9vh;
  font-weight: lighter;
  cursor: pointer;
  transition: opacity 0.25s;
  animation: start 0.75s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.start::before {
  content: "";
  position: absolute;
  left: calc(50% - 3vh);
  top: 59.5vh;
  display: block;
  border-top: 5vh solid transparent;
  border-bottom: 5vh solid transparent;
  border-left: 8.5vh solid white;
}

.start::after {
  content: "";
  position: absolute;
  left: calc(50% - 10vh);
  top: 54.5vh;
  display: block;
  box-sizing: border-box;
  border: solid 2vh white;
  border-radius: 50%;
  width: 20vh;
  height: 20vh;
}

/* Restart Button */
button {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: none;
  padding-top: 80vh;
  width: 100%;
  color: white;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
  font-size: 4vh;
  font-weight: lighter;
  cursor: pointer;
  transition: opacity 0.25s;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Keyframes */
@keyframes opacity {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sky {
  from {
    transform: none;
  }
  to {
    transform: translateY(-880vh);
  }
}

@keyframes width {
  from {
    width: 0;
  }
  to {
    width: 90vh;
  }
}

@keyframes height {
  from {
    height: 0;
  }
  to {
    height: 90vh;
  }
}

@keyframes left {
  from {
    left: 0;
  }
  to {
    left: 90vh;
  }
}

@keyframes top {
  from {
    top: 0;
  }
  to {
    top: 90vh;
  }
}

@keyframes color {
  0% {
    color: #f00;
  }
  19% {
    color: #ff0;
  }
  31% {
    color: #0f0;
  }
  43% {
    color: #0ff;
  }
  62% {
    color: #00f;
  }
  81% {
    color: #f0f;
  }
  100% {
    color: #f00;
  }
}

@keyframes start {
  from {
    text-shadow: 0 0 1vh white, 2vh -2vh 1vh white, 2vh 2vh 1vh white,
      -2vh 2vh 1vh white, -2vh -2vh 1vh white;
    opacity: 0;
  }
  to {
    text-shadow: 0 0 0 white;
    opacity: 1;
  }
}

/* Sky: start changing */
#start:checked ~ .sky > div + div,
#start:checked ~ .sky > div::before {
  animation-play-state: running;
}

/* Sky: stop changing */
#end:checked ~ .sky > div + div,
#end:checked ~ .sky > div::before,
#last:checked ~ .sky > div + div,
#last:checked ~ .sky > div::before {
  animation-play-state: paused;
}

/* Base: start movement */
#start:checked ~ .base {
  transform: translateY(200vh) rotateX(45deg) rotateZ(45deg);
  transition-duration: 60s;
  transition-timing-function: linear;
}

/* Base: stop movement */
#end:checked ~ .base,
#last:checked ~ .base {
  transform: translateY(25vh) rotateX(45deg) rotateZ(45deg)
    scale3d(0.3, 0.3, 0.3);
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* Inputs and Last Label: display current */
#start:checked ~ .base > input,
input:checked + .container > .block > input,
input:checked + .container > .block > .last {
  display: block;
}

/* Containers: start color rotation */
#start:checked ~ .base .container {
  animation: color 60s linear alternate infinite both;
}

/* Containers: stop color rotation of current */
#start:checked ~ .base > .container,
input:checked + .container > .block > .container {
  animation-play-state: paused !important;
}

/* Spacers: start sizing of current */
#start:checked ~ .base > .container.horizontal::before,
input:checked + .container > .block > .container.horizontal::before {
  animation: width 2s linear infinite alternate both running;
}

#start:checked ~ .base > .container.horizontal::after,
input:checked + .container > .block > .container.horizontal::after {
  animation: width 2s linear infinite alternate-reverse both running;
}

#start:checked ~ .base > .container.vertical::before,
input:checked + .container > .block > .container.vertical::before {
  animation: height 2s linear infinite alternate both running;
}

#start:checked ~ .base > .container.vertical::after,
input:checked + .container > .block > .container.vertical::after {
  animation: height 2s linear infinite alternate-reverse both running;
}

/* Spacers: stop sizing of current */
#end:active ~ .base .container::before,
#end:active ~ .base .container::after,
#end:checked ~ .base .container::before,
#end:checked ~ .base .container::after,
#last:active ~ .base .container::before,
#last:active ~ .base .container::after,
#last:checked ~ .base .container::before,
#last:checked ~ .base .container::after,
input:active + .container::before,
input:active + .container::after,
input:checked + .container::before,
input:checked + .container::after {
  animation-play-state: paused !important;
}

/* Floating Blocks: display current */
#start:checked ~ .base > .container > .floating,
input:checked + .container > .block > .container > .floating {
  display: block;
}

/* Floating Blocks: stop movement of current */
#end:active ~ .base .floating,
#last:active ~ .base .floating,
input:active + .container > .floating {
  animation-play-state: paused;
}

/* Floating Blocks: stop movement of current then fadeout */
#end:checked ~ .base .floating,
#last:checked ~ .base .floating,
input:checked + .container > .floating {
  visibility: hidden;
  color: transparent;
  transition: color 0.5s, background-color 0.5s, visibility 0s 0.5s;
  animation-play-state: paused;
}

/* Increment Points */
#last:checked ~ .base .floating,
input:checked + .container > .floating {
  counter-increment: points 1;
}

/* Floating Block Sides: stop sizing of current then fadeout */
#end:checked ~ .base .floating::before,
#end:checked ~ .base .floating::after,
#last:checked ~ .base .floating::before,
#last:checked ~ .base .floating::after,
input:checked + .container > .floating::before,
input:checked + .container > .floating::after {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s, visibility 0s 0.5s;
  animation-play-state: paused;
}

/* Blocks: show current  */
input:checked + .container > .floating + .block,
#last:checked ~ .base .last + .container > .floating + .block {
  visibility: visible;
}

/* Points: show only positive */
.screen:valid .points {
  display: block;
}

/* Points: top reached */
#last:checked ~ .points::before {
  opacity: 1;
}

/* Start Label: hide after started */
#start:checked ~ .start {
  pointer-events: none;
  opacity: 0;
  animation: none;
}

/* Restart Button: show on end */
#end:checked ~ button,
#last:checked ~ button {
  pointer-events: auto;
  opacity: 1;
}

/* Layout */
body {
margin: 0;
background-color: black;
counter-reset: points;
}

.screen {
position: relative;
margin: 0 auto;
max-width: 100vw;
width: 75vh;
height: 100vh;
overflow: hidden;
}

/* Sky */
.sky {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
}

/* Additional Game-Specific CSS... */