:root {
      --bg: #050303;
      --ink: #17100d;
      --red: #d71920;
      --red-dark: #781016;
      --gold: #f8c74b;
      --gold-soft: #ffe4a0;
      --paper: #fff8ec;
      --paper-2: #f4eadc;
      --muted: #69574b;
      --line: rgba(248, 199, 75, .28);
      --max: 1180px;
      --shadow: 0 24px 70px rgba(0, 0, 0, .34);
      font-family: Arial, "Helvetica Neue", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
      letter-spacing: 0;
    }

    body {
      min-width: 320px;
      color: var(--ink);
      background: var(--bg);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      max-width: 100%;
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    p {
      line-height: 1.74;
    }

    .wrap {
      width: min(var(--max), calc(100% - 48px));
      margin: 0 auto;
    }

    .topbar {
      color: #fff;
      background: linear-gradient(180deg, #120404 0%, #070303 100%);
      border-bottom: 1px solid rgba(248, 199, 75, .24);
    }

    .topbar-inner {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .brand-mark {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 8px;
      color: #190605;
      background:
        linear-gradient(145deg, #fff1a8 0%, #f5bd37 45%, #cf141c 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 16px 34px rgba(215, 25, 32, .34);
      font-size: 19px;
      font-weight: 950;
    }

    .brand-word {
      display: grid;
      gap: 4px;
    }

    .brand-word strong {
      color: #fff;
      font-size: 34px;
      line-height: .9;
      font-weight: 950;
      text-transform: uppercase;
      text-shadow: 2px 2px 0 var(--red), 4px 4px 0 #4d070b;
      white-space: nowrap;
    }

    .brand-word span {
      color: var(--gold-soft);
      font-size: 12px;
      font-weight: 850;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .btn,
    .hero-btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 22px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .btn {
      color: #220c07;
      background: linear-gradient(180deg, #ffe782 0%, #d99c2d 100%);
      box-shadow: 0 12px 26px rgba(248, 199, 75, .24);
    }

    .btn.alt {
      color: #fff;
      background: linear-gradient(180deg, #f5242c 0%, #b90e17 100%);
      box-shadow: 0 12px 26px rgba(215, 25, 32, .3);
    }

    .nav-strip {
      color: #170a07;
      background: linear-gradient(180deg, #ffc65d 0%, #e28a21 100%);
      border-bottom: 1px solid rgba(255, 255, 255, .2);
    }

    .nav {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 34px;
      overflow-x: auto;
      scrollbar-width: none;
      white-space: nowrap;
    }

    .nav::-webkit-scrollbar {
      display: none;
    }

    .nav a {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      position: relative;
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .nav a:first-child::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4px;
      background: var(--red);
    }

    .menu {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .05);
      color: #fff;
      line-height: 1;
    }

    .menu::before {
      content: "";
      width: 20px;
      height: 14px;
      background:
        linear-gradient(#fff, #fff) 0 0 / 100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 6px / 100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 12px / 100% 2px no-repeat;
    }

    .hero {
      color: #fff;
      background:
        linear-gradient(90deg, rgba(5, 3, 3, .92) 0%, rgba(5, 3, 3, .76) 36%, rgba(5, 3, 3, .18) 64%, rgba(5, 3, 3, .58) 100%),
        url("/assets/555win-hero.png") center right / cover no-repeat;
      border-bottom: 1px solid rgba(248, 199, 75, .22);
    }

    .hero-inner {
      min-height: 632px;
      display: grid;
      align-items: center;
      padding: 72px 0 104px;
    }

    .hero-copy {
      width: min(570px, 100%);
      padding: 38px 0;
    }

    .hero h1 {
      color: #fff;
      font-size: clamp(48px, 5vw, 78px);
      line-height: .93;
      font-weight: 950;
      text-transform: uppercase;
    }

    .hero h1 span {
      display: block;
      color: var(--gold);
      text-shadow: 0 0 32px rgba(248, 199, 75, .36);
    }

    .hero-text {
      width: min(510px, 100%);
      margin-top: 24px;
      color: rgba(255, 246, 225, .88);
      font-size: 18px;
      font-weight: 650;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .hero-btn {
      min-height: 52px;
      padding: 0 26px;
      color: #fff;
      background: linear-gradient(180deg, #f5252d 0%, #b90d17 100%);
      box-shadow: 0 16px 32px rgba(215, 25, 32, .34);
    }

    .hero-btn.gold {
      color: #180b04;
      background: linear-gradient(180deg, #ffe986 0%, #d99c2d 100%);
      box-shadow: 0 16px 32px rgba(248, 199, 75, .26);
    }

    .proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      width: min(530px, 100%);
      margin-top: 32px;
    }

    .proof-item {
      min-height: 80px;
      padding: 16px;
      border: 1px solid rgba(248, 199, 75, .24);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .proof-item b {
      display: block;
      color: var(--gold);
      font-size: 25px;
      line-height: 1;
      font-weight: 950;
    }

    .proof-item span {
      display: block;
      margin-top: 8px;
      color: rgba(255, 246, 225, .78);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 850;
    }

    .main {
      background: var(--paper-2);
    }

    .game-rail {
      position: relative;
      z-index: 2;
      margin-top: -58px;
    }

    .game-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      padding: 16px;
      border: 1px solid rgba(164, 104, 25, .26);
      border-radius: 8px;
      background: var(--paper);
      box-shadow: 0 22px 54px rgba(54, 28, 7, .18);
    }

    .game-card {
      min-height: 104px;
      display: grid;
      align-content: center;
      gap: 9px;
      padding: 18px;
      border: 1px solid rgba(248, 199, 75, .26);
      border-radius: 8px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(215, 25, 32, .88), rgba(21, 9, 8, .96));
    }

    .game-card b {
      color: var(--gold);
      font-size: 26px;
      line-height: 1;
      font-weight: 950;
    }

    .game-card span {
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .section {
      padding: 86px 0;
    }

    .split {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 62px;
      align-items: center;
    }

    .label {
      color: var(--red);
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .section h2,
    .news h2 {
      margin-top: 12px;
      color: #160b07;
      font-size: clamp(34px, 3.6vw, 50px);
      line-height: 1.04;
      font-weight: 950;
    }

    .copy {
      display: grid;
      gap: 18px;
      color: var(--muted);
      font-size: 16px;
    }

    .feature-panel {
      overflow: hidden;
      border: 1px solid rgba(164, 104, 25, .28);
      border-radius: 8px;
      background: #120606;
      box-shadow: 0 24px 58px rgba(50, 22, 5, .16);
    }

    .feature-media {
      min-height: 340px;
      background:
        linear-gradient(180deg, rgba(5, 3, 3, .04), rgba(5, 3, 3, .42)),
        url("/assets/555win-hero.png") center right / cover no-repeat;
    }

    .feature-caption {
      padding: 24px;
      color: #fff;
      background: linear-gradient(135deg, #751016 0%, #150706 100%);
    }

    .feature-caption h3 {
      font-size: 24px;
      line-height: 1.18;
      font-weight: 950;
    }

    .feature-caption p {
      margin-top: 10px;
      color: rgba(255, 246, 225, .78);
      font-size: 14px;
    }

    .dark-band {
      color: #fff;
      background: linear-gradient(180deg, #060303 0%, #210608 54%, #070303 100%);
      border-top: 1px solid rgba(248, 199, 75, .16);
      border-bottom: 1px solid rgba(248, 199, 75, .16);
    }

    .dark-head {
      display: grid;
      grid-template-columns: .9fr 1fr;
      gap: 62px;
      align-items: end;
      margin-bottom: 34px;
    }

    .dark-band .label {
      color: var(--gold);
    }

    .dark-band h2 {
      margin-top: 12px;
      color: #fff;
      font-size: clamp(34px, 3.6vw, 48px);
      line-height: 1.04;
      font-weight: 950;
    }

    .dark-band p {
      color: rgba(255, 246, 225, .72);
    }

    .step-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .step {
      min-height: 184px;
      padding: 24px;
      border: 1px solid rgba(248, 199, 75, .18);
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
    }

    .step b {
      display: block;
      margin-bottom: 28px;
      color: var(--gold);
      font-size: 32px;
      line-height: 1;
      font-weight: 950;
    }

    .step h3 {
      color: #fff;
      font-size: 19px;
      line-height: 1.2;
      font-weight: 950;
    }

    .step p {
      margin-top: 10px;
      color: rgba(255, 246, 225, .68);
      font-size: 13px;
      line-height: 1.56;
    }

    .article-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(300px, .55fr);
      gap: 28px;
      align-items: start;
    }

    .article-box,
    .side-box,
    .news-card,
    .news-feature {
      border: 1px solid rgba(164, 104, 25, .24);
      border-radius: 8px;
      background: var(--paper);
      box-shadow: 0 16px 42px rgba(54, 28, 7, .08);
    }

    .article-box {
      padding: 36px;
    }

    .article-box h2 {
      margin: 12px 0 18px;
      color: #160b07;
      font-size: clamp(32px, 3vw, 44px);
      line-height: 1.05;
      font-weight: 950;
    }

    .article-box h3 {
      margin: 30px 0 10px;
      color: #160b07;
      font-size: 25px;
      line-height: 1.2;
    }

    .article-box p,
    .article-box li {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.84;
    }

    .article-box ul {
      margin: 14px 0 0;
      padding-left: 20px;
    }

    .side-box {
      position: sticky;
      top: 18px;
      padding: 26px;
    }

    .side-box h3 {
      color: #160b07;
      font-size: 24px;
      line-height: 1.14;
    }

    .side-row {
      display: grid;
      grid-template-columns: 13px 1fr;
      gap: 13px;
      padding: 17px 0;
      border-top: 1px solid rgba(164, 104, 25, .18);
    }

    .side-row:first-of-type {
      margin-top: 14px;
      border-top: 0;
    }

    .dot {
      width: 13px;
      height: 13px;
      margin-top: 7px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--red), var(--gold));
      box-shadow: 0 0 0 6px rgba(215, 25, 32, .1);
    }

    .side-row strong {
      display: block;
      color: #160b07;
      font-size: 15px;
    }

    .side-row span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.48;
    }

    .news {
      padding-top: 0;
    }

    .news-head {
      display: grid;
      grid-template-columns: .9fr 1fr;
      gap: 64px;
      align-items: end;
      margin-bottom: 34px;
    }

    .news-head p {
      color: var(--muted);
      font-size: 15px;
    }

    .news-layout {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 22px;
    }

    .news-feature {
      min-height: 360px;
      display: grid;
      grid-template-columns: .96fr 1.04fr;
      overflow: hidden;
      color: #fff;
      background: #140706;
    }

    .news-media {
      min-height: 360px;
      position: relative;
      background:
        linear-gradient(180deg, rgba(5, 3, 3, .06), rgba(5, 3, 3, .44)),
        url("/assets/555win-hero.png") center right / cover no-repeat;
    }

    .news-media b {
      position: absolute;
      left: 22px;
      bottom: 22px;
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #170a07;
      background: linear-gradient(145deg, #ffed98, #d99c2d);
      font-size: 24px;
      font-weight: 950;
      box-shadow: 0 16px 28px rgba(0, 0, 0, .26);
    }

    .news-feature-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
      padding: 34px 32px;
      background: linear-gradient(145deg, #751016, #150706);
    }

    .news-feature-copy small {
      color: var(--gold);
      font-weight: 950;
      text-transform: uppercase;
    }

    .news-feature-copy h3 {
      color: #fff;
      font-size: 36px;
      line-height: 1.04;
      font-weight: 950;
    }

    .news-feature-copy p {
      color: rgba(255, 246, 225, .74);
      font-size: 14px;
    }

    .news-side {
      display: grid;
      gap: 16px;
    }

    .news-card {
      min-height: 109px;
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 18px;
      align-items: center;
      padding: 18px;
    }

    .news-card b {
      height: 64px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #d71920, #1b0b09);
      font-size: 20px;
      font-weight: 950;
    }

    .news-card h3 {
      color: #160b07;
      font-size: 17px;
      line-height: 1.22;
      font-weight: 950;
    }

    .news-card p {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .footer {
      color: rgba(255, 246, 225, .72);
      background: #050303;
      border-top: 2px solid rgba(248, 199, 75, .5);
      padding: 34px 0;
      font-size: 13px;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
    }

    .footer strong {
      display: block;
      color: #fff;
      font-size: 16px;
      margin-bottom: 6px;
    }

    @media (max-width: 980px) {
      .wrap {
        width: min(var(--max), calc(100% - 32px));
      }

      .topbar-inner {
        min-height: 74px;
      }

      .actions,
      .nav-strip {
        display: none;
      }

      .menu {
        display: grid;
        place-items: center;
      }

      .hero {
        background:
          linear-gradient(180deg, rgba(5, 3, 3, .54) 0%, rgba(5, 3, 3, .94) 80%),
          url("/assets/555win-hero.png") center right / cover no-repeat;
      }

      .hero-inner {
        min-height: 0;
        padding: 390px 0 58px;
        align-items: end;
      }

      .hero h1 {
        font-size: 48px;
      }

      .proof,
      .game-grid,
      .split,
      .dark-head,
      .step-grid,
      .article-layout,
      .news-head,
      .news-layout,
      .news-feature,
      .footer-inner {
        grid-template-columns: 1fr;
      }

      .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .side-box {
        position: static;
      }
    }

    @media (max-width: 560px) {
      .brand-mark {
        width: 50px;
        height: 50px;
        font-size: 16px;
      }

      .brand-word strong {
        font-size: 28px;
      }

      .brand-word span {
        display: none;
      }

      .hero-inner {
        padding-top: 300px;
      }

      .hero h1 {
        font-size: 42px;
      }

      .hero-text {
        font-size: 15px;
      }

      .hero-actions {
        display: grid;
      }

      .hero-btn {
        width: 100%;
      }

      .game-rail {
        margin-top: -28px;
      }

      .game-grid,
      .news-card {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 62px 0;
      }

      .article-box,
      .side-box {
        padding: 24px;
      }

      .feature-media,
      .news-media {
        min-height: 260px;
      }

      .news-feature-copy h3 {
        font-size: 30px;
      }
    }
  
.detail-hero {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(5, 3, 3, .93) 0%, rgba(5, 3, 3, .78) 42%, rgba(5, 3, 3, .42) 100%),
    url("/assets/555win-hero.png") center right / cover no-repeat;
  border-bottom: 1px solid rgba(248, 199, 75, .22);
}

.detail-hero-inner {
  min-height: 330px;
  display: grid;
  align-content: center;
  padding: 64px 0;
}

.detail-hero h1 {
  max-width: 860px;
  color: #fff;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.02;
  font-weight: 950;
}

.detail-hero p {
  max-width: 700px;
  margin-top: 18px;
  color: rgba(255, 246, 225, .82);
  font-size: 17px;
}

.detail-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .48fr);
  gap: 28px;
  align-items: start;
  padding: 72px 0 86px;
}

.detail-main,
.detail-side-card,
.dede-post {
  border: 1px solid rgba(164, 104, 25, .24);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 16px 42px rgba(54, 28, 7, .08);
}

.detail-main {
  padding: 38px;
}

.detail-main h1 {
  color: #160b07;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.05;
  font-weight: 950;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 26px;
  color: var(--red);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.detail-visual {
  overflow: hidden;
  margin: 0 0 28px;
  border-radius: 8px;
  background: #120606;
}

.detail-visual img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: center right;
}

.detail-body h2,
.detail-body h3 {
  margin: 30px 0 12px;
  color: #160b07;
  line-height: 1.18;
  font-weight: 950;
}

.detail-body h2 {
  font-size: 28px;
}

.detail-body h3 {
  font-size: 23px;
}

.detail-body p,
.detail-body li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.84;
}

.detail-body p + p {
  margin-top: 16px;
}

.detail-body a {
  color: var(--red);
  font-weight: 850;
}

.detail-updated {
  margin-top: 22px;
  color: #8c7565;
  font-size: 14px;
  font-weight: 850;
}

.detail-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(164, 104, 25, .18);
}

.detail-actions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-actions a,
.page-list a,
.page-list span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #d71920 0%, #8f1016 100%);
  font-size: 13px;
  font-weight: 950;
}

.detail-side {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 18px;
}

.detail-side-card {
  overflow: hidden;
  padding: 24px;
}

.detail-side-visual {
  min-height: 190px;
  margin: -24px -24px 22px;
  background:
    linear-gradient(180deg, rgba(5, 3, 3, .04), rgba(5, 3, 3, .5)),
    url("/assets/555win-hero.png") center / cover no-repeat;
}

.detail-side-card h2,
.detail-side-card h3 {
  color: #160b07;
  line-height: 1.15;
  font-weight: 950;
}

.detail-side-card h2 {
  font-size: 26px;
}

.detail-side-card h3 {
  font-size: 22px;
}

.detail-side-card p,
.detail-side-card li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.detail-side-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.breadcrumb {
  padding-top: 20px;
  color: #806858;
  font-size: 13px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dede-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dede-post {
  overflow: hidden;
}

.dede-post-media {
  min-height: 160px;
  display: grid;
  align-items: end;
  padding: 18px;
  color: #170a07;
  background:
    linear-gradient(180deg, rgba(5, 3, 3, .04), rgba(5, 3, 3, .46)),
    url("/assets/555win-hero.png") center / cover no-repeat;
}

.dede-post-media b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffed98, #d99c2d);
  font-size: 18px;
  font-weight: 950;
}

.dede-post-body {
  padding: 22px;
}

.dede-post-body small {
  color: var(--red);
  font-weight: 950;
  text-transform: uppercase;
}

.dede-post-body h3 {
  margin: 10px 0 8px;
  color: #160b07;
  font-size: 21px;
  line-height: 1.22;
  font-weight: 950;
}

.dede-post-body p,
.dede-post-body time {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.page-list,
.column-page,
.detail-prenext {
  margin-top: 24px;
}

.page-list,
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.detail-prenext p {
  margin-top: 10px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .detail-wrap,
  .dede-list-grid {
    grid-template-columns: 1fr;
  }

  .detail-side {
    position: static;
  }
}

@media (max-width: 560px) {
  .detail-hero-inner {
    min-height: 260px;
    padding: 46px 0;
  }

  .detail-main {
    padding: 24px;
  }

  .detail-visual img {
    aspect-ratio: 16 / 10;
  }
}