:root{
  --ink:#1f2544; --ink-2:#4a5073; --muted:#7a7f9a;
  --bg:#fffaf2; --card:#ffffff; --line:#efe6d6;
  --sun:#ffc93c; --coral:#ff6b6b; --coral-d:#e04f4f; --teal:#1fb6a6; --teal-d:#159486;
  --sky:#3a86ff; --grape:#8b5cf6; --leaf:#2bb673;
  --radius:18px; --shadow:0 6px 0 rgba(31,37,68,.08), 0 14px 30px rgba(31,37,68,.06);
  --head:'Baloo 2', system-ui, sans-serif; --body:'Nunito', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.2rem)} h2{font-size:clamp(1.6rem,3.5vw,2.3rem)} h3{font-size:1.3rem}
p{margin:0 0 1em}
a{color:var(--sky)}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center}
.mt{margin-top:1.5rem} .mb0{margin-bottom:0}

/* Topbar */
.topbar{background:var(--card);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{font-family:var(--head);font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--sun);border-radius:12px;font-size:1.2rem}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:700}
.nav a:hover{color:var(--coral)}
.nav a.btn{color:#fff}
.nav-play{color:var(--teal-d)!important}
.nav-toggle,.nav-burger{display:none}
@media (max-width:820px){
  .nav-burger{display:block;width:40px;height:40px;position:relative;cursor:pointer}
  .nav-burger span,.nav-burger span:before,.nav-burger span:after{content:"";position:absolute;left:9px;right:9px;height:3px;background:var(--ink);border-radius:3px}
  .nav-burger span{top:19px} .nav-burger span:before{top:-8px;left:0;right:0} .nav-burger span:after{top:8px;left:0;right:0}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--card);flex-direction:column;align-items:stretch;padding:12px 16px 18px;border-bottom:2px solid var(--line);gap:4px}
  .nav a{padding:10px 4px}
  .nav-toggle:checked ~ .nav{display:flex}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 1rem var(--body);background:var(--coral);color:#fff;border:0;border-radius:14px;padding:12px 22px;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--coral-d);transition:transform .08s, box-shadow .08s}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--coral-d)}
