:root{
  --bg:#E6F6FF; --card:#FFFFFF; --ink:#16243A; --muted:#4F6079; --line:#C6DAEA;
  --pitch:#2FA84F; --pitch-d:#1E7F39; --sun:#FFC93C; --sun-d:#D99A00; --sun-ink:#5A4200;
  --berry:#EF476F; --berry-d:#B92F52; --sky:#3A86FF; --sky-d:#2361C4; --grape:#8E5CF7; --grape-d:#6639C9;
  --good:#1F9D55; --bad:#D7263D;
  color-scheme: light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0D1B2B;--card:#172E47;--ink:#F1F6FF;--muted:#A8BAD2;--line:#2B4967;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0D1B2B;--card:#172E47;--ink:#F1F6FF;--muted:#A8BAD2;--line:#2B4967;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Fredoka','Arial Rounded MT Bold','Trebuchet MS',sans-serif;font-size:18px;line-height:1.45}
main{max-width:520px;margin:0 auto;padding:14px 16px 40px}
[hidden]{display:none!important}
h1{font-size:32px;font-weight:700;line-height:1.1;margin:6px 0}
h2{font-size:26px;font-weight:700;margin:0 0 6px}
p{margin:0 0 10px;color:var(--muted)}
button{font:inherit;cursor:pointer;border:none;color:inherit}
button:focus-visible,input:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
.btn{display:block;width:100%;padding:16px;border-radius:20px;font-size:22px;font-weight:700;color:#fff;background:var(--pitch);box-shadow:0 6px 0 var(--pitch-d);margin-top:14px;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--pitch-d)}
.btn.sky{background:var(--sky);box-shadow:0 6px 0 var(--sky-d)}
.btn.berry{background:var(--berry);box-shadow:0 6px 0 var(--berry-d)}
.btn:disabled{background:#9AA9BB;box-shadow:0 6px 0 #77869A;cursor:not-allowed}
.back{background:none;font-size:17px;font-weight:600;color:var(--muted);padding:8px 2px;margin-bottom:4px}
.link{background:none;color:var(--muted);text-decoration:underline;margin-top:18px;font-size:16px;padding:8px}
input[type=text]{width:100%;font:inherit;font-size:22px;padding:13px 16px;border-radius:16px;border:3px solid var(--line);background:var(--card);color:var(--ink)}
.label{font-size:17px;font-weight:600;margin:16px 0 6px;display:block}
.grades{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.grades button{padding:13px 0;border-radius:14px;background:var(--card);border:3px solid var(--line);font-size:20px;font-weight:700}
.grades button[aria-pressed="true"]{background:var(--sun);border-color:var(--sun-d);color:var(--sun-ink)}
.err{color:var(--bad);font-size:15px;min-height:22px;margin-top:6px}
.small{font-size:14px;color:var(--muted)}

/* home hero: a slice of pitch */
.hero{position:relative;border-radius:26px;overflow:hidden;padding:22px 20px 18px;color:#fff;
  background:repeating-linear-gradient(90deg,#2FA84F 0 44px,#36B85A 44px 88px)}
.hero::before{content:"";position:absolute;right:-60px;top:50%;width:160px;height:160px;margin-top:-80px;border:4px solid rgba(255,255,255,.55);border-radius:50%}
.hero::after{content:"";position:absolute;right:18px;top:0;bottom:0;border-left:4px solid rgba(255,255,255,.55)}
.hero h1{position:relative;font-size:36px;color:#fff;-webkit-text-stroke:1.5px #0E4F22;paint-order:stroke fill}
.hero p{position:relative;color:#E9FFF0;margin:0}
.chips{position:relative;display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.chip{background:rgba(0,0,0,.22);border-radius:999px;padding:6px 12px;font-weight:600;font-size:17px;white-space:nowrap}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tile{position:relative;text-align:left;border-radius:22px;padding:16px 14px 14px;min-height:132px;color:#fff;font-weight:700;font-size:21px;line-height:1.15;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .08s}
.tile:active{transform:translateY(3px)}
.tile .ico{position:absolute;top:10px;right:12px;font-size:40px;line-height:1}
.tile small{display:block;font-weight:500;font-size:15px;opacity:.95;margin-top:4px}
.tile.quiz{background:var(--sun);color:var(--sun-ink);box-shadow:0 6px 0 var(--sun-d);grid-column:1/-1;min-height:120px}
.tile.kick{background:var(--pitch);box-shadow:0 6px 0 var(--pitch-d)}
.tile.shop{background:var(--berry);box-shadow:0 6px 0 var(--berry-d)}
.tile.board{background:var(--sky);box-shadow:0 6px 0 var(--sky-d);grid-column:1/-1;min-height:96px}
.tile:disabled{filter:grayscale(.7);opacity:.75}

/* quiz */
.qtop{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.bar{display:flex;gap:5px;margin:8px 0 14px}
.bar i{flex:1;height:12px;border-radius:6px;background:var(--line)}
.bar i.ok{background:var(--good)} .bar i.no{background:var(--bad)} .bar i.now{background:var(--sun)}
.qcard{background:var(--card);border:3px solid var(--line);border-radius:26px;padding:26px 12px;text-align:center}
.question{font-size:46px;font-weight:700;line-height:1.15;word-break:break-word}
.question.small{font-size:30px}
.hint{text-align:center;min-height:30px;font-weight:700;font-size:20px;margin-top:10px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.choices button{padding:22px 6px;border-radius:20px;font-size:34px;font-weight:700;color:#fff;transition:transform .1s}
.choices button:nth-child(1){background:var(--sky);box-shadow:0 6px 0 var(--sky-d)}
.choices button:nth-child(2){background:var(--berry);box-shadow:0 6px 0 var(--berry-d)}
.choices button:nth-child(3){background:var(--grape);box-shadow:0 6px 0 var(--grape-d)}
.choices button:nth-child(4){background:var(--pitch);box-shadow:0 6px 0 var(--pitch-d)}
.choices.answered button{opacity:.35}
.choices.answered button.right{opacity:1;background:var(--good);box-shadow:0 6px 0 #146B3A;transform:scale(1.06)}
.choices.answered button.wrong{opacity:1;background:var(--bad);box-shadow:0 6px 0 #9E1B2C}
.result{text-align:center}
.result .score{font-size:84px;font-weight:700;color:var(--pitch);line-height:1;margin:8px 0}
.earn{display:flex;gap:10px;justify-content:center;margin:10px 0}
.earn span{background:var(--card);border:3px solid var(--line);border-radius:16px;padding:8px 14px;font-weight:700}

/* stadium */
.stadium{position:relative;width:100%;aspect-ratio:3/4;max-height:64vh;margin:8px auto 0;border-radius:24px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;background:#2FA84F}
.crowd{position:absolute;left:0;right:0;top:0;height:12%;background:#24324A;
  background-image:radial-gradient(circle,#EF476F 0 3px,transparent 3.5px),radial-gradient(circle,#FFC93C 0 3px,transparent 3.5px),radial-gradient(circle,#3A86FF 0 3px,transparent 3.5px),radial-gradient(circle,#fff 0 3px,transparent 3.5px);
  background-size:22px 14px,26px 16px,18px 12px,30px 18px;background-position:0 2px,9px 7px,4px 5px,14px 1px}
.boards{position:absolute;left:0;right:0;top:12%;height:4.5%;background:repeating-linear-gradient(90deg,#3A86FF 0 25%,#FFC93C 25% 50%,#EF476F 50% 75%,#8E5CF7 75% 100%)}
.turf{position:absolute;left:0;right:0;top:16.5%;bottom:0;background:repeating-linear-gradient(180deg,#2FA84F 0 9%,#38B95B 9% 18%)}
.boxline{position:absolute;left:14%;right:14%;top:24%;height:28%;border:4px solid rgba(255,255,255,.8);border-top:none}
.boxline.six{left:30%;right:30%;height:10%}
.arc{position:absolute;left:38%;right:38%;top:47%;height:9%;border:4px solid rgba(255,255,255,.8);border-top:none;border-radius:0 0 50% 50%/0 0 100% 100%}
.spot{position:absolute;left:50%;top:44%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff}
.goal{position:absolute;left:18%;right:18%;top:8%;height:16%;border:7px solid #fff;border-bottom:none;border-radius:4px 4px 0 0;
  background:rgba(255,255,255,.08);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.45) 0 1.5px,transparent 1.5px 11px),repeating-linear-gradient(-45deg,rgba(255,255,255,.45) 0 1.5px,transparent 1.5px 11px)}
.keeper{position:absolute;left:50%;top:11%;width:12%;height:13%;transform:translateX(-50%);transition:transform .32s ease-out}
.keeper .body{position:absolute;left:12%;right:12%;top:30%;bottom:0;background:var(--berry);border-radius:40% 40% 18% 18%;border:3px solid #fff}
.keeper .arms{position:absolute;left:-55%;right:-55%;top:34%;height:16%;background:var(--berry);border-radius:999px;border:3px solid #fff}
.keeper .arms::before,.keeper .arms::after{content:"";position:absolute;top:50%;width:26%;aspect-ratio:1;margin-top:-13%;border-radius:50%;background:#FFC93C;border:3px solid #fff}
.keeper .arms::before{left:-8%} .keeper .arms::after{right:-8%}
.keeper .head{position:absolute;left:50%;top:0;width:50%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#F2C49B;border:3px solid #fff}
.aim{position:absolute;top:15.5%;width:30px;height:30px;margin-left:-15px;border-radius:50%;border:4px dashed #FFC93C;background:rgba(255,201,60,.25)}
.shadow{position:absolute;left:50%;bottom:9%;width:46px;height:12px;margin-left:-23px;border-radius:50%;background:rgba(0,0,0,.28);transition:left .55s ease-out,bottom .55s ease-out,transform .55s ease-out}
.ball{position:absolute;left:50%;bottom:11%;width:46px;height:46px;margin-left:-23px;border-radius:50%;border:3px solid #1A1A1A;transition:left .55s ease-out,bottom .55s cubic-bezier(.2,.7,.3,1),transform .55s ease-out}
.ball.fly{transform:scale(.5) rotate(720deg)}
.shadow.fly{transform:scale(.45)}
.shout{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:58px;font-weight:700;color:#fff;-webkit-text-stroke:2.5px #16243A;paint-order:stroke fill;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s}
.shout.show{opacity:1;transform:scale(1)}
.shout small{display:block;font-size:26px;-webkit-text-stroke:1.5px #16243A}
.cf{position:absolute;left:50%;top:18%;width:9px;height:14px;border-radius:2px;animation:conf 1.3s ease-out forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.kickrow{display:flex;gap:8px;margin-top:4px}
.kickrow .chip{background:var(--card);border:3px solid var(--line);color:var(--ink)}

/* ball skins */
[data-skin="classic"]{background:radial-gradient(circle at 50% 50%,#1A1A1A 0 20%,transparent 21%),radial-gradient(circle at 15% 25%,#1A1A1A 0 10%,transparent 11%),radial-gradient(circle at 85% 25%,#1A1A1A 0 10%,transparent 11%),radial-gradient(circle at 25% 88%,#1A1A1A 0 10%,transparent 11%),radial-gradient(circle at 75% 88%,#1A1A1A 0 10%,transparent 11%),#fff}
[data-skin="golden"]{background:radial-gradient(circle at 50% 50%,#9C6B00 0 20%,transparent 21%),radial-gradient(circle at 15% 25%,#9C6B00 0 10%,transparent 11%),radial-gradient(circle at 85% 25%,#9C6B00 0 10%,transparent 11%),radial-gradient(circle at 25% 88%,#9C6B00 0 10%,transparent 11%),radial-gradient(circle at 75% 88%,#9C6B00 0 10%,transparent 11%),radial-gradient(circle at 35% 30%,#FFF1B8,#FFC93C 55%,#E0A300)}
[data-skin="fire"]{background:radial-gradient(circle at 50% 70%,#FFE066 0 18%,#FF9F1C 38%,#E63946 70%,#9D0208)}
[data-skin="rainbow"]{background:conic-gradient(#EF476F,#FFC93C,#2FA84F,#3A86FF,#8E5CF7,#EF476F)}
[data-skin="planet"]{background:radial-gradient(ellipse at 30% 35%,#2FA84F 0 18%,transparent 19%),radial-gradient(ellipse at 70% 65%,#2FA84F 0 20%,transparent 21%),radial-gradient(ellipse at 75% 25%,#2FA84F 0 9%,transparent 10%),#3A86FF}
[data-skin="galaxy"]{background:radial-gradient(circle at 25% 30%,#fff 0 4%,transparent 5%),radial-gradient(circle at 70% 60%,#fff 0 3%,transparent 4%),radial-gradient(circle at 55% 20%,#fff 0 2.5%,transparent 3.5%),radial-gradient(circle at 35% 75%,#fff 0 3%,transparent 4%),radial-gradient(circle at 50% 50%,#8E5CF7,#24324A)}

/* shop */
.coins{display:inline-block;background:var(--sun);color:var(--sun-ink);border-radius:999px;padding:6px 14px;font-weight:700}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.item{background:var(--card);border:3px solid var(--line);border-radius:18px;padding:12px 6px;text-align:center;font-weight:600;font-size:16px}
.item .pball{width:56px;height:56px;margin:0 auto 6px;border-radius:50%;border:3px solid #1A1A1A}
.item.on{border-color:var(--pitch);background:color-mix(in srgb,var(--pitch) 14%,var(--card))}
.item .price{display:block;font-size:14px;color:var(--muted);font-weight:500}
.gift{display:flex;align-items:center;gap:12px;background:var(--card);border:3px solid var(--line);border-radius:18px;padding:12px;margin-top:10px}
.gift .gico{font-size:38px;line-height:1}
.gift .gtxt{flex:1;font-weight:600}
.gift .gtxt span{display:block;font-weight:500;font-size:15px;color:var(--muted)}
.gift button{background:var(--berry);color:#fff;border-radius:14px;padding:10px 12px;font-weight:700;font-size:16px;box-shadow:0 4px 0 var(--berry-d)}
.gift button:disabled{background:#9AA9BB;box-shadow:0 4px 0 #77869A}
.confirm{background:var(--card);border:3px solid var(--berry);border-radius:18px;padding:14px;margin-top:10px}
.confirm label{display:flex;gap:10px;align-items:center;font-weight:600;margin:6px 0}
.confirm input{width:24px;height:24px}
.sect{font-size:22px;font-weight:700;margin:22px 0 2px}

/* leaderboard */
.tabs{display:flex;gap:8px;margin:10px 0}
.tabs button{flex:1;padding:12px 4px;border-radius:14px;background:var(--card);border:3px solid var(--line);font-weight:700;font-size:17px}
.tabs button[aria-pressed="true"]{background:var(--sky);border-color:var(--sky-d);color:#fff}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;align-items:center;gap:12px;background:var(--card);border:3px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:8px;font-weight:600}
.rows li .rk{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-weight:700;flex:none}
.rows li:nth-child(1) .rk{background:#FFC93C;color:#5A4200}
.rows li:nth-child(2) .rk{background:#D5DEE8;color:#36475E}
.rows li:nth-child(3) .rk{background:#E8A26A;color:#5A2E0B}
.rows li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows li .nm span{display:block;font-size:14px;font-weight:500;color:var(--muted)}
.rows li .val{font-size:22px;font-weight:700}
.rows li.me{border-color:var(--sky);background:color-mix(in srgb,var(--sky) 12%,var(--card))}
.empty{background:var(--card);border:3px dashed var(--line);border-radius:16px;padding:18px;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.ball,.shadow,.keeper,.btn,.tile,.shout{transition:none}.cf{display:none}}

/* app additions */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.topbar .back{margin:0}
.authcard{background:var(--card);border:3px solid var(--line);border-radius:24px;padding:20px;margin-top:10px}
.authswitch{text-align:center;margin-top:14px;color:var(--muted)}
.authswitch button{background:none;color:var(--sky);font-weight:700;text-decoration:underline;padding:4px}
input[type=email],input[type=password],input[type=tel]{width:100%;font:inherit;font-size:20px;padding:12px 14px;border-radius:14px;border:3px solid var(--line);background:var(--card);color:var(--ink)}
.grades.wide{grid-template-columns:repeat(7,1fr)}
.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avatars button{font-size:30px;padding:8px 0;border-radius:14px;background:var(--card);border:3px solid var(--line)}
.avatars button[aria-pressed="true"]{border-color:var(--sun-d);background:var(--sun)}
.who{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:12px}
.who button{background:var(--card);border:3px solid var(--line);border-radius:22px;padding:16px 8px;font-weight:700;font-size:20px}
.who button .av{display:block;font-size:56px;line-height:1.1;margin-bottom:4px}
.who button.add{border-style:dashed;color:var(--muted)}
.pinbox{background:var(--card);border:3px solid var(--sky);border-radius:20px;padding:16px;margin-top:12px}
.kidcard{background:var(--card);border:3px solid var(--line);border-radius:20px;padding:16px;margin-top:12px}
.kidcard h3{margin:0;font-size:22px}
.kidcard .meta{color:var(--muted);font-size:15px;margin-bottom:8px}
.kidcard .nums{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.kidcard .nums span{background:var(--bg);border-radius:999px;padding:4px 10px;font-weight:600;font-size:15px}
.greq{display:flex;align-items:center;gap:8px;border-top:2px solid var(--line);padding-top:10px;margin-top:10px;flex-wrap:wrap}
.greq b{flex:1}
.greq input{flex:1 1 140px;font-size:16px;padding:8px 10px}
.mini{border-radius:12px;padding:8px 12px;font-weight:700;font-size:15px;color:#fff;background:var(--pitch)}
.mini.no{background:var(--bad)}
.mini.ghost{background:none;color:var(--muted);text-decoration:underline}
.status{font-size:14px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--bg)}
.admintbl{width:100%;border-collapse:collapse;font-size:15px}
.admintbl th,.admintbl td{text-align:left;padding:8px 6px;border-bottom:2px solid var(--line);vertical-align:top}
.tblwrap{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;z-index:20}
.scope{display:flex;gap:6px;margin-top:4px}
.scope button{background:none;border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-size:15px;font-weight:600}
.scope button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rows li .av{font-size:24px}