/* =================================================================
   PlayNight - Enhanced Game Iframe Styles
   Optimized for 2048 and other games
   ================================================================= */

/* Game Container - Enhanced Layout */
.game-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
  align-items: start;
}

/* Game Frame Wrapper - Optimized */
.game-frame-wrapper {
  position: relative;
  background: var(--color-bg-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}

/* Main Game Frame - Responsive */
.game-frame {
  width: 100%;
  height: 100%;
  min-height: 600px;
  border: none;
  display: block;
  background: transparent;
}

/* 2048 Game Specific Optimizations - 同步主样式文件 */
.game-frame.game-2048 {
  width: 100% !important;
  height: 100% !important;
  min-height: 650px !important;    /* 2048游戏需要的最小高度 */
  max-width: none !important;      /* 完全移除宽度限制 */
  max-height: none !important;     /* 完全移除高度限制 */
  aspect-ratio: unset !important;  /* 移除宽高比限制 */
  background: #faf8ef;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  object-fit: contain;             /* 确保内容适应容器 */
  overflow: hidden !important;      /* 防止滚动条 */
}

/* Game Loading Overlay */
.game-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  z-index: 10;
  min-height: 600px;
}

.game-loading .loading-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.loading-progress {
  width: 300px;
  text-align: center;
  max-width: 90%;
}

.loading-progress .progress-bar {
  margin-bottom: var(--spacing-sm);
  height: 6px;
}

/* Game Error Overlay */
.game-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  text-align: center;
  z-index: 10;
  padding: var(--spacing-xl);
  min-height: 600px;
}

.error-icon {
  font-size: var(--font-size-6xl);
  margin-bottom: var(--spacing-lg);
  opacity: 0.7;
}

.error-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  flex-wrap: wrap;
  justify-content: center;
}

/* Game Sidebar */
.game-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  position: sticky;
  top: var(--spacing-xl);
}

/* Game Instructions, Stats, Share */
.game-instructions,
.game-stats,
.share-game {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  border: var(--border-width-thin) solid var(--border-color-light);
}

.game-instructions h3,
.game-stats h3,
.share-game h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

.instructions-content p {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 0;
}

/* Game Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.stats-grid .stat-item {
  text-align: center;
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.stats-grid .stat-number {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.stats-grid .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Share Buttons */
.share-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

.share-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: var(--border-width-thin) solid var(--border-color-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  justify-content: center;
}

.share-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  text-decoration: none;
}

.share-btn .icon {
  font-size: var(--font-size-base);
}

/* Responsive Design */
@media (max-width: 1023px) {
  .game-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .game-sidebar {
    order: -1;
    position: static;
  }

  .game-frame-wrapper {
    min-height: 500px;
  }

  .game-frame {
    min-height: 500px;
  }

  .game-frame.game-2048 {
    width: 100% !important;
    height: 100% !important;
    min-height: 550px !important;    /* 平板设备上的最小高度 */
    max-width: none !important;      /* 移除宽度限制 */
    aspect-ratio: unset !important;  /* 移除宽高比限制 */
  }
}

@media (max-width: 639px) {
  .game-frame-wrapper {
    min-height: 400px;
    margin: 0 -var(--spacing-md);
    border-radius: 0;
  }

  .game-frame {
    min-height: 400px;
  }

  .game-frame.game-2048 {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px !important;    /* 手机设备上的最小高度 */
    max-width: none !important;      /* 移除宽度限制 */
    aspect-ratio: unset !important;  /* 移除宽高比限制 */
  }

  .game-loading,
  .game-error {
    min-height: 400px;
  }

  .share-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
}

/* Fullscreen Mode */
.game-fullscreen .game-container {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.game-fullscreen .game-frame-wrapper {
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
}

.game-fullscreen .game-frame {
  height: 100vh;
  min-height: 100vh;
}

.game-fullscreen .game-sidebar {
  display: none;
}

/* Enhanced Animation for iframe loading */
@keyframes iframePulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.8;
    transform: scale(1);
  }
}

.game-frame.loading {
  animation: iframePulse 2s ease-in-out infinite;
}

/* Print Styles */
@media print {
  .game-frame,
  .game-loading,
  .game-error,
  .game-sidebar {
    display: none !important;
  }
}