/* roulang page: index */
:root {
      --bg-main: #0D0F12;
      --bg-card: #161A22;
      --color-yellow: #FACC15;
      --color-orange: #FB923C;
      --color-green: #22C55E;
      --color-pink: #EC4899;
      --text-main: #FFFFFF;
      --text-sub: #94A3B8;
      --border-light: rgba(255, 255, 255, 0.1);
      --btn-shadow: 0 4px 0 #CA8A04;
      --btn-shadow-orange: 0 4px 0 #C2410C;
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
    }
    .game-btn-yellow {
      background: linear-gradient(180deg, #FDE047 0%, #EAB308 100%);
      color: #000;
      font-weight: 800;
      border-radius: 9999px;
      box-shadow: 0 4px 0 #A16207;
      transition: all 0.15s ease-in-out;
    }
    .game-btn-yellow:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 #A16207;
    }
    .game-btn-yellow:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #A16207;
    }
    .game-btn-orange {
      background: linear-gradient(180deg, #FB923C 0%, #EA580C 100%);
      color: #FFF;
      font-weight: 800;
      border-radius: 9999px;
      box-shadow: 0 4px 0 #9A3412;
      transition: all 0.15s ease-in-out;
    }
    .game-btn-orange:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 #9A3412;
    }
    .game-btn-orange:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #9A3412;
    }
    .card-glass {
      background: rgba(22, 26, 34, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 1.25rem;
    }
    .card-glass:hover {
      border-color: rgba(250, 204, 21, 0.3);
    }
    .badge-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    /* 双层转单层紧凑吸顶导航 */
    #siteHeader {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #siteHeader.scrolled {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      background: rgba(13, 15, 18, 0.95);
      backdrop-filter: blur(16px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }
    #siteHeader.scrolled #topBar {
      display: none;
    }
    #siteHeader.scrolled #channelBar {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    /* 隐藏滚动条但保留功能 */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category1 */
:root {
        --bg-main: #0D0F12;
        --bg-card: #161A22;
        --color-yellow: #FACC15;
        --color-orange: #FB923C;
        --color-green: #22C55E;
        --color-pink: #EC4899;
        --text-main: #FFFFFF;
        --text-sub: #94A3B8;
        --border-light: rgba(255, 255, 255, 0.1);
        --btn-shadow: 0 4px 0 #CA8A04;
        --btn-shadow-orange: 0 4px 0 #C2410C;
      }
      body {
        background-color: var(--bg-main);
        color: var(--text-main);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
      }
      .game-btn-yellow {
        background: linear-gradient(180deg, #FDE047 0%, #EAB308 100%);
        color: #000;
        font-weight: 800;
        border-radius: 9999px;
        box-shadow: 0 4px 0 #A16207;
        transition: all 0.15s ease-in-out;
      }
      .game-btn-yellow:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #A16207;
      }
      .game-btn-yellow:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #A16207;
      }
      .game-btn-orange {
        background: linear-gradient(180deg, #FB923C 0%, #EA580C 100%);
        color: #FFF;
        font-weight: 800;
        border-radius: 9999px;
        box-shadow: 0 4px 0 #9A3412;
        transition: all 0.15s ease-in-out;
      }
      .game-btn-orange:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #9A3412;
      }
      .game-btn-orange:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #9A3412;
      }
      .card-glass {
        background: rgba(22, 26, 34, 0.85);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1.25rem;
      }
      .card-glass:hover {
        border-color: rgba(250, 204, 21, 0.3);
      }
      .badge-pill {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        border: 1px solid rgba(255, 255, 255, 0.15);
      }
      /* 双层转单层紧凑吸顶导航 */
      #siteHeader {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #siteHeader.scrolled {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        background: rgba(13, 15, 18, 0.95);
        backdrop-filter: blur(16px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      }
      #siteHeader.scrolled #topBar {
        display: none;
      }
      #siteHeader.scrolled #channelBar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
      /* 隐藏横向滚动条 */
      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }