/* ============================================================================
 * arcade-theme.css — 통일 아케이드 디자인 시스템 (레트로 네온 + 픽셀 폰트)
 * ----------------------------------------------------------------------------
 * 108개 게임을 "같은 회사 게임"으로 통일하는 lib 공통 테마.
 * 이 파일은 design-director만 수정한다. 게임은 토큰/클래스만 참조(하드코딩 금지).
 *
 * 적용 순서(craftsman): <head>에서 game-utils.js 뒤, 게임 인라인 <style> 앞에
 *   <link rel="stylesheet" href="../lib/arcade-theme.css">
 *
 * 기존 인프라 공존(충돌 회피):
 *   - game-utils.js GameUI: #highScoreDisplay(top:5px right:10px, z:999),
 *     #soundToggle(top:5px left:10px, z:999), #difficultyBtn(top:5px center, z:9999)
 *     → 이 파일은 위 3종을 position:fixed로 침범하지 않는다. .arc-overlay는
 *       position:absolute(컨테이너 기준)이며 z-index를 100(고정 UI 999 미만)으로 둬서
 *       고정 chrome이 항상 오버레이 위에 보이게 한다.
 *   - mobile-controls.css: .mc-* (z:9000~9002, bottom 영역) → arc-* 와 위치/클래스
 *     네임스페이스가 겹치지 않는다. 색은 토큰과 톤을 맞췄다(선택적 정렬, 아래 참고).
 * ============================================================================ */

/* ===== 픽셀 폰트 (웹폰트 차단 환경 대비 monospace 폴백 필수) ===== */
/* Google Fonts CDN 미적용 환경에서도 깨지지 않도록 @font-face로 시도하되,
 * 로드 실패 시 var(--arc-font-display)의 monospace 폴백이 자동 적용된다. */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Press Start 2P'),
       url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
}

/* ===== 디자인 토큰 (레트로 네온 팔레트) ===== */
:root {
  /* 팔레트 — 어두운 배경 + 네온 강조 */
  --arc-bg:        #0a0a1a;   /* 페이지 배경(theme-color와 일치) */
  --arc-surface:   #14142b;   /* 패널/모달 면 */
  --arc-surface-2: #1e1e3f;   /* 보조 면 */
  --arc-text:      #e8e8ff;   /* 본문 텍스트(대비 확보) */
  --arc-muted:     #8a8ab0;   /* 보조 텍스트 */
  --arc-neon:      #00f0ff;   /* 주 강조(시안 네온) */
  --arc-neon-2:    #ff2e97;   /* 보조 강조(마젠타) */
  --arc-neon-3:    #ffe300;   /* 점수/하이라이트 */
  --arc-success:   #39ff88;   /* 성공/승리 */
  --arc-danger:    #ff5252;   /* 위험/실패 */

  /* 간격·반경 */
  --arc-gap:    12px;
  --arc-radius: 14px;

  /* 폰트 — 픽셀 헤드라인 + 가독 본문 (폴백 보장) */
  --arc-font-display: 'Press Start 2P', 'Courier New', monospace;
  --arc-font-body:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* z-index 레이어 (기존 인프라보다 낮게: 고정 UI 999/9999, mc-* 9000~ 보호) */
  --arc-z-overlay: 100;
}

/* ===== 페이지 배경 통일 ===== */
body.arc-body {
  background: var(--arc-bg);
  color: var(--arc-text);
  font-family: var(--arc-font-body);
}

/* ===== 오버레이 (시작/게임오버 풀스크린) =====
 * position:absolute + inset:0 → position:relative 컨테이너(예: .container) 기준으로 채움.
 * 기존 게임의 .overlay 패턴(absolute, 컨테이너 내부)과 동일하게 동작한다.
 * z-index를 100으로 둬서 고정 chrome(하이스코어/사운드/난이도)이 위에 유지된다. */
.arc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--arc-gap);
  background: rgba(10, 10, 26, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  z-index: var(--arc-z-overlay);
}
/* 게임들이 이미 쓰는 .hidden 과 공존: 둘 다 display:none 처리 */
.arc-overlay.hidden { display: none !important; }

