:root {
--bg: #fbf2d9;
--card: rgba(255, 250, 236, 0.82);
--ink: #2f2116;
--muted: #6f5c49;
--line: rgba(75, 50, 28, 0.14);
--green: #5f8e4e;
--green-dark: #3f6835;
--shadow: 0 24px 80px rgba(73, 48, 22, 0.12);
--page: 1120px;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
min-height: 100vh;
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
color: var(--ink);
background:
radial-gradient(circle at 12% 8%, rgba(232, 177, 84, 0.24), transparent 34%),
radial-gradient(circle at 85% 20%, rgba(95, 142, 78, 0.16), transparent 30%),
var(--bg);
}

a {
color: inherit;
}

img {
max-width: 100%;
}

.app {
width: min(var(--page), calc(100% - 40px));
margin: 0 auto;
}

.topbar {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 850;
text-decoration: none;
letter-spacing: -0.03em;
}

.brand img {
width: 40px;
height: 40px;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(64, 41, 18, 0.14);
}

.play-link {
padding: 11px 18px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-size: 14px;
font-weight: 850;
text-decoration: none;
box-shadow: 0 16px 36px rgba(47, 33, 22, 0.18);
}

.hero {
min-height: 100svh;
display: grid;
align-content: center;
padding-bottom: 48px;
}

.hero-content {
max-width: 860px;
margin: 48px auto 0;
text-align: center;
}

.eyebrow {
width: fit-content;
margin: 0 auto 16px;
padding: 9px 14px;
border: 1px solid rgba(95, 142, 78, 0.22);
border-radius: 999px;
background: rgba(255, 250, 236, 0.72);
color: var(--green-dark);
font-size: 14px;
font-weight: 850;
}

h1,
h2,
h3,
p {
margin-top: 0;
}

h1 {
margin-bottom: 18px;
font-size: clamp(50px, 8vw, 96px);
line-height: 0.92;
letter-spacing: -0.08em;
}

.lead {
max-width: 680px;
margin: 0 auto;
color: var(--muted);
font-size: clamp(18px, 2vw, 23px);
line-height: 1.55;
}

.actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}

.actions.compact {
margin-top: 22px;
}

.button {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 20px;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-size: 15px;
font-weight: 850;
text-decoration: none;
}

.button.primary {
background: var(--green);
color: #fff;
box-shadow: 0 18px 42px rgba(72, 116, 58, 0.22);
}

.button.dark {
background: var(--ink);
color: #fff;
box-shadow: 0 18px 42px rgba(47, 33, 22, 0.18);
}

.button.light {
border-color: var(--line);
background: rgba(255, 250, 236, 0.84);
color: var(--ink);
}

.feature {
width: 1000px;
height: 500px;
max-width: 100%;
display: block;
margin: 42px auto 0;
border: 1px solid var(--line);
border-radius: 34px;
overflow: hidden;
background: var(--card);
box-shadow: var(--shadow);
}

.feature img {
width: 1000px;
height: 500px;
display: block;
object-fit: contain;
}

.game-section {
min-height: 100svh;
display: grid;
align-content: center;
padding: 76px 0;
}

.section-head {
max-width: 720px;
margin: 0 auto 28px;
text-align: center;
}

.section-head h2 {
margin-bottom: 12px;
font-size: clamp(38px, 5vw, 68px);
line-height: 0.95;
letter-spacing: -0.06em;
}

.section-head p {
margin-bottom: 0;
color: var(--muted);
font-size: 18px;
line-height: 1.55;
}

.game-panel {
position: relative;
height: min(72vh, 720px);
min-height: 540px;
border: 1px solid var(--line);
border-radius: 34px;
overflow: hidden;
background: #111;
box-shadow: var(--shadow);
}

.game-cover {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
padding: 28px;
text-align: center;
background:
radial-gradient(circle at 25% 20%, rgba(232, 177, 84, 0.22), transparent 32%),
radial-gradient(circle at 75% 70%, rgba(95, 142, 78, 0.18), transparent 34%),
rgba(255, 250, 236, 0.94);
}

.game-cover > div {
max-width: 520px;
padding: 32px;
border: 1px solid var(--line);
border-radius: 28px;
background: rgba(255, 252, 242, 0.82);
box-shadow: 0 18px 54px rgba(72, 50, 24, 0.1);
}

.game-cover h3 {
margin-bottom: 10px;
font-size: clamp(30px, 4vw, 48px);
line-height: 1;
letter-spacing: -0.05em;
}

.game-cover p {
margin-bottom: 0;
color: var(--muted);
line-height: 1.55;
}

.game-panel iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}

.game-panel.is-loaded .game-cover {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
padding: 28px 0 44px;
}

.links a {
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 250, 236, 0.72);
color: var(--green-dark);
font-size: 14px;
font-weight: 850;
text-decoration: none;
}

@media (max-width: 1040px) {
.feature {
width: 100%;
height: auto;
aspect-ratio: 2 / 1;
}

.feature img {
width: 100%;
height: 100%;
}
}

@media (max-width: 640px) {
.app {
width: min(100% - 24px, var(--page));
}

.topbar {
min-height: 66px;
}

.brand span {
font-size: 14px;
}

.play-link {
padding: 10px 14px;
font-size: 13px;
}

.hero-content {
margin-top: 32px;
}

h1 {
font-size: clamp(44px, 14vw, 62px);
}

.lead,
.section-head p {
font-size: 16px;
}

.actions {
flex-direction: column;
}

.button {
width: 100%;
}

.feature {
margin-top: 32px;
border-radius: 24px;
}

.game-panel {
height: 70vh;
min-height: 460px;
border-radius: 24px;
}

.game-cover > div {
padding: 24px;
}
}