/* Basic resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Pastel theme variables.  The site uses a single light colour scheme
   throughout.  These variables define the colours for backgrounds,
   text, accents, buttons and popovers. */
:root {
  --bg-color: #f6f4ee;
  --text-color: #44545a;
  --accent-color: #3caea3;
  --secondary-color: rgba(255, 255, 255, 0.6);
  --button-text: #ffffff;
  --btn-primary-bg: linear-gradient(45deg, #3caea3, #2f80ed);
  --btn-secondary-bg: rgba(0, 0, 0, 0.05);
  --popover-bg: rgba(255, 255, 255, 0.95);
  --popover-text: #44545a;

  /* Colours for the banner gradient inspired by the reference.  The
     background begins with a soft sky blue and fades to a gentle
     lavender near the bottom. */
  --banner-start: #c6e6f5;
  --banner-end: #e6d7fa;
  /* Card background for the logo behind the site name.  A dark navy
     gradient adds contrast and improves legibility. */
  --logo-card-start: #052e50;
  --logo-card-end: #064a73;
}

/* Each section fills the viewport and snaps into view when scrolling */
.section {
  position: relative;
  height: 100vh;
  width: 100vw;
  scroll-snap-align: start;
  overflow: hidden;
}

/* Banner section styles */
#banner-section {
  /* Use a subtle gradient reminiscent of the polished hero
     illustration.  The gradient flows vertically from sky blue to
     lavender. */
  background: linear-gradient(to bottom, var(--banner-start) 0%, var(--banner-end) 100%);
  color: var(--text-color);
}

#bannerCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  pointer-events: none;
}

/* Dark card behind the logo to improve contrast.  It uses a
   gradient and a subtle shadow. */
.logo-card {
  display: inline-block;
  padding: 1rem;
  border-radius: 12px;
  background: linear-gradient(45deg, var(--logo-card-start), var(--logo-card-end));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
}

.site-logo {
  width: 160px;
  max-width: 60vw;
  pointer-events: auto;
  display: block;
  margin: 0 auto;
}

.headline {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.rotating-text {
  display: inline-block;
  color: var(--accent-color);
  white-space: nowrap;
}

.banner-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  pointer-events: auto;
}

.btn {
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.btn.primary {
  background: var(--btn-primary-bg);
  color: var(--button-text);
}

.btn.primary:hover {
  filter: brightness(1.1);
}

.btn.secondary {
  background: var(--btn-secondary-bg);
  color: var(--text-color);
  backdrop-filter: blur(4px);
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.btn.secondary:hover {
  background: var(--secondary-color);
}

.btn.small {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 20px;
}

.btn.small.close-btn {
  margin-top: 1rem;
  background: transparent;
  color: #555;
  border: 1px solid #aaa;
}

/* The theme toggle button has been removed to simplify the design. */

/* Removed the scrolling game title bar.  A static heading is now part of
   the HUD instead of an animated bar. */

/* Adjust canvas for 2D game.  With the title bar removed the canvas occupies
   the full height of its parent and the company banner slides over the
   bottom portion. */
#gameCanvas.game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Game section styles */
#game-section {
  background: var(--bg-color);
  color: var(--text-color);
}

#gameCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

#hud {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.7rem 1.2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  color: var(--text-color);
  transition: background-color 0.3s ease;
}

/* HUD title styling */
#hud-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* Company banner styles.  This banner sits fixed to the bottom of the
   game section and slides up when active.  It adapts to the current
   theme and spans the full width of the viewport. */
.company-banner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: var(--secondary-color);
  backdrop-filter: blur(4px);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.company-banner.visible {
  transform: translateY(0);
}

.banner-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 90%;
  max-width: 1000px;
}

.banner-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--secondary-color);
  padding: 4px;
}
.banner-logo.hidden {
  display: none;
}

.banner-text h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.banner-text p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Additional instructions styling within the HUD */
#instructions {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  opacity: 0.8;
  max-width: 200px;
}

#score {
  font-weight: 500;
  color: var(--text-color);
}

.popover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--popover-bg);
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
  z-index: 3;
  max-width: 80vw;
  color: var(--popover-text);
  backdrop-filter: blur(5px);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.popover.hidden {
  display: none;
}

/* Popover logo styling */
.popover-logo {
  max-width: 120px;
  max-height: 80px;
  margin: 0 auto 1rem auto;
  display: block;
}
.popover-logo.hidden {
  display: none;
}

/* Contact overlay styling */
.contact-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.contact-overlay.hidden {
  display: none;
}

.contact-modal {
  background: #fff;
  color: #222;
  padding: 2rem;
  border-radius: 8px;
  width: min(90vw, 500px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.contact-modal h2 {
  margin-bottom: 0.5rem;
  font-size: 1.7rem;
}

.contact-modal p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #555;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.7rem;
  margin-bottom: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.9rem;
}

.contact-form button {
  width: 100%;
  margin-top: 0.5rem;
}

.contact-response {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.contact-response.hidden {
  display: none;
}

.direct-email a {
  color: #0066cc;
  text-decoration: underline;
}

/* Responsive typography */
@media screen and (max-width: 600px) {
  .headline {
    font-size: 1.7rem;
  }
  .site-logo {
    width: 150px;
  }
  .banner-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Loading overlay for the game.  This covers the entire game canvas
   while assets and terrain are being generated.  It is hidden by
   JavaScript once everything is ready. */
.loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(246, 244, 238, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  z-index: 5;
}
.loading-screen.hidden {
  display: none;
}