:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #203b40;
  background: #f8fbef;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #fb8864; outline-offset: 5px; }
.site-shell { max-width: 1600px; margin: 0 auto; overflow: clip; }
.site-header {
  min-height: 88px; padding: 0 clamp(24px, 5vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark {
  font-family: "Arial Black", Arial, sans-serif; font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 950; letter-spacing: -2px; white-space: nowrap;
}
.wordmark span { color: #426552; }
.wordmark i { color: #fb8864; font-size: .9em; font-style: normal; margin-left: 7px; }
.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 800; }
.site-header nav > a:first-child:hover, .site-footer a:hover { color: #c46f50; }
.header-play { background: #203b40; color: #fffdf1; padding: 13px 19px; border-radius: 10px; }
.header-play:hover, .hero-action:hover { background: #365b58; }
.header-play span { color: #d5f379; margin-left: 18px; }
.hero {
  min-height: 660px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  background: #dcefe4; border-radius: 28px; margin: 0 20px;
  padding: 70px clamp(35px, 6vw, 100px);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 650px; height: 650px; right: -180px; bottom: -340px; background: #c9e6d0; }
.hero::after { width: 360px; height: 360px; left: -230px; top: -185px; background: #e9f6df; }
.hero-copy, .hero-art { position: relative; z-index: 1; }
.eyebrow { font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.tiny-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fb8864; vertical-align: 1px; margin-right: 6px; }
h1 { font-family: "Arial Black", Arial, sans-serif; font-size: clamp(95px, 12vw, 186px); line-height: .8; letter-spacing: -.09em; margin: 34px 0 35px; transform: rotate(-3deg); }
h1 em { color: #d5f379; font-style: normal; -webkit-text-stroke: 2px #203b40; text-shadow: 7px 7px 0 #203b40; }
.hero-copy > p { max-width: 415px; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.55; color: #49675d; margin: 0 0 27px; }
.hero-action {
  min-width: 260px; width: fit-content; min-height: 58px; padding: 0 23px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: #203b40; color: #fffdf1; font-size: 14px; font-weight: 850; border-radius: 11px;
}
.hero-action span { color: #d5f379; font-size: 26px; }
.hero-note { margin-top: 28px; font-size: 11px; color: #658275; font-weight: 750; letter-spacing: .2px; }
.hero-note span { color: #fb8864; padding: 0 8px; }
.hero-art { align-self: stretch; min-height: 500px; display: grid; place-items: center; }
.hero-art img {
  width: min(95%, 570px); height: auto; aspect-ratio: 1; object-fit: cover;
  border: 12px solid #f7fff0; border-radius: 50%; box-shadow: 0 28px 75px #42655225;
  transform: rotate(7deg);
}
.orbit { position: absolute; border-radius: 50%; border: 2px dashed #87a996; }
.orbit-one { width: 107%; aspect-ratio: 1; transform: rotate(-12deg); }
.orbit-two { width: 115%; aspect-ratio: 1; border-style: solid; border-color: #ffffff96; }
.orbit-label {
  position: absolute; bottom: 1%; right: -4%; background: #fb8864; color: #203b40;
  padding: 15px 19px; font-size: 11px; line-height: 1.3; font-weight: 900; letter-spacing: 1.3px;
  transform: rotate(9deg); border-radius: 7px;
}
.hero-corner { position: absolute; bottom: 30px; left: 35px; font-size: 9px; letter-spacing: 2px; font-weight: 900; color: #739384; }
.games-section { padding: 105px clamp(24px, 5vw, 80px) 125px; scroll-margin-top: 25px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 33px; }
h2 { font-family: "Arial Black", Arial, sans-serif; font-size: clamp(42px, 5vw, 74px); letter-spacing: -.07em; line-height: 1; margin: 13px 0 0; }
.section-heading p { max-width: 300px; color: #698075; font-size: 14px; line-height: 1.5; margin: 0 0 7px; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.game-card { display: block; border: 1px solid #d4e3d3; border-radius: 20px; overflow: hidden; background: #fffdf4; box-shadow: 0 12px 30px #203b4008; transition: transform .2s, box-shadow .2s; }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px #203b401c; }
.game-art { height: clamp(255px, 30vw, 420px); overflow: hidden; background: #e8f2e2; }
.game-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.game-card:hover img { transform: scale(1.045); }
.flip-card .game-art { background: #f8efdc; }
.game-body { padding: 28px 31px 30px; }
.game-number { color: #728b76; font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.game-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 8px 0; }
h3 { font-family: "Arial Black", Arial, sans-serif; font-size: clamp(31px, 3.4vw, 50px); letter-spacing: -.07em; line-height: 1; margin: 0; }
.game-title > span { width: 40px; height: 40px; display: grid; place-items: center; flex: none; background: #d5f379; border-radius: 50%; font-size: 24px; }
.flip-card .game-title > span { background: #fbad8f; }
.game-body p { color: #587269; font-size: 14px; line-height: 1.55; max-width: 520px; min-height: 44px; margin: 13px 0 24px; }
.game-meta { display: block; color: #698075; border-top: 1px solid #e0ebdd; padding-top: 20px; font-size: 11px; font-weight: 750; }
.game-meta b { color: #fb8864; padding: 0 5px; }
.site-footer { border-top: 1px solid #e2eade; min-height: 90px; padding: 24px clamp(24px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #789084; font-size: 10px; letter-spacing: 1.2px; font-weight: 900; }
.site-footer i { color: #fb8864; font-style: normal; padding: 0 8px; }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding: 60px 35px 50px; }
  .hero-art { min-height: 380px; }
  .hero-art img { max-width: 400px; }
  .orbit-one { width: min(95%, 470px); }
  .orbit-two { width: min(105%, 500px); }
  .orbit-label { right: 10%; }
  .games-section { padding-top: 80px; }
}
@media (max-width: 620px) {
  .site-header { min-height: 70px; padding: 0 20px; }
  .site-header nav { gap: 15px; font-size: 11px; }
  .header-play { padding: 11px 13px; }
  .header-play span { margin-left: 5px; }
  .hero { margin: 0 10px; border-radius: 18px; padding: 47px 25px 50px; min-height: 0; }
  .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  h1 { font-size: clamp(85px, 22vw, 130px); margin: 27px 0; }
  .hero-copy > p { font-size: 16px; }
  .hero-art { min-height: 300px; margin: 40px 0 12px; }
  .hero-art img { width: min(88%, 340px); border-width: 8px; }
  .orbit-one { width: 94%; }
  .orbit-two { width: 102%; }
  .orbit-label { right: -1%; bottom: -4%; font-size: 8px; }
  .hero-corner { display: none; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 18px; }
  .games-section { padding: 70px 20px 85px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-art { height: 300px; }
  .game-body { padding: 24px; }
  .game-body p { min-height: 0; }
  .site-footer { padding: 23px 20px; font-size: 8px; letter-spacing: .6px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .game-card, .game-art img { transition: none; } }