/* assets/styles.css */
:root{
  /* Calm, light UI inspired by your screenshots */
  --bg: #f2f4f6;
  --bg2:#eef2f5;
  --surface:#ffffff;
  --surface2:#f8fafc;

  --text:#1f2a37;
  --muted:#5b6776;
  --muted2:#7b8796;

  --stroke:#e4e9f0;
  --stroke2:#d7dee8;

  --primary:#2fb1d2;      /* teal/cyan */
  --primary-ink:#ffffff;
  --primary-soft:#e7f7fb;

  --accent:#f0c24f;       /* warm yellow */
  --accent-soft:#fff4d6;

  --shadow: 0 10px 26px rgba(15, 23, 42, .08);
  --shadow2: 0 6px 16px rgba(15, 23, 42, .08);

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --container: 1120px;

  --focus: 0 0 0 4px rgba(47,177,210,.22), 0 0 0 1px rgba(47,177,210,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 420px at 12% -5%, rgba(47,177,210,.14), transparent 55%),
    radial-gradient(1000px 420px at 90% 0%, rgba(240,194,79,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
}

a{color:inherit}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

/* Accessibility */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;z-index:9999;
  background: var(--surface);
  border:1px solid var(--stroke);
  padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);
  outline:none;
}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(130%) blur(10px);
  background: rgba(242,244,246,.86);
  border-bottom:1px solid rgba(215,222,232,.7);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:12px;
}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.logo{
  width:36px;height:36px;border-radius:14px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.9), transparent 65%),
    linear-gradient(135deg, rgba(47,177,210,.95), rgba(68,170,200,.72));
  border:1px solid rgba(47,177,210,.25);
  box-shadow: 0 10px 18px rgba(15, 23, 42, .10);
}
.logoImg{
  width:36px;
  height:36px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(47,177,210,.25);
  box-shadow: 0 10px 18px rgba(15, 23, 42, .10);
}
.brand strong{font-weight:780;letter-spacing:.2px}
.brand span{color:var(--muted);font-size:.92rem}

.navlinks{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;
}
.navlinks a{
  text-decoration:none;
  padding:9px 12px;border-radius:12px;
  color:var(--muted);
  border:1px solid transparent;
}
.navlinks a:hover{
  color:var(--text);
  background: rgba(255,255,255,.65);
  border-color: rgba(215,222,232,.7);
}
.navlinks a:focus{outline:none;box-shadow:var(--focus)}
.navlinks .pill{
  border-color: rgba(47,177,210,.28);
  background: rgba(47,177,210,.10);
  color: var(--text);
}
.navlinks .pill:hover{
  background: rgba(47,177,210,.14);
  border-color: rgba(47,177,210,.35);
}

/* Layout blocks */
.hero{padding:42px 0 18px}
.heroGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 920px){ .heroGrid{grid-template-columns:1fr} }

.card{
  border-radius: var(--r-lg);
  border:1px solid var(--stroke);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cardInner{padding:22px}
@media (max-width: 520px){ .cardInner{padding:18px} }

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:999px;
  background: rgba(47,177,210,.10);
  border:1px solid rgba(47,177,210,.18);
  color: var(--muted);
  font-size:.92rem;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: linear-gradient(135deg, var(--primary), rgba(47,177,210,.62));
  box-shadow: 0 0 0 4px rgba(47,177,210,.14);
}

h1{
  margin:14px 0 10px;
  font-size: clamp(1.75rem, 1.15rem + 2vw, 2.9rem);
  line-height:1.08;
  letter-spacing:-.35px;
}
.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:1.06rem;
}

.ctaRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  color: var(--text);
  box-shadow: 0 10px 18px rgba(15, 23, 42, .06);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: #ffffff;
  border-color: rgba(47,177,210,.22);
  box-shadow: var(--shadow2);
}
.btn:focus{outline:none;box-shadow:var(--focus)}
.btnPrimary{
  border-color: rgba(47,177,210,.45);
  background: linear-gradient(135deg, rgba(47,177,210,.98), rgba(47,177,210,.80));
  color: var(--primary-ink);
  font-weight:600;
}
.btnPrimary:hover{
  border-color: rgba(47,177,210,.55);
  filter:saturate(104%) brightness(102%);
}
.btnPrimary,
.btnPrimary:hover,
.btnPrimary:visited{
  color: var(--primary-ink);
}

.btnPrimary:hover{
  background: linear-gradient(135deg, rgba(47,177,210,1), rgba(47,177,210,.86));
}

.btnPrimary .btnIcon path{
  stroke: currentColor;
}
.btnGhost{
  background: transparent;
  border-color: rgba(215,222,232,.85);
  color: var(--text);
}
.btnSmall{padding:10px 12px;border-radius:12px;font-size:.95rem}
.btnIcon{width:18px;height:18px;display:inline-block}
.note{margin:10px 0 0;color:var(--muted2);font-size:.92rem}

