/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222;
}

html {
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

@font-face {
  font-family: 'Jersey10';
  src: url('../assets/fonts/jersey10-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FTBase';
  src: url('../assets/fonts/ftbase-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply Jersey10 to headings */
.heading,
.modal-title,
.hero-title,
.splash-title {
  font-family: 'Jersey10', sans-serif;
  letter-spacing: 1px;
}

/* Apply FTBase to body, buttons, and text */
body,
button,
.modal-body,
.modal-btn,
.hero-desc,
.hero-subtitle,
.hero-attr,
.hero-dots,
.age-label {
  font-family: 'FTBase', system-ui, sans-serif !important;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
img,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Main styles
   ========================================================================== */

/*-- Rotate Warning -- */
#rotateWarning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 32px 48px;
  box-sizing: border-box;
}

#rotateWarningText {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 32px;
  max-width: 600px;
  line-height: 1.4;
}

#rotateWarning #start-game {
  background: #4ade80;
  border: none;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #000;
  font-weight: bold;
}

#rotateWarning #start-game:hover {
  background: #22c55e;
  transform: translateY(-2px);
}

#rotateWarning #start-game .button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

#rotateWarning #start-game .button-icon img {
  height: 7.04vh;
  width: auto;
}

#rotateWarning #start-game span {
  font-size: 1.1rem;
  font-weight: bold;
}

/* Responsive styles for rotate warning */
@media (min-width: 1024px) {
  #rotateWarning {
    padding: 32px 80px;
  }

  #rotateWarningText {
    font-size: 1.5rem;
  }

  #rotateWarning #start-game span {
    font-size: 1.5rem;
  }
}
/*-- Percent Loader -- */
#mainLoader {
  position: absolute;
  z-index: 5;
  display: none;
  font-size: 35px;
  line-height: 35px;
  color: #000;
  text-align: center;
  width: 100%;
  font-family: 'Jersey10';
}

/*-- Content Wrapper -- */
#mainHolder {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00E5FF;
}

/*-- Browser Not Support -- */
#notSupportHolder {
  width: 90%;
  margin: 5% auto;
  position: relative;
  color: #000;
  text-align: center;
  font-size: 35px;
  font-family: 'Jersey10';
  display: none;
}

.notSupport {
  margin-top: 200px;
}

@-moz-keyframes spin {
  50% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(90deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes spin {
  50% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

/*-- Canvas Wrapper -- */
#canvasHolder {
  display: none;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: auto;
  position: relative;
}

canvas {
  position: fixed;
}

#splashScreen {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#splashScreen .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Splash SVGs and animation states */
#planetSVG {
  position: absolute;
  left: 0;
  top: 100%;
  bottom: 0;
  width: 100vw;
  z-index: 1;
  opacity: 1;
  animation: slideUp 1s ease-out forwards;
}

#cloudsSVG {
  position: absolute;
  left: 50%;
  top: 10vh;
  transform: translate(-50%, 0);
  width: 100vw;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s;
  pointer-events: none;
}

#splashContent {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.7s;
}

#splashContent span.text {
  font-size: 10vw;
}

#splashContent span.player {
  display: inline-block;
  vertical-align: middle;
  font-size: 3vw;
  margin: 0 1vw;
}

#logosContainer {
  position: relative;
  top: 5vh;
  left: 5vw;
  width: 100%;
  display: flex;
  gap: 2vw;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInFromTop 1s ease-out 0.5s forwards;
}

#splashBar {
  position: absolute;
  z-index: 10;
  bottom: 5vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw 48px 5vw;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.7s;
}

#splashBar .label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 2px solid #000;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 1.2vw;
}

#rulesBtn:hover {
  background: rgba(0, 0, 0, 0.1);
}

#playBtn {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 18px 90px;
  font-size: 2vw;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#playBtn:hover {
  background: rgba(0, 0, 0, 0.8);
}

#rulesModal {
  display: none;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  justify-content: center;
  align-items: center;
  font-family: 'Jersey10', sans-serif;
  font-size: 1.5vw;
}

#rulesModal .heading {
  font-weight: bold;
  font-size: 3vw;
}

#rulesModal>div {
  max-width: 80vw;
  border-radius: 6vw;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  background: white;
}

#rulesModal #rulesModalIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7vw;
  z-index: 10;
}

#playerModal {
  font-family: 'Jersey10', sans-serif;
}

#playerModal .heading, #villainModal .heading {
  font-size: 7vw;
  line-height: 1;
}

#playerModal #carouselLeft,
#playerModal #carouselRight {
  font-family: 'FTBase', sans-serif;
}

#playerModal .statsModalBtn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

#playerModal .statsModalBtn:hover {
  opacity: .6;
}

#playerModal .playBtn {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 18px 90px;
  font-size: 2vw;
  cursor: pointer;
}

#heroStatsModal {
  font-family: 'Jersey10', sans-serif;
}

#heroStatsModal .statsModalItem {
  border-right: 2px solid #fff;
}

#heroStatsModal .statsModalItem:last-child {
  border-right: none;
}

/* Responsive modal and carousel styles */
#heroCarousel>div {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 2vw 0;
  transition: all 0.2s;
}

#heroCarousel>div.active {
  border: 4px solid #000;
  width: 32vw;
  min-width: 300px;
  max-width: 360px;
}

