:root {
  --ink: #111613;
  --paper: #f3f0e8;
  --cream: #fff5dc;
  --felt: #0c3426;
  --felt-light: #14513b;
  --gold: #cfaa57;
  --gold-light: #f0d590;
  --red: #ef5b43;
  --teal: #24b7b2;
  --line: rgba(17, 22, 19, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 50%;
  width: min(1280px, calc(100% - 64px));
  min-height: 88px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--cream);
}
.brand { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 900; }
.brand img { width: 42px; height: 42px; border: 1px solid rgba(240, 213, 144, 0.4); border-radius: 6px; }
.brand b { color: var(--gold-light); }
.topbar nav { display: flex; align-items: center; gap: 26px; font-size: 0.82rem; font-weight: 800; }
.topbar nav > a:not(.nav-cta) { color: rgba(255, 245, 220, 0.72); }
.topbar nav > a:hover, .topbar nav > a:focus-visible { color: #fff; outline: 0; }
.nav-cta { padding: 11px 16px; border: 1px solid rgba(240, 213, 144, 0.45); border-radius: 4px; background: rgba(255,255,255,0.06); }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(5, 20, 15, 0.97), rgba(8, 33, 24, 0.94) 52%, rgba(6, 24, 18, 0.7)),
    url("assets/screen-3.jpg") center / cover;
}
.hero-copy {
  padding: 160px 7vw 105px max(32px, calc((100vw - 1280px) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overline { margin: 0 0 24px; display: flex; align-items: center; gap: 11px; color: var(--gold-light); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; }
.overline span { width: 34px; height: 1px; background: currentColor; }
.overline.dark { color: #7c5f23; }
.hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.4rem, 7vw, 8.4rem); font-weight: 400; line-height: 0.83; letter-spacing: 0; }
.hero h1 em { display: inline-block; color: var(--gold-light); font-weight: 400; }
.hero-intro { width: min(610px, 100%); margin: 34px 0 0; color: rgba(255,245,220,0.76); font-size: 1.08rem; }
.hero-actions { margin-top: 35px; display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.store-button { min-height: 62px; padding: 10px 20px; display: inline-flex; align-items: center; gap: 13px; border-radius: 4px; color: #10251c; background: var(--gold-light); box-shadow: 0 18px 45px rgba(0,0,0,0.26); font-weight: 950; line-height: 1.05; transition: transform 180ms ease; }
.store-button:hover, .store-button:focus-visible { transform: translateY(-2px); outline: 0; }
.store-button small { display: block; margin-bottom: 4px; font-size: 0.61rem; }
.play-mark { width: 25px; height: 28px; clip-path: polygon(0 0,100% 50%,0 100%); background: linear-gradient(145deg,#28b677 0 32%,#3b9df5 32% 58%,#ffd14a 58% 76%,#ef5151 76%); }
.secondary-link { padding-bottom: 4px; border-bottom: 1px solid rgba(255,245,220,0.34); font-weight: 800; }
.secondary-link span { margin-left: 8px; color: var(--gold-light); }
.hero-facts { margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 28px; }
.hero-facts div { border-left: 1px solid rgba(240,213,144,0.36); padding-left: 14px; }
.hero-facts dt { color: var(--cream); font-family: Georgia, serif; font-size: 1.35rem; }
.hero-facts dd { margin: 3px 0 0; color: rgba(255,245,220,0.55); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }

.hero-table { position: relative; min-height: 100svh; overflow: hidden; border-left: 1px solid rgba(240,213,144,0.18); background: #06130f; }
.hero-table::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,19,15,0.7), transparent 34%), linear-gradient(180deg, rgba(6,19,15,0.22), rgba(6,19,15,0.56)); }
.hero-table img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.85) contrast(1.05); }
.hero-table p { position: absolute; z-index: 2; right: 34px; bottom: 25px; margin: 0; color: var(--gold-light); font-size: 0.65rem; font-weight: 950; writing-mode: vertical-rl; }
.hero-piece { position: absolute; z-index: 3; width: 92px; height: 92px; display: grid; place-items: center; border: 5px solid var(--gold); border-radius: 50%; color: var(--cream); background: var(--red); box-shadow: 0 18px 35px rgba(0,0,0,0.4); font: 900 2.7rem/1 Arial; }
.piece-o { left: 3vw; bottom: 7vh; transform: rotate(-10deg); }
.piece-x { right: 3.5vw; top: 13vh; border-radius: 7px; background: var(--teal); transform: rotate(9deg); }

.play-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 128px 0; display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr); gap: 10vw; align-items: center; }
.play-heading h2, .gallery-copy h2, .download-band h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.1rem, 5.2vw, 5.7rem); font-weight: 400; line-height: 0.98; letter-spacing: 0; }
.play-heading > p:not(.overline), .gallery-copy > p:not(.overline) { margin: 28px 0 0; color: #62665f; font-size: 1.02rem; }
.mode-switch { width: fit-content; margin-top: 34px; display: flex; border: 1px solid var(--line); border-radius: 4px; padding: 4px; background: #fff; }
.mode-button { min-height: 42px; padding: 0 17px; border: 0; border-radius: 3px; background: transparent; cursor: pointer; font-size: 0.82rem; font-weight: 900; }
.mode-button.is-active { color: var(--cream); background: var(--felt); }

.game-table { position: relative; padding: clamp(24px, 4vw, 54px); border: 9px solid #3a271b; border-radius: 8px; background: var(--felt); box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 60px rgba(0,0,0,0.34), 0 30px 70px rgba(20,24,20,0.18); }
.scoreboard { margin-bottom: 26px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; color: var(--cream); }
.scoreboard div { display: flex; align-items: center; gap: 11px; }
.scoreboard div:last-child { justify-content: flex-end; }
.scoreboard p { margin: 0; color: rgba(255,245,220,0.7); font-size: 0.75rem; font-weight: 950; text-transform: uppercase; }
.score-piece { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 950; }
.o-small { background: var(--red); }
.x-small { border-radius: 3px; background: var(--teal); }
.board { width: min(500px, 100%); aspect-ratio: 1; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.board button { position: relative; border: 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); background: rgba(255,255,255,0.015); cursor: pointer; font-size: clamp(3rem, 7vw, 6rem); font-weight: 950; line-height: 1; }
.board button:nth-child(3n) { border-right: 0; }
.board button:nth-child(n+7) { border-bottom: 0; }
.board button:hover:empty, .board button:focus-visible:empty { background: rgba(240,213,144,0.09); outline: 0; }
.board button.mark-o { color: var(--red); }
.board button.mark-x { color: var(--teal); }
.board button.is-win { background: rgba(240,213,144,0.17); }
.reset-button { position: absolute; right: -22px; bottom: -22px; width: 50px; height: 50px; border: 2px solid var(--gold); border-radius: 50%; color: var(--felt); background: var(--gold-light); cursor: pointer; font-size: 1.65rem; font-weight: 900; }
.reset-button:hover, .reset-button:focus-visible { transform: rotate(-25deg); outline: 0; }

.strategy-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.strategy-rule { min-height: 250px; padding: 42px max(28px, 4vw); display: grid; grid-template-columns: 44px 1fr; gap: 24px; }
.strategy-rule + .strategy-rule { border-left: 1px solid var(--line); }
.strategy-rule > span { color: #82682f; font-family: Georgia, serif; font-size: 1.1rem; }
.strategy-rule h3 { margin: 0 0 12px; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.strategy-rule p { margin: 0; color: #686a65; font-size: 0.92rem; }

.gallery-section { padding: 120px max(24px, calc((100vw - 1280px) / 2)); display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(560px, 1.28fr); gap: 7vw; align-items: center; overflow: hidden; background: #e8e4da; }
.gallery-controls { margin-top: 42px; display: flex; align-items: center; gap: 18px; }
.gallery-controls span { color: #77776f; font-size: 0.78rem; }
.gallery-controls b { color: var(--ink); }
.gallery-arrow { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.25rem; }
.gallery-arrow:hover, .gallery-arrow:focus-visible { color: var(--cream); border-color: var(--felt); background: var(--felt); outline: 0; }
.gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 40%); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.gallery-track figure { margin: 0; scroll-snap-align: start; }
.gallery-track img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border: 5px solid #27261f; border-radius: 4px; box-shadow: 0 22px 45px rgba(24,24,20,0.2); }
.gallery-track figcaption { margin-top: 15px; padding-left: 10px; border-left: 2px solid var(--gold); font-family: Georgia, serif; font-size: 1rem; }

.download-band { min-height: 440px; padding: 75px max(32px, calc((100vw - 1180px) / 2)); display: grid; grid-template-columns: 180px 1fr auto; gap: 48px; align-items: center; color: var(--cream); background: #071c15; }
.download-band > img { width: 180px; height: 180px; border: 2px solid var(--gold); border-radius: 8px; box-shadow: 0 24px 50px rgba(0,0,0,0.38); }
.download-band h2 { max-width: 650px; font-size: clamp(2.8rem, 5vw, 5.1rem); }
.store-button.light { color: var(--ink); background: var(--cream); }
footer { min-height: 90px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #77776f; background: #071c15; border-top: 1px solid rgba(240,213,144,0.15); font-size: 0.76rem; }
footer a { color: var(--gold-light); font-weight: 900; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 780px; padding-right: 32px; }
  .hero-table { position: absolute; z-index: 0; inset: 0; opacity: 0.25; border: 0; }
  .hero-copy { position: relative; z-index: 1; }
  .hero-table::after { background: rgba(5,20,15,0.56); }
  .play-section, .gallery-section { grid-template-columns: 1fr; }
  .play-heading { max-width: 680px; }
  .game-table { width: min(660px, 100%); margin: auto; }
  .gallery-track { grid-auto-columns: minmax(250px, 38%); }
  .download-band { grid-template-columns: 130px 1fr; }
  .download-band > img { width: 130px; height: 130px; }
  .download-band .store-button { grid-column: 2; width: fit-content; }
}

@media (max-width: 680px) {
  .topbar { width: calc(100% - 28px); min-height: 70px; }
  .brand span { display: none; }
  .topbar nav { gap: 10px; }
  .topbar nav > a:not(.nav-cta) { display: none; }
  .hero-copy { min-height: 720px; padding: 120px 20px 74px; }
  .hero h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .hero-facts { gap: 10px; }
  .hero-facts dt { font-size: 1.05rem; }
  .hero-piece { width: 62px; height: 62px; font-size: 1.8rem; }
  .play-section { width: calc(100% - 28px); padding: 82px 0; gap: 52px; }
  .play-heading h2, .gallery-copy h2 { font-size: 2.85rem; }
  .game-table { padding: 25px 18px; border-width: 6px; }
  .reset-button { right: -8px; bottom: -18px; }
  .scoreboard { gap: 8px; }
  .scoreboard p { font-size: 0.62rem; }
  .strategy-band { grid-template-columns: 1fr; }
  .strategy-rule { min-height: 170px; padding: 30px 22px; }
  .strategy-rule + .strategy-rule { border-left: 0; border-top: 1px solid var(--line); }
  .gallery-section { padding: 82px 14px; gap: 48px; }
  .gallery-copy { padding: 0 8px; }
  .gallery-track { grid-auto-columns: minmax(230px, 72%); }
  .download-band { padding: 62px 22px; grid-template-columns: 76px 1fr; gap: 22px; }
  .download-band > img { width: 76px; height: 76px; }
  .download-band h2 { font-size: 2.35rem; }
  .download-band .overline { margin-bottom: 14px; }
  .download-band .store-button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}