/* === StarSpin / Book of Stars — Suomi Edition === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Lato:wght@300;400;700&display=swap');

:root {
  --ink:        #05090f;
  --deep:       #070e1c;
  --midnight:   #0b1529;
  --steel:      #112040;
  --aurora-g:   #00c896;
  --aurora-b:   #0af0d8;
  --aurora-p:   #7b2fff;
  --aurora-pp:  #b16fff;
  --gold:       #f0c040;
  --gold-light: #ffe17a;
  --cream:      #d4dff5;
  --muted:      #7a90b8;
  --white:      #ffffff;
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Lato', Arial, sans-serif;
  --ease: cubic-bezier(.25,.8,.25,1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--ink); color:var(--cream); line-height:1.7; overflow-x:hidden; }

body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 35% 40%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 60% 20%,rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 80% 55%,rgba(255,255,255,.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 25% 75%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 70% 85%,rgba(255,255,255,.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 90% 30%,rgba(255,255,255,.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 15% 50%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 45% 90%,rgba(255,255,255,.3) 0%,transparent 100%);
  pointer-events:none; z-index:0; opacity:.5;
}

/* TOP WARNING BANNER */
.top-banner {
  position:fixed; top:0; left:0; width:100%; z-index:2000;
  background:linear-gradient(90deg,#081a0a,#0d2410,#081a0a);
  border-bottom:1px solid #1a5a28;
  padding:.38rem 1.5rem;
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
}
.top-banner p { font-size:.73rem; font-weight:700; color:#6dde7a; letter-spacing:.04em; text-transform:uppercase; margin:0; text-align:center; }
.top-banner .tbadge { background:#1a5a28; color:#a8f5a8; font-size:.66rem; font-weight:900; padding:.15rem .55rem; border-radius:4px; letter-spacing:.06em; white-space:nowrap; border:1px solid #2b8c35; flex-shrink:0; }

/* HEADER */
.header {
  position:fixed; top:30px; left:0; width:100%; z-index:1000;
  background:rgba(7,14,28,.94); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,200,150,.13);
  padding:.75rem 0;
  box-shadow:0 4px 30px rgba(0,0,0,.5);
}
.header-content { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.logo-container { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.logo-mark {
  width:36px; height:36px;
  background:linear-gradient(135deg,#00c896,#0af0d8);
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; box-shadow:0 0 16px rgba(0,200,150,.35);
  transition:transform .3s,box-shadow .3s;
}
.logo-container:hover .logo-mark { transform:rotate(15deg) scale(1.1); box-shadow:0 0 28px rgba(0,200,150,.5); }
.site-name { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--gold); letter-spacing:.05em; text-shadow:0 0 12px rgba(240,192,64,.4); }
.nav ul { display:flex; list-style:none; gap:1.8rem; align-items:center; }
.nav a { font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .25s; position:relative; }
.nav a::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--aurora-g); transition:width .3s var(--ease); }
.nav a:hover { color:var(--aurora-b); }
.nav a:hover::after { width:100%; }
.menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--aurora-g); border-radius:2px; transition:.3s; }

/* PAGE OFFSET */
.page-top { padding-top:calc(30px + 58px); }

/* AGE OVERLAY — visual only, DOM readable underneath */
.age-overlay {
  position:fixed; inset:0; z-index:5000;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(20px) brightness(.35) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) brightness(.35) saturate(1.4);
  transition:opacity .4s var(--ease);
}
.age-overlay.hidden { opacity:0; pointer-events:none; }

.age-card {
  background:linear-gradient(145deg,rgba(11,21,41,.98),rgba(7,25,18,.98));
  border:1px solid rgba(0,200,150,.4);
  border-radius:22px; padding:2.8rem 2.5rem; max-width:430px; width:92%;
  text-align:center; position:relative;
  box-shadow:0 0 80px rgba(0,200,150,.12),0 30px 60px rgba(0,0,0,.7);
  animation:popIn .5s var(--ease) both;
}
@keyframes popIn { from{transform:scale(.88) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

.age-emblem { font-size:2.8rem; margin-bottom:1rem; display:block; }
.age-card h2 { font-family:var(--font-display); font-size:1.6rem; color:var(--gold); margin-bottom:.7rem; }
.age-card p { font-size:.9rem; color:var(--muted); margin-bottom:.5rem; line-height:1.65; }
.age-coins-note {
  margin:1rem 0 1.6rem;
  background:rgba(0,200,150,.07); border:1px solid rgba(0,200,150,.2);
  border-radius:10px; padding:.75rem 1rem;
  font-size:.8rem; color:var(--aurora-g); line-height:1.6;
}
.age-buttons { display:flex; gap:.8rem; }
.age-buttons .btn { flex:1; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.82rem 1.8rem; font-family:var(--font-body);
  font-size:.88rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:none; border-radius:50px; cursor:pointer; text-decoration:none;
  transition:transform .2s,box-shadow .2s; white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,#00c896,#0af0d8); color:var(--ink); box-shadow:0 4px 20px rgba(0,200,150,.35); }
.btn-primary:hover { box-shadow:0 8px 30px rgba(0,240,216,.5); }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid rgba(122,144,184,.3); font-size:.8rem; }
.btn-ghost:hover { color:var(--cream); border-color:var(--muted); }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--ink); box-shadow:0 4px 20px rgba(240,192,64,.3); }
.btn-gold:hover { box-shadow:0 8px 30px rgba(240,192,64,.5); }

