:root { --teak: #2a1206; --teak2: #3d1f0a; --gold: #f3c35a; --cream: #fff1c8; --ink: #3d1f0a; --ivory: #fbf3e2; --red: #c41e1e; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Baloo 2", system-ui, sans-serif; background: var(--teak); color: var(--cream); line-height: 1.6; }
a { color: var(--gold); }
header { text-align: center; padding: 28px 16px 8px; }
header img { width: min(320px, 70vw); height: auto; }
nav { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 8px 16px 20px; }
nav a { text-decoration: none; font-weight: 700; }
.hero { display: block; width: 100%; max-width: 1024px; margin: 0 auto; border-radius: 0 0 18px 18px; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
h1, h2 { color: var(--gold); line-height: 1.2; }
.cta { display: inline-block; background: linear-gradient(#ffa63a, #e8620f); color: #fff; font-weight: 800; padding: 14px 30px;
       border-radius: 40px; border: 3px solid var(--gold); text-decoration: none; font-size: 1.15rem; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 24px 0; }
.games figure { margin: 0; text-align: center; }
.games img { width: 100%; border-radius: 14px; border: 2px solid var(--gold); }
.soon { background: linear-gradient(#c41e1e, #7a0c0c); border: 3px solid var(--gold); border-radius: 16px; padding: 16px 20px; text-align: center; }
.page { background: var(--ivory); color: var(--ink); border-radius: 18px; padding: 24px clamp(16px, 4vw, 40px); border: 4px solid var(--gold); }
.page h1, .page h2 { color: #8a3a06; }
.page a { color: #b35708; }
footer { text-align: center; padding: 24px 16px 40px; font-size: .9rem; opacity: .85; }