:root{--grass: #1f7a3d;--grass-dark: #0b3d1a;--accent: #ffd23f;--teamA: #7fce99;--teamB: #e8e3d2}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;background:#07140b;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:500}.serif{font-family:Fraunces,Times New Roman,serif;font-optical-sizing:auto}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block;touch-action:none}.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:radial-gradient(circle at 50% 30%,#15512a,#07140b 70%);text-align:center}.screen.hidden{display:none}.card{background:#00000073;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px 20px;width:min(420px,92vw);display:flex;flex-direction:column;gap:14px}h1{font-size:26px;letter-spacing:.5px}h1 .ball{color:var(--accent)}.sub{opacity:.7;font-size:13px;line-height:1.5}label{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.7;text-align:left}input,select,button{font-size:16px;font-family:inherit}input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#ffffff0f;color:#fff}button{cursor:pointer;border:none;border-radius:12px;padding:14px;font-weight:700;background:var(--accent);color:#1a1300;transition:transform .08s ease,filter .15s ease}button:active{transform:scale(.97)}button.secondary{background:#ffffff1f;color:#fff}.row{display:flex;gap:10px}.row>*{flex:1}.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sizes button{background:#ffffff14;color:#fff;padding:14px 0}.sizes button.active{background:var(--accent);color:#1a1300}.opts{display:flex;gap:8px;flex-wrap:wrap}.opt{flex:1;min-width:56px;padding:11px 0;border-radius:10px;background:#ffffff14;color:#fff;font-weight:700}.opt.active{background:var(--accent);color:#1a1300}.swatch{width:38px;height:38px;border-radius:50%;padding:0;border:2px solid rgba(255,255,255,.25);flex:0 0 auto}.swatch.active{border-color:var(--accent);box-shadow:0 0 0 3px #ffd23f66;transform:scale(1.08)}.code{font-size:36px;font-weight:800;letter-spacing:8px;color:var(--accent);text-align:center}:root{--paper: #ede0c5;--card: #f7eed4;--ink: #14331e;--ink-soft: rgba(20,51,30,.55);--ink-faint: rgba(20,51,30,.16);--accent: #d6443a}.screen:has(.card.cute){background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),var(--paper)}.sky{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.clouds{position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:repeat-x;background-size:1200px 100%}.clouds-far{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='900' viewBox='0 0 1800 900'><defs><filter id='s' x='-10%25' y='-20%25' width='120%25' height='180%25'><feDropShadow dx='0' dy='10' stdDeviation='12' flood-color='%235d7a99' flood-opacity='0.25'/></filter></defs><g fill='%23ffffff' filter='url(%23s)' opacity='0.7'><g transform='translate(380 300)'><ellipse cx='-80' cy='12' rx='55' ry='34'/><ellipse cx='0' cy='-12' rx='62' ry='44'/><ellipse cx='68' cy='14' rx='52' ry='36'/></g><g transform='translate(1300 220)'><ellipse cx='-60' cy='8' rx='48' ry='32'/><ellipse cx='12' cy='-10' rx='58' ry='42'/><ellipse cx='75' cy='10' rx='48' ry='34'/></g></g></svg>");background-size:1800px 100%;opacity:.85;animation:drift-far 260s linear infinite}.clouds-near{display:none}@keyframes drift-far{0%{background-position-x:0}to{background-position-x:-1800px}}@keyframes drift-near{0%{background-position-x:0}to{background-position-x:-1800px}}.tree-silhouette{position:absolute;right:-40px;bottom:0;height:92vh;width:220px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 800'><g fill='%23253a25'><rect x='150' y='420' width='10' height='380'/><ellipse cx='150' cy='180' rx='52' ry='42'/><ellipse cx='128' cy='230' rx='58' ry='40'/><ellipse cx='152' cy='275' rx='55' ry='42'/><ellipse cx='128' cy='320' rx='60' ry='42'/><ellipse cx='150' cy='365' rx='55' ry='42'/><ellipse cx='130' cy='410' rx='62' ry='42'/><ellipse cx='150' cy='455' rx='58' ry='40'/><ellipse cx='130' cy='498' rx='55' ry='38'/></g></svg>") no-repeat center bottom / contain;transform-origin:bottom right;animation:sway 9s ease-in-out infinite;z-index:1}@keyframes sway{0%,to{transform:rotate(-.6deg)}50%{transform:rotate(.8deg)}}.card.cute{position:relative;z-index:2;background:var(--card);color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:36px 26px 28px;align-items:center;text-align:center;gap:14px;box-shadow:6px 6px 0 0 var(--ink);width:min(380px,90vw)}.card.cute>*{position:relative;z-index:1}.card.cute:before{display:none}.ball-ic{width:60px;height:60px;filter:drop-shadow(0 3px 0 var(--ink-faint))}.card.cute h1.display{font-family:Fraunces,serif;font-style:italic;font-weight:500;font-size:56px;letter-spacing:-1px;color:var(--ink);line-height:1;margin:-2px 0 4px}.card.cute .label{font-family:Inter,sans-serif;color:var(--card);background:var(--ink);font-size:10px;letter-spacing:3px;font-weight:600;text-transform:uppercase;padding:5px 10px;border-radius:999px;display:inline-block;align-self:center}.card.cute .hairline{width:100%;height:1px;background:var(--ink-faint);margin:4px 0 6px}.ball-em{font-size:56px;line-height:1;display:block;text-align:center}.woman-em{width:140px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 6px 12px rgba(20,51,30,.18))}.hero-stack{position:relative;width:100%;height:clamp(120px,38vw,220px);overflow:hidden}.hero-stack .eleven{position:absolute;left:50%;bottom:0;transform:translate(-50%) translateZ(0);font-family:Fraunces,Archivo Black,serif;font-weight:800;font-size:clamp(120px,40vw,220px);line-height:.78;letter-spacing:clamp(-10px,-1.6vw,-5px);background:linear-gradient(180deg,#d8d2c1,#a8a29a 45%,#6b6660 80%,#2e2a26);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;opacity:.5;-webkit-user-select:none;user-select:none}.hero-stack .ball-big{position:absolute;left:50%;bottom:0;transform:translate(-50%,-2%);font-size:clamp(64px,22vw,110px);line-height:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}.card.cute label{color:var(--ink-soft);font-weight:500;font-size:10px;letter-spacing:3px;text-transform:uppercase;text-align:center;display:block}.card.cute input{background:transparent;color:var(--ink);border:none;border-bottom:1.5px solid var(--ink-faint);border-radius:0;font-family:Fraunces,serif;font-weight:500;padding:10px 4px;text-align:center;font-size:22px;letter-spacing:.5px;width:100%}.card.cute input::placeholder{color:#14331e40;font-style:italic}.card.cute #passwd,.card.cute #passwd::placeholder{font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace;letter-spacing:3px;font-weight:600;font-style:normal;text-transform:lowercase}.card.cute input:focus{outline:none;border-bottom-color:var(--ink)}.card.cute .code{font-family:Fraunces,serif;font-style:italic;font-weight:500;color:var(--ink);font-size:68px;letter-spacing:6px;padding:4px 0;line-height:1}button.big{padding:16px;font-size:13px;border-radius:999px;width:100%}.card.cute button{background:var(--ink);color:var(--card);border:2px solid var(--ink);font-family:Inter,sans-serif;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;transition:transform .08s ease}.card.cute button:active{transform:scale(.97)}.card.cute button.secondary{background:var(--card);color:var(--ink)}.card.home{padding-top:44px;padding-bottom:32px;align-items:center}.polaroid{position:relative;background:#fbf6e8;padding:14px 14px 18px;border-radius:4px;box-shadow:0 1px #0000000a,0 14px 30px #3a322a38;transform:rotate(-3.5deg);display:inline-flex;flex-direction:column;align-items:center}.polaroid:before{content:"";position:absolute;top:-8px;left:22%;width:56px;height:22px;background:#d99a8a8c;transform:rotate(-6deg);box-shadow:0 1px 2px #0000000f}.polaroid:after{content:"";position:absolute;top:-8px;right:22%;width:48px;height:20px;background:#b9c3a38c;transform:rotate(7deg)}.frame{position:relative;width:180px;height:180px;display:grid;place-items:center;background:#fbf6e8}.card.cute .hero{line-height:1}.card.cute .hero .cat{width:150px;height:150px;display:block;animation:catbob 5s ease-in-out infinite;transform-origin:50% 60%}@keyframes catbob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.caption.scribble{font-family:Caveat,cursive;font-weight:500;font-size:22px;color:var(--ink-soft);margin-top:10px;transform:rotate(-2deg)}.scribble{font-family:Caveat,cursive}.err{color:#ff8080;font-size:13px;min-height:16px}#hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.scoreboard{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#00000080;padding:8px 16px;border-radius:999px;font-weight:800;font-size:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.scoreboard .a{color:var(--teamA)}.scoreboard .b{color:var(--teamB)}.scoreboard .clock{font-size:12px;opacity:.7;font-weight:500}.scoreboard .reset-btn{background:#ffffff2e;color:#fff;border:none;border-radius:999px;width:22px;height:22px;font-size:14px;line-height:1;margin-left:4px;cursor:pointer;display:grid;place-items:center;font-family:inherit;padding:0;pointer-events:auto}.scoreboard .reset-btn:active{transform:scale(.92)}.toast{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) scale(.6);font-size:12vw;font-weight:900;letter-spacing:2px;opacity:0;text-shadow:0 4px 24px rgba(0,0,0,.6);transition:all .25s ease;color:var(--accent)}.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.topbtns{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;display:flex;gap:8px;pointer-events:auto}.topleft{position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;pointer-events:auto;display:flex;gap:10px}.iconbtn{width:36px;height:36px;border-radius:999px;background:#f7eed4;color:#14331e;border:2px solid #14331e;box-shadow:2px 2px #14331e;font-size:15px;display:grid;place-items:center;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.iconbtn:active{transform:translate(2px,2px);box-shadow:0 0 #14331e}.iconbtn.muted{background:#2a3329;color:#d8d4c4}.iconbtn.disabled{opacity:.5}.pausedovl{position:absolute;top:0;right:0;bottom:0;left:0;z-index:12;display:grid;place-items:center;background:#00000073;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none}.resume-btn{pointer-events:auto;background:#f7eed4;color:#14331e;border:3px solid #14331e;border-radius:999px;padding:22px 44px;font-size:22px;font-weight:800;font-family:Inter,system-ui,sans-serif;letter-spacing:2px;box-shadow:6px 6px #14331e;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.resume-btn:active{transform:translate(4px,4px);box-shadow:2px 2px #14331e}.mode-btn{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;background:#f7eed4;color:#14331e;border:2px solid #14331e;border-radius:999px;box-shadow:2px 2px #14331e;padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.5px;font-family:Inter,system-ui,sans-serif;pointer-events:auto;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.mode-btn:active{transform:translate(2px,2px);box-shadow:0 0 #14331e}.mode-btn.practice{background:#14331e;color:#f7eed4}#joystick{position:absolute;bottom:8%;left:7%;width:130px;height:130px;pointer-events:auto;touch-action:none}.joy-base{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#ffffff1a;border:2px solid rgba(255,255,255,.25)}.joy-knob{position:absolute;width:56px;height:56px;border-radius:50%;background:#ffffff8c;left:37px;top:37px}#actions{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right));display:flex;flex-direction:row;gap:10px;pointer-events:auto}.abtn{position:relative;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;border:2px solid rgba(255,255,255,.35);background:#00000073;-webkit-user-select:none;user-select:none;touch-action:none;letter-spacing:.5px}.abtn span{position:relative;z-index:2;pointer-events:none}.abtn:active{transform:scale(.94)}.abtn.t-run,.abtn.t-pass,.abtn.t-kick,.abtn.t-throwin{background:#78d2968c;color:#f4ffe9;border-color:#ffffff73}.abtn .ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;pointer-events:none;--p: 0;background:conic-gradient(#ffd23f calc(var(--p) * 360deg),transparent 0);-webkit-mask:radial-gradient(transparent 64%,#000 65%);mask:radial-gradient(transparent 64%,#000 65%);opacity:0}.abtn.charging .ring{opacity:1}.spectate-tag{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#00000080;padding:6px 14px;border-radius:999px;font-size:12px}.hidden{display:none!important}