:root {
  --green-950: #092d27;
  --green-900: #103c32;
  --green-800: #195244;
  --green-500: #66a06e;
  --paper: #f2eadb;
  --paper-light: #fffaf0;
  --ink: #17221d;
  --red: #d84a3a;
  --yellow: #efb847;
  --line: rgba(23, 34, 29, 0.18);
  --sans: "DM Sans", sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.8rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 0 0 0.5rem 0.5rem;
}

.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1440px, calc(100% - 96px));
  margin: 0 auto;
  color: var(--paper-light);
  border-bottom: 1px solid rgba(255, 250, 240, 0.22);
}

.brand { display: inline-flex; align-items: center; gap: 0.75rem; }

.brand-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.85rem;
  transform: rotate(-7deg);
}

.brand-mark span:last-child { color: var(--red); }

.brand-name {
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.05;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.main-nav { display: flex; align-items: center; gap: 2.25rem; font-size: 0.84rem; }
.main-nav > a { transition: opacity 180ms ease; }
.main-nav > a:hover { opacity: 0.68; }

.main-nav .nav-cta {
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
}

.nav-cta span { margin-left: 0.6rem; }

.hero {
  position: relative;
  min-height: 820px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  overflow: hidden;
  background: var(--green-900);
  color: var(--paper-light);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 176px 5vw 90px max(48px, calc((100vw - 1440px) / 2));
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 2rem;
  color: #c1d3c4;
  font-size: 0.73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.17em;
}

.eyebrow span { width: 28px; height: 1px; background: var(--yellow); }

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 6.3vw, 7rem);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.045em;
}

.hero h1 em { color: var(--yellow); font-weight: 400; }

.hero-intro {
  max-width: 560px;
  margin: 2rem 0 0;
  color: #c7d6ca;
  font-size: 1.05rem;
  line-height: 1.7;
}

.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.4rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: 200px;
  padding: 1rem 1.2rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
}

.button-primary { background: var(--red); color: #fff; transition: transform 180ms ease, background 180ms ease; }
.button-primary:hover { background: #e45b4a; transform: translateY(-2px); }
.text-link { font-size: 0.88rem; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 0.2rem; }
.text-link span { margin-left: 0.4rem; }

.hero-table {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  background: var(--green-800);
  border-left: 1px solid rgba(255,255,255,.12);
}

.hero-table::before,
.hero-table::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}

.hero-table::before { width: 680px; height: 680px; right: -80px; top: 95px; }
.hero-table::after { width: 490px; height: 490px; right: 14px; top: 190px; }

.table-line { position: absolute; z-index: 0; height: 1px; width: 120%; background: rgba(255,255,255,.1); }
.line-one { top: 39%; left: -10%; transform: rotate(19deg); }
.line-two { top: 69%; left: -10%; transform: rotate(-13deg); }

.playing-card {
  position: absolute;
  z-index: 2;
  width: clamp(185px, 17vw, 255px);
  aspect-ratio: 0.69;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0,0,0,.3);
  background: var(--paper-light);
  color: var(--ink);
}

.card-back {
  left: 5%;
  top: 28%;
  transform: rotate(-19deg);
  background: var(--red);
  border: 9px solid var(--paper-light);
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: -15px;
}

.back-pattern {
  position: absolute;
  inset: 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.8);
  color: var(--paper-light);
  font-size: 5rem;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 11px 11px;
}

.card-king { left: 29%; top: 24%; transform: rotate(2deg); }
.card-ace { left: 52%; top: 20%; transform: rotate(18deg); }

.card-corner {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: .68;
  text-align: center;
}

.card-corner small { font-size: 1.05rem; }
.card-corner-bottom { inset: auto 18px 18px auto; transform: rotate(180deg); }
.card-symbol { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6.5rem; }
.red { color: var(--red); }

.roundel {
  position: absolute;
  z-index: 4;
  right: 7%;
  top: 59%;
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  transform: rotate(-9deg);
}

