/* ===== B&K Arcade engine styles ===== */
.arc{position:relative}
.ahud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:720px;margin:0 auto 12px}
.ahud span{background:#0B1530;border-radius:16px;padding:6px 8px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;line-height:1.05}
.ahud small{font-size:12px;font-weight:800;letter-spacing:1px;opacity:.75}
.ahud b{font-family:var(--h);font-weight:400;font-size:clamp(26px,4vw,38px);color:#fff}
.ahud .hs b{color:#FFC21A}.ahud .hc.hot{background:linear-gradient(135deg,#FF8F1F,#E54800)}.ahud .hc.hot b{animation:pulse .5s infinite alternate}
.ahud .ht.low{background:#E8412F}
.aScore.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.25)}}@keyframes pulse{to{transform:scale(1.12)}}
.astagewrap{position:relative;min-height:360px;border-radius:24px;padding:10px 4px}
.astage{min-height:340px}
.aover{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:24px;background:#0B1530;padding:16px;text-align:center}
.atitle{font-family:var(--h);font-size:clamp(30px,5vw,46px);margin:0}
.ahow{font-size:20px;font-weight:800;max-width:560px;margin:4px 0}
.abest{font-size:18px;margin:2px 0}.abest b{color:#FFC21A;font-family:var(--h);font-weight:400;font-size:24px}
.alen{font-size:15px;opacity:.75;margin:0 0 8px}
.abtn{font-family:var(--h);font-size:30px;padding:12px 40px;min-height:68px;min-width:180px;border:0;border-radius:20px;color:#fff;background:linear-gradient(180deg,#FF8F1F,#FF5A00);box-shadow:0 7px 0 #B84200;transition:transform .12s}
.abtn:active{transform:translateY(4px);box-shadow:0 3px 0 #B84200}
.abtn.alt{background:#22376F;box-shadow:0 7px 0 #0A1430;font-size:22px}
.abtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.aendt{font-family:var(--h);letter-spacing:2px;margin:0;opacity:.8}
.afinal{font-family:var(--h);font-size:clamp(70px,13vw,120px);line-height:1;margin:0;color:#FFC21A;text-shadow:0 6px 0 #1B1F2A}
.anb{font-family:var(--h);font-size:40px;margin:0;color:#fff;background:linear-gradient(135deg,#FF8F1F,#E54800);padding:4px 22px;border-radius:14px;transform:rotate(-3deg);animation:nb 1s infinite alternate}
@keyframes nb{to{transform:rotate(3deg) scale(1.08)}}
.aendbest,.astar{margin:2px 0;font-weight:800}
.abanner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.5);z-index:7;font-family:var(--h);font-size:clamp(40px,8vw,72px);color:#fff;text-shadow:0 6px 0 #1B1F2A;opacity:0;pointer-events:none;white-space:nowrap;transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.abanner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.abanner.combo{color:#FFC21A}.abanner.lvl{color:#FF8F1F}
.afloat{position:absolute;z-index:8;transform:translate(-50%,-50%);font-family:var(--h);font-size:30px;color:#fff;text-shadow:0 3px 0 #1B1F2A;pointer-events:none;white-space:nowrap;animation:fl .9s ease-out forwards}
.afloat.hot{color:#FFC21A;font-size:36px}.afloat.gold{color:#FFC21A;font-size:34px}.afloat.bad{color:#FF6B5A}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.aq{font-family:var(--h);font-size:clamp(46px,9vw,80px);margin:10px 0 16px}.aq.sm{font-size:clamp(26px,4.2vw,38px);font-family:"Nunito";font-weight:800}
.aans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:640px;margin:0 auto}
.aans.col{grid-template-columns:1fr;max-width:560px}
.aans button{font-family:var(--h);font-size:clamp(30px,5vw,44px);min-height:80px;border:0;border-radius:20px;background:var(--blue);color:#fff;box-shadow:0 6px 0 #0A3AA8}
.aans.col button{font-family:"Nunito";font-weight:800;font-size:22px;min-height:64px}
.aans button.good{background:#1FAE60;box-shadow:0 6px 0 #137A42}.aans button.bad{background:#E8412F;box-shadow:0 6px 0 #9A2418;animation:shakeX .3s}
.aans button:disabled{opacity:.85}
.amsg{font-weight:800;font-size:20px;min-height:28px;margin:8px 0}
.abig{font-size:34px!important;min-height:84px!important;min-width:260px;margin-top:10px}
.aletters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0}
.aletters button{font-family:var(--h);font-size:38px;width:72px;height:72px;border:0;border-radius:18px;background:#fff;color:var(--char);box-shadow:0 6px 0 #9FB8E8}
.aletters button:disabled{opacity:.25}.aletters button.bad{background:#E8412F;color:#fff}
.slots span.ok{color:#FFC21A}
.apple{display:inline-block;font-size:clamp(34px,6vw,50px);transform:rotate(var(--r))}
.apscene{min-height:130px;max-width:640px;margin:0 auto;gap:6px}
.zone .sweet{position:absolute;left:36%;right:36%;top:0;bottom:0;background:rgba(255,122,0,.55)}
.wgrid{display:grid;gap:12px;max-width:560px;margin:0 auto}
.whole{position:relative;aspect-ratio:1;border:0;border-radius:50%;padding:0;font-size:clamp(40px,9vw,64px);overflow:hidden}
.hole2{background:radial-gradient(circle at 50% 65%,#3b2a1a 45%,#6b4a2b 47%)}
.patch2{border-radius:24px;background:radial-gradient(circle at 50% 75%,#7c4a1e 35%,#a16207 37%,#4d8c1f 70%)}
.whole .wsp{position:absolute;left:0;right:0;bottom:-100%;display:flex;align-items:center;justify-content:center;height:100%;transition:bottom .12s ease-out}
.whole.up .wsp{bottom:0}.whole.hit{background:#FFC21A}.whole.oops{background:#E8412F}
.goldy{filter:sepia(1) saturate(5) hue-rotate(-10deg) brightness(1.2)}
.pk2 .pkin{width:70%;height:70%}.pk2.good{color:#FF7A00}.pk2.bad{color:#65A30D}.pk2.gold{color:#FFC21A;filter:drop-shadow(0 0 10px #fff)}
.ljkid{transition:bottom .25s}
.ring{position:absolute;top:16%;width:62px;height:62px;margin-left:-31px;border-radius:50%;border:7px solid #FFC21A;box-shadow:0 0 14px #FFC21A;z-index:1}
.keeper.lean0{transform:translateX(-80%) rotate(-18deg)}.keeper.lean1{transform:translateX(-50%) translateY(-10px)}.keeper.lean2{transform:translateX(-20%) rotate(18deg)}
.keeper{transition:left .35s cubic-bezier(.3,1.4,.5,1),transform .2s}
.reactpad.fake{background:#1E6BFF;font-size:50px}
@media (max-width:600px){.ahud{gap:5px}.ahud span{padding:4px}.ahud b{font-size:24px}.ahud small{font-size:10px}.aans{grid-template-columns:repeat(2,1fr)}.abtn{font-size:26px;padding:10px 26px}.astagewrap{min-height:380px}}
/* profile scores */
.pfScoresWrap{max-width:760px;margin:0 auto 20px;background:rgba(255,255,255,.06);border-radius:24px;padding:14px}
.pfsh{font-family:var(--h);font-size:24px;margin:0 0 10px}
.pfScores{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pfs{display:flex;flex-direction:column;align-items:center;background:#13224A;border-radius:14px;padding:8px}.pfs span{font-size:15px;font-weight:800}.pfs b{font-family:var(--h);font-weight:400;font-size:26px;color:#FFC21A}
.pfs.none b{color:#5B6478}
/* ===== difficulty picker + ULTRA HARD (fiery purple) ===== */
.adiff{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0 2px}
.adiff button{min-height:48px;min-width:96px;padding:6px 14px;border:0;border-radius:14px;background:#22376F;color:#fff;font-weight:900;font-size:17px;box-shadow:0 4px 0 #0A1430}
.adiff button.on{background:linear-gradient(180deg,#FF8F1F,#FF5A00);box-shadow:0 4px 0 #B84200}
.adiff button.du,.diff button.du{background:linear-gradient(135deg,#3B0764,#7C3AED);box-shadow:0 4px 0 #2E0750;color:#fff}
.adiff button.du.on,.diff button.du.on{background:linear-gradient(135deg,#7C3AED,#C026D3 55%,#FF5A00);box-shadow:0 4px 0 #4C0F70,0 0 18px #C026D3}
.aulnote{display:none;font-weight:800;font-size:15px;color:#E9D5FF;margin:2px 0}
.arc.ultra .aulnote{display:block}
.ahud{position:relative}
.ahud .hu{display:none;position:absolute;top:-16px;right:6px;z-index:2;flex-direction:row;padding:3px 12px;border-radius:999px;font-family:var(--h);font-size:16px;letter-spacing:1px;color:#fff;background:linear-gradient(135deg,#7C3AED,#C026D3 55%,#FF5A00);box-shadow:0 0 14px rgba(192,38,211,.8);animation:ufire 1.2s infinite alternate}
.arc.ultra .ahud .hu{display:flex}
@keyframes ufire{to{box-shadow:0 0 22px rgba(255,90,0,.9);transform:scale(1.05)}}
.arc.ultra .ahud span:not(.hu){background:linear-gradient(180deg,#2A0E4A,#14072A);box-shadow:inset 0 0 0 2px rgba(192,38,211,.55)}
.arc.ultra .astagewrap{background:radial-gradient(120% 90% at 50% 110%,rgba(255,90,0,.28),rgba(124,58,237,.22) 45%,transparent 70%);box-shadow:inset 0 0 0 3px rgba(192,38,211,.45)}
.arc.ultra .aover{background:linear-gradient(180deg,#1A0833,#0B1530)}
.arc.ultra .atitle::after{content:" 💜 ULTRA";font-size:.55em;vertical-align:middle;padding:2px 10px;margin-left:6px;border-radius:999px;background:linear-gradient(135deg,#7C3AED,#C026D3 55%,#FF5A00);color:#fff}
.arc.ultra .abtn:not(.alt){background:linear-gradient(180deg,#C026D3,#7C3AED);box-shadow:0 7px 0 #4C0F70}
/* Home Run Derby canvas */
.hrwrap{max-width:760px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.25)}
.hrcv{display:block;width:100%;touch-action:manipulation;cursor:pointer}
#g-bat .abig{margin-top:12px}
.pfu{display:block;font-style:normal;font-size:13px;font-weight:900;color:#E9D5FF}.pfu.none{opacity:.45}
.arc.ultra .swing{background:linear-gradient(135deg,#7C3AED,#C026D3 55%,#FF5A00)!important;box-shadow:0 7px 0 #4C0F70,0 0 22px rgba(192,38,211,.6)!important}
.aover{overflow-y:auto}
@media (max-width:600px){.astagewrap{min-height:470px}.ahow{font-size:17px}.adiff button{min-width:84px;font-size:16px}.atitle{font-size:28px}}
.aover{justify-content:flex-start}.aover>:first-child{margin-top:auto}.aover>:last-child{margin-bottom:auto}
@media (max-width:600px){.astagewrap{min-height:580px}.aover{padding:12px 10px}}
@media (max-width:600px){.astagewrap{min-height:650px}.alen{display:none}.aover{gap:4px}}
.ahud .hs.hrflash{animation:hrflash 1.1s steps(2,jump-none) 1}@keyframes hrflash{0%,40%,80%{background:#FFC21A}20%,60%,100%{background:#0B1530}}
/* ===== v13: full-screen arcade play (fixed 100dvw x 100dvh overlay; page Fullscreen API where supported) ===== */
html.afs-on,html.afs-on body{overflow:hidden!important;overscroll-behavior:none}
.afsx{display:none}
.game.arc.afs{position:fixed;inset:0;width:100vw;height:100vh;width:100dvw;height:100dvh;max-width:none;margin:0;z-index:60;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;animation:none;color:#fff;
 background:radial-gradient(120% 80% at 50% 0%,#22356B,#0B1530 70%);padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.arc.afs .afsx{display:flex;position:absolute;z-index:30;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:56px;height:56px;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;
 background:rgba(11,21,48,.88);color:#fff;font:900 28px/1 system-ui,sans-serif;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 4px 0 rgba(0,0,0,.35);cursor:pointer}
.arc.afs .afsx:active{transform:translateY(2px)}
.arc.afs .ahud{flex:none;width:calc(100% - 68px);max-width:720px;margin:0 0 8px;box-sizing:border-box}
.arc.afs .astagewrap{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;border-radius:18px;padding:8px 4px}
.arc.afs .astage{max-width:820px;margin:0 auto}
.arc.afs .aover{border-radius:18px}
/* Derby: the canvas fills the screen, HUD + SWING float on top, tap anywhere swings */
#g-bat.afs{padding:0;background:#0B1530}
#g-bat.afs .ahud{position:absolute;z-index:8;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));right:72px;width:auto;max-width:560px;margin:0;gap:6px;pointer-events:none}
#g-bat.afs .ahud span{background:rgba(11,21,48,.74);padding:3px 6px}
#g-bat.afs .ahud b{font-size:clamp(20px,3.4vmin,30px)}
#g-bat.afs .ahud small{font-size:10px}
#g-bat.afs .astagewrap{position:absolute;inset:0;padding:0;border-radius:0;overflow:hidden;min-height:0;background:none;box-shadow:none}
#g-bat.afs .astage{position:absolute;inset:0;min-height:0;max-width:none;margin:0}
#g-bat.afs .hrwrap{position:absolute;inset:0;max-width:none;margin:0;border-radius:0;box-shadow:none}
#g-bat.afs .hrcv{width:100%;height:100%}
#g-bat.afs #batSwing{position:absolute;z-index:9;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:clamp(112px,17vmin,150px);height:clamp(112px,17vmin,150px);min-width:0;min-height:0;margin:0;padding:6px;border-radius:50%;
 font-size:clamp(19px,3.2vmin,26px);line-height:1.05;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;box-shadow:0 7px 0 rgba(0,0,0,.35),inset 0 0 0 4px rgba(255,255,255,.5)}
#g-bat.afs #batMsg{position:absolute;z-index:8;left:50%;transform:translateX(-50%);top:calc(max(6px,env(safe-area-inset-top)) + 112px);margin:0;max-width:min(560px,calc(100% - 24px));padding:4px 12px;border-radius:12px;background:rgba(11,21,48,.72);font-size:16px;pointer-events:none;text-align:center}
#g-bat.afs .aover{border-radius:0}
html.afs-on .console{z-index:auto!important}
html.afs-on .panel .phead{visibility:hidden}
.arc.afs:not(#g-bat) .ahud{margin-top:14px}
.arc.afs:not(#g-bat) .astagewrap{display:flex;flex-direction:column}
.arc.afs:not(#g-bat) .astage{margin:auto;width:100%;flex:none}
#g-bat.afs .ahud{top:calc(max(6px,env(safe-area-inset-top)) + 10px)}
#g-bat.afs{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#g-bat.afs .hrcv,#g-bat.afs #batSwing{touch-action:none}
/* v15: creative games (Which Bro?, Draw, Decorate) open full screen too */
.gfsx{display:none}
.game.gfs{position:fixed;inset:0;width:100vw;height:100vh;width:100dvw;height:100dvh;max-width:none;margin:0;z-index:60;box-sizing:border-box;display:block;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;animation:none;color:#fff;
 background:radial-gradient(120% 80% at 50% 0%,#22356B,#0B1530 70%);padding:calc(max(8px,env(safe-area-inset-top)) + 68px) max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.game.gfs>.gfsx{display:flex;position:fixed;z-index:5;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:56px;height:56px;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;
 background:rgba(11,21,48,.88);color:#fff;font:900 28px/1 system-ui,sans-serif;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 4px 0 rgba(0,0,0,.35);cursor:pointer}
.game.gfs>*:not(.gfsx){max-width:900px;margin-left:auto;margin-right:auto}
.arc.afs.apre #batSwing,.arc.afs.apre #batMsg{display:none!important}
/* keep SWING clear of the bottom-right 80px (where hosting overlays like the Netlify badge sit) */#g-bat.afs #batSwing{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 72px)}
.arc.afs .atitle{font-size:clamp(20px,6vw,34px);overflow-wrap:anywhere;max-width:100%}
/* ===== v18 canvas games (.cvg): same full-bleed layout as the Derby ===== */
.cvwrap{position:relative;max-width:760px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.25);background:#0B1530}
.cvcv{display:block;width:100%;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cvg .cvmsg{margin:8px auto 0;text-align:center}
.cvg .cvbtn{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 0}
.cvg .cvbtn svg{width:1.1em;height:1.1em;flex:none}
.cvanchor{position:absolute;width:2px;height:2px;pointer-events:none;left:0;top:0}
.game.arc.afs.cvg{padding:0;background:#0B1530;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.arc.afs.cvg .ahud{position:absolute;z-index:8;top:calc(max(6px,env(safe-area-inset-top)) + 10px);left:max(6px,env(safe-area-inset-left));right:72px;width:auto;max-width:560px;margin:0;gap:6px;pointer-events:none}
.arc.afs.cvg .ahud span{background:rgba(11,21,48,.74);padding:3px 6px}
.arc.afs.cvg .ahud b{font-size:clamp(20px,3.4vmin,30px)}
.arc.afs.cvg .ahud small{font-size:10px}
.arc.afs.cvg .astagewrap{position:absolute;inset:0;padding:0;border-radius:0;overflow:hidden;min-height:0;background:none;box-shadow:none;display:block}
.arc.afs.cvg .astage{position:absolute;inset:0;min-height:0;max-width:none;margin:0;width:auto}
.arc.afs.cvg .cvwrap{position:absolute;inset:0;max-width:none;margin:0;border-radius:0;box-shadow:none;height:auto!important}
.arc.afs.cvg .cvcv{width:100%;height:100%}
.arc.afs.cvg .cvbtn{position:absolute;z-index:9;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 72px);width:clamp(112px,17vmin,150px);height:clamp(112px,17vmin,150px);min-width:0;min-height:0;margin:0;padding:6px;border-radius:50%;
 font-size:clamp(19px,3.2vmin,26px);line-height:1.05;flex-direction:column;gap:2px;text-align:center;white-space:normal;box-shadow:0 7px 0 rgba(0,0,0,.35),inset 0 0 0 4px rgba(255,255,255,.5);touch-action:none}
.arc.afs.cvg .cvbtn.cvleft{right:auto;left:max(16px,env(safe-area-inset-left))}
.arc.afs.cvg .cvmsg{position:absolute;z-index:8;left:50%;transform:translateX(-50%);top:calc(max(6px,env(safe-area-inset-top)) + 112px);margin:0;max-width:min(560px,calc(100% - 24px));padding:4px 12px;border-radius:12px;background:rgba(11,21,48,.72);color:#fff;font-size:16px;pointer-events:none;text-align:center}
.arc.afs.cvg .aover{border-radius:0}
.arc.afs.cvg.apre .cvbtn,.arc.afs.cvg.apre .cvmsg{display:none!important}
.cvbtn.cvpulse{animation:cvpulse .5s ease-in-out infinite alternate}
@keyframes cvpulse{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.cvbtn.cvpulse{animation:none}}
.cvbtn.cvoff{opacity:.55;filter:grayscale(.4)}
/* v18 DOM games: mascot arena + effects overlay */
.arena{display:block;width:calc(100% - 8px);max-width:720px;margin:0 auto 8px;border-radius:14px;flex:none;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.fxov{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:5}
.cvg .arena,.cvg .fxov,#g-bat .arena,#g-bat .fxov{display:none}
.astage.fxshake{animation:fxshake .32s ease-in-out}
@keyframes fxshake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.astage.fxshake{animation:none}}
.arc .memgrid .card{position:relative;overflow:hidden}
.arc .memgrid .card:not(.up):not(.done){background:linear-gradient(135deg,#1E6BFF 0 50%,#FF7A00 50% 100%);box-shadow:0 5px 0 #0B1530,inset 0 0 0 4px rgba(255,255,255,.85)}
.arc .memgrid .card:not(.up):not(.done)::before{content:"B&K";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--h);font-size:clamp(14px,4.4vw,24px);color:#fff;text-shadow:0 2px 0 #0B1530}
.arc .memgrid .card.done{background:#FFE9A8;box-shadow:0 5px 0 #C89A00,inset 0 0 0 4px #FFC21A}