:root{
  --night:#0e0c24; --night2:#16123a; --dusk:#241b4a; --cream:#f6eedc; --muted:#c9bfd8; --gold:#f2c14e; --gold2:#d9a234;
  --card:rgba(30,24,64,.72); --line:rgba(246,238,220,.14);
  --serif:"New York",ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--cream);font:18px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3,summary{font-family:var(--serif)}

/* hero: the valley far away, the game's cards drifting in it, the name in light */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,12,36,.55),rgba(14,12,36,.25) 45%,var(--night) 100%),url(img/hero.jpg) center/cover no-repeat}
.drift{position:absolute;width:clamp(90px,11vw,150px);aspect-ratio:2/3;border-radius:10px;border:2px solid rgba(246,238,220,.8);
  background:center/cover no-repeat;opacity:.38;filter:blur(1.5px);box-shadow:0 10px 30px rgba(0,0,0,.5);animation:drift 26s ease-in-out infinite alternate}
.drift:nth-child(2){animation-duration:31s;animation-delay:-6s;opacity:.3;filter:blur(3px)}
.drift:nth-child(3){animation-duration:35s;animation-delay:-12s}
.drift:nth-child(4){animation-duration:29s;animation-delay:-3s;opacity:.28;filter:blur(3.5px)}
.drift:nth-child(5){animation-duration:33s;animation-delay:-9s}
.drift:nth-child(6){animation-duration:38s;animation-delay:-15s;opacity:.26;filter:blur(4px)}
@keyframes drift{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(4vw,-3vh) rotate(5deg)}}
.hero-inner{position:relative;z-index:1;text-align:center;padding:6vh 16px}
.hero img.logo{width:min(560px,82vw);margin:0 auto;filter:drop-shadow(0 0 28px rgba(242,193,78,.35));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 18px rgba(242,193,78,.22))}50%{filter:drop-shadow(0 0 34px rgba(242,193,78,.45))}}
.tag{font-family:var(--serif);font-size:clamp(22px,3.4vw,34px);margin:14px 0 6px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.tag2{color:var(--muted);margin:0 0 26px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:700;color:var(--night);background:var(--gold);
  box-shadow:0 0 24px rgba(242,193,78,.35);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:rgba(22,18,58,.75);color:var(--cream);border:1px solid var(--line);box-shadow:none}

/* sections */
section{padding:64px 0}
h2{font-size:clamp(30px,4.2vw,44px);line-height:1.15;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 30px;max-width:720px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px}
.card img.form{height:70px;width:auto;margin-bottom:6px;filter:drop-shadow(0 0 14px rgba(242,193,78,.25))}
.card h3{margin:6px 0 6px;font-size:23px}
.card p{margin:0;color:var(--muted)}

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
@media (max-width:900px){.shots{grid-template-columns:1fr}}
.shots img{border-radius:16px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.45);aspect-ratio:16/9;object-fit:cover}

/* how to play */
ol.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:14px}
ol.steps li{counter-increment:step;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px 18px 74px;position:relative}
ol.steps li::before{content:counter(step);position:absolute;left:20px;top:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font:700 20px/1 var(--serif);color:var(--night);background:var(--gold)}
ol.steps b{font-family:var(--serif);font-size:20px}
.score{margin-top:18px;color:var(--muted)}

/* faq */
details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 20px;margin:0 0 12px}
summary{cursor:pointer;list-style:none;padding:16px 0;font-size:20px;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-weight:700}
details[open] summary::after{content:"–"}
details p,details ul{margin:0 0 16px;color:var(--muted)}
kbd{background:var(--dusk);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:1px 7px;font:600 14px/1.6 ui-monospace,monospace;color:var(--cream)}

/* contact */
.contact{text-align:center;background:radial-gradient(ellipse at top,rgba(242,193,78,.18),transparent 60%),var(--night2);border:1px solid var(--line);border-radius:28px;padding:48px 22px}
.contact p{color:var(--muted);margin:0 auto 22px;max-width:560px}
.contact .mail{display:inline-block;background:var(--gold);color:var(--night);font-weight:800;font-size:clamp(17px,2.6vw,22px);padding:14px 26px;border-radius:999px;text-decoration:none}

/* privacy page */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;max-width:1080px;margin:0 auto}
.top img{height:58px;width:auto}
.top nav a{margin-left:18px;font-weight:700;text-decoration:none;color:var(--cream)}
.doc{max-width:760px;margin:0 auto;padding:30px 20px 70px}
.doc h1{font-size:clamp(34px,5vw,48px);margin:18px 0 4px}
.doc h2{font-size:27px;margin-top:38px}
.doc p,.doc li{color:var(--muted)}
.doc b{color:var(--cream)}
.pill{display:inline-block;background:rgba(242,193,78,.14);color:var(--gold);border:1px solid rgba(242,193,78,.45);border-radius:999px;padding:6px 14px;font-weight:700;font-size:15px}

footer{text-align:center;color:var(--muted);font-size:15px;padding:30px 20px 50px}
footer a{color:inherit}
@media (max-width:560px){ body{font-size:17px} section{padding:44px 0} .hero{min-height:72vh} .drift{display:none} }
@media (prefers-reduced-motion: reduce){ .drift,.hero img.logo{animation:none} }