/* WACKADOODLE! — original 90s carnival-inspired theme, responsive and offline */
:root{--bg:#102b76;--ink:#0b2d61;--mint:#21c714;--mint2:#eaffdb;--red:#ff2644;--yellow:#ffda00;--navy:#083273;--border:#ffa415;--muted:#3d6a94;--white:#fff9e8;--shadow:0 9px 0 #092858,0 15px 28px #040d3980}
*,*::before,*::after{box-sizing:border-box}body{background:radial-gradient(circle at 10% 6%,#387af0 0,#2051bf 18%,transparent 35%),radial-gradient(circle at 90% 35%,#d61a79 0,transparent 30%),repeating-linear-gradient(110deg,#0e2b80 0px,#0e2b80 60px,#112b7a 60px,#112b7a 120px);color:#0d3367;font-family:'Trebuchet MS','Arial Rounded MT Bold',ui-rounded,-apple-system,sans-serif;overflow-x:hidden}body::before{content:'✦　✧　★　　　　✦　　★　　　　✧　　✦　★　✧';position:fixed;left:0;right:0;top:6px;font-size:24px;letter-spacing:30px;white-space:nowrap;color:#ffe6693d;pointer-events:none}
button{font-family:'Trebuchet MS','Arial Rounded MT Bold',ui-rounded,sans-serif;font-weight:1000;transition:filter .15s,transform .1s}button:hover:not(:disabled){filter:brightness(1.08)}button:active:not(:disabled){transform:translateY(2px)}button:focus-visible{outline:4px solid #fff300;outline-offset:4px}button:disabled{opacity:.48}
header{border:0;background:linear-gradient(180deg,#8f003c,#e61a4c 45%,#790f5e);border-bottom:8px solid #ffc930;box-shadow:0 5px 0 #9b3b00,0 9px 18px #090e4b80;position:relative;z-index:3}
header::before{content:'';position:absolute;inset:0 0 auto;height:32px;background:repeating-radial-gradient(ellipse at 50% 0,#ffdf37 0 14px,#fa5237 15px 32px,#ad124b 33px 39px);background-size:94px 32px;opacity:.9;pointer-events:none}
header::after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:9px;background:radial-gradient(circle,#fff9c2 0 3px,#ffb100 4px,#c25a00 5px,transparent 6px) 0 0/30px 9px;pointer-events:none}
.header-inner{max-width:1480px;min-height:181px;padding:24px 20px 10px;align-items:end;justify-content:center;position:relative}
.brand{width:820px;max-width:min(72vw,820px);height:150px;display:flex;align-items:center;justify-content:center;background:url('assets/hero.webp') center center/contain no-repeat;position:relative;filter:drop-shadow(0px 4px 1px #090a3e);cursor:pointer}
.brandmark,.brand strong,.brand small{display:none}.header-actions{position:absolute;right:22px;bottom:17px;align-items:center;z-index:2;gap:7px}
.mini-btn,.level-pill,.nav-arrow{border:3px solid #ffde54;border-radius:16px;background:linear-gradient(#43c9ff,#047ce8);color:white;box-shadow:0 4px 0 #092e83,inset 0 3px 0 #ffffff80,0 0 0 2px #0e3671;text-shadow:1px 2px 0 #103276;min-width:40px;height:42px}.level-pill{padding:6px 12px;height:45px;background:linear-gradient(#ffe855,#ff9400);color:#522b00;text-shadow:0 1px #fff4bb;border-color:#ffeb6e;white-space:nowrap}.nav-arrow{font-size:24px;height:41px;width:43px;background:linear-gradient(#ffd94c,#ff7c17)}
.wrap{max-width:1480px;padding:21px clamp(12px,2vw,26px) 24px}.topline{background:linear-gradient(135deg,#fff9d9,#fff9ee 65%,#fff2bd);border:5px solid #ffbf24;border-radius:20px;box-shadow:0 5px 0 #af4d19,0 8px 0 #052e79;margin:2px 0 19px;padding:14px 20px 14px 24px;align-items:center;position:relative}
.topline::after{content:'★ ★ ★';position:absolute;right:136px;top:8px;font-size:16px;color:#ffac00;letter-spacing:10px;opacity:.7}.crumb{color:#df1948;letter-spacing:1.2px;font-size:12px;text-shadow:none}.dot{background:#ffcc16;border:1px solid #ff6f18;width:11px;height:11px}.topline h1{font-weight:1000;font-size:clamp(24px,3vw,37px);color:#17417d;letter-spacing:-1px;text-shadow:1px 1px 0 #a1c6ff}.topline p{color:#375477;line-height:1.45;max-width:900px;font-size:clamp(12px,1.15vw,15px);font-weight:750}.stepnav{margin-top:0;gap:8px;z-index:1}.workspace{grid-template-columns:minmax(0,1fr) 339px;gap:16px;align-items:start}
.stage-card{border:6px solid #f9b62c;border-radius:17px;background:#fcebce;box-shadow:0 7px 0 #9e4a12,0 10px 0 #082f84,0 19px 25px #06103d7a;overflow:hidden}.stage-top{background:linear-gradient(#ff6b39,#d81949 55%,#ae174b);border-bottom:5px solid #ffc82b;color:white;min-height:51px;padding:9px 14px;text-shadow:1px 2px 0 #771639}.stage-title{color:#fff7b4;letter-spacing:1.2px;font-size:13px}.live-dot{background:#28f5c2;box-shadow:0 0 0 3px #115b5f;border-color:#fffcb5}.stage-stats{color:#fff6d5;font-weight:1000}.time{background:#092b76;color:#fff8a4;border:2px solid #fdce32;border-radius:9px;min-width:65px}.canvas-frame{background:#32aef0;position:relative}.canvas-frame canvas{background:#54c6ff;width:100%;display:block;cursor:crosshair}.stage-hud{background:#fff8dcf2;border:2px solid #f9b621;border-radius:11px;color:#b72e49;box-shadow:0 3px 0 #a75c10;font-weight:1000;font-size:11px}.stage-hud.play{background:#ffeb98}.zoom-btn{background:linear-gradient(#ffe876,#ff9e00);border:2px solid #ce5d00;border-radius:13px;box-shadow:0 3px 0 #994100;color:#5c2906}.canvas-bottom{background:linear-gradient(#fffaf0,#ffedbc);border-top:5px solid #ffba19;padding:10px 13px;gap:7px}.instruction{font-size:12px;color:#27517c;font-weight:800}.instr-icon{background:#ffcb32;color:#803400;border:2px solid #f3a105;border-radius:9px}.hint-btn{background:linear-gradient(#fff58f,#ffc720);border:2px solid #d78100;color:#603901;box-shadow:0 3px 0 #bf7700;border-radius:10px;min-height:37px}
.action-row{margin-top:16px;gap:10px;align-items:center}.playbtn{background:linear-gradient(#35f934 0%,#08ca23 58%,#009829 100%);color:#fff;border:4px solid #ffeb64;border-radius:17px;min-height:55px;min-width:205px;font-weight:1000;font-size:15px;box-shadow:0 5px 0 #035e1f,0 8px 0 #05255b,0 12px 15px #060b2b69;text-shadow:1px 2px 0 #006423;text-transform:uppercase}.playbtn:hover:not(:disabled){background:linear-gradient(#55ff5b,#09c42a)}.secbtn{border:3px solid #ffc8e9;border-radius:14px;background:linear-gradient(#c23dff,#6c0ae4);color:white;font-size:13px;min-height:51px;box-shadow:0 4px 0 #400085,0 7px 0 #071e5d;text-shadow:1px 2px 0 #4b0f9b;text-transform:uppercase}.secbtn:hover:not(:disabled){background:linear-gradient(#d768ff,#8418f6)}.secbtn.danger{background:linear-gradient(#ff6977,#ef0a38);color:white;border-color:#ffbd78;box-shadow:0 4px 0 #990925,0 7px 0 #071e5d;text-shadow:1px 2px 0 #9a1831}.edit-actions{margin-left:auto;gap:7px}.iconbtn{background:linear-gradient(#4adfff,#0484e6);color:white;border:3px solid #aedfff;border-radius:12px;text-shadow:0 2px 0 #094e92;box-shadow:0 4px 0 #064d9b;height:48px;min-width:47px;font-size:21px}
.sidebar{gap:16px}.side-card{padding:13px;border:5px solid #ffba22;border-radius:17px;background:#fff8e9;box-shadow:0 6px 0 #994210,0 9px 0 #0d3d85,0 14px 24px #050f3760}.section-head{background:linear-gradient(#ff5c5d,#ce1545);color:white;margin:-13px -13px 14px;padding:11px 12px;border-bottom:4px solid #ffca35;border-radius:10px 10px 0 0;min-height:51px;align-items:center}.section-head h2{font-size:17px;letter-spacing:.4px;font-weight:1000;text-shadow:1px 2px 0 #7c1736;color:white}.mini-label{color:#ffeca2;background:#0e3b80;border:1px solid #5bbaff;font-size:10px;border-radius:11px;padding:5px 7px}.part-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.part-btn{min-height:89px;background:linear-gradient(#effaff,#b7e8ff);border:2px solid #8bceef;border-radius:11px;color:#0e3564;box-shadow:inset 0 3px 0 #fff,0 3px 0 #93b9c5;padding:6px 1px}.part-btn:hover:not(:disabled){background:#e8fcb7;transform:translateY(-2px)}.part-btn.chosen{background:linear-gradient(#fffab6,#ffda41);border-color:#e47c00;box-shadow:0 0 0 2px #ffc62c,0 3px 0 #b67700}.part-emoji{font-size:31px;filter:drop-shadow(1px 3px 1px #0005)}.part-name{font-size:10px;letter-spacing:-.2px}.count{background:#f72256;color:white;border:1px solid #fff5bb;font-size:10px;padding:2px 4px;border-radius:8px}.partfoot{font-size:11px;color:#416082;font-weight:750;margin-top:9px}.objective{background:linear-gradient(#f2ffe3,#e8f7ca);border:2px solid #d4e7a0}.objective strong{color:#0d6d42}.objective p{color:#41647a;font-weight:700}.fact-row{color:#456482;font-weight:800}.fact-row strong{color:#1f4d87}.progress-card{background:linear-gradient(#1852a8,#0e2d79);border-color:#ffc329;color:white}.progress-card .section-head{background:linear-gradient(#ff5944,#c81f65)}.progress-card .progress-text{color:#fff4cb;font-weight:750}.progress-card .progress-track{background:#071f56;border:2px solid #4190dc;height:14px}.progress-card .progress-fill{background:linear-gradient(90deg,#ff801c,#ffe93d)}.progress-card .progress-foot{color:#fff1a1}
.bottom-note{color:#f9d489;text-shadow:0 1px #0f2874;font-weight:700;font-size:11px;margin-top:23px}.overlay{background:#051744c9}.modal{background:linear-gradient(#fffceb,#ffeabf);border:6px solid #ffc42f;box-shadow:0 9px 0 #9c3c07,0 26px 60px #030d30c9;border-radius:24px;padding:23px}.modal h2{color:#123880;text-shadow:1px 2px #bcd4ff}.modal p{color:#405876;font-weight:700}.eyebrow{color:#df2742}.close-modal{border:3px solid #ffcf3d;color:#fff;background:#e83353;border-radius:11px}.lv-card{background:linear-gradient(#d4f0ff,#86cbff);border:3px solid #157bc5;color:#14366d;box-shadow:0 3px 0 #155a94;border-radius:13px}.lv-card:hover{border-color:#ffbc20}.lv-card.current{background:linear-gradient(#fff9ae,#ffba24);border-color:#e47f17}.lv-card b{font-size:24px;text-shadow:0 1px white}.lv-card .lv-stars{color:#fb8a09}.toast{background:#ffdd4d;color:#813211;border:3px solid #ff7b12;box-shadow:0 5px 0 #9e4019;font-weight:1000}
/* colorful sport-ball picker: the real puzzle ball switches style */
.ball-picker{background:linear-gradient(180deg,#ffe7a1,#fff9df);border:2px solid #f3bc30;border-radius:13px;margin-bottom:12px;padding:8px}.ball-picker .picker-label{display:flex;justify-content:space-between;align-items:center;font-weight:1000;font-size:11px;color:#b52148;letter-spacing:.6px;margin:1px 2px 8px}.ball-options{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.ball-option{border:2px solid #8bcce8;border-radius:9px;background:linear-gradient(#fff,#d7f2ff);padding:6px 1px;display:grid;justify-items:center;gap:4px;min-width:0;min-height:65px;color:#153c74}.ball-option.selected{border-color:#e33f35;background:linear-gradient(#ffffac,#ffce41);box-shadow:0 0 0 1px #ff9129}.ball-option span.ball-name{font-size:9px;white-space:nowrap;letter-spacing:-.4px;font-weight:900}.ball-glyph{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;box-shadow:inset -5px -6px 5px #0003,inset 4px 5px 5px #fff8,0 2px 2px #2227;border:1.5px solid #3339;font-size:22px;color:#fff;text-shadow:1px 1px 2px #333}.ball-glyph.basketball{background:radial-gradient(circle at 25% 20%,#ffbc4f,#e67e09 75%);color:#4e270b}.ball-glyph.soccer{background:radial-gradient(circle at 26% 18%,white,#e9ebf0 75%);color:#1c2536}.ball-glyph.tennis{background:radial-gradient(circle at 20% 20%,#edff5e,#9ee500 80%);color:#f8ffff}.ball-glyph.bowling{background:radial-gradient(circle at 20% 20%,#cc89ff,#7814d5 80%);color:#251249}.ball-glyph.classic{background:radial-gradient(circle at 20% 18%,#fffca4,#f9b227 78%);color:#fff5ac}.ball-glyph i{font-size:11px;font-style:normal}.ball-option:disabled{opacity:.4}
.tool-tabs{display:flex;gap:4px;margin-bottom:10px}.tool-tab{flex:1;min-width:0;background:linear-gradient(#46cdff,#158fe5);color:#043f70;border:2px solid #1380bd;border-radius:9px;padding:7px 3px;font-size:10px;text-transform:uppercase;text-shadow:0 1px #c4f1ff;box-shadow:0 3px 0 #0950a1}.tool-tab.active{background:linear-gradient(#fff382,#ffbc0a);border-color:#cd6d00;color:#64320a;box-shadow:0 3px 0 #a96800}.tip-chip{font-size:10px;background:#fbe99e;border-radius:8px;padding:3px 6px;color:#8f4812}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 295px;gap:11px}.part-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-inner{min-height:154px}.brand{height:132px;width:700px;max-width:65vw}.section-head h2{font-size:15px}.sidebar{gap:13px}.action-row{gap:6px}.playbtn{min-width:165px;font-size:13px}.secbtn{padding:8px 11px;font-size:12px}}
@media(max-width:790px){body{background:repeating-linear-gradient(120deg,#163e9d,#163e9d 65px,#203d96 65px,#203d96 130px)}header::before{height:19px;background-size:52px 19px}.header-inner{min-height:137px;padding:18px 10px 8px;align-items:start;justify-content:center}.brand{width:580px;max-width:92%;height:106px;background-image:url('assets/hero-mobile.webp');background-position:center;background-size:contain}.header-actions{bottom:6px;right:8px;gap:5px}.level-pill{height:32px;padding:3px 7px;font-size:10px;border-width:2px}.mini-btn{height:32px;min-width:33px;padding:0 6px;font-size:17px;border-width:2px}.wrap{padding:11px 8px 20px}.topline{margin:4px 0 12px;padding:9px 12px 10px;border-width:4px;border-radius:14px}.topline h1{font-size:clamp(21px,6vw,28px);margin:3px 0}.topline p{font-size:12px;line-height:1.3}.topline .crumb{font-size:10px}.topline::after{display:none}.stepnav{gap:3px}.nav-arrow{width:30px;height:31px;font-size:20px;border-width:2px}.workspace{display:flex;flex-direction:column;gap:12px}.workspace>section,.sidebar{width:100%}.stage-card{border-width:4px;border-radius:13px;box-shadow:0 4px 0 #97471c,0 6px 0 #082f84}.stage-top{min-height:38px;padding:5px 8px}.stage-title{font-size:11px}.stage-stats{font-size:10px;gap:6px}.stage-hud{top:6px;left:6px;font-size:8px;padding:4px 6px}.zoom-btn{right:5px;bottom:5px;font-size:10px;padding:6px 7px}.canvas-bottom{padding:7px;gap:5px}.instruction{font-size:10px}.instr-icon{height:23px;width:24px;flex-shrink:0}.hint-btn{font-size:10px;min-height:30px;padding:4px 7px}.action-row{gap:7px;margin-top:12px}.playbtn{min-height:48px;flex:1;min-width:155px;font-size:12px;padding:5px 9px;border-width:3px}.secbtn{min-height:46px;flex:0 1 auto;padding:6px 8px;font-size:10px;border-width:2px}.edit-actions{display:flex;justify-content:space-between;flex-basis:100%;margin-left:0;gap:7px}.iconbtn{flex:1;min-width:45px;height:40px}.sidebar{display:flex;flex-direction:column}.side-card{border-width:4px;padding:12px}.section-head{margin:-12px -12px 11px}.part-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.part-btn{min-height:77px}.part-emoji{font-size:29px}.part-name{font-size:9px}.ball-options{grid-template-columns:repeat(5,1fr)}.ball-option span.ball-name{font-size:9px}.bottom-note{font-size:10px}.progress-card{margin-bottom:10px}.modal{border-width:4px;padding:17px}.lv-grid{grid-template-columns:repeat(4,1fr);gap:5px}.lv-card{padding:8px 5px;min-height:73px}.lv-card small{font-size:9px}}
@media(max-width:360px){.brand{height:95px}.header-inner{min-height:124px}.header-actions{bottom:3px}.part-grid{grid-template-columns:repeat(3,1fr)}.ball-glyph{width:27px;height:27px;font-size:18px}.ball-option span.ball-name{font-size:8px}.playbtn{min-width:140px}}
/* Final touch-ups for narrow screens: clean logo and one-row game controls. */
@media(max-width:790px){.brand{background-image:url('assets/hero.webp');background-position:center center}.action-row{display:grid;grid-template-columns:minmax(0,1.43fr) minmax(0,1fr) minmax(0,.84fr);gap:7px}.action-row>.playbtn,.action-row>.secbtn{min-width:0;width:100%;min-height:46px;flex:none;white-space:normal;line-height:1.1;font-size:clamp(9px,2.65vw,12px);padding:5px 3px;text-align:center}.action-row .edit-actions{grid-column:1/-1;display:flex;justify-content:space-between;gap:7px}}
@media(max-width:490px){.header-inner{min-height:130px}.brand{height:103px;max-width:99%;width:99%}.action-row>.playbtn{font-size:11px}.action-row>.secbtn{font-size:9px}}
.part-emoji{display:flex;align-items:center;justify-content:center;height:49px}.part-img{width:60px;height:47px;object-fit:contain;border-radius:7px;max-width:100%}.ball-glyph{overflow:hidden}.ball-glyph .ball-img{width:35px;height:35px;object-fit:cover;border-radius:50%;display:block}.ball-glyph:has(.ball-img){box-shadow:0 2px 2px #0003;border:0;background:none}.ball-glyph:has(.ball-img) .ball-img{width:35px;height:35px}