@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');
/* ===================== BOING ARCADE ===================== */
/* One look for all the games: a bright themed backdrop in the game's colours, a framed game screen, rounded
   candy buttons, a "How to play" card and the intro splash. boing-arcade.js sets html.ba + data-game.
   Phones (html.bm, from boing-mobile.js) keep their own full-screen layout; only colours and shapes carry over. */
html.ba{--g:#22d3ee;--g2:#3b82f6;--bg1:#0b3d63;--bg2:#1e1b4b;}
html.ba[data-game=dash]{--g:#22d3ee;--g2:#3b82f6;--bg1:#075e7a;--bg2:#1e2a6e;}
html.ba[data-game=math]{--g:#facc15;--g2:#f97316;--bg1:#5b21b6;--bg2:#9a3412;}
html.ba[data-game=homework]{--g:#f87171;--g2:#a855f7;--bg1:#9f1239;--bg2:#3b0d6b;}
html.ba[data-game=legends]{--g:#fb923c;--g2:#dc2626;--bg1:#7f1d1d;--bg2:#3a0b2e;}
/* HeroCat is hidden (Nov 2026) but kept, so its colours stay */
html.ba[data-game=herocat]{--g:#c084fc;--g2:#ec4899;--bg1:#5b21b6;--bg2:#831843;}

/* the backdrop: the game's colours, soft glows and a light dot pattern that drifts */
html.ba body{background:
  radial-gradient(900px 520px at 12% -8%,color-mix(in srgb,var(--g) 55%,transparent),transparent 62%),
  radial-gradient(800px 560px at 100% 108%,color-mix(in srgb,var(--g2) 55%,transparent),transparent 62%),
  linear-gradient(160deg,var(--bg1),var(--bg2));background-attachment:fixed;}
html.ba body:before{content:"";position:fixed;inset:-60px;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(rgba(255,255,255,.16) 1.6px,transparent 1.8px) 0 0/28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);
  animation:baDrift 30s linear infinite;}
html.ba body:after{content:"";position:fixed;z-index:-1;pointer-events:none;width:46vmax;height:46vmax;right:-14vmax;top:-16vmax;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--g2) 40%,transparent),transparent 65%);animation:baFloat 14s ease-in-out infinite alternate;}
@keyframes baDrift{to{transform:translate(28px,28px);}}
@keyframes baFloat{to{transform:translate(-10vmax,8vmax) scale(1.15);}}
@media (prefers-reduced-motion:reduce){html.ba body:before,html.ba body:after{animation:none;}}

/* back to Pond World */
html.ba #back{display:flex;align-items:center;gap:8px;padding:6px 15px 6px 6px;border:0;border-radius:999px;background:#fff;color:#14202e;
  font:800 14px/1 'Baloo 2','Work Sans',sans-serif;letter-spacing:0;text-transform:none;
  box-shadow:0 4px 0 rgba(0,0,0,.28),0 12px 26px rgba(0,0,0,.25);transition:transform .12s;}
html.ba #back:hover{background:#fff;transform:translateY(-2px);}
html.ba #back .ba-ar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;font:800 15px/1 'Work Sans',sans-serif;}
html.ba #back .ba-bt{padding-top:2px;}
html.bm #back .ba-ar,html.bm #back .ba-bt{display:none;}
html.ba.bm #back{background:rgba(255,255,255,.92);}

/* the game's badge, top middle (computers) */
.ba-top{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;
  padding:5px 16px 5px 6px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:800 15px/1 'Baloo 2','Work Sans',sans-serif;white-space:nowrap;pointer-events:none;}
.ba-top .ba-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:linear-gradient(135deg,var(--g),var(--g2));}
.ba-top b{padding-top:2px;font-weight:800;}
html.bm .ba-top,html.bm-fs .ba-top{display:none;}
@media(max-width:620px){.ba-top{display:none;}}

/* the game screen, framed */
html.ba:not(.bm) #cv,html.ba:not(.bm) #stage>canvas{border-radius:18px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 75%,#fff),0 0 0 10px rgba(255,255,255,.1),0 30px 70px rgba(0,0,0,.45),0 0 140px color-mix(in srgb,var(--g) 35%,transparent);}
html.ba .pan,html.ba .panel{border-radius:18px;
  background:radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--g) 26%,transparent),transparent 60%),rgba(9,12,24,.9);}
html.bm .pan,html.bm .panel{border-radius:0;}

/* candy buttons */
html.ba .btn{border:0;border-radius:14px;letter-spacing:.06em;
  box-shadow:0 4px 0 rgba(0,0,0,.38),inset 0 -3px 0 rgba(0,0,0,.14),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .1s,filter .1s;}
html.ba .btn:hover{transform:translateY(-2px);filter:brightness(1.06);}
html.ba .btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.38);}
html.ba .btn.g{background:rgba(255,255,255,.09);color:#eef3fa;border:1.5px solid rgba(255,255,255,.22);box-shadow:0 3px 0 rgba(0,0,0,.3);}
html.ba .btn.g:hover{background:rgba(255,255,255,.16);}
html.ba .btn:disabled{transform:none;filter:none;}
html.ba .chip{border-radius:999px;}
html.ba .lk{border-radius:999px;}
html.ba .lv,html.ba .wd,html.ba .mode{border-radius:16px;}
html.ba .lv:hover,html.ba .wd:hover,html.ba .mode:hover{box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 1px var(--g);border-color:var(--g);}
html.ba .fr{border-radius:12px;}
html.ba .fr.on{border-color:var(--g);box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 35%,transparent);}

/* Boing vs Homework's own buttons and frog picker */
html.ba .panel h2{font-family:'Baloo 2','Trebuchet MS',sans-serif;font-weight:800;}
html.ba #stage .panel button{border-radius:14px;box-shadow:0 4px 0 #1d7a35,inset 0 2px 0 rgba(255,255,255,.35);transition:transform .1s,filter .1s;}
html.ba #stage .panel button:hover{background:#6fd884;transform:translateY(-2px);}
html.ba #stage .panel button:active{transform:translateY(2px);box-shadow:0 1px 0 #1d7a35;}
html.ba #stage .panel button:disabled{opacity:.5;transform:none;}
html.ba #stage .panel button.ghost{box-shadow:0 3px 0 rgba(0,0,0,.3);}
html.ba #stage .panel button.ghost:hover{background:rgba(255,255,255,.12);}
html.ba #stage .tabs{background:rgba(255,255,255,.07);border-radius:999px;padding:4px;width:max-content;max-width:100%;margin:0 auto 12px;}
html.ba #stage .tabs button{border-radius:999px;box-shadow:none;background:transparent;}
html.ba #stage .tabs button.on{background:#58c96e;box-shadow:0 2px 0 #1d7a35;}
html.ba .grid16{gap:8px;}
html.ba .pcard{border-radius:14px;padding:9px 4px 7px;}
html.ba .pcard canvas{width:46px;height:46px;}
html.ba .pcard .code{font-size:13px;}
html.ba .pcard .nm{font-size:10.5px;}
html.ba .pcard.sel{border-color:var(--g);box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 35%,transparent);}

/* How to play */
html.ba #help,html.ba #tips{width:min(960px,100%);max-width:none;margin:18px auto 10px;padding:12px 14px 14px;text-align:left;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.16);border-radius:18px;color:#e4ecf6;font-size:13px;line-height:1.5;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
html.ba #tips{width:min(460px,100%);}
html.ba .ba-hk{display:flex;align-items:center;gap:7px;margin-bottom:9px;font:800 12px/1 'Work Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;}
html.ba .ba-hk span{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:0;
  background:linear-gradient(135deg,var(--g),var(--g2));}
html.ba .ba-its{display:flex;flex-wrap:wrap;gap:6px;}
html.ba .ba-it{background:rgba(255,255,255,.08);border-radius:11px;padding:6px 10px;}
html.ba #help b,html.ba #tips b{display:inline-block;min-width:20px;text-align:center;padding:1px 6px;margin:1px 1px;border-radius:6px;
  background:#fff;color:#14202e;font-weight:800;font-size:12px;line-height:1.45;box-shadow:0 2px 0 rgba(0,0,0,.4);}
html.ba #credit{color:rgba(255,255,255,.55);}

/* intro splash: the first time a game opens in a visit */
.ba-splash{position:fixed;inset:0;z-index:200;pointer-events:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,var(--g),var(--g2) 55%,var(--bg2));transition:opacity .5s,transform .5s;}
.ba-splash.out{opacity:0;transform:scale(1.08);}
.ba-sp-in{text-align:center;animation:baPop .55s cubic-bezier(.2,1.6,.4,1) both;}
.ba-sp-in canvas{width:170px;height:170px;display:block;margin:0 auto 10px;}
.ba-sp-k{font:800 13px/1 'Work Sans',sans-serif;letter-spacing:.3em;color:rgba(255,255,255,.85);}
.ba-sp-t{font:800 clamp(44px,9vw,96px)/1 'Baloo 2','Work Sans',sans-serif;color:#fff;margin-top:6px;
  text-shadow:0 6px 0 rgba(0,0,0,.22),0 18px 40px rgba(0,0,0,.25);}
