/* v56: welcome article media follows the shared casino image viewer. */
.gg-article.welcome-visual-article #welcome-bonus-basics > p,
.gg-article.welcome-visual-article .welcome-source-step > p {
  margin: 10px 0;
  font-size: 15px;
  line-height: 1.66;
}
.gg-article.welcome-visual-article .article-number-list .article-marker {
  white-space: normal;
  overflow-wrap: anywhere;
}
.gg-article.welcome-visual-article .welcome-comparison-wrap {
  width: 100%;
  max-width: 100%;
  margin: 14px 0;
}
.gg-article.welcome-visual-article .welcome-comparison-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}
.gg-article.welcome-visual-article .welcome-comparison-table :is(th, td) {
  padding: 9px 10px;
  border: 1px solid #dce8f0;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.gg-article.welcome-visual-article .welcome-comparison-table th:first-child { width: 25%; }
.gg-article.welcome-visual-article .welcome-comparison-table thead th {
  color: #0b4f80;
  background: #edf6fd;
  font-weight: 700;
}
.gg-article.welcome-visual-article .welcome-comparison-table tbody th {
  color: #365568;
  background: #f7fafc;
  font-weight: 600;
}
.gg-article.welcome-visual-article :is(.welcome-choice-list, .welcome-detail-list, .welcome-free-breakdown) {
  margin: 12px 0 16px;
  padding: 0;
}
.gg-article.welcome-visual-article :is(.welcome-choice-list, .welcome-detail-list, .welcome-free-breakdown) > div {
  display: grid;
  grid-template-columns: minmax(90px, .8fr) minmax(0, 2fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #e0e9ef;
}
.gg-article.welcome-visual-article :is(.welcome-choice-list, .welcome-detail-list, .welcome-free-breakdown) dt {
  color: #0b6cae;
  font-size: 14px;
  font-weight: 600;
}
.gg-article.welcome-visual-article :is(.welcome-choice-list, .welcome-detail-list, .welcome-free-breakdown) dd {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.gg-article.welcome-visual-article .welcome-free-breakdown dd strong { font-size: 20px; }
.gg-article.welcome-visual-article .welcome-match-release {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px 0;
  border-block: 1px solid #dbe8f1;
  text-align: center;
}
.gg-article.welcome-visual-article .welcome-match-release > div { min-width: 0; font-size: 13px; line-height: 1.6; }
.gg-article.welcome-visual-article .welcome-match-release strong { display: block; color: #0b6cae; font-size: 30px; line-height: 1.25; }
.gg-article.welcome-visual-article .welcome-match-release p { margin: 0; }
.gg-article.welcome-visual-article .welcome-vertical-steps { display: block; margin: 14px 0; }
.gg-article.welcome-visual-article .welcome-vertical-steps > .welcome-source-step {
  min-width: 0;
  margin: 18px 0;
  padding: 0 0 14px;
  border-bottom: 1px solid #e0e9ef;
}
.gg-article.welcome-visual-article .welcome-source-step > h3.procedure-step-heading {
  margin-top: 0;
}
.gg-article.welcome-visual-article .welcome-vertical-steps .welcome-source-figure {
  max-width: 660px;
  margin-inline: auto;
}
.gg-article.welcome-visual-article .welcome-confirm-list {
  margin: 10px 0;
  padding-left: 1.4em;
  font-size: 15px;
  line-height: 1.65;
}
.gg-article.welcome-visual-article .welcome-confirm-list > li { margin: 4px 0; }
@media (max-width: 560px) {
  .gg-article.welcome-visual-article .article-intro > h1 > .heading-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 17px;
  }
  .gg-article.welcome-visual-article .welcome-comparison-table { font-size: 12px; line-height: 1.6; }
  .gg-article.welcome-visual-article .welcome-comparison-table :is(th, td) { padding: 7px 5px; }
  .gg-article.welcome-visual-article :is(.welcome-choice-list, .welcome-detail-list, .welcome-free-breakdown) > div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }
  .gg-article.welcome-visual-article :is(.welcome-choice-list, .welcome-detail-list, .welcome-free-breakdown) dt { font-size: 13px; }
  .gg-article.welcome-visual-article .welcome-match-release { gap: 8px; }
}
/* Only media sizing and the progressive image viewer. Article typography,
   headings, TOC, callouts, CTA pitch and buttons use the shared site CSS. */
.gg-article.welcome-visual-article .welcome-source-hero,
.gg-article.welcome-visual-article .welcome-source-figure {
  width: 100%;
  max-width: 100%;
}
.gg-article.welcome-visual-article .welcome-source-hero > .image-cta {
  display: block;
  width: 100%;
  margin: 0;
}
.gg-article.welcome-visual-article .welcome-source-figure .article-screenshot-frame {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
}
.gg-article.welcome-visual-article :is(.welcome-source-hero, .welcome-source-figure) img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.gg-article.welcome-visual-article .welcome-image-zoom {
  display: block;
  width: 100%;
  cursor: zoom-in;
}
.gg-article.welcome-visual-article .welcome-source-steps,
.gg-article.welcome-visual-article .welcome-source-step { min-width: 0; }
.gg-article.welcome-visual-article .welcome-source-line { max-width: 760px; margin-inline: auto; }
#welcome-image-viewer {
  box-sizing: border-box;
  width: min(1180px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #253844;
}
#welcome-image-viewer:not([open]) { display: none; }
#welcome-image-viewer[open] { display: flex; flex-direction: column; }
#welcome-image-viewer::backdrop { background: rgba(4,17,30,.86); }
#welcome-image-viewer .welcome-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #dce6ef;
  font-size: 12px;
}
#welcome-image-viewer .welcome-viewer-controls { display: flex; gap: 8px; }
#welcome-image-viewer button {
  min-height: 40px;
  padding: 6px 11px;
  border: 1px solid #b7cbd9;
  border-radius: 4px;
  background: #fff;
  color: #0b6cae;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#welcome-image-viewer :focus-visible { outline: 3px solid #087dcc; outline-offset: -3px; }
#welcome-image-viewer .welcome-viewer-stage {
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
  background: #eaf0f5;
}
#welcome-viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 155px);
  max-height: calc(100dvh - 155px);
  margin: auto;
}
#welcome-image-viewer.is-full-size #welcome-viewer-image {
  width: var(--welcome-image-width);
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
}
#welcome-viewer-note {
  flex: none;
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.65;
  color: #64727d;
}
@media (max-width: 360px) {
  #welcome-image-viewer .welcome-viewer-bar { padding-inline: 8px; gap: 5px; }
  #welcome-image-viewer button { padding-inline: 8px; font-size: 12px; }
}