.roundel strong { position: absolute; font-size: 2rem; }
.roundel span { position: absolute; font-size: .63rem; font-weight: 700; letter-spacing: .16em; }
.roundel span:first-child { top: 21px; }
.roundel span:last-child { bottom: 21px; transform: rotate(180deg); }

.table-note {
  position: absolute;
  z-index: 3;
  left: 7%;
  bottom: 54px;
  margin: 0;
  color: #cbd9ce;
  font-size: 0.78rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.table-note span { color: var(--yellow); margin-right: .6rem; }

.concept {
  display: grid;
  grid-template-columns: 1fr 2.2fr 1.5fr;
  gap: 4rem;
  padding: 130px max(48px, calc((100vw - 1440px) / 2));
  background: var(--paper);
}

.section-label {
  padding-top: .65rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.section-label span { color: var(--red); margin-right: .7rem; }
.section-label.light { color: #c2d2c6; }
.section-label.light span { color: var(--yellow); }

.concept-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 4.3vw, 4.8rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}

.concept-copy p { max-width: 620px; margin: 2.1rem 0 0; font-size: 1.05rem; line-height: 1.75; color: #4f5b54; }

.concept-points { border-top: 1px solid var(--line); }
.concept-points div { display: flex; align-items: flex-start; gap: 1.6rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.concept-points strong { color: var(--red); font-size: .68rem; letter-spacing: .1em; }
.concept-points span { font-size: .9rem; line-height: 1.45; }

.games-section {
  padding: 120px max(48px, calc((100vw - 1440px) / 2)) 130px;
  background: var(--green-950);
  color: var(--paper-light);
}

.games-heading { display: flex; justify-content: space-between; align-items: end; gap: 4rem; }
.games-heading h2 { margin: 1.5rem 0 0; font-family: var(--serif); font-size: clamp(3.3rem, 5.5vw, 6rem); font-weight: 400; line-height: .9; letter-spacing: -.04em; }
.games-heading h2 em { color: var(--yellow); font-weight: 400; }
.games-heading > p { max-width: 430px; margin: 0 0 .5rem; color: #adc2b5; font-size: .98rem; line-height: 1.7; }

.game-toolbar { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); margin: 4rem 0 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); }
.search-column { display: flex; align-items: flex-start; flex-direction: column; gap: 1rem; min-width: 0; }
.search-box { width: min(360px, 100%); display: flex; align-items: center; gap: .6rem; padding: .78rem 1rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #bdd0c2; }
.search-box input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; }
.search-box input::placeholder { color: #93a99b; }
.directory-link { display: inline-flex; align-items: center; gap: .8rem; padding: .2rem 0 .35rem; border-bottom: 1px solid rgba(255,255,255,.28); color: #d6e2da; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color 160ms ease,border-color 160ms ease; }
.directory-link span { color: var(--yellow); font-size: .9rem; transition: transform 160ms ease; }
.directory-link:hover,.directory-link:focus-visible { border-color: var(--yellow); color: #fff; }
.directory-link:hover span,.directory-link:focus-visible span { transform: translate(2px,-2px); }
.filter-panel { display: grid; gap: .9rem; min-width: 0; }
.filter-group { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: .8rem; }
.filter-label { padding-top: .72rem; color: #789488; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; }
.filter { padding: .65rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #b8cabd; cursor: pointer; transition: 160ms ease; }
.filter:hover, .filter.is-active { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.filter-favorite span { margin-right: .28rem; color: var(--yellow); }
.filter-favorite.is-active span { color: var(--red); }

.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.game-card { min-width: 0; display: flex; flex-direction: column; background: var(--green-950); transition: background 180ms ease; }
.game-card:hover { background: #103a31; }
.game-card[hidden] { display: none; }
.game-art { position: relative; height: 285px; overflow: hidden; background: var(--paper); color: var(--ink); }
.game-card-copy { flex: 1; display: flex; flex-direction: column; min-height: 260px; padding: 1.7rem; }
.game-meta { display: flex; gap: .55rem; color: #92aa9b; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; }
.game-meta span + span::before { content: "•"; margin-right: .55rem; color: var(--yellow); }
.game-card h3 { margin: 1.5rem 0 .6rem; font-family: var(--serif); font-size: 2.2rem; font-weight: 400; }
.game-card p { margin: 0; color: #a9beb1; font-size: .88rem; line-height: 1.65; }
.game-card .game-aliases { margin: -.15rem 0 .75rem; color: #d5e0d8; font-size: .68rem; line-height: 1.5; }
.game-aliases span { margin-right: .3rem; color: var(--yellow); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.game-link { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 1.6rem; color: var(--paper-light); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; border-top: 1px solid rgba(255,255,255,.12); }
.game-link b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); font-size: 1rem; transition: transform 180ms ease; }
.game-card:hover .game-link b { transform: rotate(45deg); }

.art-sueca { background: #e7b43e; }
.mini-card { position: absolute; width: 115px; height: 165px; padding: .65rem; border-radius: 7px; background: var(--paper-light); box-shadow: 0 16px 24px rgba(0,0,0,.2); font-family: var(--serif); font-size: 1.8rem; line-height: .7; }
.mini-card small { font-size: 1rem; color: var(--red); }
.mini-one { left: 12%; top: 68px; transform: rotate(-15deg); }
.mini-two { left: calc(50% - 58px); top: 47px; transform: rotate(1deg); }
.mini-two small { color: var(--ink); }
.mini-three { right: 12%; top: 68px; transform: rotate(15deg); }

.art-bisca-nine { display: flex; align-items: center; justify-content: center; background: #2b665d; }
.art-bisca-nine .bisca-card { width: 108px; height: 154px; padding: .7rem; border: 5px solid #f5efdf; border-radius: 9px; background: var(--paper-light); color: var(--ink); font-family: var(--serif); font-size: 2rem; line-height: .75; box-shadow: 0 16px 26px rgba(0,0,0,.25); }
.art-bisca-nine .bisca-card small { display: block; font-size: 1.15rem; }
.art-bisca-nine .bisca-ace { transform: rotate(-10deg); }
.art-bisca-nine .bisca-seven { margin-left: -34px; color: var(--red); transform: translateY(9px) rotate(9deg); }
.art-bisca-nine > b { position: absolute; right: 14%; bottom: 24px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--serif); font-size: 1.8rem; font-weight: 400; }

.art-copas { display: grid; place-items: center; background: #de5949; color: #751b17; }
.art-copas span { font-size: 10rem; line-height: 1; }
.art-copas i, .art-copas b { position: absolute; font-style: normal; font-size: 3rem; color: var(--paper); }
.art-copas i { left: 12%; top: 18%; transform: rotate(-18deg); }
.art-copas b { right: 12%; bottom: 12%; transform: rotate(18deg); }

.art-solitaire { display: flex; justify-content: center; align-items: center; gap: .5rem; background: #71a879; }
.art-crapo{display:flex;justify-content:center;align-items:center;background:#638b85}.crapo-card{position:absolute;width:78px;height:112px;padding:10px;border:4px solid #fffaf0;border-radius:7px;background:#fffaf0;box-shadow:0 13px 20px rgba(0,0,0,.2);font-family:var(--serif);font-size:1.5rem;line-height:1}.crapo-card small{display:block;font-size:1rem}.crapo-card.one{transform:translate(-72px,12px) rotate(-13deg);color:#d95847}.crapo-card.two{transform:translate(0,-14px) rotate(3deg)}.crapo-card.three{transform:translate(72px,12px) rotate(13deg);color:#d95847}.art-crapo i{position:absolute;bottom:33px;padding:4px 9px;border-radius:999px;background:#efbe56;color:#17382f;font-size:.65rem;font-style:normal;font-weight:700;letter-spacing:.1em}
.art-solitaire span { width: 58px; height: 86px; border-radius: 5px; background: var(--paper-light); box-shadow: 0 9px 16px rgba(0,0,0,.15); transform: translateY(var(--y, 0)) rotate(var(--r, 0)); }
.art-solitaire span:nth-child(1) { --y: 25px; --r: -10deg; }
.art-solitaire span:nth-child(2) { --y: -10px; --r: -3deg; }
.art-solitaire span:nth-child(3) { --y: 12px; --r: 4deg; }
.art-solitaire span:nth-child(4) { --y: -18px; --r: 11deg; }

.art-war { display: flex; align-items: center; justify-content: center; gap: 1rem; background: #243f64; color: var(--paper-light); }
.art-war span { width: 100px; height: 145px; padding: .8rem; border-radius: 7px; background: var(--paper-light); color: var(--ink); font-family: var(--serif); font-size: 2rem; box-shadow: 0 13px 20px rgba(0,0,0,.22); }
.art-war span small { display: block; }
.art-war i { z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin: 0 -1.7rem; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: .8rem; font-weight: 800; font-style: normal; }
.art-war .war-left { transform: rotate(-10deg); }
.art-war .war-right { transform: rotate(10deg); color: var(--red); }

.art-fish { background: #96c7ca; }
.art-fish i { position: absolute; left: 50%; top: 50%; font-size: 7rem; font-style: normal; color: #164c51; transform: translate(-50%,-50%) rotate(90deg); }
.bubble { position: absolute; display: block; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; }
.bubble-one { width: 38px; height: 38px; left: 22%; top: 18%; }
.bubble-two { width: 18px; height: 18px; left: 33%; top: 34%; }

.art-president { background: #b47a9e; color: #50223e; }
.crown { position: absolute; left: 50%; top: 50%; font-size: 8rem; transform: translate(-50%,-58%); }
.step { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--paper); font-family: var(--serif); font-size: 1.6rem; box-shadow: 0 8px 14px rgba(0,0,0,.15); }
.step-one { left: 17%; bottom: 16%; }
.step-two { right: 17%; top: 13%; }
.art-shithead { display:flex;align-items:center;justify-content:center;gap:1rem;background:#24483f;color:var(--paper-light); }
.art-shithead span { width:92px;height:132px;padding:.75rem;border-radius:7px;background:var(--paper-light);color:var(--red);font-family:var(--serif);font-size:1.9rem;box-shadow:0 13px 20px rgba(0,0,0,.22); }
.art-shithead span small { display:block; }
.art-shithead .hidden-card { display:grid;place-items:center;background:#d56d4d;color:#fff;transform:rotate(8deg); }
.art-shithead .burn-card { transform:rotate(-8deg); }
.art-shithead i { z-index:2;margin:0 -1.7rem;color:var(--yellow);font-size:2.7rem;font-style:normal; }
.art-swoop { display:flex;align-items:center;justify-content:center;background:#5d86a6; }
.art-swoop .swoop-card { width:62px;height:94px;margin-left:-18px;padding:.45rem;border-radius:6px;background:var(--paper-light);color:var(--ink);font-family:var(--serif);font-size:1.35rem;box-shadow:0 10px 17px rgba(0,0,0,.2);transform:rotate(-7deg); }
.art-swoop .swoop-card:nth-child(even){color:var(--red);transform:rotate(7deg)}
.art-swoop .swoop-card small{display:block}.art-swoop i{position:absolute;bottom:36px;padding:.45rem .7rem;border-radius:999px;background:var(--yellow);font-size:.62rem;font-weight:800;font-style:normal;letter-spacing:.12em}
.art-twenty-nine{display:flex;align-items:center;justify-content:center;gap:0;background:#d99a46}.art-twenty-nine>span{width:72px;height:104px;padding:.55rem;border:4px solid #f5efdf;border-radius:8px;background:#fffaf0;color:#17354a;font-family:var(--serif);font-size:1.65rem;box-shadow:0 12px 20px rgba(0,0,0,.2);transform:rotate(-7deg)}.art-twenty-nine>span:nth-child(2){margin-left:-24px;color:var(--red);transform:rotate(7deg)}.art-twenty-nine small{display:block}.art-twenty-nine b{position:absolute;right:16%;bottom:24px;color:#fff7e8;font-family:var(--serif);font-size:3.3rem;font-weight:400}
.art-tonk{display:flex;align-items:center;justify-content:center;background:#7d4a3b}.art-tonk>span{width:58px;height:88px;margin-left:-14px;padding:.45rem;border-radius:6px;background:#fffaf0;color:#17354a;font-family:var(--serif);font-size:1.3rem;box-shadow:0 10px 18px rgba(0,0,0,.22);transform:rotate(-5deg)}.art-tonk>span:nth-child(2){transform:translateY(-7px)}.art-tonk>span:nth-child(3){transform:rotate(5deg)}.art-tonk small{display:block}.art-tonk b{position:absolute;bottom:27px;padding:.4rem .65rem;background:#efbd55;color:#2b241e;font-size:.62rem;letter-spacing:.14em}
.art-spades{display:grid;place-items:center;background:#1d4557;color:#fffaf0}.art-spades .spades-card{width:112px;height:158px;padding:.7rem;border:5px solid #f5efdf;border-radius:9px;background:#fffaf0;color:#15232b;font-family:var(--serif);font-size:2rem;line-height:.75;box-shadow:0 16px 26px rgba(0,0,0,.28);transform:rotate(-9deg)}.art-spades .spades-card small{display:block;font-size:1.2rem}.art-spades i{position:absolute;font-size:5.5rem;font-style:normal;transform:translate(43px,10px) rotate(10deg)}.art-spades b{position:absolute;right:15%;bottom:28px;padding:.4rem .65rem;background:#e8b84c;color:#15232b;font-size:.62rem;letter-spacing:.14em}
.art-burro{display:grid;place-items:center;background:#96684d;color:#fffaf0}.art-burro .burro-card{width:108px;height:154px;padding:.7rem;border:5px solid #f5efdf;border-radius:9px;background:#fffaf0;color:#292018;font-family:var(--serif);font-size:2rem;line-height:.75;box-shadow:0 16px 26px rgba(0,0,0,.25);transform:rotate(-8deg)}.art-burro .burro-card small{display:block;font-size:1.15rem}.art-burro i{position:absolute;font-size:5rem;font-style:normal;transform:translate(48px,8px) rotate(8deg)}.art-burro b{position:absolute;right:13%;bottom:28px;padding:.4rem .65rem;background:#e9b84f;color:#292018;font-size:.62rem;letter-spacing:.14em}

.art-desconfia{display:grid;place-items:center;background:#55335c;color:#fffaf0}.desconfia-card{position:absolute;width:96px;height:142px;border:6px solid #f5efdf;border-radius:8px;background:repeating-linear-gradient(45deg,#d76258 0 6px,#b84b55 6px 12px);box-shadow:0 15px 25px rgba(0,0,0,.27)}.art-desconfia .card-one{transform:translateX(-42px) rotate(-12deg)}.art-desconfia .card-two{transform:translateY(-7px) rotate(2deg)}.art-desconfia .card-three{transform:translateX(42px) rotate(13deg)}.art-desconfia i{z-index:2;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--yellow);color:#292018;font-family:var(--serif);font-size:2rem;font-style:normal;box-shadow:0 7px 15px rgba(0,0,0,.18)}.art-desconfia b{position:absolute;z-index:3;bottom:25px;padding:.42rem .7rem;background:#28172d;color:#fffaf0;font-size:.58rem;letter-spacing:.14em}

.art-encaje{display:flex;align-items:center;justify-content:center;background:#714057;color:#fffaf0}.art-encaje .encaje-card{width:92px;height:136px;padding:.65rem;border:5px solid #f5efdf;border-radius:8px;background:#fffaf0;color:#292018;font-family:var(--serif);font-size:1.8rem;line-height:.75;box-shadow:0 14px 24px rgba(0,0,0,.25);transform:rotate(-9deg)}.art-encaje .encaje-card:nth-child(2){margin-left:-30px;color:var(--red);transform:translateY(8px) rotate(9deg)}.art-encaje small{display:block;font-size:1rem}.art-encaje i{position:absolute;right:14%;top:30px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--yellow);color:#292018;font-family:var(--serif);font-size:1.1rem;font-style:normal}.art-encaje b{position:absolute;bottom:28px;padding:.4rem .65rem;background:#301b27;color:#fffaf0;font-size:.58rem;letter-spacing:.14em}

.art-ecarte{display:flex;align-items:center;justify-content:center;background:#59425d;color:#fffaf0}.art-ecarte .ecarte-card{width:92px;height:136px;padding:.65rem;border:5px solid #f5efdf;border-radius:8px;background:#fffaf0;color:#292018;font-family:var(--serif);font-size:1.8rem;line-height:.75;box-shadow:0 14px 24px rgba(0,0,0,.25);transform:rotate(-10deg)}.art-ecarte .ecarte-queen{margin-left:-27px;color:var(--red);transform:translateY(9px) rotate(10deg)}.art-ecarte small{display:block;font-size:1rem}.art-ecarte i{position:absolute;right:14%;top:27px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--yellow);color:#292018;font-family:var(--serif);font-size:1.45rem;font-style:normal}.art-ecarte b{position:absolute;bottom:27px;padding:.4rem .7rem;background:#281c2c;color:#fffaf0;font-size:.58rem;letter-spacing:.14em}

.art-koi-koi{display:flex;align-items:center;justify-content:center;background:#315443;color:#fffaf0}.art-koi-koi .hana-mini{position:relative;width:92px;height:142px;padding:.55rem;border:6px solid #f7eedb;border-radius:7px;background:#eec86d;color:#1a251f;font-size:2.5rem;box-shadow:0 14px 24px rgba(0,0,0,.28);transform:rotate(-9deg)}.art-koi-koi .hana-mini:nth-child(2){margin-left:-25px;background:#e7dfc2;transform:translateY(9px) rotate(9deg)}.art-koi-koi .hana-mini small{position:absolute;left:6px;top:5px;font-family:var(--sans);font-size:.55rem}.art-koi-koi .hana-mini b{position:absolute;left:8px;bottom:7px;font-size:1.6rem}.art-koi-koi i{position:absolute;bottom:28px;padding:.4rem .75rem;background:#cf493f;color:#fff;font-size:.65rem;font-weight:700;font-style:normal;letter-spacing:.12em}
.art-wolf{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 34%,#5b4b69,#2b263b 62%,#1a2231);color:#fffaf0}.art-wolf .wolf-moon{position:absolute;top:25px;left:50%;color:#f0d7ad;font-size:7rem;line-height:1;transform:translateX(-50%);opacity:.45}.art-wolf .wolf-card{position:relative;width:90px;height:130px;padding:.6rem;border:5px solid #f6eddf;border-radius:8px;background:#fffaf0;color:#2a2633;font-family:var(--serif);font-size:1.8rem;line-height:.8;box-shadow:0 16px 25px rgba(0,0,0,.28);transform:translate(-12px,22px) rotate(-10deg)}.art-wolf .wolf-queen{margin-left:-25px;color:#bd5b57;transform:translate(12px,20px) rotate(10deg)}.art-wolf .wolf-card small{display:block;font-size:1.1rem}.art-wolf>b{position:absolute;right:17%;bottom:26px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e8bb6f;color:#2a2633;font-family:var(--serif);font-size:1.8rem;font-weight:400}

.empty-state { padding: 3rem 1rem; text-align: center; color: #a9beb1; border: 1px solid rgba(255,255,255,.14); }

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 2rem;
  align-items: start;
  padding: 76px max(48px, calc((100vw - 1440px) / 2)) 38px;
  background: #071f1b;
  color: var(--paper-light);
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-brand { align-self: start; }
.site-footer p { margin: 0; color: #8ea69a; font-size: .85rem; line-height: 1.6; }
.back-to-top { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid #61776c; padding-bottom: .35rem; }
.back-to-top span { margin-left: 1rem; }
.site-footer small { grid-column: 1 / -1; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); color: #71877c; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 700px; padding-right: max(48px, calc((100vw - 1440px) / 2)); }
  .hero-table { min-height: 650px; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .playing-card { width: 230px; }
  .card-back { left: 21%; top: 23%; }
  .card-king { left: 38%; top: 18%; }
  .card-ace { left: 55%; top: 13%; }
  .concept { grid-template-columns: 1fr 2.5fr; }
  .concept-points { grid-column: 2; }
  .game-toolbar { grid-template-columns: 1fr; }
  .search-box { width: min(440px, 100%); }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 36px); height: 88px; }
  .main-nav > a:not(.nav-cta):not(.nav-index) { display: none; }
  .main-nav .nav-cta { padding: .7rem .85rem; font-size: .73rem; }
  .hero-copy { min-height: 650px; padding: 145px 22px 70px; }
  .hero h1 { font-size: clamp(3.4rem, 16vw, 5.2rem); }
  .hero-intro { font-size: .96rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.3rem; }
  .hero-table { min-height: 510px; }
  .playing-card { width: 42vw; max-width: 190px; border-radius: 10px; }
  .card-back { left: 3%; top: 25%; }
  .card-king { left: 29%; top: 19%; }
  .card-ace { left: 53%; top: 14%; }
  .card-symbol { font-size: 4rem; }
  .card-corner { top: 13px; left: 13px; font-size: 1.4rem; }
  .card-corner-bottom { inset: auto 13px 13px auto; }
  .roundel { width: 105px; height: 105px; right: 5%; top: 63%; }
  .roundel span { font-size: .5rem; }
  .roundel span:first-child { top: 15px; }
  .roundel span:last-child { bottom: 15px; }
  .concept { grid-template-columns: 1fr; gap: 2rem; padding: 84px 22px; }
  .concept-points { grid-column: auto; }
  .games-section { padding: 84px 22px; }
  .games-heading { align-items: flex-start; flex-direction: column; gap: 1.8rem; }
  .game-toolbar { gap: 1.5rem; }
  .filter-group { grid-template-columns: 1fr; gap: .45rem; }
  .filter-label { padding-top: 0; }
  .filters { justify-content: flex-start; }
  .filter { font-size: .75rem; }
  .game-grid { grid-template-columns: 1fr; }
  .game-art { height: 250px; }
  .game-card-copy { min-height: 240px; }
  .site-footer { grid-template-columns: 1fr auto; padding: 60px 22px 30px; }
  .site-footer p { grid-column: 1 / -1; grid-row: 2; }
  .back-to-top { grid-column: 2; grid-row: 1; }
}

.art-luk-fu{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#747c6d,#3e4945)}.art-luk-fu>span{width:60px;height:125px;padding:10px;margin-left:12px;border:5px solid #fff7e6;border-radius:5px;background:#fff7e6;color:#aa443e;font-family:var(--serif);font-size:1.7rem;box-shadow:0 12px 22px #0004;transform:rotate(-10deg)}.art-luk-fu>span:nth-child(2){color:#aa762c;transform:rotate(12deg) translateY(8px)}.art-luk-fu small{display:block;margin-top:20px;font-size:1.7rem}.art-luk-fu>i{position:absolute;right:15%;bottom:13%;color:#f6d590;font-size:1.5rem;font-style:normal}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
.art-quilinhos{display:flex;align-items:center;justify-content:center;gap:0;background:radial-gradient(circle at center,#496f57,#203e32);overflow:hidden}.art-quilinhos span{display:grid;place-items:center;width:55px;height:78px;margin-left:-17px;border:4px solid #fffaf0;border-radius:5px;background:#fffaf0;color:#2b3a30;font-family:var(--serif);font-size:1.3rem;box-shadow:0 10px 18px rgba(0,0,0,.25);transform:rotate(-13deg)}.art-quilinhos span:first-child{margin-left:0}.art-quilinhos span:nth-child(even){color:#c94e48;transform:rotate(9deg) translateY(8px)}.art-quilinhos i{position:absolute;right:17%;bottom:12%;font-size:2.3rem;font-style:normal;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}
.art-fortune{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#537b75,#294e50);overflow:hidden}.art-fortune span{display:block;width:76px;height:106px;margin-left:-21px;padding:8px;border:5px solid #fffaf0;border-radius:7px;background:#fffaf0;color:#1c3434;font-family:var(--serif);font-size:1.55rem;line-height:1;box-shadow:0 12px 23px rgba(0,0,0,.28);transform:rotate(-12deg)}.art-fortune span:first-child{margin-left:0}.art-fortune span:nth-child(2){color:#c65549;transform:rotate(11deg) translateY(9px)}.art-fortune span small{display:block;font-size:.9rem}.art-fortune i{position:absolute;right:16%;bottom:15%;display:grid;place-items:center;width:61px;height:61px;border-radius:50%;background:#f1bf5a;color:#203940;font-family:var(--serif);font-size:1.1rem;font-style:normal}
.footer-actions{display:flex;align-items:flex-start;gap:2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.footer-actions>a:first-child{border-bottom:1px solid #61776c;padding-bottom:.35rem}.footer-actions a:hover{text-decoration:underline;text-underline-offset:4px}
.art-gongzhu{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#99715b,#603d36)}.art-gongzhu>span{display:block;width:82px;height:112px;margin-left:-18px;padding:8px;border:5px solid #fffaf0;border-radius:7px;background:#fffaf0;color:#302520;font-family:var(--serif);font-size:1.5rem;line-height:1;box-shadow:0 12px 22px rgba(0,0,0,.25);transform:rotate(-11deg)}.art-gongzhu>span:nth-child(2){color:#c85647;transform:rotate(12deg) translateY(8px)}.art-gongzhu>span small{display:block;font-size:.9rem}.art-gongzhu>i{position:absolute;right:16%;bottom:14%;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#eebc62;color:#492824;font-family:var(--serif);font-size:1.3rem;font-style:normal}
@media(max-width:760px){.site-footer .footer-actions{grid-column:2;grid-row:1;flex-direction:column;gap:.9rem}}
.art-humbug{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#628086,#304b5a)}.art-humbug>span{display:block;width:79px;height:109px;margin-left:-16px;padding:8px;border:5px solid #fffaf0;border-radius:6px;background:#fffaf0;color:#253b47;font-family:var(--serif);font-size:1.5rem;line-height:1;box-shadow:0 12px 23px rgba(0,0,0,.24);transform:rotate(-12deg)}.art-humbug>span:nth-child(2){transform:rotate(12deg) translateY(8px);color:#bf6150}.art-humbug>span small{display:block;font-size:.9rem}.art-humbug>i{position:absolute;bottom:15%;right:17%;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#e9bc6d;color:#253b47;font-family:var(--serif);font-size:1.2rem;font-style:normal}
.art-irish-snap{display:flex;align-items:center;justify-content:center;gap:24px;background:radial-gradient(circle at center,#75916d,#385a48)}.art-irish-snap>span{display:block;width:78px;height:108px;padding:9px;border:5px solid #fffaf0;border-radius:7px;background:#fffaf0;color:#ce6852;font-family:var(--serif);font-size:1.5rem;line-height:1;box-shadow:0 12px 22px rgba(0,0,0,.24);transform:rotate(-12deg)}.art-irish-snap>span small{display:block;font-size:.9rem}.art-irish-snap>strong{color:#fff1c9;font-family:var(--serif);font-size:1.4rem;font-weight:400;letter-spacing:.08em}.art-irish-snap>i{position:absolute;bottom:12%;right:19%;font-size:2.3rem;font-style:normal;transform:rotate(12deg)}