.catalog-hero {
  padding:32px 0 0
}
.breadcrumb {
  font-size:12px;
  text-decoration:none;
  color:var(--muted)
}
.catalog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:32px;
  gap:25px
}
.catalog-heading h1 {
  font:500 clamp(38px,4.6vw,62px)/1.12 'Playfair Display',Georgia,serif;
  margin:18px 0 22px;
  letter-spacing:-1px
}
.catalog-heading em {
  color:#75914a
}
.free-seal {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:110px;
  height:110px;
  background:#e4ebd5;
  border:1px solid #cad6b7;
  border-radius:50%;
  font:40px Georgia;
  transform:rotate(9deg)
}
.free-seal small {
  font:9px Arial;
  letter-spacing:1px;
  margin-top:8px
}
.catalog-intro {
  max-width:850px;
  font-size:16px;
  line-height:1.85;
  color:#536958;
  margin:0
}
.intro-more {
  border:0;
  padding:12px 0;
  font-size:13px
}
.intro-more summary {
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:4px
}
.intro-more p {
  max-width:850px
}
.catalog-notice {
  padding:15px 20px;
  background:#e9eddf;
  border:1px solid #d9dfcc;
  border-radius:7px;
  font-size:12px;
  line-height:1.9;
  margin:12px 0 32px
}
.catalog-notice a {
  white-space:nowrap;
  margin-left:8px
}
.filterbar {
  display:flex;
  gap:12px;
  padding:17px;
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:9px
}
.filterbar select {
  min-width:175px;
  background:#f8f7f1
}
.search-wrap {
  display:flex;
  align-items:center;
  flex:1;
  background:#f8f7f1;
  border:1px solid var(--line);
  border-radius:6px;
  padding-left:15px
}
.search-wrap span {
  font-size:23px
}
.search-wrap input {
  border:0;
  background:transparent;
  outline-offset:-3px;
  width:100%;
  min-width:80px
}
.category-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0 30px
}
.category-tabs button {
  padding:10px 16px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  border-radius:25px;
  cursor:pointer;
  font-size:12px
}
.category-tabs button[aria-pressed=true] {
  color:#fff;
  background:var(--ink);
  border-color:var(--ink)
}
.catalog-topline {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.catalog-topline h2 {
  font-size:29px
}
.catalog-topline p {
  font-size:12px;
  color:var(--muted)
}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:23px 18px
}
.gc {
  min-width:0;
  background:#fffdf8;
  border:1px solid #dce0d4;
  border-radius:10px;
  overflow:hidden;
  transition:transform .2s
}
.gc:hover {
  transform:translateY(-4px)
}
.gc[hidden] {
  display:none
}
.game-art {
  width:100%;
  height:192px;
  border:0;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  cursor:pointer;
  color:#fff6d7;
  isolation:isolate
}
.forest {
  background:radial-gradient(ellipse at top,#648454,#153d31 70%)
}
.wine {
  background:radial-gradient(ellipse at top,#b8654b,#652f39 70%)
}
.navy {
  background:radial-gradient(ellipse at top,#548a9e,#19394f 70%)
}
.plum {
  background:radial-gradient(ellipse at top,#9b6f8f,#4e304c 70%)
}
.night {
  background:radial-gradient(ellipse at top,#77709c,#242b4a 70%)
}
.copper {
  background:radial-gradient(ellipse at top,#bc9b57,#6c4c30 70%)
}
.game-symbol {
  font:68px Georgia;
  text-shadow:0 6px 8px #0004;
  z-index:1;
  letter-spacing:-6px
}
.art-title {
  font:16px 'Playfair Display',Georgia;
  z-index:1;
  margin-top:10px
}
.art-orbit {
  position:absolute;
  width:150px;
  height:150px;
  border:1px solid #ffffff2b;
  border-radius:50%;
  box-shadow:0 0 0 19px #ffffff06,0 0 0 20px #ffffff16;
  transform:rotate(-20deg)
}
.game-art:after {
  content:'✧';
  position:absolute;
  right:24px;
  top:20px;
  color:#f5db9b;
  font-size:24px
}
.play-overlay {
  position:absolute;
  inset:0;
  background:#102d29d9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  opacity:0;
  transition:opacity .2s;
  z-index:2
}
.game-art:hover .play-overlay,.game-art:focus-visible .play-overlay {
  opacity:1
}
.gc-meta {
  padding:16px
}
.gc-meta h3 {
  font-size:14px;
  margin:0 0 8px;
  line-height:1.4
}
.gc-meta p {
  font-size:10px;
  color:#6b756b;
  margin:0;
  line-height:1.8
}
.gc-meta p span {
  white-space:nowrap
}
.load-area {
  text-align:center;
  padding:25px 0 50px
}
.load-area p {
  font-size:12px;
  color:var(--muted)
}
#load-games,#reset-filters {
  padding:13px 25px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  border-radius:6px;
  cursor:pointer
}
#game-empty {
  padding:35px;
  text-align:center;
  background:#e9eddf;
  border-radius:10px
}
.guide-layout {
  display:grid;
  grid-template-columns:210px 1fr;
  gap:65px;
  padding:55px 0 80px;
  border-top:1px solid var(--line)
}
.guide-toc {
  align-self:start;
  position:sticky;
  top:25px;
  display:flex;
  flex-direction:column;
  gap:17px
}
.guide-toc a {
  font-size:12px;
  text-decoration:none;
  color:#5d725f
}
.guide-toc a:hover {
  text-decoration:underline
}
.guide-copy h2 {
  font-size:33px;
  line-height:1.25;
  margin:40px 0 22px;
  scroll-margin-top:25px
}
.guide-copy>h2:first-of-type {
  margin-top:15px
}
.guide-copy h3 {
  font-size:25px
}
.guide-copy ol {
  padding-left:23px
}
.guide-copy li {
  margin-bottom:9px
}
.guide-copy p {
  margin:0 0 20px
}
.comparison-wrap {
  overflow-x:auto
}
.comparison-wrap table {
  min-width:430px;
  background:#fffdf8
}
.comparison-wrap th {
  background:#e8ecdc
}
.comparison-wrap td,.comparison-wrap th {
  padding:15px;
  font-size:12px
}
#game-dialog {
  width:min(650px,95vw);
  max-width:650px;
  padding:28px;
  max-height:92vh;
  overflow-y:auto
}
#game-dialog .play-head {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:start
}
.play-head h2 {
  font-size:30px;
  margin:10px 0
}
.play-head button {
  border:0;
  border-radius:50%;
  background:#e3e8d8;
  font-size:18px;
  padding:7px 12px
}
#play-rule {
  font-size:13px;
  line-height:1.75;
  color:#5d6c60
}
.game-balance {
  padding:12px 15px;
  border-radius:7px;
  background:#e6ebda;
  font-size:14px
}
.game-balance span {
  float:right;
  font-size:10px;
  line-height:22px
}
.demo-footnote {
  font-size:10px;
  color:#798172;
  margin:23px 0 0
}
#play-stage {
  min-height:150px;
  background:#164536;
  border-radius:9px;
  margin-top:18px;
  color:#fff6e6;
  padding:22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px
}
#play-status {
  font-size:14px;
  min-height:35px;
  line-height:1.6
}
#play-controls {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
#play-controls button {
  background:var(--ink);
  color:white;
  border:0;
  border-radius:6px;
  padding:12px 19px;
  font-size:13px
}
#play-controls button:disabled {
  opacity:.45;
  cursor:default
}
.reels {
  display:flex;
  gap:14px
}
.reels span {
  width:75px;
  height:90px;
  background:#f5f0d8;
  color:#1e4938;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:43px;
  border-radius:8px;
  box-shadow:0 4px 0 #0c2c21
}
.roulette-result {
  font:60px Georgia;
  min-width:100px;
  padding:5px 20px;
  border-radius:50%;
  background:#223a2b
}
.hand {
  display:flex;
  gap:7px;
  justify-content:center;
  flex-wrap:wrap
}
.playing-card {
  display:inline-flex;
  min-width:53px;
  height:73px;
  padding:8px;
  background:#faf8ec;
  border:2px solid transparent;
  border-radius:6px;
  align-items:center;
  justify-content:center;
  font:22px Georgia;
  color:#153a30
}
.playing-card.red {
  color:#b24e43
}
.playing-card.kept {
  border:2px solid #d6f28f;
  box-shadow:0 0 0 3px #bcd78c55;
  transform:translateY(-5px)
}
.hand-label {
  font-size:11px;
  color:#c3d2bc;
  margin-bottom:8px
}
.poker-pay {
  font-size:10px;
  line-height:1.7;
  color:#c4d4bf
}
button:focus-visible,a:focus-visible {
  outline:3px solid #b0c879;
  outline-offset:3px
}
html {
  scroll-behavior:smooth
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .gc,.play-overlay {
    transition:none
  }
}
@media(max-width:950px) {
  .catalog-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .guide-layout {
    gap:30px;
    grid-template-columns:160px 1fr
  }
  .game-art {
    height:180px
  }
}
@media(max-width:650px) {
  .catalog-heading {
    margin-top:20px
  }
  .catalog-heading h1 {
    font-size:36px
  }
  .free-seal {
    display:none
  }
  .filterbar {
    flex-wrap:wrap;
    padding:12px
  }
  .search-wrap {
    flex-basis:100%
  }
  .filterbar select {
    flex:1;
    min-width:100px;
    font-size:11px;
    padding:12px 9px
  }
  .category-tabs {
    gap:7px;
    margin-bottom:20px
  }
  .category-tabs button {
    font-size:10px;
    padding:9px 12px
  }
  .catalog-grid {
    grid-template-columns:repeat(2,1fr);
    gap:13px
  }
  .game-art {
    height:155px
  }
  .game-symbol {
    font-size:52px
  }
  .art-title {
    font-size:13px
  }
  .gc-meta {
    padding:12px
  }
  .gc-meta h3 {
    font-size:12px
  }
  .gc-meta p {
    font-size:9px
  }
  .guide-layout {
    display:block;
    padding-top:30px
  }
  .guide-toc {
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:35px
  }
  .guide-toc p {
    width:100%
  }
  .guide-copy h2 {
    font-size:28px
  }
  #game-dialog {
    padding:20px
  }
  .reels {
    gap:8px
  }
  .reels span {
    width:60px;
    height:75px
  }
  .playing-card {
    min-width:42px;
    height:62px;
    font-size:18px;
    padding:5px
  }
  .catalog-topline h2 {
    font-size:26px
  }
}