/* roulang page: index */
:root {
      --bg-main: #0D0F12;
      --card-bg: #161920;
      --gold-main: #FFB800;
      --crimson-main: #E50914;
    }
    body {
      background-color: var(--bg-main);
      color: #F3F4F6;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    /* 票根卡片内凹剪裁效果 */
    .ticket-stub {
      position: relative;
      background: #161920;
    }
    .ticket-stub::before, .ticket-stub::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      background-color: var(--bg-main);
      border-radius: 50%;
      top: 68%;
      z-index: 10;
    }
    .ticket-stub::before {
      left: -11px;
    }
    .ticket-stub::after {
      right: -11px;
    }
    /* 跑马灯动画 */
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    .animate-marquee {
      display: flex;
      width: 200%;
      animation: marquee 28s linear infinite;
    }
    .animate-marquee:hover {
      animation-play-state: paused;
    }
    /* 微光扫描线 */
    .screen-glare {
      background: radial-gradient(circle at 50% 0%, rgba(255, 184, 0, 0.15) 0%, rgba(13, 15, 18, 0) 70%);
    }

/* roulang page: category2 */
:root {
      --bg-main: #0D0F12;
      --card-bg: #161920;
      --gold-main: #FFB800;
      --crimson-main: #E50914;
    }
    body {
      background-color: var(--bg-main);
      color: #F3F4F6;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    .ticket-cut-left, .ticket-cut-right {
      position: relative;
    }
    .ticket-cut-left::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background-color: var(--bg-main);
      border-radius: 50%;
      box-shadow: inset -2px 0 5px rgba(0,0,0,0.5);
    }
    .ticket-cut-right::after {
      content: '';
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background-color: var(--bg-main);
      border-radius: 50%;
      box-shadow: inset 2px 0 5px rgba(0,0,0,0.5);
    }
    .skew-diagonal-banner {
      clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category1 */
:root {
      --bg-main: #0D0F12;
      --card-bg: #161920;
      --gold-main: #FFB800;
      --crimson-main: #E50914;
    }
    body {
      background-color: var(--bg-main);
      color: #F3F4F6;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    .ticket-stub-border {
      background-image: radial-gradient(circle at 0 50%, transparent 10px, #161920 11px),
                        radial-gradient(circle at 100% 50%, transparent 10px, #161920 11px);
    }
    .screen-radial-glow {
      background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 184, 0, 0.15), transparent 70%);
    }
    .mesh-ambient {
      background: radial-gradient(circle at 80% 20%, rgba(229, 9, 20, 0.08) 0%, transparent 40%),
                  radial-gradient(circle at 10% 80%, rgba(255, 184, 0, 0.06) 0%, transparent 40%);
    }
    .perforated-line {
      border-top: 1px dashed rgba(255, 255, 255, 0.18);
    }