/* ===== 타이틀 (픽셀 폰트 + 네온 글로우) ===== */
.arc-title {
  font-family: var(--arc-font-display);
  color: var(--arc-neon);
  font-size: clamp(20px, 6vw, 40px);
  line-height: 1.4;
  margin: 0;
  text-shadow: 0 0 8px var(--arc-neon), 0 0 18px rgba(0, 240, 255, 0.5);
}
.arc-title.danger {
  color: var(--arc-danger);
  text-shadow: 0 0 8px var(--arc-danger), 0 0 18px rgba(255, 82, 82, 0.5);
}

/* ===== 버튼 (네온, 터치타겟 ≥44px) ===== */
.arc-btn {
  font-family: var(--arc-font-display);
  font-size: clamp(11px, 3.5vw, 15px);
  color: var(--arc-bg);
  background: var(--arc-neon);
  border: none;
  border-radius: var(--arc-radius);
  padding: 14px 26px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.arc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.7);
}
.arc-btn:active {
  transform: translateY(0) scale(0.97);
}
.arc-btn:focus-visible {
  outline: 3px solid var(--arc-neon-3);
  outline-offset: 3px;
}
/* 보조 버튼(외곽선형) */
.arc-btn.secondary {
  background: transparent;
  color: var(--arc-neon);
  border: 2px solid var(--arc-neon);
}

/* ===== 패널 / 모달 면 ===== */
.arc-panel {
  background: var(--arc-surface);
  border: 2px solid var(--arc-neon);
  border-radius: var(--arc-radius);
  padding: 20px;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.2);
  color: var(--arc-text);
}

/* ===== HUD (점수 줄) =====
 * 게임 내부 점수 줄(예: snake-pro의 .ui)을 통일하기 위한 컨테이너.
 * flex-wrap + max-width로 모바일 가로 오버플로를 방지한다.
 * 주의: 이건 게임 컨테이너 내부 점수 줄용이다. game-utils.js가 만드는 고정
 *       #highScoreDisplay(top:5px)와는 별개 — 그건 건드리지 않는다. */
.arc-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--arc-font-body);
  color: var(--arc-text);
  font-size: clamp(12px, 3.5vw, 16px);
  padding: 6px 10px;
  max-width: 100vw;
  box-sizing: border-box;
}
.arc-hud .score { color: var(--arc-neon-3); }
.arc-hud .best  { color: var(--arc-neon-3); }

