/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Google Font: Roboto, Cinzel Decorative, Press Start 2P, Uncial Antiqua, Pirata One */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Press+Start+2P&family=Roboto+Slab:wght@100..900&display=swap');

/* -----------------------------------> Root Colour Palette + Typography */

:root {
  --bg-main: #0b0c10; /* Main Background */
  --bg-panel: #1c1e22; /* Background panel */
  --text-primary: #ffffff; /* Main Text */
  --text-secondary: #58595c; /* Secondary Text */
  --accent-primary: #ffb600; /* Primary Accent */
  --accent-secondary: #00c89a; /* Secondary Accent */

  /* Font families */
  --font-nav: 'Cinzel Decorative', serif; /* Navbar font */
  --font-primary: 'Roboto', serif; /* Primary/main text */
  --font-arcade: 'Press Start 2P', monospace; /* Phaser */
}

/* -----------------------------------> Global styles */

html,
body {
  height: 100%;
}

body {
  background: var(--bg-main);
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 5rem;
}

/* -----------------------------------> Navbar */
#navbar {
  background: var(--bg-panel);
  border-bottom: 2px solid var(--accent-primary);
  font-size: 1.5rem;
}

#navbar .navbar-home {
  color: var(--text-primary) !important;
  font-family: var(--font-nav) !important;
  font-size: 2rem;
  letter-spacing: 2.5px;
  text-decoration: none;
  text-shadow: 1px 1px var(--accent-primary);
  -webkit-transition: color 0.4s, text-shadow 0.4s, -webkit-transform 0.4s;
  transition: color 0.4s, text-shadow 0.4s, -webkit-transform 0.4s;
  -o-transition: color 0.4s, transform 0.4s, text-shadow 0.4s;
  transition: color 0.4s, transform 0.4s, text-shadow 0.4s;
  transition: color 0.4s, transform 0.4s, text-shadow 0.4s, -webkit-transform 0.4s;
}

#navbar .navbar-home:hover {
  color: var(--accent-primary) !important;
  text-decoration: none;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

#navbar .nav-link {
  color: var(--text-primary) !important;
  font-family: var(--font-nav) !important;
  padding: 0.5rem 1rem;
  -webkit-transition: color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, -webkit-transform 0.3s;
  -o-transition: color 0.3s, transform 0.3s;
  transition: color 0.3s, transform 0.3s;
  transition: color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

#navbar .nav-link::after {
  background: var(--accent-primary);
  bottom: 4px;
  content: '';
  height: 2px;
  left: 50%;
  position: absolute;
  -webkit-transition: width 0.3s, left 0.3s;
  -o-transition: width 0.3s, left 0.3s;
  transition: width 0.3s, left 0.3s;
  width: 0;
}

#navbar .nav-link.active,
#navbar .nav-link:hover {
  color: var(--accent-primary) !important;
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* -----------------------------------> Header */

#header {
  border-radius: 8px;
  padding: 1.5rem 0;
}

.header-box {
  background: var(--bg-panel);
  border-radius: 8px;
  display: inline-block;
  padding: 1rem 2rem;
}

#header h1 {
  -webkit-text-stroke: 1px var(--accent-primary);
  color: var(--text-primary);
  font-family: var(--font-primary) !important;
  text-shadow: 2px 2px var(--bg-panel);
  font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
}

.monster-gif {
  width: clamp(20px, 7vw, 60px) !important;
  height: clamp(20px, 7vw, 60px) !important;
}

#header p {
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 2vw, 1.5rem);
}

/* -----------------------------------> How to play Modal */

#howToPlayModal .modal-header {
  background-color: var(--bg-panel);
  border-bottom: 2px solid var(--accent-primary);
  color: var(--accent-primary) !important;
  display: inline-block;
}

#howToPlayModal .modal-header h2 {
  font-family: var(--font-arcade);
  text-align: center;
}

#howToPlayModal .modal-footer {
  background-color: var(--bg-panel);
  border-top: 2px solid var(--accent-primary);
}

#howToPlayModal .modal-body .how-to-play-list p {
  color: var(--text-secondary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: var(--font-primary);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
}

#howToPlayModal .modal-body .how-to-play-list p i {
  color: var(--accent-primary);
  font-size: 1.5rem;
  margin-right: 0.75rem;
  min-width: 1.5rem;
  text-align: center;
}

#howToPlayModal .modal-footer .btn-secondary {
  background-color: var(--bg-main);
}

#howToPlayModal .modal-header .btn-close {
  display: none !important;
}

/* -----------------------------------> Game container */

.main-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#game-border {
  background: var(--bg-main);
  border: 2px solid red;
  border-radius: 4px;
  max-width: 1200px;
  max-height: 900px;
  width: 100%;
}

#game-container {
  height: 100%;
  width: 100%;
}

canvas {
  border-radius: 2px;
  height: 100% !important;
  width: 100% !important;
}

/* -----------------------------------> Difficulty section */

.difficulty-section {
  background: var(--bg-panel);
  border-radius: 12px;
  margin: 0 auto 2rem auto;
  max-width: 480px;
  padding: 1rem;
}

.difficulty-title {
  color: var(--accent-primary);
  font-family: var(--font-arcade);
  font-size: 1.5rem;
  letter-spacing: 2px;
}

.difficulty-btn {
  background: var(--bg-main);
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
  font-family: var(--font-arcade);
  font-size: 1rem;
  margin: 0.3rem;
  -webkit-transition: background 0.2s, color 0.2s, border-color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.15s;
  transition: background 0.2s, color 0.2s, border-color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.15s;
  -o-transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s, -webkit-box-shadow 0.2s,
    -webkit-transform 0.15s;
}

.difficulty-btn:hover,
.difficulty-btn:focus {
  background-color: #ffe08a;
  border-color: #ffb600;
  color: #222;
  outline: none;
  -webkit-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.difficulty-btn.active {
  background-color: #ffb600 !important;
  border-color: #ffb600 !important;
  -webkit-box-shadow: 0 2px 12px 0 rgba(255, 182, 0, 0.07);
  box-shadow: 0 2px 12px 0 rgba(255, 182, 0, 0.07);
  color: #222 !important;
  -webkit-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
}

/* -----------------------------------> Footer */

#footer {
  background: var(--bg-panel);
  border-top: 3px solid var(--accent-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: 1rem;
  padding: 1rem;
}

#footer .footer-link {
  color: var(--accent-secondary);
  text-decoration: none !important;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  transition: color 0.5s;
}
#footer .footer-link:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

#footer-version {
  font-family: var(--font-nav);
  font-size: 1.2rem;
}

#footer-social a {
  color: var(--text-primary);
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-transition: color 0.8s;
  -o-transition: color 0.8s;
  transition: color 0.8s;
}
#footer-social a:hover {
  color: var(--accent-primary);
  -webkit-transition: color 0.8s;
  -o-transition: color 0.8s;
  transition: color 0.8s;
}

#footer .footer-divider {
  border: none;
  border-top: 1.5px dashed var(--accent-primary);
  margin: 2rem 0 1rem;
  opacity: 0.7;
}

#copyright {
  font-size: 1.4rem;
}

/* -----------------------------------> Media queries */

/* Burger Menu */
@media (max-width: 992px) {
  .navbar-collapse .nav-link::after {
    display: none !important;
  }
}

/* Difficulty Section */
@media (max-width: 430px) {
  .difficulty-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    margin: 0 2px;
    min-width: 0;
  }
  .difficulty-btn-group,
  .difficulty-btn-row,
  .row.justify-content-center {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}