:root{--cloth:#f4eadc;--paper:#fffaf2;--ink:#171512;--muted:#6d675f;--red:#ef432f;--navy:#163c59;--teal:#2f907e;--saffron:#f5a23a;--line:rgba(23,21,18,.13)}*{box-sizing:border-box}body{margin:0;background:var(--cloth);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.shell{width:min(1120px,calc(100% - 48px));margin:auto}a{color:inherit}.top{padding:28px 0;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;font-size:21px;font-weight:760;letter-spacing:-.04em}.top nav{display:flex;gap:22px;font-size:13px;font-weight:650}.top nav a{text-decoration:none}.top nav a:hover{color:var(--red)}main{padding:70px 0 110px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:750;color:var(--red)}h1{font-size:clamp(55px,8vw,105px);line-height:.9;letter-spacing:-.07em;max-width:850px;margin:18px 0 24px}h2{font-size:clamp(32px,4vw,54px);line-height:.96;letter-spacing:-.06em;margin:60px 0 16px}.dek{font-size:21px;line-height:1.55;color:var(--muted);max-width:730px}.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}.game-card{background:rgba(255,255,255,.64);border:1px solid rgba(23,21,18,.08);border-radius:22px;padding:26px;text-decoration:none;min-height:285px;display:flex;flex-direction:column;transition:transform .2s ease}.game-card:hover{transform:translateY(-4px)}.game-card .number{font-size:12px;color:var(--red);font-weight:800}.game-card h2{font-size:31px;margin:48px 0 10px}.game-card p{color:var(--muted);line-height:1.5;font-size:15px;margin:0}.game-card span{color:var(--red);font-size:13px;font-weight:750;margin-top:auto;padding-top:22px}.game-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}.game-hero img{width:100%;max-height:650px;object-fit:cover;object-position:top;border-radius:22px;box-shadow:0 20px 60px rgba(41,30,16,.14)}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}.fact{border:1px solid var(--line);border-radius:15px;padding:18px}.fact b{display:block;font-size:15px}.fact span{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:6px}.guide{background:rgba(255,255,255,.56);border-radius:22px;padding:30px 34px;max-width:800px}.guide p,.guide li{font-size:17px;line-height:1.75;color:#4f4a43}.guide a{color:#c83424;font-weight:650}.button{display:inline-block;background:var(--ink);color:white;text-decoration:none;border-radius:99px;padding:15px 20px;font-size:14px;font-weight:700;margin-top:25px}.related{display:flex;flex-wrap:wrap;gap:12px}.related a{border:1px solid var(--line);border-radius:99px;padding:11px 15px;text-decoration:none;font-size:13px;font-weight:650}.related a:hover{color:var(--red);border-color:var(--red)}footer{border-top:1px solid var(--line);padding:30px 0 50px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}footer div{display:flex;gap:18px}@media(max-width:760px){.shell{width:min(100% - 32px,650px)}.top nav{gap:12px}.games-grid,.game-hero,.facts{grid-template-columns:1fr}.game-hero{gap:35px}main{padding-top:45px}h1{font-size:57px}footer{flex-direction:column;gap:15px}}
/* Game-page layout contracts: 320, 375, 768, and 1280 CSS viewports. */
html { scroll-behavior: smooth; scroll-padding-top: 1rem; overflow-x: clip; }
body { overflow-x: clip; }
main[id] { min-width: 0; scroll-margin-top: 1.5rem; }
.game-hero > img { height: auto; aspect-ratio: 9 / 16; object-fit: contain; object-position: top; background: var(--paper); }
.game-hero figure { min-width: 0; margin: 0; }
.game-hero figure img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.game-hero figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sprint-callout { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: end; margin-top: 64px; padding: 34px; border-radius: 24px; background: var(--navy); color: #fff; }
.sprint-callout h2 { max-width: 680px; margin: 12px 0; }
.sprint-callout p { max-width: 680px; margin: 0; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.65; }
.sprint-callout .button { margin: 0; background: var(--red); }
.games-upcoming { margin-top: 78px; padding-top: 12px; border-top: 1px solid var(--line); }
.games-upcoming > .dek { font-size: 18px; }
.game-card-upcoming { background: var(--paper); }
@media (max-width: 375px) {
  .shell { width: calc(100% - 24px); }
  main { padding-block: 42px 92px; }
  h1 { font-size: clamp(46px, 14vw, 56px); }
  .dek { font-size: 17px; }
  .game-hero { gap: 28px; }
  .game-hero > img { max-height: 520px; }
  .guide { padding: 22px 20px; }
  .guide p, .guide li { font-size: 16px; }
}
@media (min-width: 376px) and (max-width: 767px) { .shell { width: calc(100% - 32px); } }
@media (max-width: 760px) { .sprint-callout { grid-template-columns: 1fr; align-items: start; padding: 24px; } .sprint-callout .button { justify-self: start; } }
@media (min-width: 768px) and (max-width: 1279px) { .shell { width: min(1080px, calc(100% - 48px)); } }
@media (min-width: 1280px) { .shell { width: min(1120px, calc(100% - 64px)); } }
@media (prefers-reduced-motion: reduce) { .game-card, .game-card:hover { transform: none !important; transition: none !important; } }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-scroll-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease var(--reveal-delay, 0ms), transform .55s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms); }
  .motion-ready [data-scroll-reveal].is-visible { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .game-card { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
  .game-card:hover { transform: translateY(-5px); border-color: rgba(239,67,47,.28); box-shadow: 0 18px 34px rgba(41,30,16,.12); }
  .related a { transition: color .2s ease, border-color .2s ease, transform .2s ease; }
  .related a:hover { transform: translateY(-2px); }
}

@media (hover: none), (pointer: coarse) { .game-card { transition: none; } }