/* Mobile-only overrides for The Directorate theme */

/* Scope to small screens only; this file is linked with media="(max-width: 768px)" */
:root { --mobile-padding: 16px; }

html, body {
  overflow-x: hidden;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Layout sections */
section {
  height: auto !important;
  min-height: 70vh;
  padding: var(--mobile-padding);
  box-sizing: border-box;
}

/* Home */
#home {
  position: relative !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding-left: 0 !important;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.sword-text-logo img {
  width: 75vw !important;
  margin: 20px 0 0 0 !important;
}

.steam-access-logo {
  width: 80vw !important;
  max-width: 90vw !important;
  margin: 8px auto 0 auto !important;
}

/* Menu */
.menu-wrapper {
  top: 16px !important;
  left: 16px !important;
}

.menu-wheel {
  width: 84px !important;
  height: 84px !important;
  cursor: pointer !important;
  animation: spin 4s linear infinite !important;
}

/* Ensure spinning continues on mobile */
.menu-wrapper .menu-wheel {
  animation-play-state: running !important;
}

.menu-wrapper:hover .menu-wheel {
  animation-play-state: paused !important;
}

/* On mobile, don't pause animation on hover */
@media (max-width: 768px) {
  .menu-wrapper:hover .menu-wheel {
    animation-play-state: running !important;
  }
}

.menu-links {
  position: absolute;
  top: 84px !important;
  left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px !important;
  padding: 16px 18px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-10px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.menu-wrapper.active .menu-links {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

.menu-links a {
  font-size: 16px !important;
  line-height: 1.3;
  padding: 10px 8px !important;
  color: #fff !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.menu-links a:hover {
  background: rgba(255, 204, 0, 0.2) !important;
  color: #ffcc00 !important;
}

/* Trailer */
#trailer {
  height: auto !important;
}

/* Make video responsive using aspect-ratio */
.video-wrapper {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  opacity: 1 !important; /* allow interactions when visible */
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.play-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 20 !important;
}

/* About / Features / Media blocks */
#about, #features, #media {
  width: 100% !important;
  max-width: 94vw !important;
  margin: 0 auto !important;
  padding: 24px var(--mobile-padding) !important;
  text-align: left;
  background-size: cover !important;
}

#features { max-width: 94vw !important; }

h2 { font-size: 22px; line-height: 1.25; }
p { font-size: 16px; line-height: 1.6; }

/* Carousel: keep desktop functionality but scale for mobile */
.carousel {
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  margin: 0 auto;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.carousel__item {
  height: 250px !important;
  width: 300px !important;
  left: 50% !important;
  top: 50% !important;
}

.carousel__item--main {
  transform: translate(-50%, -50%) scale(1) !important;
}

.carousel__item--left {
  transform: translate(-70%, -50%) scale(0.9) !important;
}

.carousel__item--right {
  transform: translate(-30%, -50%) scale(0.9) !important;
}

.carousel__item img { 
  width: 100% !important; 
  height: 100% !important;
  object-fit: cover !important;
}

.carousel__btns {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, 180px) !important;
}

.carousel__btn { 
  height: 40px !important; 
  width: 40px !important; 
}

/* Footer */
.site-footer {
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 24px var(--mobile-padding) 8px var(--mobile-padding) !important;
}

.site-footer .info { align-items: center !important; }

.site-footer .info .logos {
  margin-left: 0 !important;
  justify-content: center !important;
  gap: 14px !important;
}

.site-footer .info .logos img {
  width: 32px;
  height: auto;
}

/* Ensure rating image and any footer images scale nicely */
.site-footer img {
  max-width: 140px;
  height: auto;
}

.site-footer .info .legal p {
  margin: 0 !important;
  text-align: center !important;
  margin-left: 0 !important;
  font-size: 12px !important;
}

/* Misc */
.about-text, .features-text { padding: 0 2px; }