:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #233c33;
  background: #f5f2e9;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }
.page { max-width: 1440px; margin: auto; padding: 0 72px; }
.header { min-height: 116px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid #233c3326; }
.brand { display: inline-flex; align-items: center; text-decoration: none; font-size: 35px; font-weight: 800; letter-spacing: -2px; }
.brand-mark { margin-right: 12px; color: #d56840; font-size: 43px; font-weight: 400; }
.brand-vs { font-weight: 400; }
.brand-dot { color: #d56840; }
.header-note { margin-left: 20px; color: #747b70; font-size: 13px; }
.status { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 12px; }
.status > span { width: 7px; height: 7px; background: #d56840; border-radius: 50%; }
.hero { min-height: 610px; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 20px; padding: 66px 0 58px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 30px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
h1 { margin: 0; font-size: clamp(54px, 5.3vw, 76px); line-height: 1.07; letter-spacing: -3.5px; font-weight: 500; }
h1 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -4px; }
.intro { margin: 29px 0 30px; color: #6d746c; font-size: 15px; line-height: 1.8; }
.cta { display: inline-flex; min-height: 54px; align-items: center; gap: 45px; padding: 0 24px; border-radius: 5px; background: #233c33; color: #fffdf5; text-decoration: none; font-size: 13px; font-weight: 700; transition: background .2s, transform .2s; }
.cta:hover { background: #375c4e; transform: translateY(-2px); }
.cta span { font-size: 22px; font-weight: 400; }
a:focus-visible { outline: 3px solid #c85d34; outline-offset: 6px; }
.hero-caption { margin: 23px 0 0; color: #798074; font-size: 11px; }
.hero-caption span { color: #426349; margin-right: 6px; font-size: 16px; }
.card-scene { position: relative; height: 440px; min-width: 0; }
.orbit { position: absolute; border: 1px solid #c5ccbd; border-radius: 50%; width: 95%; height: 77%; left: 3%; top: 12%; transform: rotate(-24deg); }
.orbit-two { transform: rotate(28deg); width: 84%; height: 92%; left: 7%; top: 4%; border-color: #d9dbcd; }
.table-shadow { position: absolute; width: 80%; height: 90px; left: 12%; bottom: 42px; border-radius: 50%; background: #80907626; filter: blur(22px); }
.playing-card { width: 190px; height: 276px; position: absolute; top: 76px; left: calc(50% - 95px); background: #fffcf3; border: 1px solid #dcdccf; border-radius: 12px; box-shadow: 1px 6px 0 #deded1, 0 18px 25px #293f3420; }
.card-back { transform: translate(-96px, 9px) rotate(-23deg); padding: 11px; }
.card-pattern { width: 100%; height: 100%; display: grid; place-items: center; border: 2px solid #f4ecd5; outline: 1px solid #3a5547; border-radius: 6px; color: #e7d7a4; background-color: #375747; background-image: repeating-linear-gradient(45deg, transparent 0 9px, #e7d7a421 9px 10px), repeating-linear-gradient(-45deg, transparent 0 9px, #e7d7a421 9px 10px); }
.card-pattern span { border: 1px solid #cabc8a; border-radius: 50%; padding: 22px 15px; background: #375747; font-family: Georgia, serif; font-size: 27px; }
.card-red { transform: translate(-14px, -22px) rotate(-4deg); color: #c85d43; }
.card-green { transform: translate(82px, 19px) rotate(17deg); color: #294c3b; }
.card-corner { position: absolute; top: 15px; left: 16px; display: flex; flex-direction: column; align-items: center; font-family: Georgia, serif; font-size: 30px; line-height: 1; }
.card-corner span { margin-top: 4px; font-size: 22px; }
.corner-bottom { top: auto; left: auto; bottom: 15px; right: 16px; transform: rotate(180deg); }
.card-suit { display: grid; place-items: center; height: 100%; font-family: Georgia, serif; font-size: 114px; }
.scene-spark { position: absolute; color: #c85d43; }
.spark-one { right: 8%; top: 10px; font-size: 40px; transform: rotate(10deg); }
.spark-two { left: 1%; bottom: 66px; font-size: 22px; }
.scene-stamp { position: absolute; bottom: 1px; right: 0; transform: rotate(-8deg); border: 1px solid #bdc5b5; border-radius: 50%; padding: 20px 23px; font-size: 11px; line-height: 1.7; text-align: center; color: #677760; background: #f5f2e9; }
.scene-stamp strong { font-weight: 500; }
.game-preview { display: flex; align-items: center; gap: 42px; padding: 32px 38px; border: 1px solid #d9ddd0; border-radius: 10px; background: #e9ede1; scroll-margin-top: 24px; }
.game-number { display: flex; flex-direction: column; gap: 12px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #75816c; }
.game-number > span { font-family: Georgia, serif; font-size: 40px; letter-spacing: -2px; color: #8b987e; }
.game-heading { display: flex; align-items: center; gap: 15px; }
h2 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -1px; }
.soon { color: #536a43; border: 1px solid #b7c4a8; border-radius: 20px; padding: 5px 10px; font-size: 10px; }
.game-info p { margin: 12px 0 0; font-size: 13px; line-height: 1.65; color: #6b7762; }
.game-details { margin-left: auto; display: flex; flex-direction: column; gap: 12px; color: #66775d; font-size: 12px; }
.game-details span::before { content: '↗'; margin-right: 10px; color: #8b987e; }
.preview-suit { font-family: Georgia, serif; color: #a1b18f; font-size: 67px; margin-left: 8px; }
footer { padding: 29px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: #818578; }
.footer-suits { letter-spacing: 5px; font-size: 15px; color: #64735e; }
.footer-suits i { font-style: normal; color: #bc795c; }
@media (min-width: 1600px) { .page { padding-top: 20px; } .hero { min-height: 680px; } }
@media (max-width: 1100px) {
  .page { padding: 0 40px; }
  .header-note { display: none; }
  .hero { grid-template-columns: 1.1fr 1fr; }
  h1 { font-size: 57px; }
  .desktop-break { display: none; }
  .orbit { width: 70%; height: 60%; left: 15%; top: 20%; }
  .orbit-two { height: 70%; top: 15%; }
  .playing-card { width: 153px; height: 231px; left: calc(50% - 77px); top: 96px; }
  .card-back { transform: translate(-65px, 9px) rotate(-23deg); }
  .card-green { transform: translate(61px, 19px) rotate(17deg); }
  .card-suit { font-size: 88px; }
  .game-preview { gap: 28px; padding: 28px; }
}
@media (max-width: 900px) {
  .page { padding: 0 24px; }
  .header { min-height: 90px; gap: 10px; }
  .brand { font-size: 29px; }
  .brand-mark { font-size: 34px; margin-right: 8px; }
  .status { font-size: 10px; gap: 6px; }
  .hero { grid-template-columns: 1fr; padding: 42px 0 28px; gap: 8px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.2px; margin-bottom: 23px; }
  h1 { font-size: clamp(42px, 9vw, 62px); letter-spacing: -2px; }
  h1 em { letter-spacing: -2.8px; }
  .intro { font-size: 14px; margin: 22px 0 24px; max-width: 430px; }
  .hero-caption { font-size: 10px; }
  .card-scene { height: 365px; width: 100%; max-width: 440px; margin: 0 auto; }
  .orbit { width: 70%; height: 70%; left: 15%; top: 15%; }
  .orbit-two { height: 74%; top: 13%; }
  .playing-card { top: 62px; width: clamp(124px, 39vw, 153px); height: clamp(192px, 59vw, 231px); left: calc(50% - clamp(62px, 19.5vw, 76.5px)); }
  .card-back { transform: translate(-50px, 9px) rotate(-23deg); }
  .card-green { transform: translate(50px, 19px) rotate(17deg); }
  .spark-one { top: 17px; right: 9%; font-size: 30px; }
  .scene-stamp { bottom: 2px; right: 8px; font-size: 10px; padding: 13px 16px; }
  .game-preview { flex-wrap: wrap; gap: 20px; padding: 23px; }
  .game-number { width: 100%; flex-direction: row; align-items: center; gap: 10px; font-size: 9px; }
  .game-number > span { font-size: 22px; letter-spacing: -1px; }
  .game-info { flex: 1; }
  .game-info p { font-size: 12px; }
  .game-details { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 15px; font-size: 10px; }
  .preview-suit { display: none; }
  footer { padding: 26px 0; flex-wrap: wrap; font-size: 10px; }
  .footer-suits { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
}