@font-face {
  font-family: Board;
  src: url(brand/BarlowCondensed-Bold.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --dark: #092f2b;
  --board: #103f37;
  --paper: #fbf4e4;
  --cream: #ffedce;
  --ink: #14372f;
  --muted: #b9ccbe;
  --accent: #f3bb62;
  --edge: #ddd0b5;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.55 system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body, h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .25em; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #db724c; outline-offset: 4px; }
.wrap { width: min(1152px, 100% - 48px); margin-inline: auto; }
.site-header, .landing, footer { color: var(--paper); background: var(--dark); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; border-bottom: 1px solid #fbf4e429; }
.brand { flex-shrink: 0; width: clamp(122px, 17vw, 176px); }
.brand img { width: 100%; height: auto; }
nav { display: flex; gap: clamp(12px, 3vw, 34px); color: #dfebe1; font-size: .87rem; font-weight: 650; }
nav a, .nav-store { text-decoration: none; }
nav a:hover { text-decoration: underline; }
.nav-store { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid #fbf4e460; border-radius: 8px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.nav-store:hover, .ghost:hover { background: #fbf4e418; }
.landing { overflow: hidden; background: radial-gradient(ellipse at 78% 49%, #215547 0%, var(--dark) 53%); }
.hero { display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 20px; padding-block: clamp(38px, 6vw, 84px) clamp(46px, 6vw, 90px); }
.eyebrow, .game-label, .art-caption { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero .eyebrow { color: var(--muted); }
.signal { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #f2b45d; vertical-align: .08em; }
h1, h2, h3 { font: 700 1rem/.92 Board, "Arial Narrow", sans-serif; text-transform: uppercase; }
h1 { font-size: clamp(3.1rem, 7.3vw, 7.15rem); margin: 18px 0 20px; letter-spacing: -.018em; }
h1 em { color: var(--accent); font-style: normal; }
h2 { font-size: clamp(2.8rem, 5.4vw, 5.4rem); margin-top: 10px; }
.lead { max-width: 42ch; font-size: clamp(1rem, 1.65vw, 1.21rem); }
.hero .lead { color: #e0ebe2; }
.actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 9px; padding: 10px 15px; background: var(--dark); color: var(--paper); text-decoration: none; font-weight: 750; line-height: 1.18; }
.button small { display: block; font-size: .7rem; margin-top: 4px; font-weight: 600; }
.light { background: var(--cream); color: var(--dark); }
.light:hover { background: #fff6e5; }
.ghost { background: transparent; border-color: #fbf4e460; }
.hero-art { position: relative; isolation: isolate; aspect-ratio: 1.29; }
.orbit { position: absolute; inset: 6% 7% 10%; border: 1px solid #d8e6d544; border-radius: 50%; transform: rotate(-12deg); }
.orbit-inner { inset: 13% 15% 17%; border-style: dashed; }
.postcard {
  position: absolute; width: 41%; padding: 2.2% 2.2% 1.6%; background: var(--cream) url(brand/Paper.png) center / 500px;
  color: var(--ink); border-radius: 9%; box-shadow: 0 16px 30px #011e19aa, 0 0 0 1px #f5dcae;
}
.postcard img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7%; }
.postcard b { display: block; text-align: center; margin-top: 4%; font: 700 clamp(1rem, 2.5vw, 2.1rem)/1 Board, sans-serif; text-transform: uppercase; }
.postcard-brazil { left: 6%; top: 20%; transform: rotate(-14deg); }
.postcard-japan { right: 4%; top: 15%; transform: rotate(14deg); }
.postcard-canada { width: 44%; left: 29%; top: 10%; transform: rotate(-3deg); }
.postcard .rank { position: absolute; left: -7%; top: -6%; width: 22%; border: 2px solid var(--cream); transform: rotate(-9deg); box-shadow: 0 4px 10px #011e194d; font-size: clamp(1.3rem, 4vw, 3.2rem); }
.art-mark { position: absolute; color: var(--accent); font-size: clamp(1.1rem, 2.8vw, 2.35rem); }
.art-mark-top { top: 0; right: 14%; }
.art-mark-bottom { bottom: 15%; left: 10%; }
.art-caption { position: absolute; display: flex; justify-content: space-between; gap: 8px; inset: auto 6% 1%; padding-top: 10px; border-top: 1px solid #fbf4e447; color: #dbe8dc; font-size: .64rem; }
.section { padding-block: clamp(47px, 7vw, 91px); }
.index { display: inline-block; color: #9f3c25; margin-right: .5em; }
.demo-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; margin-bottom: 24px; }
.demo-intro .lead { justify-self: end; }
.game { color: var(--cream); background: var(--board) url(brand/Hills.svg) bottom 32px center / 100% auto no-repeat; border-radius: 20px; box-shadow: 0 12px 26px #19392c23; padding: clamp(13px, 3vw, 28px); }
.game-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.game-header img { width: clamp(100px, 17vw, 124px); height: auto; }
.category { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 14px; padding: 12px; border-radius: 12px; background: var(--cream); color: var(--ink); }
.category img { width: clamp(54px, 8vw, 76px); height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.category .eyebrow { font-size: .63rem; margin-bottom: 4px; }
.category h3 { font-size: clamp(1.65rem, 3vw, 2.6rem); }
.category > p { justify-self: end; max-width: 36ch; font-size: .9rem; }
.game-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-block: 14px; }
.country { position: relative; min-width: 0; padding: 4px 4px 6px; background: var(--cream); color: var(--ink); border: 2px solid #ecd0a5; border-radius: 9px; font: 700 clamp(.94rem, 2vw, 1.48rem)/1 Board, sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.country:not(:disabled):hover, .country[aria-pressed="true"], .country.drop-target { border-color: #ffc764; box-shadow: 0 0 0 2px #ffc764; }
.country img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; margin-bottom: 5px; }
.country .rank { position: absolute; top: 7px; left: 7px; width: clamp(22px, 3.7vw, 36px); border: 1px solid var(--cream); }
.country small { display: block; font: 700 .77rem/1.3 system-ui, sans-serif; margin-top: 3px; }
.call-panel { display: flex; justify-content: space-between; align-items: end; gap: 14px; padding: 12px; background: var(--cream); color: var(--ink); border-radius: 12px; }
#call-status { font-size: .9rem; margin-bottom: 7px; }
.rank-tiles { display: flex; flex-wrap: wrap; gap: 5px; }
.rank { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 7px; background: var(--tile, #f4c757); color: #132c26; font: 700 1.4rem/1 Board, sans-serif; }
.rank-tiles .rank { width: clamp(32px, 4.8vw, 45px); cursor: grab; }
.rank-tiles .rank[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.rank-1 { --tile: #ed765e; }
.rank-2 { --tile: #53b3cd; }
.rank-3 { --tile: #f4c757; }
.rank-4 { --tile: #e9a0b5; }
.rank-5 { --tile: #f6ab63; }
.rank-6 { --tile: #97b88d; }
.rank-7 { --tile: #aa9ccd; }
#game-action { white-space: nowrap; }
#game-action:disabled { background: #e0d1b2; color: #455c4d; }
#result-points { display: block; font: 700 2.2rem/1 Board, sans-serif; text-transform: uppercase; margin-bottom: 4px; }
#result-detail { font-size: .92rem; }
#result-source { display: block; margin-top: 5px; font-size: .71rem; }
.screens { background: #efe1c5 url(brand/Paper.png) center / 700px; border-block: 1px solid var(--edge); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.5vw, 27px); margin-top: 25px; }
.gallery figure { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; }
.screen-art { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 35%, #367360, var(--dark) 75%); padding: 21px 14px; }
.screen-art img { width: min(100%, 192px); aspect-ratio: 9/19; object-fit: contain; border-radius: 9px; background: #07382e; box-shadow: 0 8px 20px #00201b90; }
figcaption { padding: 14px 17px 18px; }
figcaption b, figcaption span { display: block; }
figcaption b { font: 700 1.65rem/1.03 Board, sans-serif; text-transform: uppercase; margin-bottom: 5px; }
figcaption span { font-size: .9rem; }
.stores { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(15px, 6vw, 72px); }
.stores .lead { margin-top: 13px; }
.roadmap { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--edge); }
.roadmap li { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--edge); }
.roadmap li div { flex: 1; }
.roadmap b, .roadmap li div span { display: block; }
.roadmap b { font-size: 1rem; }
.roadmap li div span, .roadmap a { font-size: .82rem; }
.badge { padding: 4px 9px; border-radius: 999px; color: #3b4e3c; background: #ebdfc5; font-size: .73rem; font-weight: 750; text-align: center; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 24px; font-size: .84rem; }
@media (max-width: 790px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 16px; }
  .hero-art { width: min(100%, 495px); margin-inline: auto; }
  .demo-intro, .stores { grid-template-columns: 1fr; }
  .demo-intro .lead { justify-self: start; }
  .game-cards { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .country { grid-column: span 2; }
  .country:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 28px); }
  .top { min-height: 60px; }
  h1 { font-size: clamp(3.05rem, 13vw, 5.2rem); }
  .category { grid-template-columns: auto 1fr; gap: 7px 10px; }
  .category > p { grid-column: 1 / -1; justify-self: start; }
  .call-panel { align-items: stretch; flex-direction: column; gap: 9px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure { display: grid; grid-template-columns: 44% 1fr; align-items: center; }
  .screen-art { padding: 14px; }
  .screen-art img { width: min(100%, 130px); }
  .footer { align-items: flex-start; }
}

.footer { flex-wrap: wrap; }
.footer-info p { color: var(--muted); margin-top: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal { max-width: 740px; }
.legal h1 { font-size: clamp(3rem, 7vw, 5.5rem); margin: 12px 0 22px; }
.legal h2 { font-size: clamp(1.55rem, 4vw, 2.3rem); margin: 28px 0 8px; }
.legal p + p { margin-top: 12px; }
.legal .legal-date { color: #56644e; font-size: .88rem; margin-bottom: 15px; }
.legal a { font-weight: 650; }