/* =========================================================
   AURORALEVELS — design system
   Visual language borrowed from onepagelove.com/fictional:
   flat saturated colour blocks (coral / yellow / purple / green),
   thick black outlines, hard offset "comic" shadows, starburst
   explosion shapes, speech bubbles and rotated sticker badges,
   chunky rounded display type.
   ========================================================= */

/* Self-hosted fonts (Baloo 2, Nunito) — avoids sending visitor IPs to Google Fonts */
@font-face{
  font-family:'Baloo 2'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/fonts/baloo-2-latin-500-normal.woff2') format('woff2'), url('/fonts/baloo-2-latin-500-normal.woff') format('woff');
}
@font-face{
  font-family:'Baloo 2'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/baloo-2-latin-600-normal.woff2') format('woff2'), url('/fonts/baloo-2-latin-600-normal.woff') format('woff');
}
@font-face{
  font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/baloo-2-latin-700-normal.woff2') format('woff2'), url('/fonts/baloo-2-latin-700-normal.woff') format('woff');
}
@font-face{
  font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/fonts/baloo-2-latin-800-normal.woff2') format('woff2'), url('/fonts/baloo-2-latin-800-normal.woff') format('woff');
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/nunito-latin-400-normal.woff2') format('woff2'), url('/fonts/nunito-latin-400-normal.woff') format('woff');
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/nunito-latin-600-normal.woff2') format('woff2'), url('/fonts/nunito-latin-600-normal.woff') format('woff');
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/nunito-latin-700-normal.woff2') format('woff2'), url('/fonts/nunito-latin-700-normal.woff') format('woff');
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/fonts/nunito-latin-800-normal.woff2') format('woff2'), url('/fonts/nunito-latin-800-normal.woff') format('woff');
}

:root{
  --cream:   #EAF1FB;
  --coral:   #FF6FA5;
  --coral-dk:#E8558C;
  --yellow:  #FFC531;
  --purple:  #7C5CFA;
  --green:   #35CE7D;
  --blue:    #29B6F6;
  --ink:     #2C2A4A;
  --paper:   #FFFFFF;
  --grey:    #5B5678;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --shadow-sm: 0 4px 14px rgba(44,42,74,.09);
  --shadow:    0 14px 34px rgba(44,42,74,.14);
  --shadow-lg: 0 24px 56px rgba(44,42,74,.18);

  --border: 2px solid rgba(44,42,74,.10);
  --border-thick: 2px solid rgba(44,42,74,.10);

  --font-display: 'Baloo 2', 'Arial Rounded MT Bold', 'Comic Sans MS', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:#F6F8FD;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,canvas,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.05; margin:0 0 .5em; letter-spacing:.2px; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px; }
.sr-only{ position:absolute; left:-9999px; }
.sr-only:focus{ left:16px; top:16px; z-index:999; background:var(--yellow); border:var(--border); padding:10px 16px; border-radius:var(--radius-sm); }

/* ---------- comic shapes ---------- */

.rotate-l{ transform:rotate(-4deg); }
.rotate-r{ transform:rotate(3deg); }

.starburst{
  position:absolute;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:50%;
  background:var(--paper);
  box-shadow:var(--shadow);
  font-family:var(--font-display); font-weight:700; color:var(--ink);
}

.bubble{
  position:relative;
  background:var(--paper);
  border-radius:999px;
  padding:.55em 1.3em;
  font-family:var(--font-display);
  font-weight:600;
  box-shadow:var(--shadow-sm);
  display:inline-block;
}

.badge-circle{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:50%;
  background:var(--paper);
  font-family:var(--font-display);
  font-weight:700;
  box-shadow:var(--shadow-sm);
  padding:6px;
}

.tag-strip{
  display:inline-block;
  border-radius:999px;
  background:var(--paper);
  color:var(--purple);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.5px;
  padding:.45em 1.1em;
  box-shadow:var(--shadow-sm);
}

.tag{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.4em 1.1em; border-radius:999px;
  background:var(--paper); color:var(--purple);
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:700;
  letter-spacing:.2px;
  font-size:1rem; text-decoration:none; cursor:pointer;
  border:2px solid transparent; border-radius:999px;
  padding:.85em 1.8em;
  background:var(--yellow); color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-coral{ background:var(--blue); color:#fff; }
.btn-purple{ background:var(--purple); color:var(--paper); }
.btn-green{ background:var(--green); color:#fff; }
.btn-light{ background:var(--paper); color:var(--ink); }
.btn-outline{ background:transparent; color:var(--blue); border-color:var(--blue); box-shadow:none; }
.btn-outline:hover{ background:var(--blue); color:#fff; }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn-round{
  width:52px; height:52px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink); font-size:1.3rem; flex:none;
  box-shadow:var(--shadow-sm);
}
.btn-round:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* ---------- header / nav ---------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(44,42,74,.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.logo{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:800; font-size:1.5rem;
}
.logo-mark,.logo-dot{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE380, var(--yellow) 55%, #F2A70B 100%);
  box-shadow:var(--shadow-sm);
  display:inline-block; flex:none;
}
.nav-links{ display:flex; align-items:center; gap:26px; font-weight:600; }
.nav-links a{
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  position:relative; padding:4px 0; text-decoration:none;
}
.nav-links a.active,.nav-links a:hover{ color:var(--blue); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  background:var(--blue); border-radius:2px;
}
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; background:var(--paper); border:none; border-radius:10px;
  width:44px; height:40px; cursor:pointer; box-shadow:var(--shadow-sm); font-size:1.2rem;
  align-items:center; justify-content:center;
}

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:74px 16px auto 16px;
    background:var(--paper); border:var(--border-thick); border-radius:var(--radius-lg);
    flex-direction:column; align-items:flex-start; gap:6px; padding:16px;
    box-shadow:var(--shadow-lg);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all .2s ease;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ width:100%; padding:10px 8px; }
}

/* ---------- homepage hero ---------- */

.hero{
  background:
    radial-gradient(circle at 50% 0%, rgba(41,182,246,.10), transparent 60%),
    #F6F8FD;
  border-bottom:none;
  padding:76px 0 56px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:640px; height:640px; border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 78%, rgba(124,92,250,.07) 79% 82%, transparent 83%),
    radial-gradient(circle, transparent 0 60%, rgba(41,182,246,.09) 61% 65%, transparent 66%),
    radial-gradient(circle, transparent 0 40%, rgba(255,197,49,.10) 41% 46%, transparent 47%);
  z-index:0; pointer-events:none;
}
.hero-inner{
  position:relative;
  max-width:880px;
  margin:0 auto;
  text-align:center;
  min-height:380px;
  padding-top:30px;
}
.hero-inner::before{
  content:"🎮";
  display:flex; align-items:center; justify-content:center;
  width:104px; height:104px; margin:0 auto 20px; position:relative; z-index:2;
  font-size:2.6rem; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE380, var(--yellow) 55%, #F2A70B 100%);
  box-shadow:0 16px 32px rgba(242,167,11,.35);
}
.hero h1{
  font-size:clamp(2.6rem,9vw,5.4rem);
  color:var(--blue);
  -webkit-text-stroke:2px var(--ink);
  margin-bottom:.3em;
  position:relative;
  z-index:2;
}
.hero .lead{
  font-family:var(--font-body);
  font-weight:800;
  font-size:1.1rem;
  max-width:520px;
  margin:0 auto 1.7em;
  position:relative; z-index:2;
  color:var(--grey);
}
.hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }

.hero-deco{ position:absolute; z-index:1; }
.hero-deco.d1{ top:-6px;  left:2%;   width:110px; height:110px; background:var(--paper); color:var(--green);  font-size:.85rem; }
.hero-deco.d2{ top:12%;   right:1%;  width:100px; height:100px; background:var(--paper); color:var(--coral); font-size:.8rem; }
.hero-deco.d3{ bottom:6%; left:-2%;  width:110px; height:110px; background:var(--paper); color:var(--yellow); font-size:.8rem; }
.hero-deco.d4{ top:0;     right:14%; }
.hero-deco.d5{ bottom:-2%; left:20%; }
.hero-deco.d6{ top:6%;    left:16%;  }
.hero-badge-lg{ width:96px; height:96px; font-size:.95rem; }

@media (max-width:760px){
  .hero-inner{ min-height:260px; padding-top:10px; }
  .hero-deco{ transform:scale(.62); }
  .hero-deco.d1{ top:-30px; left:-14px; }
  .hero-deco.d2{ top:-10px; right:-18px; }
  .hero-deco.d3{ bottom:-20px; left:-20px; }
  .hero-deco.d4,.hero-deco.d5,.hero-deco.d6{ display:none; }
}

