/*20251029 골든타임 적용*/
/* Main CSS - Import all component styles */
@import './base/variables.css';
@import './base/reset.css';
@import './components/event-title.css';
@import './components/winners.css';
@import './components/my-prize.css';
@import './components/pagination.css';
@import './components/prize-ranking.css';
@import './components/team-selection.css';
@import './components/game-status.css';
@import './components/event-description.css';
@import './components/event-completion.css';
@import './components/loading.css';
@import './animations/countdown.css';
@import './animations/status-effects.css';
@import './animations/sparkle-button.css';
@import './utils/responsive.css';

@font-face {
    font-family: 'KboDiamondGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'KboDiamondGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'KboDiamondGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}



html, body, #root, #main-container {
  width: 430px;
  min-width: 430px;
  max-width: 430px;
}

/* Legacy game list styles that need game-item context */
#game-list .game-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: stretch;
  height: 250px;
}

#game-list .game-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Highlight animation from animations.css integration */
.highlight-game {
  position: relative;
}

.highlight-game::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: calc(100% + var(--spacing-xl));
  background-color: rgba(255, 0, 0, 0.1);
  border: 2px solid red;
  border-radius: var(--radius-md);
  z-index: 1;
  pointer-events: none;
}

/* ✅ html, body는 전체 너비로 확장 */
html, body {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  /* 텍스트 선택 방지 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ✅ body는 중앙 정렬 */
@media (min-width: 431px) {
  body {
    display: flex;
    justify-content: center;
  }
}

/* ✅ root만 430px 유지 */
#root, #main-container {
  width: 430px;
  min-width: 430px;
  max-width: 430px;
}