@keyframes baPop{from{transform:scale(.6);opacity:0;}to{transform:none;opacity:1;}}
/* a friend's invite, over the game (boing-arcade.js inviteToast) */
.ba-inv{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:400;display:flex;align-items:center;gap:10px;
  width:min(520px,calc(100vw - 24px));padding:10px 10px 10px 14px;border-radius:18px;background:rgba(255,255,255,.97);color:#16212b;
  box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 0 3px var(--g,#58c96e);font:600 14px/1.35 'Work Sans',sans-serif;animation:baInv .45s cubic-bezier(.2,1.5,.4,1);transition:opacity .35s,transform .35s;}
.ba-inv.out{opacity:0;transform:translate(-50%,-20px);}
.ba-inv-t{flex:1;display:flex;align-items:center;gap:9px;min-width:0;}
.ba-inv-i{font-size:24px;flex:none;}
.ba-inv-go{flex:none;background:#58c96e;color:#0f2a17!important;font-weight:800;border-radius:12px;padding:9px 16px;text-decoration:none;box-shadow:0 3px 0 #1d7a35;}
.ba-inv-x{flex:none;border:0;background:none;font-size:22px;line-height:1;color:#94a3b8;cursor:pointer;padding:4px 6px;}
@keyframes baInv{from{opacity:0;transform:translate(-50%,-30px) scale(.9);}to{opacity:1;transform:translate(-50%,0);}}
/* invite friends (boing-arcade.js invite) */
.ba-pick{position:fixed;inset:0;z-index:390;background:rgba(5,9,14,.72);display:flex;align-items:center;justify-content:center;padding:16px;animation:baFade .15s;}
.ba-pk{width:min(440px,100%);max-height:min(560px,calc(100dvh - 32px));display:flex;flex-direction:column;background:#131c29;color:#e9f2ec;
  border:1px solid #22304a;border-top:3px solid var(--g,#58c96e);border-radius:20px;padding:16px 16px 12px;font-family:'Work Sans',sans-serif;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.ba-pkh{display:flex;align-items:center;justify-content:space-between;}
.ba-pkh b{font:800 22px/1.1 'Baloo 2','Work Sans',sans-serif;}
.ba-x{border:0;background:none;color:#8fa3ba;font-size:26px;line-height:1;cursor:pointer;padding:2px 6px;}
.ba-pks{color:#93a9bd;font-size:13px;margin:4px 0 10px;}
.ba-pkl{overflow:auto;flex:1;min-height:60px;color:#93a9bd;font-size:14px;}
.ba-pke{line-height:1.5;padding:10px 0;}
.ba-pkr{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #1d2738;}
.ba-pkr:first-child{border-top:0;}
.ba-pka{width:36px;height:36px;flex:none;border-radius:12px;background:#0f1621;}
img.ba-pka{object-fit:cover;display:block;}
.ba-pkn{flex:1;min-width:0;}
.ba-pkn b{display:block;color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ba-pkn small{display:block;color:#8fa3ba;font-size:12px;font-weight:600;}
.ba-pkn small.on{color:#7bed9f;}.ba-pkn small.err{color:#ff8fa3;}
.ba-inv-btn{flex:none;border:0;border-radius:12px;background:#58c96e;color:#0f2a17;font:800 13.5px 'Work Sans',sans-serif;padding:8px 14px;cursor:pointer;box-shadow:0 3px 0 #1d7a35;}
.ba-inv-btn.sent{background:#1d2a3d;color:#9ff0b5;box-shadow:none;}
.ba-inv-btn:disabled{cursor:default;}
.ba-pkf{display:flex;justify-content:center;padding-top:10px;border-top:1px solid #1d2738;margin-top:6px;}
.ba-link{border:1.5px solid #33425a;background:transparent;color:#cfdcea;border-radius:12px;padding:8px 14px;font:700 13px 'Work Sans',sans-serif;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
@keyframes baFade{from{opacity:0;}to{opacity:1;}}
/* the games join the site's page cross-fade (boing-social.css), so going from a site page to a game is one smooth step
   (without it the browser dropped the fade with an error each time) */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s;}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none;}}
/* arriving from a dive in Pond World: covered in the game's colours until the splash is up, then bubbles rise away */
html.ba-dive:after{content:"";position:fixed;inset:0;z-index:199;background:radial-gradient(circle at 50% 45%,var(--g),var(--g2) 55%,var(--bg2));}
.ba-splash.dive .ba-sp-in{animation:none;}
.ba-splash{overflow:hidden;}
.ba-bub{position:absolute;bottom:-40px;border-radius:50%;border:2px solid rgba(255,255,255,.6);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 45%);animation:baBub 1.2s cubic-bezier(.4,0,.8,.6) both;}
@keyframes baBub{from{transform:translateY(0);opacity:.95;}to{transform:translateY(-115vh);opacity:0;}}

/* the full-screen and music switches (boing-mobile.js, boing-music.js) as glass pills */
html.ba #bmFullD,html.ba #bmToggle{border-radius:999px!important;background:rgba(0,0,0,.3)!important;border:1px solid rgba(255,255,255,.25)!important;
  color:#fff!important;font-family:'Work Sans',sans-serif!important;letter-spacing:.08em!important;padding:10px 15px!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
html.ba #bmFullD:hover,html.ba #bmToggle:hover{background:rgba(0,0,0,.45)!important;}
html.bm #bmToggle{padding:8px 11px!important;}

/* menus sit in the middle of the screen instead of hanging at the top (the spacers shrink away when the menu is full) */
html.ba[data-game=dash] #pMenu:before,html.ba[data-game=dash] #pMenu:after,
html.ba[data-game=math] #pMenu:before,html.ba[data-game=math] #pMenu:after,
html.ba #stage .panel:before,html.ba #stage .panel:after{content:"";flex:1 1 0;min-height:0;}
html.ba #avatarBig{margin:0 auto;}