/* ========================================================
   TABLE GAMES UI
   ======================================================== */

.page-hero {
  padding:
    clamp(2.25rem, 6vw, 5rem)
    1rem;

  text-align:
    center;
}

.page-hero h1 {
  width:
    min(950px, 100%);

  margin:
    0 auto 1rem;

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

  line-height:
    1.08;

  letter-spacing:
    -.025em;

  text-wrap:
    balance;
}

.page-hero p {
  width:
    min(760px, 100%);

  margin:
    auto;

  font-size:
    clamp(.98rem, 1.4vw, 1.12rem);

  line-height:
    1.7;
}


/* ========================================================
   NEW ARTICLE AREA
   ======================================================== */

.table-games-content-update {
  width:
    min(1050px, calc(100% - 32px));

  margin:
    2.5rem auto 3.5rem;

  padding:
    clamp(1.5rem, 4vw, 3rem);

  border:
    1px solid
    rgba(145,65,226,.20);

  border-radius:
    22px;

  background:
    linear-gradient(
      180deg,
      rgba(28,13,46,.55),
      rgba(12,6,20,.40)
    );
}


.table-games-content-update
.editorial-disclosure {
  margin:
    0 0 2rem;

  padding:
    1.15rem 1.25rem;

  border:
    1px solid
    rgba(245,201,69,.18);

  border-left:
    4px solid #f5c945;

  border-radius:
    11px;

  background:
    rgba(245,201,69,.055);
}


.table-games-content-update
.editorial-disclosure p {
  margin: 0;
}


.table-games-content-update p,
.table-games-content-update li {
  font-size:
    clamp(1rem, 1.2vw, 1.07rem);

  line-height:
    1.8;
}


.table-games-content-update p {
  margin:
    0 0 1.25rem;
}


.table-games-content-update h2 {
  margin:
    3rem 0 1rem;

  padding-left:
    14px;

  border-left:
    4px solid #f4cc4f;

  color:
    #f4db87;

  font-size:
    clamp(1.5rem, 2.7vw, 2.1rem);

  line-height:
    1.2;

  text-wrap:
    balance;
}


.table-games-content-update h3 {
  margin:
    2rem 0 .8rem;

  font-size:
    clamp(1.15rem, 2vw, 1.45rem);

  line-height:
    1.3;
}


.table-games-content-update strong {
  color:
    #f5d15f;
}


.table-games-content-update ul,
.table-games-content-update ol {
  margin:
    .8rem 0 1.5rem;

  padding-left:
    1.5rem;
}


.table-games-content-update li {
  margin-bottom:
    .5rem;
}


/* ========================================================
   TABLES
   ======================================================== */

.table-games-content-update
.table-container,
.guide-table-wrap {
  width: 100%;

  margin:
    1.5rem 0 2rem;

  overflow-x:
    auto;

  border-radius:
    14px;

  -webkit-overflow-scrolling:
    touch;
}


.table-games-content-update table,
.guide-table {
  width: 100%;

  min-width:
    650px;

  border-collapse:
    collapse;
}


.table-games-content-update th,
.table-games-content-update td,
.guide-table th,
.guide-table td {
  padding:
    .9rem 1rem;

  text-align:
    left;

  vertical-align:
    top;

  line-height:
    1.55;
}


/* ========================================================
   EXISTING FAQ → VIP STYLE
   ======================================================== */

.guide-faq {
  width:
    min(1050px, calc(100% - 32px));

  margin:
    3rem auto;

  padding:
    clamp(1.3rem, 3vw, 2.4rem);

  border:
    1px solid
    rgba(139,60,225,.36);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(28,13,46,.98),
      rgba(18,8,31,.98)
    );
}


.guide-faq
.guide-section-title {
  margin:
    0 0 1.4rem;

  padding:
    0 0 1.1rem;

  border-bottom:
    1px solid
    rgba(246,203,75,.20);

  color:
    #f4d77c;

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

  line-height:
    1.15;

  text-wrap:
    balance;
}


.guide-faq details {
  margin:
    0 0 12px;

  border:
    1px solid
    rgba(139,60,225,.36);

  border-radius:
    12px;

  background:
    rgba(35,16,57,.82);

  overflow:
    hidden;
}


.guide-faq details:last-child {
  margin-bottom: 0;
}


.guide-faq summary {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-height:
    64px;

  padding:
    1.1rem 3.4rem
    1.1rem 1.3rem;

  cursor:
    pointer;

  list-style:
    none;

  color:
    #fff;

  font-size:
    1rem;

  font-weight:
    750;

  line-height:
    1.45;
}


.guide-faq
summary::-webkit-details-marker {
  display: none;
}


.guide-faq
summary::marker {
  content: "";
}