/* HERO */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; padding:10rem 2rem 6rem; overflow:hidden; }
.hero-aurora {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,200,150,.12) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%,rgba(123,47,255,.09) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%,rgba(0,240,216,.07) 0%,transparent 60%);
  animation:auroraShift 12s ease-in-out infinite alternate;
}
@keyframes auroraShift { 0%{opacity:.7;transform:scaleY(1)} 100%{opacity:1;transform:scaleY(1.12)} }
.hero-content { position:relative; z-index:1; max-width:780px; animation:fadeUp .9s var(--ease) both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }

.hero-eyebrow {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--aurora-g); border:1px solid rgba(0,200,150,.3); border-radius:50px; padding:.28rem .9rem; margin-bottom:1.4rem;
}
.hero h1 { font-family:var(--font-display); font-size:clamp(2.2rem,6vw,4rem); font-weight:900; color:var(--white); line-height:1.1; margin-bottom:1.2rem; }
.hero h1 span { background:linear-gradient(90deg,var(--aurora-g),var(--aurora-b)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-size:1.05rem; color:var(--muted); margin-bottom:2rem; max-width:560px; margin-left:auto; margin-right:auto; }
.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-coins-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; color:var(--aurora-g);
  background:rgba(0,200,150,.07); border:1px solid rgba(0,200,150,.2);
  border-radius:8px; padding:.45rem .9rem; margin-top:1.2rem;
}

/* CONTAINER & SECTIONS */
.container { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
section { padding:5rem 0; position:relative; }
.section-label { font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--aurora-g); display:block; margin-bottom:.5rem; }
.section-title { font-family:var(--font-display); font-size:clamp(1.7rem,4vw,2.6rem); font-weight:700; color:var(--white); margin-bottom:1rem; }

/* CARDS */
.card { background:rgba(11,21,41,.7); border:1px solid rgba(0,200,150,.1); border-radius:18px; padding:2rem; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; }
.card:hover { transform:translateY(-6px); border-color:rgba(0,200,150,.32); box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 28px rgba(0,200,150,.09); }
.card-icon { font-size:1.9rem; margin-bottom:.9rem; display:block; }
.card h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--white); margin-bottom:.5rem; }
.card p { font-size:.9rem; color:var(--muted); line-height:1.65; margin:0; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:3rem; }

/* COINS CALLOUT */
.coins-callout {
  background:linear-gradient(135deg,rgba(0,200,150,.07),rgba(0,240,216,.04));
  border:1px solid rgba(0,200,150,.22); border-radius:20px; padding:2.5rem; text-align:center; margin:4rem 0;
}
.coins-callout .big-icon { font-size:3rem; display:block; margin-bottom:1rem; }
.coins-callout h3 { font-family:var(--font-display); font-size:1.4rem; color:var(--aurora-b); margin-bottom:.7rem; }
.coins-callout p { color:var(--muted); font-size:.92rem; max-width:560px; margin:0 auto; }

/* DISCLAIMER */
.disclaimer-block {
  background:linear-gradient(135deg,rgba(8,20,10,.95),rgba(6,18,8,.95));
  border:1px solid #1a5a28; border-radius:16px; padding:1.8rem 2.2rem; margin:2.5rem 0;
}
.disc-header { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.disc-icon { font-size:1.3rem; }
.disclaimer-block strong { font-family:var(--font-display); font-size:.9rem; color:#6dde7a; letter-spacing:.07em; text-transform:uppercase; }
.disclaimer-block p { font-size:.86rem; color:#7acf82; margin:.25rem 0 0; line-height:1.7; }
.disclaimer-block a { color:var(--aurora-b); }

/* FOOTER */
.footer { background:var(--ink); border-top:1px solid rgba(0,200,150,.08); padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem; }
.footer-brand .site-name { font-size:1.05rem; margin-bottom:.5rem; display:block; }
.footer-brand p { font-size:.83rem; color:var(--muted); line-height:1.7; }
.footer-col h4 { font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aurora-g); margin-bottom:.9rem; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:.45rem; }
.footer-links a { font-size:.85rem; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--cream); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.04); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.76rem; color:var(--muted); margin:0; }
.footer-badges { display:flex; gap:.4rem; }
.footer-badge { font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.2rem .55rem; border-radius:4px; background:rgba(255,255,255,.04); color:var(--muted); border:1px solid rgba(255,255,255,.07); }