#heroCarousel>div.inactive {
  border: 2px solid #000;
}

#heroCarousel .hero-emoji {
  font-size: 5vw;
  min-font-size: 48px;
  margin-top: 2vw;
}

#heroCarousel .hero-title {
  font-size: 1.5rem;
  font-family: monospace, system-ui, sans-serif;
  font-weight: bold;
}

#heroCarousel .hero-subtitle {
  font-size: 1.1rem;
  color: #00bfff;
  font-family: system-ui, sans-serif;
  font-weight: bold;
  margin-bottom: 8px;
}

#heroCarousel .hero-desc {
  font-size: 1rem;
  font-family: system-ui, sans-serif;
  margin-bottom: 16px;
}

#heroCarousel .hero-attr {
  margin-bottom: 8px;
  text-align: left;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
}

#heroCarousel .hero-dots span {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 2px;
  border-radius: 50%;
  background: #ccc;
  vertical-align: middle;
}

@media (max-width: 900px) {
  #heroCarousel>div {
    min-width: 60vw !important;
    width: 60vw !important;
    max-width: 80vw !important;
    font-size: 1rem !important;
  }

  #heroCarousel>div.active {
    width: 70vw !important;
    min-width: 65vw !important;
    max-width: 85vw !important;
  }
}

@media (max-width: 700px) {

  #rulesModal>div,
  #playerModal>div {
    border-radius: 4vw !important;
    padding: 2vw !important;
  }

  #rulesModal>div {
    width: 98vw !important;
    max-width: 99vw !important;
  }

  #playerModal>div {
    width: 99vw !important;
    max-width: 99vw !important;
    margin: 2vw auto !important;
  }

  #heroCarousel>div {
    min-width: 80vw !important;
    width: 80vw !important;
    max-width: 95vw !important;
    font-size: 0.95rem !important;
  }

  #heroCarousel>div.active {
    width: 90vw !important;
    min-width: 85vw !important;
    max-width: 98vw !important;
  }

  #playerSettingsBtn,
  #carouselLeft,
  #carouselRight {
    width: 14vw !important;
    height: 14vw !important;
    font-size: 2rem !important;
  }

  #chooseHeroBtn {
    padding: 4vw 8vw !important;
    font-size: 1rem !important;
  }

  #rulesModal div[style*='font-size:2.2rem'] {
    font-size: 1.3rem !important;
  }

  /* Hero Stats Modal responsive styles */
  #heroStatsModal>div {
    width: 95vw !important;
    padding: 6vw !important;
    border-radius: 6vw !important;
  }

  #heroStatsModal .heading {
    font-size: 6vw !important;
    margin-bottom: 4vw !important;
  }

  #statsGrid {
    grid-template-columns: 1fr !important;
    gap: 4vw !important;
  }

  #statsGrid>div {
    padding: 4vw !important;
  }

  #statsGrid>div>div:first-child {
    font-size: 4vw !important;
    margin-bottom: 2vw !important;
  }

  #statsGrid>div>div:nth-child(2) {
    font-size: 2.5vw !important;
    margin-bottom: 3vw !important;
  }

  #statsGrid>div>div:last-child span {
    font-size: 2.5vw !important;
  }

  #closeStatsModal {
    font-size: 2rem !important;
    top: 3vw !important;
    right: 4vw !important;
  }
}

@media (max-width: 500px) {
  #heroCarousel>div {
    min-width: 96vw !important;
    width: 96vw !important;
    max-width: 99vw !important;
    font-size: 0.9rem !important;
    padding: 0 0 2vw 0 !important;
  }

  #heroCarousel>div.active {
    width: 99vw !important;
    min-width: 99vw !important;
    max-width: 99vw !important;
  }

  #heroCarousel .hero-emoji {
    font-size: 2.5rem !important;
  }

  /* Hero Stats Modal for very small screens */
  #heroStatsModal>div {
    width: 98vw !important;
    padding: 8vw !important;
    border-radius: 8vw !important;
  }

  #heroStatsModal .heading {
    font-size: 8vw !important;
    margin-bottom: 6vw !important;
  }

  #statsGrid {
    gap: 6vw !important;
  }

  #statsGrid>div {
    padding: 6vw !important;
  }

  #statsGrid>div>div:first-child {
    font-size: 5vw !important;
    margin-bottom: 3vw !important;
  }

  #statsGrid>div>div:nth-child(2) {
    font-size: 3.5vw !important;
    margin-bottom: 4vw !important;
  }

  #statsGrid>div>div:last-child span {
    font-size: 3vw !important;
  }

  #closeStatsModal {
    font-size: 1.8rem !important;
    top: 4vw !important;
    right: 5vw !important;
  }
}

#villainCard {
  font-family: 'Jersey10', sans-serif;
}

#startGameBtn {
  background: #00e5ff;
  color: #000;
  border: none;
  border-radius: 50px;
  padding: 18px 90px;
  font-size: 2vw;
  cursor: pointer;
}

@keyframes slideUp {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-40%);
  }
}

@keyframes fadeInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#cloudsSVG {
  will-change: opacity;
}

#splashContent {
  will-change: opacity, transform;
}

#splashBar {
  will-change: opacity, transform;
}