.pixel-font {
  font-family: "Press Start 2P", cursive;
  letter-spacing: 0.05em;
}

.nav-link {
  font-family: "Press Start 2P", cursive;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.nav-link:hover {
  transform: scale(1.05);
}

.full-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Hero layout.
   The hero section used to be a 100vh flex box with align-items:center that
   wrapped BOTH the hero row and the ad slot. When the ad script injected its
   banner, the centred block grew and the hero was pushed upwards by half the
   ad's height -- measured at -150px for a 300px banner, which put the <h1>
   behind the fixed header.

   Now the hero row owns its own full-height centring box and the ad sits
   outside it, so nothing the ad network renders can move the hero. */
.hero-section {
  background-size: cover;
  background-position: center;
}

/* On mobile the hero row keeps its existing pt-20 utility for header
   clearance, so no padding is added here -- it would double up. */
@media (min-width: 768px) {
  .hero-main {
    /* Short of a full screen so a slice of the ad below stays visible and
       invites the scroll, while the hero still reads as full-height.
       The 7rem accounts for the header plus the ad's own 3rem top margin. */
    min-height: calc(100vh - 7rem);
    padding-top: var(--header-h);
  }
}

/* Ad slots are fixed-size boxes, not merely reserved minimums.
   The network can render whatever it likes inside, but it cannot change the
   box, so neither the hero above nor any section below can be moved by what
   the ad turns out to be. Sizes are tokens in :root -- see the notes there.

   Two deliberate trade-offs:
     - a creative taller than the box is clipped rather than allowed to push
       the layout around;
     - if the ad is blocked or fails, the box stays blank instead of
       collapsing (collapsing it later would reintroduce a layout shift). */
.hero-ad,
.ad-banner-728 {
  height: var(--ad-slot-h);
  overflow: hidden;
  align-items: flex-start;
}

.hero-ad {
  --ad-slot-h: var(--ad-native-h);
}

.ad-banner-728 {
  --ad-slot-h: var(--ad-banner-h);
}

/* Belt and braces: keep the injected creative from spilling out of the box
   even if it sets its own height. */
.hero-ad > *,
.ad-banner-728 > * {
  max-height: 100%;
}

/* Mobile Header & Menu Styles */
@media (max-width: 768px) {
  /* 确保 header 不会溢出 */
  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* 调整移动端菜单样式 */
  .mobile-menu {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 64px;
    /* 根据header高度调整 */
    width: 100%;
    background-color: #166534;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 49;
  }

  .mobile-menu.show {
    display: block;
  }

  /* 确保容器样式正确 */
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  .mobile-menu .container {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
  }

  .mobile-menu a {
    color: white;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    width: 100%;
    text-align: left;
    transition: background-color 0.2s ease;
  }

  .mobile-menu a:last-child {
    border-bottom: none;
  }

  .mobile-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: none;
  }

  .nav-link {
    font-size: 0.9rem;
    width: 100%;
    display: block;
  }

  .nav-link:hover {
    transform: none;
  }

  /* 调整 header 内容布局 */
  header nav {
    width: 100%;
  }

  header .flex {
    width: 100%;
  }
}

html,
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* 像素字体类 */
.pixel-font {
    font-family: 'Press Start 2P', system-ui, -apple-system, sans-serif;
}

/* 添加通用字体类 */
:root {
    /* Fixed-header height, and the hard size cap for each ad slot.
       These are the only numbers to touch if the real creatives differ:
       measure the rendered ad in production and adjust. The native slot is
       taller on mobile because native units stack into one column there. */
    --header-h: 4.5rem;
    --ad-native-h: 250px;
    --ad-banner-h: 90px;

    /* 英文默认 */
    --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* 中文优化 */
    --font-chinese: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', var(--font-primary);
    
    /* 日文优化 */
    --font-japanese: 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', var(--font-primary);
    
    /* 韩文优化 */
    --font-korean: 'Malgun Gothic', 'Apple SD Gothic Neo', var(--font-primary);
    
    /* 阿拉伯文优化 */
    --font-arabic: 'Arabic UI Text', 'Segoe UI', var(--font-primary);
    
    /* 泰文优化 */
    --font-thai: 'Leelawadee UI', 'Thonburi', var(--font-primary);
}

/* Native ad units stack into a single column on phones, so the slot needs a
   little more room there. Must come after the :root above to win the cascade. */
@media (max-width: 767px) {
    :root {
        --ad-native-h: 280px;
    }
}

/* 语言特定样式 */
[lang="zh"], 
[lang="zh-CN"] {
    font-family: var(--font-chinese);
}

[lang="zh-TW"] {
    font-family: var(--font-chinese);
}

[lang="ja"] {
    font-family: var(--font-japanese);
}

[lang="ko"] {
    font-family: var(--font-korean);
}

[lang="ar"] {
    font-family: var(--font-arabic);
    direction: rtl;
}

[lang="th"] {
    font-family: var(--font-thai);
}

/* 非像素字体的文本应使用这些字体 */
body {
    font-family: var(--font-primary);
}

/* 确保像素字体仍然保持原样 */
.pixel-font {
    font-family: 'Press Start 2P', cursive !important;
}

/* Ad Container Responsive Styles */
#container-9553036e739d270ac0fc844f4edae732 {
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

/* Ensure ad content doesn't break mobile layout */
@media (max-width: 768px) {
    #container-9553036e739d270ac0fc844f4edae732 {
        max-width: 100vw;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    /* Prevent ads from overflowing on small screens */
    #container-9553036e739d270ac0fc844f4edae732 * {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Handle iframes and embedded content */
    #container-9553036e739d270ac0fc844f4edae732 iframe,
    #container-9553036e739d270ac0fc844f4edae732 img,
    #container-9553036e739d270ac0fc844f4edae732 div {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    #container-9553036e739d270ac0fc844f4edae732 {
        max-width: 768px;
    }
}