/* COOKIE */
.cookie-banner { position:fixed; bottom:0; left:0; width:100%; background:rgba(7,14,28,.97); border-top:1px solid rgba(0,200,150,.18); padding:1.1rem 1.5rem; z-index:4000; transform:translateY(100%); transition:transform .4s var(--ease); backdrop-filter:blur(12px); }
.cookie-banner.show { transform:translateY(0); }
.cookie-content { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.cookie-text { flex:1; min-width:260px; }
.cookie-text p { font-size:.81rem; color:var(--muted); margin:0; }
.cookie-text a { color:var(--aurora-b); }
.cookie-btns { display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-btns .btn { padding:.55rem 1.2rem; font-size:.78rem; }

/* LEGAL */
.legal-wrap { padding-top:calc(30px + 58px + 3rem); padding-bottom:5rem; }
.legal-card { background:rgba(11,21,41,.7); border:1px solid rgba(0,200,150,.1); border-radius:20px; padding:3rem; }
.legal-card h1 { font-family:var(--font-display); font-size:2rem; color:var(--white); margin-bottom:.3rem; }
.legal-card .updated { font-size:.78rem; color:var(--muted); margin-bottom:2rem; display:block; }
.legal-card h2 { font-family:var(--font-display); font-size:1.1rem; color:var(--aurora-b); margin:1.8rem 0 .5rem; }
.legal-card h3 { font-size:.97rem; color:var(--aurora-pp); margin:1.2rem 0 .3rem; }
.legal-card p,.legal-card li { font-size:.9rem; color:var(--muted); margin-bottom:.5rem; line-height:1.75; }
.legal-card ul { padding-left:1.3rem; }
.legal-card a { color:var(--aurora-b); }

/* UTILS */
.text-center { text-align:center; }
.mt-2 { margin-top:2rem; }
.mt-3 { margin-top:3rem; }
.hidden { display:none!important; }

/* ─── COOKIE MODAL ──────────────────────────── */
.cookie-modal-backdrop {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(2,5,16,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 2rem 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.cookie-modal-backdrop.show {
  opacity: 1; pointer-events: all;
}

.cookie-modal {
  background: linear-gradient(145deg, rgba(11,21,41,.98), rgba(7,20,32,.99));
  border: 1px solid rgba(0,200,150,.25);
  border-radius: 24px;
  padding: 2.2rem 2.4rem 2rem;
  width: 100%; max-width: 560px;
  box-shadow: 0 0 80px rgba(0,200,150,.1), 0 40px 80px rgba(0,0,0,.8);
  transform: translateY(40px);
  transition: transform .4s var(--ease);
  position: relative;
}
.cookie-modal-backdrop.show .cookie-modal {
  transform: translateY(0);
}

.cookie-modal-header {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem;
}
.cookie-modal-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,200,150,.15), rgba(0,240,216,.1));
  border: 1px solid rgba(0,200,150,.3);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.cookie-modal-header h3 {
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--white); margin-bottom: .2rem;
}
.cookie-modal-header p {
  font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.55;
}
.cookie-modal-header a { color: var(--aurora-b); }

.cookie-divider {
  height: 1px; background: rgba(0,200,150,.1); margin: 1.2rem 0;
}

/* Cookie categories */
.cookie-categories { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }

.cookie-category {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: .85rem 1rem;
  transition: border-color .2s;
}
.cookie-category:hover { border-color: rgba(0,200,150,.2); }

.cookie-cat-info { flex: 1; }
.cookie-cat-info strong {
  font-family: var(--font-body); font-size: .88rem; font-weight: 700;
  color: var(--cream); display: block; margin-bottom: .15rem;
}
.cookie-cat-info span { font-size: .75rem; color: var(--muted); line-height: 1.4; }

/* Toggle switch */
.cookie-toggle { position: relative; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  display: block; width: 44px; height: 24px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px; cursor: pointer;
  transition: background .25s, border-color .25s;
  position: relative;
}
.toggle-track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform .25s var(--ease), background .25s;
}
.cookie-toggle input:checked + .toggle-track {
  background: rgba(0,200,150,.25);
  border-color: rgba(0,200,150,.5);
}
.cookie-toggle input:checked + .toggle-track::after {
  transform: translateX(20px);
  background: var(--aurora-g);
}
.cookie-toggle input:disabled + .toggle-track {
  opacity: .5; cursor: not-allowed;
}

/* Required badge */
.cookie-required-badge {
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aurora-g); background: rgba(0,200,150,.1);
  border: 1px solid rgba(0,200,150,.25); border-radius: 4px;
  padding: .1rem .45rem;
}

/* Modal buttons */
.cookie-modal-actions {
  display: flex; gap: .7rem; flex-wrap: wrap;
}
.cookie-modal-actions .btn { flex: 1; min-width: 110px; font-size: .82rem; padding: .72rem 1rem; }

@media (max-width: 480px) {
  .cookie-modal { padding: 1.6rem 1.4rem 1.5rem; }
  .cookie-modal-actions .btn { flex: 1 1 100%; }
}