/*
 * daily-games.css — "Daily Games Top 10" 위젯(_daily_games_section.php) 자족 스타일.
 * 홈 index 는 테마(play.css)+자체 인라인으로 스타일되므로 이 파일이 필요 없고,
 * standalone 인 more.php(앱 더보기)가 이 파일을 로드해 홈과 동일한 모양을 낸다.
 * 모두 .fs-daily-games 하위로 스코프(호스트 페이지의 다른 스타일과 충돌 방지).
 * 레이팅 색상(.pz-rating-*)·인증 뱃지(.ocpv-verified-badge)는 midgame-user-popup.css 에서 옴.
 */
/* 외곽선 = 카드 테두리 1줄(표 그리드와 동일한 1px #ddd, 라운드). 표는 내부 그리드만(상/좌 테두리),
   외곽 perimeter 는 제거해 카드 테두리와 겹치지 않게 → 직선부·라운드부 모두 동일 두께/색의 한 줄. */
.fs-daily-games { width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid #ddd; }
.fs-daily-games .level-section { margin: 0; }
.fs-daily-games .level-title {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  height: 25px; line-height: 25px; padding-left: 10px; font-size: 17px;
  background-color: #000; color: #fff; overflow: visible; margin: 0;
}
/* 앱(셸 iframe 안)에서만 검정 제목 높이 ↑ — 웹 index 위젯은 그대로 */
html.fs-embed .fs-daily-games .level-title { height: 28px; line-height: 28px; }
.fs-daily-games .level-title a {
  color: #fff; text-decoration: none; background: transparent;
  -webkit-tap-highlight-color: transparent; outline: none; transition: none;
  touch-action: manipulation;
}
.fs-daily-games .level-title a:hover,
.fs-daily-games .level-title a:focus,
.fs-daily-games .level-title a:active {
  color: inherit; text-decoration: none; background: transparent; outline: none;
}
.fs-daily-games .daily-games-title > :first-child {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden;
}
.fs-daily-games .daily-games-tabs {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; padding-right: 6px;
}
.fs-daily-games .daily-games-tab {
  border: 0; background: transparent; color: #fff; font-size: 13px; line-height: 1;
  padding: 4px 3px; border-radius: 4px; cursor: pointer; opacity: .72;
  appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  outline: none; transition: none;
}
.fs-daily-games .daily-games-tab:not(.active):hover,
.fs-daily-games .daily-games-tab:not(.active):focus,
.fs-daily-games .daily-games-tab:not(.active):active { background: transparent; }
.fs-daily-games .daily-games-tab.active { background: rgba(255,255,255,.22); opacity: 1; font-weight: 700; }
.fs-daily-games .daily-games-tab.active:hover,
.fs-daily-games .daily-games-tab.active:focus,
.fs-daily-games .daily-games-tab.active:active { background: rgba(255,255,255,.22); }
.fs-daily-games .daily-games-separator { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1; }

/* index와 FlipSight home의 분리형 종목 탭: 카드/테이블 바로 위의 독립된 한 줄. */
.fs-index-widget-shell { width: 100%; min-width: 0; }
.fs-index-widget-shell > .fs-daily-games { width: 100%; }
.daily-games-tabs-row {
  /* flex-end 정렬은 넘친 앞부분(첫 탭)을 스크롤로도 볼 수 없게 잘라낸다(2026-09-13, 스페인어 앱 리더보드).
     flex auto margin 방식은 WebKit 에서 넘침 시에도 오른쇽 정렬을 유지해 같은 문제가 남았다.
     block + text-align:right 로 두면 여유가 있을 땐 오른쪽 정렬, 넘칠 땐 왼쪽부터 놓여 처음부터 가로 스크롤된다. */
  display: block; text-align: right;
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 0 0 4px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  background: transparent; border: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.daily-games-tabs-row::-webkit-scrollbar { display: none; }
.daily-games-tabs-row .daily-games-tabs {
  display: inline-flex; align-items: center; justify-content: flex-end; vertical-align: middle;
  width: max-content; min-width: 0; gap: 2px; padding: 0; white-space: nowrap;
}
.daily-games-tabs-row .daily-games-separator { display: none; }
.daily-games-tabs-row .daily-games-tab {
  flex: 0 0 auto; border: 0; border-radius: 999px; appearance: none; -webkit-appearance: none;
  padding: 4px 5px; background: transparent; color: #4b5563; font-size: 12px; line-height: 1;
  opacity: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.daily-games-tabs-row .daily-games-tab:not(.active):hover,
.daily-games-tabs-row .daily-games-tab:not(.active):focus,
.daily-games-tabs-row .daily-games-tab:not(.active):active { background: transparent; color: #254ead; outline: none; }
.daily-games-tabs-row .daily-games-tab.active,
.daily-games-tabs-row .daily-games-tab.active:hover,
.daily-games-tabs-row .daily-games-tab.active:focus,
.daily-games-tabs-row .daily-games-tab.active:active {
  background: #254ead; color: #fff; font-weight: 700; outline: none;
}
html.fs-app-theme-dark .daily-games-tabs-row .daily-games-tab { color: var(--fs-app-text-2, #cbd5e1); }
html.fs-app-theme-dark .daily-games-tabs-row .daily-games-tab.active {
  background: var(--fs-app-primary, #60a5fa); color: var(--fs-app-bg, #0f172a);
}

.fs-daily-games .index-table { width: 100%; max-width: 100%; margin: 0; border-collapse: collapse; table-layout: auto; }

/* 라이트 모드 행 교차 배경 — 메인 index 위젯(play.css .index-table tr:nth-child(even) #f9f9f9)과 동일.
   index.php 는 play.css 로 이미 적용되지만 flipsight/home·more 등 단독 페이지는 play.css 를 싣지 않아
   흰색만 나왔다. 다크 모드는 app-theme.css 가 !important 로 따로 칠한다.
   ★ 홀수 행에도 흰색을 명시한다 — 투명으로 두면 페이지 배경(#f8fafc)이 비쳐 #f9f9f9 와 거의 같은 색이
     되어(249,249,249 vs 248,250,252) 교차가 눈에 보이지 않았다(flipsight/home). */
.index-table tbody tr { background-color: #fff; }
.index-table tbody tr:nth-child(even) { background-color: #f9f9f9; }
.fs-daily-games .index-table th, .fs-daily-games .index-table td {
  border: 0; border-top: 1px solid #ddd; border-left: 1px solid #ddd;   /* 내부 그리드만 — 외곽 perimeter 는 카드 테두리가 담당 */
  text-align: center; vertical-align: middle; font-size: 14px; padding: 5px 3px; white-space: nowrap;  /* 행높이=리더보드(.pz-rank-table)와 동일: 고정높이 제거 + 수직패딩 5px */
}
[data-daily-games-root] .index-table th:first-child,
[data-daily-games-root] .index-table td:first-child,
[data-top-leaderboard-root] .index-table th:first-child,
[data-top-leaderboard-root] .index-table td:first-child {
  width: 26px !important;
  min-width: 26px;
  max-width: 26px;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.fs-daily-games .index-table th:nth-child(2),
.fs-daily-games .index-table td:nth-child(2) {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.fs-daily-games .index-table td:nth-child(2) {
  max-width: 0;
}
.fs-daily-games .index-table th:nth-child(3),
.fs-daily-games .index-table td:nth-child(3),
.fs-daily-games .index-table th:nth-child(4),
.fs-daily-games .index-table td:nth-child(4) {
  width: 1% !important;
}
.fs-daily-games .index-table th:nth-child(5),
.fs-daily-games .index-table td:nth-child(5),
.fs-daily-games .index-table th:nth-child(6),
.fs-daily-games .index-table td:nth-child(6),
.fs-daily-games .index-table th:nth-child(7),
.fs-daily-games .index-table td:nth-child(7) {
  width: 1% !important;
}
[data-top-leaderboard-active="arena"] .index-table th:nth-child(3),
[data-top-leaderboard-active="arena"] .index-table td:nth-child(3),
[data-top-leaderboard-active="arena"] .index-table th:nth-child(4),
[data-top-leaderboard-active="arena"] .index-table td:nth-child(4),
[data-top-leaderboard-active="arena"] .index-table th:nth-child(5),
[data-top-leaderboard-active="arena"] .index-table td:nth-child(5) {
  width: 30px !important;
  padding-left: 2px;
  padding-right: 2px;
}
[data-daily-games-active="arena"] .index-table th:nth-child(3),
[data-daily-games-active="arena"] .index-table td:nth-child(3) {
  width: 48px !important;
  padding-left: 3px;
  padding-right: 3px;
}
[data-daily-games-active="arena"] .index-table th:nth-child(4),
[data-daily-games-active="arena"] .index-table td:nth-child(4),
[data-daily-games-active="arena"] .index-table th:nth-child(5),
[data-daily-games-active="arena"] .index-table td:nth-child(5),
[data-daily-games-active="arena"] .index-table th:nth-child(6),
[data-daily-games-active="arena"] .index-table td:nth-child(6) {
  width: 30px !important;
  padding-left: 2px;
  padding-right: 2px;
}
[data-top-leaderboard-active="arena"] .index-table th:nth-child(6),
[data-top-leaderboard-active="arena"] .index-table td:nth-child(6) {
  width: 42px !important;
  padding-left: 3px;
  padding-right: 3px;
}
[data-daily-games-active="arena"] .index-table th:nth-child(7),
[data-daily-games-active="arena"] .index-table td:nth-child(7),
[data-top-leaderboard-active="arena"] .index-table th:nth-child(7),
[data-top-leaderboard-active="arena"] .index-table td:nth-child(7) {
  width: 42px !important;
  padding-left: 3px;
  padding-right: 3px;
}
.fs-daily-games .index-table tr > *:first-child { border-left: 0; }        /* 좌측 외곽선 제거(카드 테두리) */
.fs-daily-games .index-table thead tr:first-child > * { border-top: 0; }   /* 상단 외곽선 제거(제목바 아래) */
.fs-daily-games .index-table th { background-color: #f2f2f2; color: #000; font-weight: 700; }
.fs-daily-games .index-table tr:nth-child(even) { background-color: #f9f9f9; }
.fs-daily-games .daily-games-body[hidden] { display: none; }
/* 표를 카드 하단 라운드까지 닿게 해 하단 모서리도 상단처럼 둥글게(overflow 클리핑). 내부 래퍼의 인라인 padding-bottom 상쇄. */
.fs-daily-games > div:last-child { padding-bottom: 0 !important; }

.fs-daily-games .midgame-player { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1; }
.fs-daily-games .midgame-photo { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: #eee; display: block; }
.fs-daily-games .midgame-nick { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; line-height: 1; }
.fs-daily-games .midgame-id-text {
  display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.1; vertical-align: middle; color: #254EAD;
}
.fs-daily-games .midgame-id-text > [data-midgame-user],
.fs-daily-games .midgame-id-text > [data-battle-user] {
  display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.1; cursor: pointer; color: inherit; text-decoration: none;
}
.fs-daily-games .midgame-id-text > [data-midgame-user]:hover,
.fs-daily-games .midgame-id-text > [data-midgame-user]:focus,
.fs-daily-games .midgame-id-text > [data-battle-user]:hover,
.fs-daily-games .midgame-id-text > [data-battle-user]:focus {
  color: #0d6efd; text-decoration: none; outline: none;
}
.fs-daily-games .ocpv-verified-badge {
  cursor: help;
  flex: 0 0 1em !important;
  width: 1em !important;
  min-width: 1em !important;
  height: 1em !important;
  aspect-ratio: 1;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  pointer-events: auto !important;
  position: relative;
  transform: none !important;
  z-index: 1;
}
/* PC 는 표 폭에 여유가 있어 숫자 칸(도전·최고·평균 등)을 조금 넓혀 읽기 편하게 한다.
   아레나 탭은 메달 5칸을 따로 좁게 잡아 두므로 제외한다. */
@media (min-width: 768px) {
  [data-daily-games-root]:not([data-daily-games-active="arena"]) .index-table th:nth-child(3),
  [data-daily-games-root]:not([data-daily-games-active="arena"]) .index-table td:nth-child(3),
  [data-daily-games-root]:not([data-daily-games-active="arena"]) .index-table th:nth-child(4),
  [data-daily-games-root]:not([data-daily-games-active="arena"]) .index-table td:nth-child(4),
  [data-daily-games-root]:not([data-daily-games-active="arena"]) .index-table th:nth-child(5),
  [data-daily-games-root]:not([data-daily-games-active="arena"]) .index-table td:nth-child(5) {
    min-width: 66px;
    padding-left: 6px;
    padding-right: 6px;
  }
}
@media (max-width: 380px) {
  .fs-daily-games .index-table th,
  .fs-daily-games .index-table td {
    padding-left: 2px;
    padding-right: 2px;
  }
  [data-daily-games-root] .index-table th:first-child,
  [data-daily-games-root] .index-table td:first-child,
  [data-top-leaderboard-root] .index-table th:first-child,
  [data-top-leaderboard-root] .index-table td:first-child { width: 26px !important; min-width: 26px; max-width: 26px; }
  .fs-daily-games .index-table th:nth-child(3),
  .fs-daily-games .index-table td:nth-child(3),
  .fs-daily-games .index-table th:nth-child(4),
  .fs-daily-games .index-table td:nth-child(4) {
    width: 1% !important;
  }
  .fs-daily-games .index-table th:nth-child(5),
  .fs-daily-games .index-table td:nth-child(5),
  .fs-daily-games .index-table th:nth-child(6),
  .fs-daily-games .index-table td:nth-child(6),
  .fs-daily-games .index-table th:nth-child(7),
  .fs-daily-games .index-table td:nth-child(7) {
    width: 1% !important;
  }
}