.guide-faq
summary::after {
  content:
    "+";

  position:
    absolute;

  top:
    50%;

  right:
    1.25rem;

  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  transform:
    translateY(-50%);

  color:
    #ffd04b;

  font-size:
    1.4rem;

  font-weight:
    900;
}


.guide-faq
details[open] {
  border-color:
    rgba(246,203,75,.48);

  background:
    rgba(43,20,68,.97);
}


.guide-faq
details[open]
summary {
  color:
    #f7df91;
}


.guide-faq
details[open]
summary::after {
  content:
    "−";
}


.guide-faq
details > p {
  margin:
    0;

  padding:
    0 1.3rem 1.3rem;

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

  font-size:
    1rem;

  line-height:
    1.7;
}


.guide-faq
details > p::before {
  content:
    "";

  display:
    block;

  height:
    1px;

  margin-bottom:
    1rem;

  background:
    linear-gradient(
      90deg,
      rgba(246,203,75,.22),
      rgba(139,60,225,.16),
      transparent
    );
}


/* ========================================================
   CATEGORY DIRECTORY
   ======================================================== */

.tcards-grid {
  display:
    grid;

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

  gap:
    18px;

  width:
    min(1100px, calc(100% - 32px));

  margin:
    1.5rem auto 3rem;
}


.tcard {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  height:
    100%;

  border:
    1px solid
    rgba(139,60,225,.25);

  border-radius:
    16px;

  overflow:
    hidden;

  background:
    rgba(27,13,44,.84);
}


.tcard-img-wrap {
  overflow:
    hidden;
}


.tcard-img-wrap img {
  display:
    block;

  width:
    100%;

  aspect-ratio:
    16 / 9;

  object-fit:
    cover;
}


.tcard-body {
  display:
    flex;

  flex: 1;

  flex-direction:
    column;

  padding:
    1.15rem;
}


.tcard-body h3 {
  margin:
    0 0 .6rem;

  color:
    #f5d77d;

  line-height:
    1.25;
}


.tcard-body p {
  line-height:
    1.65;
}


/* ========================================================
   CTA
   ======================================================== */

.contextual-pathway {
  width:
    min(1050px, calc(100% - 32px));

  margin-left:
    auto;

  margin-right:
    auto;

  border-radius:
    18px;

  overflow:
    hidden;
}


/* ========================================================
   TABLET
   ======================================================== */

@media (max-width: 900px) {

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

}


/* ========================================================
   MOBILE
   ======================================================== */

@media (max-width: 700px) {

  .page-hero {
    padding:
      2.2rem 1rem 1.8rem;
  }


  .page-hero h1 {
    font-size:
      clamp(1.75rem, 8vw, 2.5rem);
  }


  .table-games-content-update {
    width:
      calc(100% - 20px);

    margin-top:
      1.5rem;

    padding:
      1.2rem 1rem;

    border-radius:
      16px;
  }


  .table-games-content-update p,
  .table-games-content-update li {
    font-size:
      1rem;

    line-height:
      1.72;
  }


  .table-games-content-update h2 {
    margin-top:
      2.4rem;

    font-size:
      1.5rem;
  }


  .guide-faq {
    width:
      calc(100% - 20px);

    padding:
      1rem;

    border-radius:
      16px;
  }


  .guide-faq
  .guide-section-title {
    font-size:
      1.5rem;
  }


  .guide-faq summary {
    min-height:
      58px;

    padding:
      .95rem 3rem
      .95rem .95rem;

    font-size:
      .94rem;
  }


  .guide-faq
  summary::after {
    right:
      .9rem;
  }


  .guide-faq
  details > p {
    padding:
      0 .95rem 1rem;

    font-size:
      .94rem;
  }


  .tcards-grid {
    width:
      calc(100% - 20px);

    grid-template-columns:
      1fr;

    gap:
      14px;
  }


  .tcard-body {
    padding:
      1rem;
  }


  .contextual-pathway {
    width:
      calc(100% - 20px);
  }


  .contextual-pathway__cta {
    display:
      block;
  }


  .contextual-pathway__button-wrap {
    width:
      100%;

    margin-top:
      1.2rem;
  }


  .contextual-pathway__button {
    width:
      100%;
  }

}


/* ========================================================
   OVERFLOW PROTECTION
   ======================================================== */

html,
body {
  max-width:
    100%;

  overflow-x:
    clip;
}


img,
video,
iframe {
  max-width:
    100%;
}



/* TABLE GAMES FAQ VIP STYLE 20260922
   ===================================================== */

/* Outer FAQ box */

.table-games-content-update .table-games-faq {
  width: 100%;
  margin: 3.5rem 0;
  padding: clamp(1.4rem, 3vw, 2.5rem);

  border: 1px solid rgba(142, 65, 230, .35);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(28, 13, 46, .98),
      rgba(17, 8, 30, .98)
    );

  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* FAQ heading area */

.table-games-faq .faq-heading {
  margin-bottom: 1.5rem;
}


