/**
 * /assets/css/pages/rules.css
 *
 * Rules-specific navigation, rule ledger, accordions, game-rule panels,
 * appeals/reporting cards and reminder styles.
 * Shared hero, buttons, typography, containers and sections are global.
 */

.page-rules {
  --hero-min-height: 72vh;
  --hero-accent-x: 73%;
  --hero-accent-y: 35%;
  --hero-accent-alpha: .22;
  --hero-lines-opacity: .28;
  --hero-mark-bottom: 2vh;
  --hero-mark-opacity: .04;
}

.rules-hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 80%, rgba(189,0,0,.08), transparent 30%),
    linear-gradient(120deg, #080808 0%, #111 50%, #070707 100%);
}


/* =====================================================
       INTRO / NAVIGATION
    ====================================================== */

    .rules-intro-grid {

      display: grid;

      grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, .46fr);

      gap: 65px;

      align-items: start;

    }

    .rules-intro-title {

      margin: 0;

      color: #fff;

      font-size:
        clamp(
          2.4rem,
          4vw,
          4rem
        );

      font-weight: 900;

      line-height: .98;

      letter-spacing: -.045em;

      text-transform: uppercase;

    }

    .rules-intro-copy {

      max-width: 760px;

      margin-top: 22px;

      color:
        rgba(255,255,255,.45);

      font-size: .88rem;

      line-height: 1.78;

    }

    .rules-note {

      display: flex;

      gap: 14px;

      margin-top: 27px;

      padding:
        19px
        21px;

      border:
        1px solid
        var(--red-border);

      background:
        var(--red-soft);

    }

    .rules-note-icon {

      flex: 0 0 auto;

      color: var(--red-bright);

      font-size: 1rem;

    }

    .rules-note strong {

      display: block;

      color: #fff;

      font-size: .76rem;

    }

    .rules-note span {

      display: block;

      margin-top: 5px;

      color:
        rgba(255,255,255,.40);

      font-size: .72rem;

      line-height: 1.6;

    }


    /* =====================================================
       TABLE OF CONTENTS
    ====================================================== */

    .rules-toc {

      position: sticky;

      top: 100px;

      border:
        1px solid
        var(--border);

      background: #0d0d0d;

    }

    .rules-toc-head {

      display: flex;

      align-items: center;

      gap: 9px;

      padding:
        17px
        18px;

      border-bottom:
        1px solid
        var(--border);

      color: #fff;

      font-size: .63rem;
      font-weight: 800;

      letter-spacing: .12em;

      text-transform: uppercase;

    }

    .rules-toc-head i {
      color: var(--red-bright);
    }

    .rules-toc-link {

      display: flex;

      align-items: center;
      justify-content: space-between;

      gap: 15px;

      min-height: 45px;

      padding:
        0
        18px;

      border-bottom:
        1px solid
        var(--border-soft);

      color:
        rgba(255,255,255,.43);

      font-size: .68rem;

      transition:
        color .18s ease,
        background .18s ease;

    }

    .rules-toc-link:last-child {
      border-bottom: 0;
    }

    .rules-toc-link:hover {

      color: #fff;

      background:
        rgba(255,255,255,.025);

    }

    .rules-toc-link i {

      color:
        rgba(255,255,255,.20);

      font-size: .68rem;

    }


    /* =====================================================
       COMMUNITY RULES
       DESKTOP RULE LEDGER
    ====================================================== */

    .community-rules-layout {

      display: grid;

      grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.28fr);

      gap: 1px;

      margin-top: 50px;

      border:
        1px solid
        var(--border);

      background:
        var(--border);

    }


    /* -----------------------------------------------------
       RULE INDEX
    ------------------------------------------------------ */

    .community-rule-index {

      background: #0b0b0b;

    }

    .community-rule-index-head {

      padding:
        22px
        23px;

      border-bottom:
        1px solid
        var(--border);

    }

    .community-rule-index-label {

      color:
        rgba(255,255,255,.25);

      font-size: .55rem;
      font-weight: 800;

      letter-spacing: .15em;

      text-transform: uppercase;

    }

    .community-rule-index-title {

      margin-top: 6px;

      color: #fff;

      font-size: .86rem;
      font-weight: 700;

    }


    /* -----------------------------------------------------
       RULE BUTTONS
    ------------------------------------------------------ */

    .community-rule-select {

      width: 100%;

      display: grid;

      grid-template-columns:
        42px
        minmax(0, 1fr)
        18px;

      gap: 13px;

      align-items: center;

      min-height: 78px;

      padding:
        10px
        17px;

      border: 0;

      border-bottom:
        1px solid
        var(--border-soft);

      color: inherit;

      background: transparent;

      text-align: left;

      cursor: pointer;

      transition:
        background .18s ease;

    }

    .community-rule-select:last-child {
      border-bottom: 0;
    }

    .community-rule-select:hover {

      background:
        rgba(255,255,255,.022);

    }

    .community-rule-select.active {

      background:
        linear-gradient(
          90deg,
          rgba(189,0,0,.12),
          rgba(189,0,0,.025)
        );

    }

    .community-rule-select-number {

      width: 38px;
      height: 38px;

      display: flex;

      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--border);

      color:
        rgba(255,255,255,.28);

      background:
        rgba(255,255,255,.015);

      font-size: .58rem;
      font-weight: 800;

      letter-spacing: .07em;

      transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;

    }

    .community-rule-select.active
    .community-rule-select-number {

      color: var(--red-bright);

      border-color:
        var(--red-border);

      background:
        var(--red-soft);

    }

    .community-rule-select-title {

      color:
        rgba(255,255,255,.60);

      font-size: .70rem;
      font-weight: 700;

      line-height: 1.4;

      transition:
        color .18s ease;

    }

    .community-rule-select.active
    .community-rule-select-title {

      color: #fff;

    }

    .community-rule-select-arrow {

      color:
        rgba(255,255,255,.16);

      font-size: .70rem;

      transition:
        color .18s ease,
        transform .18s ease;

    }

    .community-rule-select.active
    .community-rule-select-arrow {

      color: var(--red-bright);

      transform:
        translateX(2px);

    }


    /* -----------------------------------------------------
       RULE CONTENT PANEL
    ------------------------------------------------------ */

    .community-rule-viewer {

      position: relative;

      min-height: 510px;

      background:
        linear-gradient(
          140deg,
          rgba(189,0,0,.035),
          #0d0d0d 36%
        );

      overflow: hidden;

    }

    .community-rule-viewer::after {

      content: "";

      position: absolute;

      right: -90px;
      bottom: -150px;

      width: 360px;
      height: 360px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(189,0,0,.08),
          transparent 68%
        );

      pointer-events: none;

    }

    .community-rule-panel {

      position: relative;

      z-index: 1;

      display: none;

      min-height: 510px;

      padding:
        48px
        50px;

    }

    .community-rule-panel.active {

      display: flex;

      flex-direction: column;

      animation:
        communityRuleFade
        .22s ease;

    }

    @keyframes communityRuleFade {

      from {
        opacity: 0;
        transform: translateY(4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }

    }

    .community-rule-panel-top {

      display: flex;

      align-items: center;
      justify-content: space-between;

      gap: 20px;

    }

    .community-rule-panel-number {

      color: var(--red-bright);

      font-size: .58rem;
      font-weight: 800;

      letter-spacing: .17em;

      text-transform: uppercase;

    }

    .community-rule-panel-icon {

      width: 42px;
      height: 42px;

      display: flex;

      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--red-border);

      color: var(--red-bright);

      background:
        var(--red-soft);

    }

    .community-rule-panel-title {

      max-width: 760px;

      margin-top: 35px;

      color: #fff;

      font-size:
        clamp(
          1.7rem,
          3vw,
          3rem
        );

      font-weight: 900;

      line-height: 1.02;

      letter-spacing: -.04em;

      text-transform: uppercase;

    }

    .community-rule-panel-divider {

      width: 56px;
      height: 1px;

      margin:
        25px
        0;

      background: var(--red-bright);

    }

    .community-rule-panel-copy {

      max-width: 820px;

      color:
        rgba(255,255,255,.46);

      font-size: .81rem;

      line-height: 1.78;

    }

    .community-rule-panel-copy p {

      margin:
        0
        0
        15px;

    }

    .community-rule-panel-copy p:last-child {
      margin-bottom: 0;
    }

    .community-rule-panel-foot {

      display: flex;

      align-items: center;

      gap: 8px;

      margin-top: auto;

      padding-top: 35px;

      color:
        rgba(255,255,255,.19);

      font-size: .54rem;
      font-weight: 700;

      letter-spacing: .10em;

      text-transform: uppercase;

    }

    .community-rule-panel-foot i {

      color:
        rgba(224,0,0,.55);

    }


    /* =====================================================
       MOBILE COMMUNITY ACCORDION
    ====================================================== */

    .community-mobile {

      display: none;

      margin-top: 40px;

    }


    /* =====================================================
       STANDARD RULE ACCORDION
    ====================================================== */

    .rules-accordion {

      margin-top: 45px;

      border:
        1px solid
        var(--border);

    }

    .rules-accordion
    .accordion-item {

      border: 0;

      border-bottom:
        1px solid
        var(--border);

      border-radius: 0;

      background: #0d0d0d;

      color: var(--text);

    }

    .rules-accordion
    .accordion-item:last-child {
      border-bottom: 0;
    }

    .rules-accordion
    .accordion-button {

      position: relative;

      display: grid;

      grid-template-columns:
        56px
        minmax(0, 1fr)
        auto;

      align-items: center;

      gap: 16px;

      min-height: 78px;

      padding:
        10px
        21px
        10px
        14px;

      border: 0;

      border-radius: 0 !important;

      box-shadow: none !important;

      color: #fff;

      background: #0d0d0d;

    }

    .rules-accordion
    .accordion-button:not(.collapsed) {

      color: #fff;

      background:
        linear-gradient(
          90deg,
          rgba(189,0,0,.075),
          #0d0d0d 35%
        );

    }

    .rules-accordion
    .accordion-button::after {

      margin: 0;

      filter:
        brightness(0)
        invert(1);

      opacity: .38;

    }

    .accordion-rule-number {

      width: 45px;
      height: 45px;

      display: flex;

      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--border);

      color:
        rgba(255,255,255,.29);

      background:
        rgba(255,255,255,.018);

      font-size: .60rem;
      font-weight: 800;

      letter-spacing: .08em;

    }

    .accordion-button:not(.collapsed)
    .accordion-rule-number {

      border-color:
        var(--red-border);

      color: var(--red-bright);

      background: var(--red-soft);

    }

    .accordion-rule-title {

      padding-right: 15px;

      font-size: .82rem;
      font-weight: 700;

      line-height: 1.45;

    }

    .rules-accordion
    .accordion-body {

      padding:
        4px
        32px
        30px
        85px;

      color:
        rgba(255,255,255,.43);

      font-size: .79rem;

      line-height: 1.78;

    }

    .rules-accordion
    .accordion-body p {

      margin:
        0
        0
        13px;

    }

    .rules-accordion
    .accordion-body p:last-child {
      margin-bottom: 0;
    }


    /* =====================================================
       GAME RULE NAV
    ====================================================== */

    .game-rule-nav {

      display: flex;

      flex-wrap: wrap;

      gap: 7px;

      margin-top: 38px;

      padding-bottom: 18px;

      border-bottom:
        1px solid
        var(--border);

    }

    .game-rule-tab {

      display: inline-flex;

      align-items: center;

      gap: 7px;

      min-height: 38px;

      padding:
        0
        13px;

      border:
        1px solid
        var(--border);

      color:
        rgba(255,255,255,.38);

      background:
        rgba(255,255,255,.01);

      font-size: .58rem;
      font-weight: 800;

      letter-spacing: .08em;

      text-transform: uppercase;

      cursor: pointer;

      transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;

    }

    .game-rule-tab:hover {

      color: #fff;

      border-color:
        rgba(255,255,255,.18);

    }

    .game-rule-tab.active {

      color: #fff;

      border-color: var(--red);

      background: var(--red);

    }


    /* =====================================================
       GAME PANELS
    ====================================================== */

    .game-rule-panel {

      display: none;

      padding-top: 40px;

    }

    .game-rule-panel.active {
      display: block;
    }

    .game-heading {

      display: flex;

      align-items: flex-end;
      justify-content: space-between;

      gap: 30px;

      margin-bottom: 25px;

    }

    .game-heading-label {

      color: var(--red-bright);

      font-size: .56rem;
      font-weight: 800;

      letter-spacing: .15em;

      text-transform: uppercase;

    }

    .game-heading-title {

      margin-top: 9px;

      color: #fff;

      font-size:
        clamp(
          1.7rem,
          3vw,
          2.8rem
        );

      font-weight: 900;

      letter-spacing: -.035em;

      text-transform: uppercase;

    }

    .game-heading-status {

      padding:
        7px
        10px;

      border:
        1px solid
        var(--border);

      color:
        rgba(255,255,255,.30);

      font-size: .54rem;
      font-weight: 800;

      letter-spacing: .10em;

      text-transform: uppercase;

    }

    .coming-soon {

      display: grid;

      grid-template-columns:
        56px
        minmax(0, 1fr);

      gap: 18px;

      align-items: start;

      padding: 25px;

      border:
        1px solid
        var(--border);

      background:
        linear-gradient(
          120deg,
          rgba(189,0,0,.045),
          #0d0d0d 40%
        );

    }

    .coming-soon-icon {

      width: 50px;
      height: 50px;

      display: flex;

      align-items: center;
      justify-content: center;

      border:
        1px solid
        var(--red-border);

      color: var(--red-bright);

      background: var(--red-soft);

      font-size: 1rem;

    }

    .coming-soon-title {

      color: #fff;

      font-size: .88rem;
      font-weight: 800;

    }

    .coming-soon-copy {

      margin-top: 9px;

      color:
        rgba(255,255,255,.39);

      font-size: .76rem;

      line-height: 1.7;

    }


    /* =====================================================
       APPEALS / REPORTING
    ====================================================== */

    .action-grid {

      display: grid;

      grid-template-columns:
        repeat(2, minmax(0, 1fr));

      gap: 22px;

      margin-top: 48px;

    }

    .action-card {

      position: relative;

      display: flex;
      flex-direction: column;

      min-height: 100%;

      padding: 32px;

      border:
        1px solid
        var(--border);

      background: #0d0d0d;

    }

    .action-card::before {

      content: "";

      position: absolute;

      top: 0;
      left: 0;

      width: 80px;
      height: 1px;

      background: var(--red-bright);

    }

    .action-card-label {

      color: var(--red-bright);

      font-size: .56rem;
      font-weight: 800;

      letter-spacing: .16em;

      text-transform: uppercase;

    }

    .action-card-title {

      margin-top: 13px;

      color: #fff;

      font-size:
        clamp(
          1.55rem,
          2.5vw,
          2.5rem
        );

      font-weight: 900;

      line-height: 1;

      letter-spacing: -.04em;

      text-transform: uppercase;

    }

    .action-card-copy {

      margin-top: 19px;

      color:
        rgba(255,255,255,.41);

      font-size: .76rem;

      line-height: 1.72;

    }

    .action-card-copy p {

      margin:
        0
        0
        13px;

    }

    .action-card-copy p:last-child {
      margin-bottom: 0;
    }

    .requirement-list {

      margin:
        18px
        0;

      border-top:
        1px solid
        var(--border);

      border-bottom:
        1px solid
        var(--border);

    }

    .requirement-item {

      display: flex;

      align-items: center;

      gap: 10px;

      min-height: 40px;

      border-bottom:
        1px solid
        var(--border-soft);

      color:
        rgba(255,255,255,.47);

      font-size: .68rem;

    }

    .requirement-item:last-child {
      border-bottom: 0;
    }

    .requirement-item i {

      color: var(--red-bright);

      font-size: .68rem;

    }

    .action-card-footer {

      margin-top: auto;

      padding-top: 24px;

    }


    /* =====================================================
       FINAL REMINDER
    ====================================================== */

    .final-reminder {

      position: relative;

      overflow: hidden;

      padding:
        70px
        0;

      border-top:
        1px solid
        var(--border);

      background:

        radial-gradient(
          circle at 75% 50%,
          rgba(189,0,0,.14),
          transparent 30%
        ),

        #090909;

    }

    .final-reminder-grid {

      display: grid;

      grid-template-columns:
        minmax(0, 1fr)
        auto;

      gap: 50px;

      align-items: center;

    }

    .final-reminder-title {

      margin: 0;

      color: #fff;

      font-size:
        clamp(
          2rem,
          3.8vw,
          4rem
        );

      font-weight: 900;

      line-height: .95;

      letter-spacing: -.045em;

      text-transform: uppercase;

    }

    .final-reminder-copy {

      max-width: 710px;

      margin-top: 15px;

      color:
        rgba(255,255,255,.39);

      font-size: .79rem;

      line-height: 1.7;

    }


    /* =====================================================
       RESPONSIVE
    ====================================================== */

    @media (max-width: 1099.98px) {

      .rules-intro-grid {

        grid-template-columns: 1fr;

      }


      .rules-toc {
        position: static;
      }

      .community-rules-layout {

        grid-template-columns:
          minmax(270px, .72fr)
          minmax(0, 1.28fr);

      }

      .community-rule-panel {

        padding:
          40px
          38px;

      }

    }


    @media (max-width: 899.98px) {

      .community-rules-layout {
        display: none;
      }

      .community-mobile {
        display: block;
      }

      .action-grid {

        grid-template-columns: 1fr;

      }

      .final-reminder-grid {

        grid-template-columns: 1fr;

      }

    }


    @media (max-width: 767.98px) {



      .rule-principle {

        grid-template-columns:
          23px
          115px
          minmax(0, 1fr);

      }

      .rules-accordion
      .accordion-button {

        grid-template-columns:
          45px
          minmax(0, 1fr)
          auto;

        gap: 12px;

        min-height: 72px;

        padding-left: 10px;

      }

      .accordion-rule-number {

        width: 40px;
        height: 40px;

      }

      .accordion-rule-title {
        font-size: .74rem;
      }

      .rules-accordion
      .accordion-body {

        padding:
          4px
          20px
          25px
          67px;

      }

      .game-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

      }

    }


    @media (max-width: 480px) {

      .rule-principle {

        grid-template-columns:
          22px
          minmax(0, 1fr);

        gap: 8px;

        padding:
          8px
          0;

      }

      .rule-principle span {
        grid-column: 2;
      }

      .action-card {
        padding: 26px;
      }

      .rules-accordion
      .accordion-body {

        padding:
          5px
          18px
          24px;

      }

    }