/* Right side panel */
.panel{
  height:100%;
  background:
    radial-gradient(360px 160px at 20% 18%, rgba(47,177,210,.12), transparent 60%),
    radial-gradient(340px 160px at 90% 40%, rgba(240,194,79,.12), transparent 65%),
    linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.96));
}
.statGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.stat{
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.8);
  padding:12px 12px;
}
.stat b{display:block;font-size:1.02rem}
.stat span{color:var(--muted2);font-size:.92rem}

.badgeRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;
  padding:8px 10px;
  background: rgba(240,194,79,.14);
  border:1px solid rgba(240,194,79,.22);
  color: var(--muted);
  font-size:.92rem;
}
.badge svg{opacity:.85}

/* Sections */
.section{padding: 18px 0 44px}
.sectionHeader{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin: 0 0 14px;
}
.sectionHeader h2{margin:0;font-size:1.35rem;letter-spacing:-.2px}
.sectionHeader p{margin:0;color:var(--muted);max-width:62ch}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
@media (max-width: 920px){ .grid{gap:12px} }
.col-4{grid-column: span 4}
.col-6{grid-column: span 6}
.col-8{grid-column: span 8}
.col-12{grid-column: span 12}
@media (max-width: 980px){ .col-4{grid-column: span 6} }
@media (max-width: 620px){ .col-6,.col-8,.col-4{grid-column: span 12} }

.gameCard{
  height:100%;
  display:flex;flex-direction:column;
  border-radius: var(--r-lg);
  border:1px solid var(--stroke);
  background: var(--surface);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.gameTop{
  padding:16px 16px 12px;
  display:flex;align-items:flex-start;gap:12px;
}
.icon{
  width:44px;height:44px;border-radius:16px;
  border:1px solid rgba(47,177,210,.20);
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(135deg, rgba(47,177,210,.42), rgba(47,177,210,.18));
}
.gameTitle{margin:0;font-size:1.06rem;letter-spacing:-.2px}
.gameMeta{margin:4px 0 0;color:var(--muted2);font-size:.92rem}
.gameBody{padding:0 16px 14px}
.gameBody p{margin:0;color:var(--muted);font-size:.98rem}
.gameFooter{
  margin-top:auto;
  padding:14px 16px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--stroke);
  background: rgba(248,250,252,.9);
}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:.86rem;color:var(--muted2);
  padding:7px 9px;border-radius:999px;
  background: rgba(47,177,210,.08);
  border:1px solid rgba(47,177,210,.14);
}

/* Callout */
.callout{
  border-radius: var(--r-lg);
  border:1px solid rgba(47,177,210,.20);
  background:
    radial-gradient(520px 180px at 10% 15%, rgba(47,177,210,.12), transparent 60%),
    radial-gradient(520px 180px at 90% 45%, rgba(240,194,79,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92));
  box-shadow: var(--shadow);
}
.calloutInner{padding:18px}
.callout h3{margin:0 0 6px;font-size:1.12rem}
.callout p{margin:0;color:var(--muted)}

/* FAQ */
.faq{
  border-radius: var(--r-lg);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.faq details{
  border-top:1px solid var(--stroke);
  padding: 14px 16px;
}
.faq details:first-child{border-top:none}
.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  color: var(--text);
  font-weight:750;
}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0;color:var(--muted)}
.chev{width:18px;height:18px;opacity:.7;transition: transform .14s ease}
details[open] .chev{transform: rotate(180deg)}
details:focus-within{outline:none;box-shadow: var(--focus);border-radius: 14px}

/* Footer */
.footer{
  border-top:1px solid rgba(215,222,232,.8);
  background: rgba(248,250,252,.9);
  padding: 26px 0;
}
.footerGrid{
  display:grid;grid-template-columns: 1.2fr .8fr;
  gap:14px;align-items:start;
}
@media (max-width: 820px){ .footerGrid{grid-template-columns: 1fr} }
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--text)}
.small{color:var(--muted2);font-size:.92rem;margin:8px 0 0}
.footerLinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width: 820px){ .footerLinks{justify-content:flex-start} }

/* Privacy page */
.pageHeader{padding: 26px 0 8px}
.pageHeader h1{
  font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.2rem);
  margin:0 0 8px
}
.pageHeader p{margin:0;color:var(--muted);max-width:70ch}

.prose{padding: 12px 0 42px}
.prose .cardInner{padding:20px}
.prose h2{margin:18px 0 10px;font-size:1.22rem;letter-spacing:-.2px}
.prose h3{margin:14px 0 8px;font-size:1.06rem}
.prose p, .prose li{color:var(--muted)}
.prose ul{margin:10px 0 14px;padding-left:20px}
.prose a{
  color: rgba(47,177,210,.98);
  text-decoration: none;
  border-bottom:1px solid rgba(47,177,210,.35);
}
.prose a:hover{border-bottom-color: rgba(47,177,210,.65)}
hr{border:none;border-top:1px solid rgba(215,222,232,.8);margin:16px 0}