/**
 * Component Styles
 * Extracted from inline styles in Astro components and static game pages
 * 
 * Requirements: 3.2, 3.3, 7.1, 7.2
 */

/* Import CSS Variables - MUST be at the top of the file */
@import url("/styles/variables.css");

/* Shared styles for backup static pages */

/* Audio controls */
audio {
  width: 210px;
}

@media (max-width: 980px) {
  audio {
    width: 120px;
  }
  .game-card .game-iframe-sprunki {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   Game Iframe Container Styles
   Used by: GameLayout.astro, static game pages
   ========================================================================== */

.game-card .game-iframe-sprunki {
  float: left;
  width: 69%;
  margin: 0;
  padding: 0;
  height: 600px;
  background-color: var(--color-bg-white, #fff);
  background-image: var(--bg-image, none);
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.game .game-l-2 img {
  width: 100% !important;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   Fullscreen Button Styles
   Used by: GameLayout.astro, incredibox.astro
   ========================================================================== */

#fullscreen-btn {
  position: absolute;
  top: var(--spacing-md, 10px);
  right: var(--spacing-md, 10px);
  z-index: var(--z-index-overlay, 10);
  background-color: var(--color-overlay, rgba(0, 0, 0, 0.6));
  color: var(--color-text-white, white);
  border: none;
  border-radius: var(--radius-md, 5px);
  cursor: pointer;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  font-size: 16px;
  display: none;
}

#fullscreen-btn:hover {
  background-color: var(--color-overlay-dark, rgba(0, 0, 0, 0.8));
}

/* ==========================================================================
   Iframe Styles
   ========================================================================== */

iframe {
  background-color: rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Responsive Styles for Game Iframe
   ========================================================================== */

@media (max-width: 768px) {
  .game-card .game-iframe-sprunki {
    height: 330px;
  }
}

/* ==========================================================================
   Controls / How-to-play card (injected by GameLayout.astro)
   ========================================================================== */

.controls-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  box-shadow: var(--shadow-glow-sm);
}

.controls-card > h2,
.controls-card > h3,
.controls-card > h4 {
  margin-top: 0;
}

.controls-card ul {
  margin: var(--spacing-md) 0 0;
  padding-left: 1.25em;
}

.controls-card kbd,
.controls-card code {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

/* ==========================================================================
   Star Rating Component Styles
   Used by: StarRating.astro, static game pages
   ========================================================================== */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.star-icon {
  flex-shrink: 0;
}

.star-icon--filled {
  fill: #ffd223;
}

.star-icon--empty {
  fill: #9e9e9e;
}

.score-text {
  margin-left: 4px;
}

/* ==========================================================================
   Breadcrumb Navigation Styles
   Used by: static game pages
   ========================================================================== */

.about-content > p > a[href="/"] {
  float: none;
  display: inline;
}

/* Configuration container used by GameLayout iframe loader */
#game-config {
  display: none;
}