.block-section{ border-bottom:none; padding:80px 0; position:relative; overflow:hidden; }
.block-section.c-purple{ background:#F6F8FD; color:var(--ink); }
.block-section.c-yellow{ background:#FBFAFF; }
.block-section.c-coral{ background:linear-gradient(135deg, var(--blue), #5AC8FA); color:#fff; }
.block-section.c-green{ background:#F6F8FD; }
.block-section.c-cream{ background:#FBFAFF; }
.block-section.c-purple::before{
  content:""; position:absolute; top:-60px; left:-90px; width:280px; height:280px; border-radius:50%;
  background:var(--yellow); opacity:.16; z-index:0;
}
.block-section.c-green::before{
  content:""; position:absolute; bottom:-100px; right:-100px; width:320px; height:320px; border-radius:50%;
  background:var(--blue); opacity:.14; z-index:0;
}
.block-section .container{ position:relative; z-index:1; }

/* ---------- generic inner-page hero ---------- */

.page-hero{
  background:#F6F8FD;
  border-bottom:none;
  padding:60px 0 56px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero h1{ font-size:clamp(2.1rem,6vw,3.6rem); color:var(--blue); }
.page-hero p{ font-weight:700; max-width:620px; margin:14px auto 0; font-size:1.05rem; color:var(--grey); }
.page-hero.bg-coral{ background:linear-gradient(135deg, var(--blue), #5AC8FA); color:#fff; }
.page-hero.bg-coral h1{ color:#fff; }
.page-hero.bg-purple{ background:linear-gradient(135deg, var(--purple), #5A3EE0); color:var(--paper); }
.page-hero.bg-purple h1{ color:#fff; }
.page-hero.bg-green{ background:#F6F8FD; }
.page-hero.bg-yellow{ background:#FBFAFF; }

/* ---------- sections ---------- */

.section{ padding:80px 0; }
.section-tight{ padding:48px 0; }
.section-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem,4.2vw,2.6rem); }
.section-head p{ margin-top:14px; font-size:1.05rem; color:var(--grey); font-weight:700; }
.section-head.align-left{ text-align:left; margin:0 0 44px; }

/* ---------- cards & grid ---------- */

.card{
  background:var(--paper); border:none; border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow); color:var(--ink);
}
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* game cards */
.game-card{
  display:flex; flex-direction:column; gap:14px;
  border:none; border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:30px; text-decoration:none; color:var(--ink);
  background:var(--paper);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.game-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.game-card.c-purple h3{ color:var(--purple); }
.game-card.c-yellow h3{ color:#D89400; }
.game-card.c-coral h3{ color:var(--blue); }
.game-card.c-green h3{ color:var(--green); }
.game-card.c-purple .icon-badge{ background:linear-gradient(135deg, #A98CFF, var(--purple)); }
.game-card.c-yellow .icon-badge{ background:linear-gradient(135deg, #FFE07A, var(--yellow)); }
.game-card.c-coral .icon-badge{ background:linear-gradient(135deg, #5AC8FA, var(--blue)); }
.game-card.c-green .icon-badge{ background:linear-gradient(135deg, #7CE8A9, var(--green)); }
.game-card .icon-badge{ width:66px; height:66px; color:#fff; font-size:2rem; box-shadow:var(--shadow-sm); }
.game-card h3{ font-size:1.55rem; margin-bottom:0; }
.game-card p{ font-weight:600; margin-bottom:.2em; flex:1; color:var(--grey); }
.game-card .play-link{ font-family:var(--font-display); font-weight:700; display:inline-flex; align-items:center; gap:.4em; color:var(--blue); }
.game-card .corner-tag{ position:absolute; top:-14px; right:22px; }
.game-card .meta{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-size:.75rem; font-weight:700; padding:.35em .9em; border-radius:999px;
  background:#EEF1FA; color:var(--ink);
}

/* small "more games" cards */
.mini-card{
  border:none; border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:20px; text-decoration:none; color:var(--ink); background:var(--paper);
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; gap:8px;
}
.mini-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.mini-card .emoji{ font-size:2.2rem; }
.mini-card h4{ margin:0; font-size:1.1rem; }
.mini-card p{ margin:0; font-size:.9rem; color:var(--grey); font-weight:700; }

/* icon pill cards ("why us" feature row) */
.icon-card{
  display:flex; flex-direction:column; gap:12px;
  padding:26px; border-radius:var(--radius-md);
  background:var(--paper); border:none; box-shadow:var(--shadow-sm);
  color:var(--ink);
}
.icon-card .badge-circle{ width:54px; height:54px; font-size:1.4rem; background:linear-gradient(135deg, #FFE07A, var(--yellow)); }

/* ---------- footer ---------- */

.site-footer{ background:linear-gradient(135deg, var(--purple), #5A3EE0); color:var(--paper); padding-top:64px; border-radius:40px 40px 0 0; }
.site-footer .container{ padding-bottom:28px; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:44px; border-bottom:2px solid rgba(255,255,255,.15);
}
@media (max-width:780px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand .logo{ color:var(--paper); }
.footer-brand .logo-mark{ background:var(--yellow); }
.footer-brand p{ margin-top:14px; color:#cbc4b6; font-size:.92rem; max-width:280px; }
.footer-col h4{
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--yellow); margin-bottom:16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:#e9e3d5; font-size:.92rem; font-weight:600; }
.footer-col a:hover{ text-decoration:underline; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.footer-social a:hover{ background:var(--paper); color:var(--ink); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:22px; font-size:.82rem; color:#a8a091; flex-wrap:wrap; gap:10px; font-weight:600;
}

/* ---------- age note strip ---------- */
.age-strip{
  background:var(--ink); color:var(--paper);
  font-weight:700; font-size:.85rem; text-align:center; padding:10px 20px;
}
.age-strip strong{ color:var(--yellow); }

/* ---------- cookie banner ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:999;
  max-width:640px; margin-inline:auto;
  background:var(--paper); border:var(--border-thick); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:20px 22px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  transform:translateY(140%); transition:transform .35s ease;
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner-row{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; width:100%; }
.cookie-banner p{ font-size:.88rem; color:var(--grey); font-weight:700; flex:1; min-width:220px; margin:0; }
.cookie-banner .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner .btn{ padding:10px 16px; font-size:.85rem; box-shadow:var(--shadow-sm); }
.cookie-banner-custom{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; width:100%; margin-top:14px; padding-top:14px; border-top:var(--border); }
.cookie-check{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--ink); }

/* ---------- legal / text pages ---------- */
.prose{ max-width:760px; font-size:1rem; line-height:1.75; color:#332f24; }
.prose h2{ font-family:var(--font-display); font-size:1.5rem; margin-top:2.2em; margin-bottom:.6em; color:var(--ink); }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom:14px; }
.prose ul{ margin-bottom:14px; padding-left:22px; list-style:disc; }
.prose li{ margin-bottom:8px; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--blue); font-weight:700; text-decoration:underline; }
.updated{ font-size:.85rem; color:var(--grey); font-weight:700; margin-bottom:36px; display:block; }

/* ---------- misc ---------- */
.mascot{ position:absolute; font-size:2.6rem; filter:drop-shadow(0 6px 0 rgba(0,0,0,.15)); animation:float 5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-14px) rotate(4deg);} }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.form-field label{ font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.form-check label{ display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-weight:600; font-size:.9rem; }
.form-check input[type="checkbox"]{ margin-top:3px; flex:none; width:18px; height:18px; }
.form-field input,.form-field textarea,.form-field select{
  border:var(--border); border-radius:var(--radius-sm); padding:.85em 1em;
  font-family:var(--font-body); font-size:1rem; background:var(--paper); color:var(--ink); resize:vertical;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{ outline:none; box-shadow:var(--shadow-sm); }
.form-note{ font-size:.85rem; color:var(--grey); font-weight:700; }
.form-success{
  display:none; background:var(--green); border:var(--border-thick); border-radius:var(--radius-md);
  padding:20px 24px; font-weight:800; font-family:var(--font-display); box-shadow:var(--shadow);
}
.form-success.show{ display:block; }

.contact-info-card{
  background:var(--paper); border:var(--border-thick); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow);
}
.contact-info-card .row{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:2px dashed #e4dbc9; }
.contact-info-card .row:last-child{ border-bottom:none; }
.contact-info-card .row .ic{ font-size:1.4rem; }
.contact-info-card .row h4{ font-family:var(--font-body); font-weight:800; font-size:.9rem; margin-bottom:3px; }
.contact-info-card .row p{ color:var(--grey); font-size:.92rem; font-weight:600; margin-bottom:0; }

.people-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px; }
@media (max-width:800px){ .people-grid{ grid-template-columns:1fr; } }
.person-card{ text-align:center; }
.person-avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 14px; font-size:2.3rem;
  display:flex; align-items:center; justify-content:center; border:var(--border-thick); box-shadow:var(--shadow-sm);
}
.person-card h4{ margin-bottom:2px; }
.person-card span{ font-weight:700; color:var(--grey); font-size:.88rem; }

/* ---------- game pages (light comic theme, not dark) ---------- */
.game-shell{ background:var(--cream); padding:36px 0 64px; border-bottom:var(--border-thick); }
.game-stage{
  background:var(--paper); border:var(--border-thick); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:20px; max-width:900px; margin-inline:auto;
}
.game-hud{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:4px 6px 18px; flex-wrap:wrap;
}
.game-hud .score{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.25rem; }
.game-hud .score .dot{ width:12px; height:12px; border-radius:50%; border:2px solid var(--ink); }
.game-hud .status{ font-size:.85rem; color:var(--grey); font-weight:700; }
.game-canvas-wrap{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:#1b1730; border:var(--border);
}
.game-canvas-wrap canvas{ width:100%; height:100%; display:block; touch-action:none; }
.game-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; background:rgba(23,19,16,.88); color:#fff; padding:24px;
}
.game-overlay h3{ font-size:1.7rem; color:#fff; }
.game-overlay p{ color:#e7e1d4; font-size:.92rem; max-width:380px; }
.game-footer-bar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px; border-top:2px dashed #e4dbc9;
}
.game-footer-bar .btn{ padding:11px 20px; font-size:.85rem; }
.badge-row{ display:flex; gap:8px; flex-wrap:wrap; }
.howto-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
@media (max-width:760px){ .howto-grid{ grid-template-columns:1fr; } .game-hud{ justify-content:center; text-align:center; } }
.key{
  display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:26px;
  padding:0 7px; border-radius:7px; background:var(--paper);
  font-size:.75rem; font-weight:700; box-shadow:var(--shadow-sm);
}
.diff-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.diff-picker button{
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  border:var(--border); border-radius:999px; padding:.5em 1.1em; background:var(--paper);
  box-shadow:var(--shadow-sm); cursor:pointer;
}
.diff-picker button.active{ background:var(--ink); color:var(--paper); }

/* ---------- lucky wheel ---------- */
.wheel-zone{ position:relative; display:flex; justify-content:center; align-items:center; padding:20px 0 4px; }
.wheel-pointer-fx{
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  font-size:2rem; color:var(--ink); z-index:3; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25));
}
.wheel-fx{
  width:min(70vw,320px); aspect-ratio:1/1; border-radius:50%;
  border:6px solid var(--ink); box-shadow:var(--shadow-lg);
  position:relative;
  transition: transform 4s cubic-bezier(.12,.67,.1,1.01);
  background: conic-gradient(
    var(--coral) 0deg 45deg, var(--yellow) 45deg 90deg,
    var(--purple) 90deg 135deg, var(--green) 135deg 180deg,
    var(--coral) 180deg 225deg, var(--yellow) 225deg 270deg,
    var(--purple) 270deg 315deg, var(--green) 315deg 360deg
  );
  display:flex; align-items:center; justify-content:center;
}
.wheel-hub-fx{
  width:60px; height:60px; border-radius:50%; background:var(--paper);
  border:4px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; z-index:2;
}
/* ---------- tic-tac-toe ---------- */
.ttt-board{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  max-width:360px; margin:0 auto 8px;
}
.ttt-cell{
  aspect-ratio:1/1; background:var(--paper); border:var(--border-thick); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2.6rem; font-weight:700; cursor:pointer;
  transition:transform .1s ease;
  color:var(--ink);
}
.ttt-cell:hover:not(.filled){ transform:translateY(-3px); box-shadow:var(--shadow); }
.ttt-cell.filled{ cursor:default; }
.ttt-cell.mark-x{ color:var(--purple); }
.ttt-cell.mark-o{ color:var(--coral); }
.ttt-cell.win-cell{ background:var(--yellow); }

.wheel-seg-label{
  position:absolute; top:50%; left:50%; width:50%; height:2px;
  transform-origin:left center;
  display:flex; align-items:center; justify-content:flex-end; padding-right:16%;
  font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--ink);
}

.stack{ display:flex; flex-direction:column; gap:10px; }
.center{ text-align:center; }
.mt-lg{ margin-top:60px; }