.table-games-content-update
.table-games-faq
.faq-heading > h2 {
  margin: 0;
  padding: 0 0 1.15rem;

  border-left: 0;
  border-bottom: 1px solid rgba(246,203,77,.20);

  color: #f3d781;

  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;

  letter-spacing: -.015em;
  text-wrap: balance;
}


/* FAQ list */

.table-games-faq .faq-list {
  display: grid;
  gap: 14px;
}


/* Individual question cards */

.table-games-faq .faq-item {
  width: 100%;
  margin: 0;

  border: 1px solid rgba(143,67,225,.38);
  border-radius: 12px;

  background:
    rgba(35, 17, 57, .82);

  overflow: hidden;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}


@media (hover:hover) {

  .table-games-faq .faq-item:hover {
    border-color: rgba(255,207,73,.46);

    background:
      rgba(43,21,67,.95);

    transform:
      translateY(-1px);

    box-shadow:
      0 8px 24px rgba(0,0,0,.18);
  }

}


/* Remove browser triangle */

.table-games-faq summary {
  list-style: none;
}

.table-games-faq summary::-webkit-details-marker {
  display: none;
}

.table-games-faq summary::marker {
  content: "";
}


/* Question */

.table-games-faq summary {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 64px;

  padding:
    1.15rem 3.6rem
    1.15rem 1.35rem;

  cursor: pointer;

  color: #fff;

  font-size:
    clamp(.98rem, 1.25vw, 1.08rem);

  font-weight: 750;
  line-height: 1.45;

  user-select: none;
}


/* Gold + button */

.table-games-faq summary::after {
  content: "+";

  position: absolute;

  top: 50%;
  right: 1.25rem;

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  transform:
    translateY(-50%);

  border-radius: 50%;

  color: #ffd04c;

  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;

  transition:
    transform .18s ease,
    background .18s ease;
}


/* Open card */

.table-games-faq .faq-item[open] {
  border-color:
    rgba(255,207,73,.48);

  background:
    rgba(43,20,68,.97);

  box-shadow:
    0 12px 30px rgba(0,0,0,.20);
}


.table-games-faq
.faq-item[open]
summary {
  color: #f7df92;
}


.table-games-faq
.faq-item[open]
summary::after {
  content: "−";

  background:
    rgba(255,208,68,.08);
}


/* Answer area */

.table-games-faq .faq-answer {
  padding:
    0 1.35rem 1.35rem;
}


.table-games-faq .faq-answer::before {
  content: "";

  display: block;

  height: 1px;

  margin-bottom: 1.05rem;

  background:
    linear-gradient(
      90deg,
      rgba(246,203,76,.23),
      rgba(143,67,225,.16),
      transparent
    );
}


.table-games-content-update
.table-games-faq
.faq-answer p {
  margin: 0;

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

  font-size: 1rem;
  line-height: 1.72;
}


/* Keyboard accessibility */

.table-games-faq summary:focus-visible {
  outline:
    2px solid #ffd04c;

  outline-offset:
    -3px;

  border-radius:
    10px;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 768px) {

  .table-games-content-update
  .table-games-faq {
    margin: 2.5rem 0;

    padding: 1.15rem;

    border-radius: 16px;
  }


  .table-games-content-update
  .table-games-faq
  .faq-heading > h2 {
    font-size:
      clamp(1.4rem, 5vw, 1.8rem);
  }


  .table-games-faq
  .faq-list {
    gap: 10px;
  }


  .table-games-faq summary {
    min-height: 58px;

    padding:
      1rem 3rem
      1rem 1rem;

    font-size: .95rem;
  }


  .table-games-faq
  summary::after {
    right: .95rem;
  }


  .table-games-faq
  .faq-answer {
    padding:
      0 1rem 1.05rem;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 480px) {

  .table-games-content-update
  .table-games-faq {
    padding: .9rem;

    margin:
      2rem 0;

    border-radius: 14px;
  }


  .table-games-content-update
  .table-games-faq
  .faq-heading {
    margin-bottom: 1rem;
  }


  .table-games-content-update
  .table-games-faq
  .faq-heading > h2 {
    padding-bottom: .85rem;

    font-size: 1.35rem;
    line-height: 1.2;
  }


  .table-games-faq
  .faq-list {
    gap: 9px;
  }


  .table-games-faq
  summary {
    min-height: 58px;

    padding:
      .9rem 2.75rem
      .9rem .9rem;

    font-size: .9rem;
    line-height: 1.4;
  }


  .table-games-faq
  summary::after {
    right: .8rem;

    width: 24px;
    height: 24px;

    font-size: 1.25rem;
  }


  .table-games-faq
  .faq-answer {
    padding:
      0 .9rem 1rem;
  }


  .table-games-content-update
  .table-games-faq
  .faq-answer p {
    font-size: .94rem;
    line-height: 1.65;
  }

}