.btn-teal{background:var(--teal);box-shadow:0 4px 0 var(--teal-d)}
.btn-teal:active{box-shadow:0 1px 0 var(--teal-d)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:active{box-shadow:inset 0 0 0 2px var(--line)}
.btn-sm{padding:8px 14px;font-size:.9rem;border-radius:11px}
.btn-lg{padding:16px 30px;font-size:1.12rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.link-btn{background:none;border:0;color:var(--coral-d);font-weight:700;cursor:pointer;padding:0;font:inherit;text-decoration:underline}

/* Cards & layout */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:2px solid var(--line)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.section{padding:64px 0}
.section-tight{padding:32px 0}
.page{padding-top:36px;padding-bottom:64px}
.narrow{max-width:520px;margin:0 auto}

/* Hero */
.hero{padding:56px 0 40px;position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:820px){.hero-in{grid-template-columns:1fr}}
.hero .lead{font-size:1.18rem;color:var(--ink-2);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 10px}
.pill{display:inline-block;background:#fff1c9;color:#8a5a00;font-weight:800;border-radius:999px;padding:4px 12px;font-size:.85rem;margin-bottom:14px}
.hero-board{background:var(--card);border-radius:28px;border:2px solid var(--line);box-shadow:var(--shadow);padding:26px;position:relative}
.hero-q{font-family:var(--head);font-size:2.6rem;text-align:center;margin:8px 0 18px}
.hero-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hero-choices span{display:grid;place-items:center;height:72px;border-radius:16px;font:800 1.8rem var(--head);color:#fff}
.hero-choices span:nth-child(1){background:var(--sky)} .hero-choices span:nth-child(2){background:var(--teal)} .hero-choices span:nth-child(3){background:var(--grape)}
.hero-stars{position:absolute;top:-14px;right:18px;background:var(--sun);border-radius:999px;padding:6px 14px;font-weight:800}
.float{position:absolute;font-size:2rem;opacity:.9;animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:820px){.float{display:none}}

/* Band cards */
.band{border-radius:var(--radius);padding:22px;color:#fff;position:relative;overflow:hidden}
.band h3{margin:0 0 4px;color:#fff}
.band .age{font-weight:800;opacity:.9}
.band ul{margin:12px 0 0;padding-left:18px}
.band-a{background:#ff8a3d} .band-b{background:var(--leaf)} .band-c{background:var(--sky)} .band-d{background:var(--grape)}

.feature{display:flex;gap:14px;align-items:flex-start}
.feature .ico{flex:0 0 46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:#fff1c9}

/* Pricing */
.price-toggle{display:inline-flex;background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px;margin-bottom:24px}
.price-toggle button{border:0;background:none;font:800 .95rem var(--body);padding:8px 18px;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.price-toggle button.on{background:var(--ink);color:#fff}
.price{position:relative}
.price.best{border-color:var(--coral)}
.price .tag{position:absolute;top:-13px;left:24px;background:var(--coral);color:#fff;font-weight:800;font-size:.8rem;border-radius:999px;padding:3px 12px}
.price .amt{font:800 2.6rem var(--head)} .price .per{color:var(--muted);font-weight:700}
.price ul{list-style:none;padding:0;margin:16px 0 22px}
.price li{padding:5px 0 5px 28px;position:relative}
.price li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
.save{color:var(--teal-d);font-weight:800;font-size:.9rem}

/* Forms */
.form label{display:block;font-weight:800;margin:14px 0 6px}
.form input[type=text],.form input[type=email],.form input[type=password],.form input[type=number],.form input[type=tel],.form select,.form textarea{width:100%;font:600 1rem var(--body);padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--sky)}
.form .hint{font-size:.85rem;color:var(--muted);margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600!important}
.check input{margin-top:5px;width:18px;height:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.radio-cards{display:grid;gap:10px}
.radio-card{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;font-weight:700!important;margin:0!important}
.radio-card:has(input:checked){border-color:var(--sky);background:#f2f7ff}
.radio-card .rc-sub{display:block;font-weight:600;color:var(--muted);font-size:.88rem}

/* Flash */
.flashes{padding-top:16px}
.flash{border-radius:12px;padding:12px 16px;margin-bottom:8px;font-weight:700}
.flash-ok{background:#e3f7ef;color:#126b4d} .flash-err{background:#ffe7e7;color:#a12a2a} .flash-info{background:#e9f1ff;color:#244c96}

/* Tables */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:800;background:#eef0f6;color:var(--ink-2)}
.b-ok{background:#e3f7ef;color:#126b4d} .b-warn{background:#fff3d6;color:#8a5a00} .b-err{background:#ffe7e7;color:#a12a2a} .b-info{background:#e9f1ff;color:#244c96}

/* Stats */
.stat{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:16px}
.stat .n{font:800 1.8rem var(--head)} .stat .l{color:var(--muted);font-weight:700;font-size:.88rem}
.bar{height:10px;background:#f1ece2;border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--teal);border-radius:999px}

/* Children & play */
.kid-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
.kid-tile{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:3px solid var(--line);border-radius:24px;padding:26px 14px;text-decoration:none;color:var(--ink);font:800 1.25rem var(--head);box-shadow:var(--shadow);transition:transform .12s}
.kid-tile:hover{transform:translateY(-4px);border-color:var(--sun)}
.kid-tile .av{font-size:3.4rem;line-height:1}
.kid-tile small{font:700 .85rem var(--body);color:var(--muted)}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.game-tile{display:block;border-radius:24px;padding:22px;color:#fff;text-decoration:none;box-shadow:0 6px 0 rgba(0,0,0,.15);transition:transform .12s;position:relative;min-height:170px}
.game-tile:hover{transform:translateY(-4px) rotate(-.5deg)}
.game-tile .gi{font-size:2.6rem}
.game-tile h3{color:#fff;margin:6px 0 2px}
.game-tile p{margin:0;opacity:.92;font-weight:600}
.game-tile .lvl{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.25);border-radius:999px;padding:2px 10px;font-weight:800;font-size:.82rem}
.avatar-pick{display:flex;flex-wrap:wrap;gap:8px}
.avatar-pick label{margin:0!important}
.avatar-pick input{display:none}
.avatar-pick span{display:grid;place-items:center;width:52px;height:52px;font-size:1.8rem;border:2px solid var(--line);border-radius:14px;cursor:pointer;background:#fff}
.avatar-pick input:checked + span{border-color:var(--sky);background:#e9f1ff}

/* PIN */
.pin-input{letter-spacing:.6em;text-align:center;font:800 2rem var(--head)!important}

/* Footer */
.footer{border-top:2px solid var(--line);padding:30px 0;background:#fff}
.footer-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{color:var(--ink-2);text-decoration:none;font-weight:700}

/* Kid mode body */
body.kid{background:#fff6e3 radial-gradient(circle at 10% 10%,#ffe9b0 0,transparent 30%) fixed}

/* Admin tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tabs a{padding:8px 14px;border-radius:12px;background:#fff;border:2px solid var(--line);text-decoration:none;color:var(--ink-2);font-weight:800}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.inline{display:inline}
.copybox{display:flex;gap:8px}
.copybox input{flex:1;min-width:0}
.prose h2{margin-top:1.6em}
.prose{max-width:760px}
.grid > *{min-width:0}