:root {
  --bg: #fffafc;          /* sugar paper */
  --surface: #ffffff;     /* card */
  --text: #2b2b2b;        /* main text */
  --muted: #6b7280;       /* gray */
  --accent: #ff7fbf;      /* strawberry */
  --accent-2: #8be3ff;    /* cotton blue */
  --accent-3: #ffe58b;    /* lemon */
  --ring: #ffd1e6;        /* soft ring */
  --shadow: 0 10px 24px rgba(255, 127, 191, .15), 0 6px 12px rgba(139, 227, 255, .12);
  --radius: 16px;
  --radius-lg: 24px;
  --space: clamp(16px, 2.2vw, 28px);
  --maxw: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% -10%, #ffeef7, transparent 60%),
              radial-gradient(1000px 700px at 110% 10%, #ecfcff, transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Utility */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space); }
.section { padding: calc(var(--space) * 3) 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid #f9cfe0; box-shadow: var(--shadow); font-size: 14px; }
.tag { padding: 4px 10px; border-radius: 999px; background: #fff3f8; color: #b83280; font-weight: 600; font-size: 12px; border: 1px solid #ffd1e6; }
.btn { appearance: none; border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); transition: transform .1s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #ff99cc); color: #fff; }
.btn-outline { background: #fff; border: 2px solid var(--accent); color: #b80667; }
.card { background: var(--surface); border: 1px solid #f3f4f6; border-radius: var(--radius); box-shadow: var(--shadow); }
.grid { display: grid; gap: calc(var(--space) * 1.1); }

/* --- Header layout (grid makes 3 elements painless) --- */
.site-header{
position: sticky; top:0; z-index:50;
background: rgba(255,255,255,.7);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid #ffe3f0;
}
.header-grid{
display: grid;
grid-template-columns: auto 1fr auto; /* brand | filler | nav/burger */
align-items: center;
gap: 12px;
padding: 14px 10px;
position: relative; /* so mobile dropdown can anchor here */
}

/* Brand */
.brand{display:flex; align-items:center; gap:10px; font-weight:900; text-decoration:none; color:inherit;}
.logo{width:36px; height:36px; display:grid; place-items:center; border-radius:12px;
  background: conic-gradient(from 200deg, #ff7fbf, #8be3ff, #ffe58b);}

/* Nav default (desktop) */
#siteNav{grid-column: 3; justify-self: end;}
.nav-list{display:flex; gap:18px; list-style:none; margin:0; padding:0;}
.nav-list a{font-weight:600; color:inherit; text-decoration:none; opacity:.9}

/* Burger button */
.burger{
grid-column: 3;
display:none; /* hidden on desktop */
width:42px; height:42px; border-radius:12px;
border:1px solid #ffd1e6; background:#fff; cursor:pointer;
box-shadow: 0 10px 24px rgba(255,127,191,.15), 0 6px 12px rgba(139,227,255,.12);
}
.burger .lines{width:20px; height:14px; position:relative}
.burger .lines::before, .burger .lines::after, .burger .lines span{
content:""; position:absolute; left:0; right:0; height:2px; background:#b80667; border-radius:2px;
}
.burger .lines::before{top:0} .burger .lines span{top:6px} .burger .lines::after{bottom:0}

/* --- Mobile behavior --- */
@media (max-width: 900px){
/* show burger, hide nav layout */
.burger{display:inline-flex; align-items:center; justify-content:center;}
/* turn nav into dropdown overlay; not part of grid flow to avoid spacing issues */
#siteNav{
position: absolute;
top: calc(100% + 8px);
right: var(--space, 16px);
display: none;
background:#fff; border:1px solid #ffe3f0; border-radius:16px; padding:10px;
box-shadow: 0 10px 24px rgba(255,127,191,.15), 0 6px 12px rgba(139,227,255,.12);
}
#siteNav.open{ display:block; }
.nav-list{flex-direction: column; gap: 6px;}
.nav-list a{display:block; padding:10px 12px; border-radius:10px;}
.nav-list a:hover{background:#fff3f8}
}

/* (optional) focus styles */
.burger:focus{outline:none; box-shadow:0 0 0 4px #ffd1e6;}


/* Hero */
.hero { display: grid; align-items: center; grid-template-columns: 1.1fr 0.9fr; gap: var(--space); }
.hero h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.1; margin: 14px 0 10px; }
.hero p { font-size: clamp(16px, 2vw, 20px); color: var(--muted); margin: 0 0 20px; }

/* About */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); }
.about .card { padding: calc(var(--space) * 1.2); }

/* Games */
.games { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.game { padding: 20px; display: grid; gap: 10px; align-content: start; border: 1px solid #ffe3f0; }
.game .icon { font-size: 40px; }
.game h3 { margin: 0; font-size: 18px; }
.game p { margin: 0; color: var(--muted); font-size: 14px; }

/* Events */
.events .item { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 16px; border: 1px dashed #ffdceb; border-radius: var(--radius); background: #fff; }
.events .item strong { font-size: 16px; }

/* Pricing */
.pricing { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.plan { padding: 24px; border: 1px solid #ffe3f0; position: relative; }
.plan h3 { margin: 0 0 6px; }
.price { font-size: 34px; font-weight: 900; }
.plan ul { padding-left: 18px; margin: 14px 0; }
.badge { position: absolute; top: -10px; right: 16px; background: #fff6a6; border: 1px solid #ffe58b; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; box-shadow: var(--shadow); }
.featured { outline: 3px solid #ffd1e6; transform: translateY(-4px); }

/* Reviews */
.reviews { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.review { padding: 20px; border: 1px solid #ffe3f0; }
.review .who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff0f6; border: 1px solid #ffd1e6; }

/* Contact */
form { display: grid; gap: 12px; }
input, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #ffd1e6; background: #fff; outline: none; box-shadow: inset 0 1px 0 #fff, 0 0 0 0 transparent; }
input:focus, textarea:focus { box-shadow: 0 0 0 4px var(--ring); }
textarea { min-height: 120px; resize: vertical; }

/* Footer */
footer { padding: 32px 0; color: var(--muted); text-align: center; }

/* Cookie Bar */
.cookie { position: fixed; inset: auto var(--space) var(--space) var(--space); display: none; z-index: 60; }
.cookie .bar { display: flex; align-items: center; padding: 14px 16px; border-radius: 14px; background: #121212; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.cookie small { opacity: .9; }
.cookie .actions { display: flex; gap: 10px; }
.cookie .btn { box-shadow: none; }
.cookie .btn-accept { background: linear-gradient(135deg, var(--accent), #ff99cc); color: #fff; }
.cookie .btn-decline { background: #262626; color: #fff; border: 1px solid #3a3a3a; }

/* Responsive */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .cookie .bar { flex-direction: column; }
}