*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#b8d9ec;font-family:Arial,sans-serif;color:#163d33}canvas{display:block;touch-action:none}button{font:700 14px Arial;border:1px solid #b7c8bf;border-radius:8px;background:#f7f8ed;color:#163d33;padding:11px;cursor:pointer;touch-action:none;box-shadow:0 3px 0 #173d2d22}button:active{transform:translateY(2px);box-shadow:none}button:focus-visible{outline:3px solid #e9b64b;outline-offset:3px}button:disabled{opacity:.5}header{position:fixed;top:12px;left:12px;right:12px;padding:10px;display:flex;justify-content:space-between;align-items:start;gap:8px;background:#f5f5eae8;border-radius:10px;pointer-events:none}header button{pointer-events:auto;padding:8px;font-size:12px}header h1{margin:0;font-size:25px;letter-spacing:3px}header small{display:block;font-size:10px;margin-top:5px;max-width:185px}.top-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:155px}#status{position:fixed;bottom:142px;left:16px;right:16px;max-width:430px;margin:auto;padding:10px;text-align:center;font-size:12px;font-weight:bold;line-height:1.5;background:#173b32ef;color:#fff;border-radius:8px;pointer-events:none}#joystick{position:fixed;bottom:24px;left:18px;width:120px;height:120px;border:3px solid #f9fff2cc;border-radius:50%;background:#173d2d55;box-shadow:inset 0 0 0 2px #173d2d33;touch-action:none;user-select:none;-webkit-user-select:none}#joystickKnob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border:2px solid #fffce9;border-radius:50%;background:#e7bc60;box-shadow:0 3px 8px #172f3244;pointer-events:none}#actions{position:fixed;right:16px;bottom:24px;display:grid;justify-items:end;gap:8px}#actions button:not(#kick){padding:9px;font-size:12px}#kick{background:#e6b64d;border:3px solid #fff3cd;border-radius:50%;width:84px;height:84px;box-shadow:0 5px 0 #775b32;letter-spacing:1px}dialog{max-height:80vh;width:min(92vw,620px);border:0;border-radius:14px;padding:24px;background:#fafaf2;box-shadow:0 20px 80px #052b2baa}dialog::backdrop{background:#102c2377}dialog h2{margin:14px 0;font-size:25px}dialog h3{font-size:17px}dialog p{font-size:14px;line-height:1.5}.back{border:0;background:none;padding:0;font-size:13px;box-shadow:none}#clubs{display:grid;grid-template-columns:1fr 1fr;gap:8px}#clubs button{text-align:left;border-left:6px solid var(--kit);box-shadow:none;min-height:50px;font-size:13px}#clubs button[aria-pressed=true]{background:#dbf2d4}#clubSource{display:inline-block;margin-top:12px;color:#275f50}#close{margin:12px 0;width:100%}#profileDialog label,#rosterDialog label{display:block;margin:14px 0 7px;font-size:14px}#profileDialog input:not([type=checkbox]),#profileDialog select,#rosterDialog select{display:block;width:100%;padding:12px;margin-top:6px;font:inherit;border:1px solid #bcc9bf;border-radius:6px;background:white}#profileDialog button,#rosterDialog button{margin-top:12px}#profileDialog small{display:block;color:#596b60}#roster p{margin:6px 0;font-size:13px}#loading{position:fixed;inset:0;display:grid;place-content:center;background:#153c2c;color:white;text-align:center;z-index:10}#loading h1{font-size:52px}.hidden,[hidden]{display:none!important}@media(max-width:420px){header{padding:8px;gap:4px}#joystick{bottom:18px;left:14px}#actions{right:10px;bottom:18px}}@media(prefers-reduced-motion:reduce){button:active{transform:none}}

#aimDialog{max-width:340px}#aimGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:5px solid #234438;padding:10px;background:#6eac69}#aimGrid button{height:38px;padding:4px;font-size:22px}#save{background:#75d6d1;border:3px solid white!important;border-radius:50%;width:70px;height:70px}

#experienceHud{width:150px;height:20px;pointer-events:none}#experienceHud canvas{width:150px;height:20px}

