/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:52px 0 56px;border-bottom:1px solid var(--line);background:radial-gradient(55% 65% at 88% 12%,rgba(224,10,60,.24),transparent 62%),radial-gradient(40% 45% at 72% 72%,rgba(77,188,242,.09),transparent 70%),var(--ink)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 72% 32%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse 75% 70% at 72% 32%,#000 20%,transparent 72%)}
.hero-inner{display:grid;gap:40px}
.hero-copy{min-width:0}
.hero h1{margin-bottom:22px}
.hero .lead{max-width:62ch;font-size:clamp(1.02rem,.95rem + .3vw,1.15rem);color:#d8d8de}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-visual{position:relative;min-width:0}
.hero-visual::before{content:'';position:absolute;inset:8% 6%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(224,10,60,.30),transparent 65%);filter:blur(30px)}

/* Board, drawn after the Turbo Games Mines field */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.board{--gap:clamp(6px,1.3vw,12px);width:100%;max-width:580px;margin-inline:auto;padding:clamp(12px,2vw,20px);border:1px solid rgba(255,255,255,.08);border-radius:clamp(18px,2.6vw,28px);background:linear-gradient(160deg,#212429,#16181c 70%);box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5)}
.board-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:var(--gap)}
.board-bar span{padding:7px 0;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:#1d2024;color:#8b8f97;font-family:var(--display);font-size:clamp(.7rem,.6rem + .4vw,.85rem);font-weight:500;text-align:center;line-height:1}
.board-bar .is-active{border-color:transparent;background:linear-gradient(180deg,#f0144a,var(--red-dark));color:#fff;box-shadow:0 6px 16px var(--red-glow)}
.board-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.cell{aspect-ratio:1;border-radius:20%;background:linear-gradient(150deg,#2b2e33 0%,#222529 55%,#1d1f23 100%);box-shadow:0 6px 12px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.cell.is-gem{display:grid;place-items:center;background:radial-gradient(16% 5% at 50% 80%,rgba(0,0,0,.85),transparent),radial-gradient(52% 20% at 50% 80%,rgba(62,170,232,.55),rgba(62,170,232,.1) 60%,transparent 80%),linear-gradient(180deg,#16181b,#101215);box-shadow:inset 0 0 0 1.5px rgba(90,170,205,.28),inset 0 2px 0 rgba(125,210,240,.5),0 8px 16px rgba(0,0,0,.45)}
.cell.is-gem svg{width:64%;height:auto;translate:0 -7%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
@media (prefers-reduced-motion:no-preference){
  .cell.is-gem svg{animation:gem-in .6s cubic-bezier(.2,.9,.3,1.35) both;animation-delay:calc(.3s + var(--i,0) * .16s)}
}
@keyframes gem-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* Game facts (moved from the section below) */
.spec{margin-top:44px}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;border:1px solid var(--line);background:var(--line)}
.spec-grid > div{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:rgba(20,20,25,.96)}
.spec-grid dt{color:var(--dim);font-size:.82rem;font-weight:600;line-height:1.3}
.spec-grid dd{margin:0;color:#fff;font-family:var(--display);font-size:clamp(1.02rem,.95rem + .35vw,1.25rem);font-weight:500;line-height:1.25}
.spec-grid .is-key dd{color:#ff3b67}
.spec-note{max-width:90ch;margin:16px 0 0;color:var(--dim);font-size:.92rem}

/* Content helpers */
.prose-section h2{max-width:820px}
.versions-table{margin-top:14px}
.final-cta{text-align:center;padding:56px 20px}
.final-cta .hero-actions{justify-content:center}
.final-cta p{max-width:700px;margin-inline:auto}

@media (min-width:900px){
  .spec-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1024px){
  .hero{padding:84px 0 72px}
  .hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
  .board{margin-right:0}
  .spec{margin-top:64px}
}
@media (min-width:1280px){
  .hero-inner{gap:88px}
}
@media (max-width:480px){
  .hero-actions .button{flex:1 1 140px}
  .spec-grid > div{padding:14px}
}