/* ===== 배지 (레벨/콤보) ===== */
.arc-badge {
  display: inline-block;
  font-family: var(--arc-font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--arc-bg);
  background: var(--arc-neon-2);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ===== 접근성: prefers-reduced-motion =====
 * 네온 글로우의 과한 그림자/트랜지션을 줄인다(ReducedMotion 인프라와 일관). */
@media (prefers-reduced-motion: reduce) {
  .arc-title {
    text-shadow: 0 0 6px var(--arc-neon);
  }
  .arc-title.danger {
    text-shadow: 0 0 6px var(--arc-danger);
  }
  .arc-btn {
    transition: none;
  }
  .arc-btn:hover {
    transform: none;
  }
}

/* ===== 게임 하단 콘텐츠 박스 (소개·조작법·팁) =====
 * 108개 게임이 페이지 "아래"에 공통으로 붙이는 정적 콘텐츠 카드.
 * 마크업은 게임마다 동일: <section class="game-article"> 안에
 *   h2(제목) / p(소개) / h3(소제목) / ul>li(조작법·팁)
 * 본문 가독성 우선 → 픽셀 폰트 대신 일반 sans 본문 폰트 + line-height 1.7.
 * 테마 토큰(surface/neon/radius)을 재사용해 네온·다크 감성은 유지한다. */
/* 일부 게임은 인라인 <style>에서 html,body{height:100%;overflow:hidden} 으로
 * 화면을 풀스크린 고정한다 → 아래에 붙은 콘텐츠 카드(.game-article)를
 * 스크롤로 볼 수 없게 된다. 카드가 존재하는 페이지에 한해 세로 스크롤을 허용한다.
 * (캔버스는 touch-action:none 으로 플레이 중 페이지 스크롤이 끼어들지 않음) */
/* 기본 상태: 설명(.game-article)은 접혀 있고 페이지 스크롤은 잠근다.
 * → 게임이 첫 화면을 100% 차지하는 "메인"이 되고, 방향키/스페이스/캔버스 스와이프가
 *   페이지를 스크롤하는 충돌이 원천 차단된다.
 * 설명 토글 버튼(.arc-article-toggle)을 누르면 body 에 .article-open 이 붙어
 * 설명이 펼쳐지고 스크롤이 열린다. */
html:has(.game-article),
body:has(.game-article) {
  overflow: hidden;
  /* 뷰포트 전체 높이를 확보한다. 100% 로 두면(html 이 auto 높이일 때) body 가 콘텐츠
   * 높이로 줄어, 게임의 justify-content:center 가 짧은 body 안에서만 중앙정렬 →
   * 게임이 화면 상단에 붙고 아래로 큰 빈 공간이 생긴다(답답). 100dvh 로 채워야
   * 게임이 화면 한가운데로 온다. */
  min-height: 100vh;
  min-height: 100dvh;
}
/* 펼침: 스크롤 허용(html,body 어느 쪽이 스크롤러든 대응). height 는 건드리지 않는다. */
html:has(body.article-open),
body.article-open {
  overflow-y: auto !important;
}
/* 캔버스 없는 DOM 게임(crossword·sudoku·hangman·워드 등)은 콘텐츠(그리드+단서+
 * 온스크린 키패드)가 화면보다 길 수 있다. 접힘 상태에서 overflow:hidden 이면 하단
 * 키패드가 잘려 입력이 아예 불가능했다("키 없음"). 캔버스가 없는 게임에 한해 세로
 * 스크롤을 허용해 키패드까지 닿게 한다. (캔버스 게임은 잠금 유지 → 스크롤 충돌 방지) */
html:has(.game-article):not(:has(canvas)),
body:has(.game-article):not(:has(canvas)) {
  overflow-y: auto !important;
}

/* 다수 게임이 body 를 flex 로 "화면 중앙정렬"한다. 카드가 두 번째 flex 아이템으로
 * 들어오면 [게임+카드] 그룹 전체가 가운데로 정렬되며 길이가 뷰포트를 넘겨,
 * 게임이 화면 위로 밀려 안 보이거나(잘림) 카드가 게임 위치를 덮는다.
 * → 위 정렬(flex-start)로 바꿔 "게임은 첫 화면 상단, 카드는 그 아래로 스크롤" 시킨다. */
/* 펼쳤을 때만 세로 스택 강제. (접힘 상태에선 게임이 원래 레이아웃대로 화면 중앙을
 * 채워 "메인"으로 보인다 — 위로 쏠려 답답해 보이는 문제 해소.)
 * 펼치면 다수 게임의 body{display:flex}(기본 row)에서 [게임|카드]가 가로로 갈라지고
 * 카드 margin:auto 가 카드를 화면 끝으로 미는 것을 막기 위해 세로 스택으로 바꾼다:
 * 게임은 위, 카드는 그 아래(가로 중앙). */
body.article-open {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* 게임 영역을 첫 화면(100dvh)으로 확보하는 무대.
 * JS 로 캔버스를 사이징하는 게임은 컨테이너 흐름 높이가 0 으로 무너져 카드가 게임 위로
 * 올라타는데, 무대가 한 화면을 잡아주면 카드는 무조건 그 아래로 밀린다.
 * 무대를 쓰는 페이지는 body 를 세로 스택으로 강제(원래 row 였던 게임도 안전). */
body:has(.arc-stage) {
  flex-direction: column !important;
  align-items: stretch !important;
}
.arc-stage {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 설명 토글 버튼 — game-utils.js 가 주입. 첫 화면 하단 중앙에 고정.
 * 접힘: "📖 게임 설명" → 누르면 설명이 펼쳐지고 스크롤 열림 / 펼침: "✕ 닫기".
 * 게임이 메인이므로 작고 은은하게, 단 항상 눌러서 접근 가능하게. */
.arc-article-toggle {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 999px;
  background: rgba(10, 12, 30, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--arc-neon, #00f0ff);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: opacity .18s ease, background .18s ease, transform .12s ease;
}
.arc-article-toggle:hover { background: rgba(20, 24, 52, 0.92); }
.arc-article-toggle:active { transform: translateX(-50%) scale(0.95); }
/* 펼친 상태에선 닫기 버튼 톤을 살짝 다르게(분홍 네온) */
body.article-open .arc-article-toggle {
  border-color: rgba(255, 46, 151, 0.5);
  color: var(--arc-neon-2, #ff2e97);
}

/* 아티클을 읽으려 스크롤하면(게임이 화면 밖) body 에 .arc-reading 이 붙는다
 * (game-utils.js 의 스크롤 핸들러). 그 동안 게임용 고정 크롬(난이도 피커·점수·
 * 사운드·모바일 D-패드/액션/도움말)이 본문 위를 덮지 않도록 숨긴다.
 * 게임으로 되돌아오면(스크롤 업) 즉시 복귀. */
body.arc-reading #difficultyBtn,
body.arc-reading #highScoreDisplay,
body.arc-reading #soundToggle,
body.arc-reading .mc-dpad,
body.arc-reading .mc-actions,
body.arc-reading .mc-help-btn,
body.arc-reading .mc-help-popup {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease;
}

/* 캔버스 위의 터치 제스처(세로 스와이프)가 게임 입력 대신 페이지를 스크롤하지
 * 않도록 한다. 대부분(63/78) 인라인으로 이미 적용 중 — 나머지도 공통 보장.
 * 캔버스 밖(헤더·여백·푸터·아티클)은 그대로 스크롤되어 설명에 도달할 수 있다.
 * (게임별 인라인 canvas 규칙이 있으면 그쪽이 우선) */
canvas {
  touch-action: none;
}

/* 펼침 상태에서만 설명 표시 */
body.article-open .game-article {
  display: block;
}

.game-article {
  /* 기본 접힘 — 게임이 메인. 토글 버튼으로 body.article-open 이 붙으면 펼쳐진다.
   * (콘텐츠는 DOM 에 그대로 있어 크롤링/AdSense 평가에 잡힌다.) */
  display: none;
  max-width: 760px;
  margin: 28px auto;
  padding: 20px 22px;
  box-sizing: border-box;
  background: var(--arc-surface);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: var(--arc-radius);
  color: #c8d0e0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  font-size: 1rem;
  text-align: left;
  /* 긴 단어/URL이 카드 밖으로 삐져나오지 않도록 */
  overflow-wrap: break-word;
  word-break: break-word;
}
.game-article h1,
.game-article h2 {
  margin: 0 0 14px;
  color: var(--arc-neon);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
}
.game-article h3 {
  margin: 22px 0 8px;
  color: var(--arc-neon-2);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}
.game-article p {
  margin: 0 0 12px;
  color: #c8d0e0;
}
.game-article ul {
  margin: 0 0 12px;
  padding-left: 1.2em;
  list-style: disc;
}
.game-article li {
  margin: 4px 0;
  line-height: 1.7;
  color: #c8d0e0;
}
.game-article a {
  color: var(--arc-neon);
  text-decoration: underline;
}
.game-article a:focus-visible {
  outline: 2px solid var(--arc-neon-3);
  outline-offset: 2px;
}

/* 같은 분류 다른 게임 + 아케이드 내비 (내부 링크 → 탐색성·크롤링·SEO) */
.game-related {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 240, 255, 0.18);
}
.game-related h3 {
  margin: 0 0 12px;
  color: var(--arc-neon-2);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.related-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.related-list li { margin: 0; }
.related-list a {
  display: block;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 10px;
  color: #d8e2f0;
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, border-color 0.15s;
}
.related-list a:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
}
.arcade-links {
  margin: 0;
  color: #8a93ab;
  font-size: 0.9rem;
  text-align: center;
}
.arcade-links a {
  color: var(--arc-neon);
  text-decoration: none;
  font-weight: 600;
}
.arcade-links a:hover { text-decoration: underline; }

/* 모바일: 좌우 여백 확보 + 가로 오버플로 0 */
@media (max-width: 768px) {
  .game-article {
    margin: 20px 12px;
    padding: 16px;
    max-width: none;
    font-size: 0.95rem;
  }
  .game-article h1,
  .game-article h2 { font-size: 1.15rem; }
  .game-article h3 { font-size: 1rem; }
  .related-list { grid-template-columns: 1fr; }
}

/* ===== 공통 아케이드 배너 / 점수 팝업 (M-4 통일 규격) =====
   FEVER·OVERDRIVE·COMBO·FRENZY 등 순간 알림 배너의 통일 룩.
   사용: <div class="arc-banner" data-tone="hot">FEVER!</div> + JS로 .classList.toggle('show').
   게임별 bespoke 배너(.fever-banner/.banner 등)를 점진 이행. data-tone 으로 색 변형.
   캔버스 위 배너는 게임 스테이지 컨테이너(position:relative)의 자식으로 둔다. */
.arc-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  font-family: var(--arc-font-display);
  font-size: clamp(0.7rem, 3.4vw, 1rem);
  letter-spacing: 2px;
  color: var(--arc-neon-3);
  text-shadow: 0 0 14px currentColor, 0 0 30px currentColor;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: var(--arc-z-overlay);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.arc-banner.show { opacity: 1; transform: translateX(-50%) scale(1.1); }
.arc-banner[data-tone="hot"]    { color: var(--arc-neon-2); }   /* 핑크/마젠타 — FEVER·FRENZY */
.arc-banner[data-tone="cool"]   { color: var(--arc-neon); }     /* 시안 — COOL·CHAIN */
.arc-banner[data-tone="win"]    { color: var(--arc-success); }  /* 초록 — PERFECT·WIN */
.arc-banner[data-tone="danger"] { color: var(--arc-danger); }   /* 빨강 — DANGER·RAGE */

/* 점수/콤보 팝업 통일 — 위로 떠오르며 사라짐 */
.arc-pop {
  position: absolute;
  font-family: var(--arc-font-body);
  font-weight: bold;
  color: var(--arc-neon-3);
  text-shadow: 0 0 8px currentColor;
  pointer-events: none;
  white-space: nowrap;
  z-index: var(--arc-z-overlay);
  animation: arcPopRise 0.8s ease-out forwards;
}
@keyframes arcPopRise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .arc-banner { transition: none; }
  .arc-pop { animation: none; opacity: 0; }
}

/* ===== 카카오 애드핏 배너 (.arc-ad) =====
 * body{display:flex}(기본 row) 게임에서 광고·푸터가 게임 옆으로 끼어들어
 * 게임이 왼쪽으로 쏠리는 문제 → 게임설명 카드·arc-stage 와 동일 해법으로
 * 세로 스택 강제. 광고는 흐름 맨 아래(게임 → 푸터 → 광고). */
body:has(.arc-ad) {
  flex-direction: column !important;
  align-items: center !important;
}
.arc-ad {
  width: 100%;
  flex: 0 0 auto;
  text-align: center;
  padding: 12px 0;
  min-height: 50px;
}
/* 모바일 터치 컨트롤 게임 — 하단은 고정 컨트롤(D-패드·액션)로, 상단은
 * 에코바(36px)·난이도·사운드·최고점 크롬으로 꽉 차 배너 자리가 없다.
 * 어디에 두든 조작 UI를 가리므로 광고를 숨긴다(수익보다 플레이 우선). */
@media (max-width: 768px) {
  body:has(.mc-dpad) .arc-ad,
  body:has(.mc-actions) .arc-ad {
    display: none;
  }
}
/* 설명 토글(.arc-article-toggle)이 배너를 덮는 경우의 회피는 게임마다 배너
 * 화면 위치가 달라 CSS 상수로 불가 → game-utils.js dodgeAd()가 실측 보정. */
/* 풀스크린 캔버스 게임(vampire 등) — 캔버스가 absolute 로 스테이지 전체를 덮어
 * in-flow 배너가 justify-content:center 에 의해 캔버스 한가운데 떠 버림
 * → 뷰포트 하단 중앙 오버레이로 전환(토글 회피는 dodgeAd 가 처리).
 * fixed 기준: absolute(스테이지 기준)면 에코바 36px 만큼 뷰포트 밖으로 밀림. */
.arc-stage > .arc-ad--overlay {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto;
  padding: 0;
  min-height: 0;
  z-index: 500;
}