#ballShop{border-radius:0 8px 8px 0;background:#e6b64d;border:2px solid #fff4cb;z-index:1}
#boxDialog{padding:20px;width:min(94vw,620px)}.box-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.box-heading h2{font-size:22px}.ball-window{position:relative;overflow:hidden;height:144px;background:#173d2d;border:2px solid #d6b15a;border-radius:8px}.ball-reel{display:flex;gap:8px;width:max-content;padding:8px 0}.ball-window i{position:absolute;top:0;bottom:0;left:50%;border-left:3px solid #ffd55d;pointer-events:none}
.ball-card{width:104px;flex:none;text-align:center;padding:7px 3px;color:#173d2d;background:#f1f4e8;border-radius:5px}.ball-card b{display:block;font-size:12px;margin:6px 0}.ball-card small{display:block;font-size:10px}.ball-preview{display:block;width:48px;height:48px;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ffffffaa,transparent 45%),radial-gradient(circle at 68% 68%,var(--patch) 0 16%,transparent 17%),radial-gradient(circle at 27% 40%,var(--patch) 0 17%,transparent 18%),var(--ball);box-shadow:inset -5px -5px 8px #0005}.no-ball{background:none;box-shadow:none;font-size:36px;color:#6b7a73}.buy-balls{display:flex;gap:8px;margin-top:14px}.buy-balls button{flex:1;background:#e6b64d;padding:12px 6px}#ballInventory,#bootsInventory{display:flex;flex-wrap:wrap;gap:8px}#ballInventory>button,#bootsInventory>button{padding:4px;font-size:11px}#ballInventory>button[aria-pressed=true],#bootsInventory>button[aria-pressed=true]{outline:3px solid #26914f}#ballInventory .ball-card,#bootsInventory .ball-card{background:none}#ballOdds{margin-top:12px}#boxResult{min-height:42px}#boxDialog details{margin-top:20px}#boxDialog summary{cursor:pointer}

.openings{display:grid;gap:8px}.openings:not([data-count="1"]){grid-template-columns:repeat(2,minmax(0,1fr))}.openings:not([data-count="1"]) .ball-window{height:86px}.openings:not([data-count="1"]) .ball-preview{width:28px;height:28px}.openings:not([data-count="1"]) .ball-card{padding:3px}.openings:not([data-count="1"]) .ball-card b{margin:3px 0;font-size:11px}.openings:not([data-count="1"]) .ball-reel{padding:4px 0}

.ball-tabs{display:flex;gap:8px;margin:10px 0}.ball-tabs button{flex:1}.ball-tabs [aria-selected=true]{background:#173d2d;color:white}.ball-card{border-top:3px solid var(--rarity)}.openings{margin-top:14px}.skin-gold .ball-preview,.skin-emerald .ball-preview{box-shadow:inset -6px -6px 9px #0006,0 0 10px var(--ball)}.skin-plasma .ball-preview,.skin-nebula .ball-preview,.skin-diamond .ball-preview{position:relative;box-shadow:inset -5px -5px 8px #0005,0 0 13px var(--ball)}.skin-plasma .ball-preview:after,.skin-nebula .ball-preview:after,.skin-diamond .ball-preview:after{content:"";position:absolute;inset:-5px;border:2px solid var(--patch);border-radius:50%;transform:rotate(-25deg) scaleY(.5);box-shadow:0 0 6px var(--ball)}.skin-diamond .ball-preview{background:conic-gradient(from 30deg,#ecffff,#45b5df,#f4ffff,#83ddff,#fff,#48a5ce,#ecffff)}.skin-flame .ball-preview{background:repeating-conic-gradient(#ffdc65 0deg 25deg,#eb4a20 25deg 50deg);box-shadow:inset -6px -6px 9px #7a100a99}.skin-nebula .ball-preview{background:radial-gradient(circle at 30% 30%,white 0 2%,transparent 4%),radial-gradient(circle at 65% 70%,white 0 3%,transparent 5%),radial-gradient(ellipse at center,#b16edb,#2e2079 70%)}

#shopDock{position:fixed;left:0;top:30%;display:grid;gap:8px;z-index:1;justify-items:start}#shopDock button{font-size:12px;padding:10px;border-radius:0 8px 8px 0}#inventoryDialog{width:min(94vw,620px);padding:20px}.shop-section h3{margin:12px 0 8px}.prize-strip{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}.prize-strip .ball-card{width:104px;scroll-snap-align:start}.prize-strip .ball-preview{width:32px;height:32px}.shop-divider{height:8px;border:0;background:#ce3232;margin:20px 0}.boot-preview{display:block;position:relative;width:48px;height:25px;margin:12px auto 15px;background:linear-gradient(125deg,var(--patch),var(--ball) 45%);border-radius:5px 8px 4px 3px;transform:rotate(-12deg);border-bottom:5px solid var(--patch);box-shadow:inset -4px -3px 5px #0005}.boot-preview:before{content:"";position:absolute;left:4px;top:-10px;width:18px;height:15px;border:4px solid var(--ball);border-bottom:0;border-radius:3px}.boot-preview:after{content:"";position:absolute;bottom:-8px;left:5px;width:5px;height:5px;background:var(--patch);box-shadow:14px 0 var(--patch),29px 0 var(--patch)}.skin-plasma .boot-preview,.skin-nebula .boot-preview,.skin-diamond .boot-preview{filter:drop-shadow(0 0 5px var(--ball))}.skin-diamond .boot-preview{background:conic-gradient(#fff,#8bd7f0,#fff,#4baccd,#fff)}

#shopDock #ballShop{position:relative;background:#d52e35;color:#fff;border:2px solid #ff9292;isolation:isolate}
#shopDock #ballShop:before{content:"";position:absolute;inset:-4px;border-radius:0 10px 10px 0;background:conic-gradient(from var(--shop-hue),#ff6e6e,#ffd46b,#79e8ba,#7aaaff,#df8cff,#ff6e6e);filter:blur(5px);opacity:.5;z-index:-1;animation:shop-aura 5s linear infinite}
#shopDock #openInventory{background:#835438;color:#fff4df;border:2px solid #bb8c62}
@property --shop-hue{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes shop-aura{to{--shop-hue:360deg}}
@media(prefers-reduced-motion:reduce){#shopDock #ballShop:before{animation:none}}

#boxDialog .box-heading{position:sticky;top:-20px;z-index:3;background:#fafaf2;margin:-20px -20px 12px;padding:12px 20px;border-bottom:1px solid #bcc9bf}
#closeBox{min-width:92px;min-height:44px;background:#b52f35;color:white;border:0;flex-shrink:0}

#worldCupBanner{position:fixed;top:150px;left:50%;transform:translateX(-50%);padding:8px 12px;background:#efd167;color:#193e33;font-weight:bold;font-size:12px;border-radius:6px;pointer-events:none}#worldCupControl{background:#efd167}

#matchDialog label{display:block;margin:14px 0;font-size:15px}#matchDialog input,#matchDialog select{display:block;width:100%;padding:12px;margin-top:6px;font:inherit}#matchDialog button{margin:6px}