:root{--bg:#f0b840;--bg2:#e8a020;--card:#fffaf0;--card-border:rgba(122,56,0,.12);--ink:#264653;--ink2:#7a3800;--gold:#e9c46a;--green:#2a9d8f;--green-dark:#1a7a6d;--red:#e63946;--teal:#1a7a6d;--orange:#f4a361;--coral:#e76f51;--brown:#a06030;--skin:#d4a574;--shadow:rgba(122,56,0,.15);--shadow-lg:rgba(0,0,0,.2);--white:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;padding:0;height:100%;width:100%;font-family:"Rubik",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;background:var(--bg2);color:var(--ink);overflow:hidden;touch-action:manipulation;overscroll-behavior:none}
::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none;scrollbar-color:transparent transparent}
#app{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:max(env(safe-area-inset-top),4px) max(env(safe-area-inset-right),8px) max(env(safe-area-inset-bottom),4px) max(env(safe-area-inset-left),8px);background:linear-gradient(180deg,var(--bg) 0%,#f0c050 50%,var(--bg2) 100%)}
.scoreboard{display:flex;justify-content:space-between;align-items:center;padding:clamp(8px,1.5vh,14px) clamp(10px,2vw,16px);background:var(--card);border-radius:14px;margin:6px 10px 4px;position:relative;z-index:2;flex-shrink:0;box-shadow:0 4px 16px var(--shadow);border:2px solid var(--card-border)}
.team{text-align:center;flex:1;min-width:0;padding:4px 8px;border-radius:12px}
.team.batting-side{background:rgba(26,122,109,.1);border:1px solid rgba(26,122,109,.2)}
.team .label{font-size:clamp(9px,1.2vh,11px);color:#7a3800;letter-spacing:1.5px;font-weight:700;word-break:break-word;text-transform:uppercase}
.team .score{font-size:clamp(26px,4.2vh,36px);font-weight:900;color:#1a1a1a;text-shadow:0 1px 0 rgba(255,255,255,.5);line-height:1;font-family:"Luckiest Guy","Rubik",cursive}
.team .score.pop{animation:sp .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes sp{0%{transform:scale(1)}40%{transform:scale(1.3);color:#e8a020}100%{transform:scale(1)}}
.team .balls{font-size:clamp(9px,1.1vh,11px);color:rgba(122,56,0,.5);margin-top:2px;font-weight:600}
.team .bot-lvl{font-size:9px;color:#e8a020;font-weight:700;margin-top:1px}
.team .current-player{font-size:clamp(8px,1vh,10px);color:#1a7a6d;font-weight:700;margin-top:1px}
.vs{font-size:clamp(11px,1.3vh,14px);color:rgba(122,56,0,.3);padding:0 8px;font-weight:900;font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:1px}
.batting-indicator{display:inline-block;font-size:clamp(8px,1vh,10px);background:linear-gradient(135deg,#1a7a6d,#125c52);color:#fff;padding:2px 8px;border-radius:10px;margin-top:3px;font-weight:800;box-shadow:0 2px 8px rgba(26,122,109,.3);letter-spacing:.5px}
.free-hit-banner{text-align:center;padding:4px 10px;font-size:clamp(11px,1.4vh,13px);font-weight:800;background:linear-gradient(90deg,transparent,rgba(220,38,38,.1),transparent);color:#dc2626;letter-spacing:1px;display:none;flex-shrink:0;animation:fp 1s ease-in-out infinite}
.free-hit-banner.show{display:block}
@keyframes fp{0%,100%{opacity:1}50%{opacity:.6}}
.target-banner{text-align:center;padding:4px 10px;font-size:clamp(11px,1.4vh,13px);font-weight:700;background:linear-gradient(90deg,transparent,rgba(26,122,109,.1),transparent);color:#1a7a6d;display:none;flex-shrink:0}
.target-banner.show{display:block}
.status-bar{display:flex;align-items:center;justify-content:center;padding:4px 12px;min-height:26px;flex-shrink:0;gap:8px}
.status{flex:1;text-align:center;font-size:clamp(12px,1.5vh,14px);font-weight:700;color:#3a1e00}
.status .hl{color:#e8a020;font-weight:900}
.leave-btn{background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.25);color:#dc2626;padding:4px 10px;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.back-btn{background:rgba(255,250,240,.7);border:1.5px solid rgba(122,56,0,.15);color:var(--ink);padding:8px 14px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;-webkit-appearance:none;touch-action:manipulation;transition:all .15s;pointer-events:auto}
.back-btn:active{transform:scale(.95);background:rgba(255,255,255,.05)}
.back-btn:hover{border-color:rgba(245,158,11,.3);color:#f59e0b}
.arena{flex:1;display:flex;justify-content:space-around;align-items:center;padding:4px 6px;position:relative;min-height:0;overflow:hidden;border-radius:16px;margin:0 4px}
.arena-stadium{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden}
.arena-stadium svg{width:100%;height:100%;display:block}
.arena::after{content:'';position:absolute;bottom:0;left:0;right:0;height:20%;background:linear-gradient(180deg,transparent 0%,rgba(255,250,240,.15) 60%,rgba(255,250,240,.25) 100%);z-index:1;pointer-events:none;border-radius:inherit}
.arena .player-side{position:relative;z-index:3}
.player-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;z-index:3}
/* Player cards */
.player-card{position:absolute;z-index:4;background:var(--card);border-radius:14px;padding:10px 14px;min-width:100px;text-align:center;box-shadow:0 4px 16px var(--shadow);border:2px solid var(--card-border);animation:fadeUp .4s ease both}
.pc-left{left:4%;top:8%}
.pc-right{right:4%;top:8%}
.pc-header{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}
.pc-icon{font-size:16px}
.pc-name{font-size:clamp(10px,1.4vh,13px);font-weight:800;color:var(--ink);letter-spacing:.5px}
.pc-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;display:inline-block}
.pc-dot.online{background:var(--teal);box-shadow:0 0 6px rgba(42,157,143,.5)}
.pc-score{font-size:clamp(22px,3.8vh,32px);font-weight:900;color:var(--ink);font-family:"Luckiest Guy","Rubik",cursive;line-height:1}
.pc-balls{font-size:clamp(8px,1.1vh,10px);color:rgba(122,56,0,.5);font-weight:600;margin-top:2px}
.pc-badge{font-size:clamp(7px,.9vh,9px);font-weight:800;color:var(--teal);background:rgba(42,157,143,.1);border:1px solid rgba(42,157,143,.2);border-radius:8px;padding:2px 8px;margin-top:4px;display:inline-block;letter-spacing:.5px}
.pc-left .pc-badge{color:var(--coral);background:rgba(231,111,81,.1);border-color:rgba(231,111,81,.2)}
/* Center card */
.center-card{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:16px;padding:14px 20px;min-width:180px;text-align:center;box-shadow:0 6px 24px var(--shadow-lg);border:2.5px solid var(--card-border);animation:fadeUp .5s .1s ease both}
.cc-brand{font-family:"Luckiest Guy","Rubik",cursive;font-size:clamp(14px,2.2vh,18px);color:var(--coral);letter-spacing:1px;margin-bottom:6px}
.cc-stats{display:flex;justify-content:center;gap:12px;font-size:clamp(9px,1.2vh,11px);color:var(--ink);font-weight:700;margin-bottom:8px;letter-spacing:.5px}
.cc-stats b{color:var(--teal);font-weight:900}
.cc-target{display:flex;align-items:center;justify-content:center;gap:0}
.cc-col{flex:1;text-align:center}
.cc-sep{width:1px;height:32px;background:rgba(122,56,0,.12);margin:0 10px}
.cc-label{font-size:clamp(7px,.9vh,9px);color:rgba(122,56,0,.5);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.cc-val{font-size:clamp(20px,3.2vh,28px);font-weight:900;color:var(--ink);font-family:"Luckiest Guy","Rubik",cursive;line-height:1.2}
.player-side .name{font-size:clamp(11px,1.5vh,14px);font-weight:900;letter-spacing:2px;color:#1a1a1a;text-align:center;cursor:pointer;transition:color .2s;text-shadow:0 1px 0 rgba(255,255,255,.5);padding:4px 14px;background:rgba(255,255,255,.8);border-radius:12px;margin-bottom:4px;font-family:"Rubik",sans-serif;border:1.5px solid rgba(122,56,0,.1);pointer-events:auto}
.player-side .name:hover{color:#e8a020}
.hand-wrap{width:clamp(140px,30vh,220px);height:clamp(170px,38vh,280px);position:relative;display:flex;justify-content:center;align-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}
.hand-wrap.shake{animation:hs .35s ease-in-out infinite}
.hand-wrap.reveal{animation:rp .6s cubic-bezier(.34,1.8,.64,1)}
.hand-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}
.hand-wrap svg.hand-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));transition:filter .3s}
.hand-wrap .arena-hand{width:100%;height:100%}
.hand-wrap .arena-hand svg{width:100%;height:100%;display:block}
.hand-wrap img[style*="display:none"]+.css-hand,.hand-wrap img[src=""]+.css-hand{display:none}
.hand-wrap img:not([style*="display:none"]):not([src=""])+.css-hand{display:none}
.hand-wrap:not(:has(img:not([style*="display:none"]):not([src=""]))) svg.hand-svg{display:block}
.hand-wrap:has(img:not([style*="display:none"]):not([src=""])) svg.hand-svg{display:none}
@keyframes hs{0%,100%{transform:translateY(0) rotate(0) rotateY(0)}25%{transform:translateY(-8px) rotate(-4deg) rotateY(-3deg)}75%{transform:translateY(-8px) rotate(4deg) rotateY(3deg)}}
@keyframes rp{0%{transform:scale(.5) translateX(var(--from,0px));opacity:0}60%{transform:scale(1.1) translateX(0);opacity:1}100%{transform:scale(1) translateX(0);opacity:1}}
@keyframes handSlideL{0%{transform:translateX(-120px) scale(.6);opacity:0}60%{transform:translateX(8px) scale(1.05);opacity:1}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes handSlideR{0%{transform:translateX(120px) scale(.6);opacity:0}60%{transform:translateX(-8px) scale(1.05);opacity:1}100%{transform:translateX(0) scale(1);opacity:1}}
/* Stadium clouds */
.stadium-clouds{position:absolute;top:0;left:0;right:0;height:25%;z-index:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;background:rgba(255,255,255,.75);border-radius:50%;filter:blur(2px)}
.cloud::before,.cloud::after{content:'';position:absolute;background:rgba(255,255,255,.75);border-radius:50%}
.cloud1{width:70px;height:28px;top:8%;left:15%;animation:cloudDrift 25s linear infinite}
.cloud1::before{width:40px;height:22px;top:-10px;left:12px}
.cloud1::after{width:35px;height:18px;top:-6px;right:8px}
.cloud2{width:55px;height:22px;top:5%;left:55%;animation:cloudDrift 30s linear infinite 5s}
.cloud2::before{width:32px;height:18px;top:-8px;left:10px}
.cloud2::after{width:28px;height:14px;top:-4px;right:6px}
.cloud3{width:45px;height:18px;top:12%;left:78%;animation:cloudDrift 22s linear infinite 12s}
.cloud3::before{width:28px;height:14px;top:-6px;left:8px}
.cloud3::after{width:22px;height:12px;top:-3px;right:5px}
@keyframes cloudDrift{0%{transform:translateX(0)}50%{transform:translateX(30px)}100%{transform:translateX(0)}}
/* Stadium floodlights */
.stadium-lights{position:absolute;top:0;left:0;right:0;height:60px;z-index:0;display:flex;justify-content:space-between;padding:0 4%;pointer-events:none}
.light{position:relative;width:50px;height:100%}
.light::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:44px;background:linear-gradient(180deg,#666,#444);border-radius:2px}
.light::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:36px;background:linear-gradient(180deg,rgba(200,210,180,.85) 0%,rgba(180,195,165,.7) 100%);border:3px solid #555;border-radius:4px;box-shadow:0 0 20px rgba(255,250,230,.3),inset 0 0 8px rgba(255,250,230,.2);background-image:radial-gradient(circle,rgba(255,255,255,.6) 2px,transparent 2px);background-size:8px 8px;background-position:3px 3px}
/* Number reveal overlay */
.number-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;pointer-events:none;opacity:0;transition:opacity .2s}
.number-reveal.show{opacity:1}
.nr-num{font-size:clamp(70px,16vh,120px);font-weight:900;color:#7a3800;text-shadow:0 0 30px rgba(232,160,32,.6),0 4px 20px rgba(0,0,0,.3);animation:nrPop .5s cubic-bezier(.34,1.56,.64,1);line-height:1;font-family:"Luckiest Guy","Rubik",cursive}
.nr-text{font-size:clamp(18px,4vh,28px);font-weight:900;color:#e8a020;letter-spacing:6px;text-transform:uppercase;animation:nrPop .5s cubic-bezier(.34,1.56,.64,1) .1s both;font-family:"Luckiest Guy","Rubik",cursive}
@keyframes nrPop{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.2) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
#resultOverlay{background:#e8a020;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23d49018' stroke-width='1.5' opacity='0.25'/%3E%3C/svg%3E");background-size:56px 100px;backdrop-filter:none;-webkit-backdrop-filter:none}
#resultOverlay h1{color:#7a3800}
#resultOverlay p{color:rgba(122,56,0,.7)}
#resultOverlay button{background:linear-gradient(135deg,#1a7a6d,#125c52);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.3)}
#resultOverlay .secondary{background:rgba(255,255,255,.7);color:#3a1e00;border:1.5px solid rgba(122,56,0,.2)}
.result-celebration{position:absolute;top:0;left:0;right:0;height:30%;background:radial-gradient(ellipse at center top,rgba(232,160,32,.2) 0%,transparent 70%);pointer-events:none;z-index:0}
.gesture-label{font-size:clamp(12px,1.6vh,15px);font-weight:900;min-height:20px;color:#7a3800;opacity:0;transform:translateY(8px);transition:all .35s ease;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.5);font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:1px}
.gesture-label.show{opacity:1;transform:translateY(0)}
.timer-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(64px,12vh,92px);height:clamp(64px,12vh,92px);pointer-events:none}
.timer-circle{width:100%;height:100%;transform:rotate(-90deg)}
.timer-bg{fill:none;stroke:rgba(122,56,0,.15);stroke-width:6}
.timer-fg{fill:none;stroke:url(#tg);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .08s linear}
.timer-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,4vh,32px);font-weight:900;color:#1a1a1a;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.countdown{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:clamp(80px,16vh,130px);font-weight:900;color:#e8a020;text-shadow:0 0 40px rgba(232,160,32,.8),0 4px 20px rgba(0,0,0,.3);pointer-events:none;z-index:12;opacity:0;font-family:"Luckiest Guy","Rubik",cursive}
.countdown.go{animation:cp .9s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes cp{0%{transform:translate(-50%,-50%) scale(0);opacity:0}30%{transform:translate(-50%,-50%) scale(1.3);opacity:1}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
.controls{padding:10px 12px 10px;flex-shrink:0;background:rgba(255,255,255,.85);border-radius:18px;margin:4px 4px 0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(122,56,0,.1);box-shadow:0 4px 16px rgba(122,56,0,.12)}
.gesture-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(5px,1.2vw,10px)}
.gesture-btn{background:linear-gradient(180deg,#f5f0e8,#ebe5d8);border:3px solid #c0b8a8;color:#1a1a1a;border-radius:20px;padding:clamp(8px,1.6vh,14px) 4px;font-size:14px;font-weight:800;text-align:center;cursor:pointer;transition:all .15s;box-shadow:0 4px 0 #b8b0a0,0 6px 12px rgba(0,0,0,.2);-webkit-appearance:none;touch-action:manipulation;position:relative;overflow:hidden;font-family:"Rubik",sans-serif;pointer-events:auto}
.gesture-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 60%);pointer-events:none;border-radius:inherit}
.gesture-btn:active:not(.disabled){transform:translateY(3px);box-shadow:0 1px 0 #b8b0a0}
.gesture-btn.selected{background:linear-gradient(180deg,#f59e0b,#d97706);color:#fff;border-color:#b45309;box-shadow:0 4px 0 #92400e,0 0 28px rgba(245,158,11,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.gesture-btn.disabled{opacity:.25;pointer-events:none}
.gesture-btn .big{font-size:clamp(22px,4vh,32px);display:block;line-height:1;font-family:"Luckiest Guy","Rubik",cursive}
.gesture-btn .small{font-size:clamp(7px,1vh,9px);color:#6b6560;margin-top:2px;display:block;font-weight:700}
.gesture-btn.selected .small{color:rgba(255,255,255,.85)}
.gesture-btn[data-val="1"]{border-color:#4caf50}
.gesture-btn[data-val="2"]{border-color:#2196f3}
.gesture-btn[data-val="3"]{border-color:#2196f3}
.gesture-btn[data-val="4"]{border-color:#ffc107}
.gesture-btn[data-val="5"]{border-color:#4caf50}
.gesture-btn[data-val="6"]{border-color:#ffc107}
@keyframes oi{from{opacity:0}to{opacity:1}}
.overlay{position:fixed;inset:0;background:rgba(38,70,83,.94);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 16px;padding-bottom:max(env(safe-area-inset-bottom),20px);z-index:12;text-align:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow-y:auto;animation:oi .4s ease;scroll-behavior:smooth;max-height:100vh;max-height:100dvh;-webkit-overflow-scrolling:touch}
.overlay.hidden{display:none!important}
#menuOverlay{background:transparent;justify-content:center;backdrop-filter:none;-webkit-backdrop-filter:none}
#menuOverlay::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(38,70,83,.15) 0%,rgba(38,70,83,0) 60%);pointer-events:none!important;z-index:-1}
#menuOverlay>*{max-width:340px;width:100%}
#offlineSetup,#onlineLobby,#matchmakingOverlay,#waitingOverlay,#teamOverlay,#teamBuilderOverlay,#tossOverlay,#mcOverlay,#inningsOverlay,#inningsBreakOverlay,#playerSelectOverlay,#leaveOverlay,#usernameOverlay,#roleAssignOverlay,#tutorialOverlay{background:rgba(38,70,83,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#offlineSetup h1,#onlineLobby h1,#matchmakingOverlay h1,#waitingOverlay h1,#teamOverlay h1,#teamBuilderOverlay h1,#tossOverlay h1,#mcOverlay h1,#inningsOverlay h1,#inningsBreakOverlay h1,#playerSelectOverlay h1,#leaveOverlay h1,#usernameOverlay h1,#roleAssignOverlay h1,#tutorialOverlay h1{color:#f8fafc}
#offlineSetup h2,#onlineLobby h2,#matchmakingOverlay h2,#waitingOverlay h2,#teamOverlay h2,#teamBuilderOverlay h2,#tossOverlay h2,#mcOverlay h2,#inningsOverlay h2,#inningsBreakOverlay h2,#playerSelectOverlay h2,#leaveOverlay h2,#usernameOverlay h2,#roleAssignOverlay h2,#tutorialOverlay h2{color:var(--ink)}
#offlineSetup p,#onlineLobby p,#matchmakingOverlay p,#waitingOverlay p,#teamOverlay p,#teamBuilderOverlay p,#tossOverlay p,#mcOverlay p,#inningsOverlay p,#inningsBreakOverlay p,#playerSelectOverlay p,#leaveOverlay p,#usernameOverlay p,#roleAssignOverlay p,#tutorialOverlay p{color:rgba(122,56,0,.6)}
#offlineSetup button,#onlineLobby button,#matchmakingOverlay button,#waitingOverlay button,#teamOverlay button,#teamBuilderOverlay button,#tossOverlay button,#mcOverlay button,#inningsOverlay button,#inningsBreakOverlay button,#playerSelectOverlay button,#leaveOverlay button,#usernameOverlay button,#roleAssignOverlay button,#tutorialOverlay button{background:linear-gradient(135deg,var(--teal),#125c52);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.15),0 4px 16px rgba(0,0,0,.1)}
#offlineSetup button:active,#onlineLobby button:active,#matchmakingOverlay button:active,#waitingOverlay button:active,#teamOverlay button:active,#teamBuilderOverlay button:active,#tossOverlay button:active,#mcOverlay button:active,#inningsOverlay button:active,#inningsBreakOverlay button:active,#playerSelectOverlay button:active,#leaveOverlay button:active,#usernameOverlay button:active,#roleAssignOverlay button:active,#tutorialOverlay button:active{box-shadow:0 2px 0 rgba(0,0,0,.15)}
#offlineSetup .secondary,#onlineLobby .secondary,#matchmakingOverlay .secondary,#waitingOverlay .secondary,#teamOverlay .secondary,#teamBuilderOverlay .secondary,#tossOverlay .secondary,#mcOverlay .secondary,#inningsOverlay .secondary,#inningsBreakOverlay .secondary,#playerSelectOverlay .secondary,#leaveOverlay .secondary,#usernameOverlay .secondary,#roleAssignOverlay .secondary,#tutorialOverlay .secondary{background:rgba(255,250,240,.8);color:var(--ink);border:1.5px solid var(--card-border)}
#offlineSetup input,#onlineLobby input,#teamBuilderOverlay input,#usernameOverlay input{background:rgba(255,255,255,.9);border:1.5px solid var(--card-border);color:var(--ink)}
#offlineSetup input:focus,#onlineLobby input:focus,#teamBuilderOverlay input:focus,#usernameOverlay input:focus{border-color:var(--teal)}
#offlineSetup .team-size-btn{background:rgba(255,250,240,.7);border:1.5px solid var(--card-border);color:var(--ink)}
#offlineSetup .team-size-btn.active{background:linear-gradient(135deg,var(--teal),#125c52);color:#fff;border-color:rgba(42,157,143,.5)}
#menuOverlay{background:#e8a020;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23d49018' stroke-width='1.5' opacity='0.25'/%3E%3C/svg%3E");background-size:56px 100px;backdrop-filter:none;-webkit-backdrop-filter:none;color:#1a1a1a;padding-bottom:max(env(safe-area-inset-bottom),80px)}
#menuOverlay h1{color:#7a3800}
#menuOverlay h2{color:#5a2800}
#menuOverlay p{color:rgba(26,26,26,.7)}
.overlay h1{font-size:clamp(22px,3.2vh,28px);margin:0 0 8px;color:var(--ink);font-weight:900;font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:1px}
.game-title{font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:2px}
.overlay h2{font-size:clamp(13px,1.8vh,16px);margin:10px 0 4px;color:var(--ink);font-weight:700;font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:1px}
.overlay p{font-size:clamp(12px,1.6vh,14px);color:rgba(122,56,0,.6);margin:5px 0;line-height:1.5;max-width:320px}
.overlay input{background:rgba(255,255,255,.85);border:1.5px solid rgba(122,56,0,.15);color:#1a1a1a;padding:11px 14px;border-radius:12px;font-size:15px;font-weight:600;text-align:center;width:100%;max-width:260px;margin:6px 0;outline:none;-webkit-appearance:none;transition:border-color .2s}
.overlay input:focus{border-color:#e8a020}
.overlay button{margin-top:10px;background:linear-gradient(135deg,var(--teal),#125c52);color:#fff;border:none;padding:clamp(11px,1.6vh,14px) 26px;font-size:clamp(13px,1.8vh,16px);font-weight:800;border-radius:14px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15),0 4px 16px rgba(0,0,0,.1);width:100%;max-width:260px;-webkit-appearance:none;touch-action:manipulation;transition:all .15s;font-family:"Rubik",sans-serif;pointer-events:auto;position:relative;z-index:1}
.overlay button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.overlay button.secondary{background:rgba(255,250,240,.8);color:var(--ink);box-shadow:none;border:1.5px solid var(--card-border)}
.overlay button.secondary:hover{border-color:rgba(122,56,0,.3);background:rgba(255,250,240,.95)}
.overlay button.danger{background:rgba(230,57,70,.12);color:#c1121f;box-shadow:none;border:1.5px solid rgba(230,57,70,.25)}
.overlay button.small{padding:9px 18px;font-size:13px;max-width:200px}
.overlay button:disabled{opacity:.4;pointer-events:none}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;width:100%;max-width:300px}
.mode-grid.three-col{grid-template-columns:1fr 1fr 1fr}
.mode-btn{background:rgba(255,255,255,.85);border:2px solid rgba(122,56,0,.15);color:#3a1e00;padding:14px 8px;border-radius:16px;cursor:pointer;text-align:center;-webkit-appearance:none;touch-action:manipulation;transition:all .2s cubic-bezier(.34,1.56,.64,1);backdrop-filter:blur(4px);box-shadow:0 4px 12px rgba(122,56,0,.15);pointer-events:auto;position:relative;z-index:1}
.mode-btn:active{transform:scale(.97)}
.mode-btn .icon{font-size:28px;display:block;margin-bottom:4px}
.mode-btn .title{font-size:13px;font-weight:800;display:block;letter-spacing:.5px}
.mode-btn .desc{font-size:10px;color:rgba(58,30,0,.6);display:block;margin-top:3px;font-weight:600}
.share-box{background:rgba(255,250,240,.6);border:1px dashed rgba(122,56,0,.15);padding:10px;border-radius:12px;margin:10px 0;word-break:break-all;font-size:12px;color:var(--coral);font-weight:600;max-width:280px}
.player-list{max-height:clamp(120px,22vh,200px);overflow-y:auto;width:100%;max-width:280px;background:rgba(255,250,240,.5);border-radius:12px;padding:8px;margin:8px 0}
.player-item{padding:6px 8px;background:rgba(255,250,240,.8);margin:3px 0;border-radius:8px;font-size:11px;display:flex;justify-content:space-between;color:var(--ink)}
.coin-container{width:clamp(100px,16vh,140px);height:clamp(100px,16vh,140px);margin:20px auto;position:relative;perspective:800px}
.coin-container::after{content:'';position:absolute;bottom:-8px;left:15%;right:15%;height:12px;background:radial-gradient(ellipse,rgba(0,0,0,.4) 0%,transparent 70%);border-radius:50%;filter:blur(3px);z-index:0}
.coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .1s;z-index:1}
.coin.flipping{animation:coinFlip 2.8s cubic-bezier(.25,.1,.25,1) forwards}
.coin.landing{animation:coinLand .4s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes coinLand{0%{transform:var(--coin-final) translateY(-8px) scale(1.05)}50%{transform:var(--coin-final) translateY(2px) scale(.98)}100%{transform:var(--coin-final) translateY(0) scale(1)}}
@keyframes coinFlip{0%{transform:rotateY(0) translateY(0) scale(1)}10%{transform:rotateY(90deg) translateY(-60px) scale(1.1)}30%{transform:rotateY(540deg) translateY(-30px) scale(1.05)}50%{transform:rotateY(900deg) translateY(-15px) scale(1.02)}70%{transform:rotateY(1260deg) translateY(-5px) scale(1.01)}85%{transform:rotateY(1620deg) translateY(-2px) scale(1)}100%{transform:rotateY(1800deg) translateY(0) scale(1)}}
.coin-face{position:absolute;width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,2vh,16px);font-weight:900;letter-spacing:1px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;z-index:2}
.coin-face::before{content:'';position:absolute;top:8%;left:15%;width:35%;height:20%;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);border-radius:50%;transform:rotate(-20deg);pointer-events:none;z-index:3}
.coin-face::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -6px 12px rgba(0,0,0,.3),inset 0 2px 4px rgba(255,255,255,.2);pointer-events:none;z-index:4}
.coin-edge{position:absolute;width:100%;height:100%;border-radius:50%;background:linear-gradient(180deg,#b45309 0%,#92400e 50%,#78350f 100%);transform:translateZ(-3px);z-index:1;border:2px solid #78350f}
.coin-heads{background:linear-gradient(145deg,#fbbf24 0%,#f59e0b 25%,#d97706 60%,#b45309 100%);border:3px solid #92400e;color:#78350f;text-shadow:0 1px 1px rgba(255,255,255,.3)}
.coin-heads .coin-label{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:2px}
.coin-heads .coin-icon{font-size:clamp(24px,5vh,40px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.coin-heads .coin-text{font-size:clamp(9px,1.5vh,12px);font-weight:900;color:#78350f;text-transform:uppercase;letter-spacing:2px}
.coin-tails{transform:rotateY(180deg);background:linear-gradient(145deg,#e8e0d4 0%,#d4ccc0 25%,#b8b0a4 60%,#8a8278 100%);border:3px solid #6a6258;color:#4a4238;text-shadow:0 1px 1px rgba(255,255,255,.4)}
.coin-tails .coin-label{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:2px}
.coin-tails .coin-icon{font-size:clamp(24px,5vh,40px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.coin-tails .coin-text{font-size:clamp(9px,1.5vh,12px);font-weight:900;color:#334155;text-transform:uppercase;letter-spacing:2px}
.coin-shine{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 45%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.15) 55%,transparent 60%);z-index:6;pointer-events:none;animation:coinShine 3s ease-in-out infinite}
@keyframes coinShine{0%,100%{opacity:.3}50%{opacity:.8}}
.flash{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) scale(.3);font-size:clamp(42px,8vh,64px);font-weight:900;opacity:0;pointer-events:none;z-index:15;white-space:nowrap;letter-spacing:2px;font-family:"Luckiest Guy","Rubik",cursive;text-shadow:0 3px 0 rgba(0,0,0,.15)}
.flash.show{animation:fi 1.2s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes fi{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}30%{transform:translate(-50%,-50%) scale(1.35);opacity:1}100%{transform:translate(-50%,-50%) scale(.85);opacity:0}}
.flash.six{color:#e8a020;text-shadow:0 0 30px rgba(232,160,32,.8),0 3px 0 rgba(0,0,0,.15)}
.flash.out{color:#dc2626;text-shadow:0 0 30px rgba(220,38,38,.8),0 3px 0 rgba(0,0,0,.15)}
.flash.runs{color:#1a1a1a;text-shadow:0 2px 0 rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.1)}
.flash.noball{color:#e8a020;text-shadow:0 0 30px rgba(232,160,32,.8),0 3px 0 rgba(0,0,0,.15)}
.flash.dot{color:#8a7050}
#app.shake{animation:ss .5s}
@keyframes ss{0%,100%{transform:translate(0,0)}20%{transform:translate(-8px,4px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,6px)}80%{transform:translate(4px,-2px)}}
.balls-row{display:flex;justify-content:center;gap:4px;padding:2px 0;flex-wrap:wrap;flex-shrink:0}
.ball-dot{width:16px;height:16px;border-radius:50%;background:rgba(122,56,0,.06);border:1.5px solid rgba(122,56,0,.12);font-size:8px;display:flex;align-items:center;justify-content:center;font-weight:800;color:rgba(122,56,0,.4)}
.ball-dot.done{background:rgba(122,56,0,.2);color:var(--ink)}
.ball-dot.wicket{background:var(--red);color:#fff;border-color:#fecaca}
.ball-dot.six{background:#f59e0b;color:var(--ink);border-color:#fde68a}
.ball-dot.noball{background:#f59e0b;color:#fff}
.ball-dot.dotball{background:rgba(122,56,0,.15);color:var(--ink)}
.confetti{position:absolute;width:10px;height:10px;top:50%;left:50%;pointer-events:none;z-index:4;border-radius:2px}
.footer-credit{text-align:center;padding:6px 8px calc(6px + env(safe-area-inset-bottom));font-size:10px;color:#475569;flex-shrink:0;font-weight:600;margin-top:auto}
.footer-credit a{color:#f59e0b;text-decoration:none;font-weight:800;padding:2px 8px;border-radius:8px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.15)}
.conn-log{font-size:11px;color:var(--teal);margin:6px 0;max-width:280px;text-align:left;line-height:1.6;min-height:50px;max-height:130px;overflow-y:auto}
.conn-log .err{color:#c1121f}.conn-log .warn{color:var(--coral)}
.mc-num{font-size:clamp(80px,20vh,140px);font-weight:900;color:#f59e0b;text-shadow:0 0 40px rgba(245,158,11,.8);animation:mcp 1s ease-in-out infinite}
@keyframes mcp{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.connected-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(42,157,143,.12);border:1px solid rgba(42,157,143,.25);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;color:var(--teal);margin:8px 0}
.connected-badge .dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981}
.search-spinner{width:40px;height:40px;border:4px solid rgba(122,56,0,.1);border-top-color:var(--coral);border-radius:50%;animation:spin 1s linear infinite;margin:16px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.pool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:clamp(150px,30vh,250px);overflow-y:auto;width:100%;max-width:300px;margin:8px 0;padding:4px}
.pool-item{padding:6px 8px;background:rgba(255,250,240,.8);border:1.5px solid var(--card-border);border-radius:10px;font-size:11px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .15s;color:var(--ink);pointer-events:auto;position:relative;z-index:1}
.pool-item:active{transform:scale(.97)}
.pool-item.picked{background:rgba(231,111,81,.08);border-color:var(--coral);color:var(--coral)}
.pool-item .role-badge{font-size:8px;padding:2px 5px;border-radius:6px;font-weight:700;text-transform:uppercase}
.pool-item .role-badge.batter{background:rgba(96,165,250,.12);color:#1d4ed8}
.pool-item .role-badge.bowler{background:rgba(230,57,70,.12);color:#c1121f}
.pool-item .role-badge.all{background:rgba(168,85,247,.12);color:#7c3aed}
.team-size-select{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0;width:100%;max-width:360px}
.team-size-btn{background:rgba(255,255,255,.7);border:1.5px solid rgba(122,56,0,.12);color:#3a1e00;padding:8px 4px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;text-align:center;line-height:1.3;transition:all .15s;pointer-events:auto;position:relative;z-index:1}
.team-size-btn.active{background:linear-gradient(135deg,#1a7a6d,#125c52);color:#fff;border-color:rgba(26,122,109,.5)}
.inning-info{font-size:10px;color:var(--teal);margin:4px 0;font-weight:600}
@media(orientation:landscape) and (max-height:500px){.hand-wrap{width:clamp(90px,24vh,130px);height:clamp(110px,30vh,160px)}.scoreboard{margin:4px 8px 2px}.controls{padding:2px 8px 2px}.stat-grid{grid-template-columns:repeat(4,1fr);gap:4px}.profile-card{max-width:340px}.home-hands{height:clamp(60px,12vh,80px);margin:6px 0 8px}.coin-container{width:70px;height:70px;margin:8px auto}.coin-heads .coin-icon,.coin-tails .coin-icon{font-size:20px}.coin-heads .coin-text,.coin-tails .coin-text{font-size:7px}.arena{border-radius:10px;margin:0 2px}.gesture-btn{padding:clamp(6px,1.2vh,10px) 3px}.gesture-btn .big{font-size:clamp(16px,2.8vh,22px)}}
@media(max-width:360px){.stat-grid{grid-template-columns:repeat(2,1fr);gap:4px}.stat-item{padding:8px 4px}.stat-item .val{font-size:16px}.mode-btn{padding:10px 6px}.mode-btn .icon{font-size:22px}.mode-btn .title{font-size:12px}.team-size-btn{font-size:10px;padding:6px 2px}.role-row{grid-template-columns:24px 1fr auto auto;gap:4px;padding:6px 8px}.role-select button{padding:3px 6px;font-size:9px}.role-bowl-select button{padding:3px 5px;font-size:8px}.story-dialogue-box{padding:10px 12px}.gesture-grid{gap:3px}.gesture-btn{padding:clamp(4px,.6vh,6px) 1px;font-size:11px}.coin-container{width:80px;height:80px;margin:12px auto}.coin-heads .coin-icon,.coin-tails .coin-icon{font-size:22px}.coin-heads .coin-text,.coin-tails .coin-text{font-size:8px}.tutorial{max-width:280px;padding:16px 14px 12px}.tutorial .tut-title{font-size:13px;padding-right:40px}.tutorial .tut-body{font-size:11px}.tutorial .tut-next{max-width:170px;padding:8px 16px;font-size:12px}}
@media(min-width:768px){.stat-grid{grid-template-columns:repeat(4,1fr);gap:8px}.stat-item{padding:14px 8px}.stat-item .val{font-size:26px}.profile-card{max-width:400px;padding:20px}}
@media(min-width:1024px){.stat-grid{grid-template-columns:repeat(4,1fr);gap:10px}.stat-item .val{font-size:28px}.hand-wrap{width:clamp(140px,18vw,200px);height:clamp(170px,22vw,260px)}.coin-container{width:150px;height:150px;margin:24px auto}.coin-heads .coin-icon,.coin-tails .coin-icon{font-size:48px}.coin-heads .coin-text,.coin-tails .coin-text{font-size:14px}.arena{border-radius:20px}.gesture-btn{padding:14px 6px}.gesture-btn .big{font-size:28px}}
.home-title{font-size:clamp(28px,5vh,42px);font-weight:900;margin:0;letter-spacing:1px;font-family:"Luckiest Guy","Rubik",cursive;color:#7a3800;text-shadow:0 2px 0 rgba(255,255,255,.3);animation:titleIn .8s cubic-bezier(.34,1.56,.64,1) both}
@keyframes titleIn{from{opacity:0;transform:translateY(-30px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
.home-subtitle{font-size:clamp(11px,1.8vh,15px);color:rgba(122,56,0,.7);margin:4px 0 6px;font-weight:600;letter-spacing:3px;text-transform:uppercase;animation:fadeUp .6s .2s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:.7;transform:translateY(0)}}
.home-hands{display:flex;justify-content:center;align-items:center;gap:clamp(20px,5vw,50px);margin:10px 0 14px;height:clamp(90px,16vh,130px);animation:fadeUp .6s .3s both}
.home-hand{width:clamp(60px,14vh,130px);height:clamp(90px,18vh,160px);position:relative;cursor:default}
.home-hand.left{animation:handFloatL 3s ease-in-out infinite}
.home-hand.right{animation:handFloatR 3s ease-in-out infinite 1.5s}
.home-hand svg{width:100%;height:100%;display:block}
@keyframes handFloatL{0%,100%{transform:scaleX(-1) translateY(0) rotate(0)}50%{transform:scaleX(-1) translateY(-10px) rotate(3deg)}}
@keyframes handFloatR{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-3deg)}}
.home-ball{width:clamp(18px,3vh,26px);height:clamp(18px,3vh,26px);background:radial-gradient(circle at 35% 35%,#ef4444,#b91c1c 60%,#7f1d1d);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 -2px 4px rgba(0,0,0,.3);animation:ballBounce 2s ease-in-out infinite}

/* ====== FLAT ILLUSTRATED ARENA HANDS (handcricket.in style) ====== */
.arena-hand{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transform-style:preserve-3d}
.arena-hand::before{content:'';position:absolute;inset:-10% -20% -5% -20%;background:radial-gradient(ellipse at 50% 60%,rgba(245,158,11,.12) 0%,rgba(245,158,11,0) 60%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:0}
.arena-hand.has-pick::before{opacity:1}
.arena-hand svg{width:100%;height:100%;display:block}
.hand-wrap{transform-style:preserve-3d}
.home-ball::after{content:'';position:absolute;width:60%;height:1.5px;background:rgba(255,255,255,.25);top:45%;left:20%;border-radius:1px;transform:rotate(-15deg)}
@keyframes ballBounce{0%,100%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-65%) scale(1.1)}50%{transform:translate(-50%,-50%) scale(1)}75%{transform:translate(-50%,-55%) scale(1.05)}}
.mode-grid.three-col{animation:fadeUp .6s .4s both}
.mode-btn{transition:all .2s cubic-bezier(.34,1.56,.64,1);animation:cardIn .5s cubic-bezier(.34,1.56,.64,1) both}
.mode-btn:nth-child(1){animation-delay:.5s}
.mode-btn:nth-child(2){animation-delay:.6s}
.mode-btn:nth-child(3){animation-delay:.7s}
.mode-btn:nth-child(4){animation-delay:.8s}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.mode-btn:hover{transform:translateY(-3px);border-color:rgba(245,158,11,.4);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.mode-btn:active{transform:translateY(1px) scale(.97)}
.home-profile-wrap{animation:fadeUp .6s .8s both;margin-top:14px}
.home-profile-wrap .secondary{background:rgba(255,255,255,.7);color:#3a1e00;border:1.5px solid rgba(122,56,0,.15)}
.home-version{font-size:9px;color:rgba(122,56,0,.4);margin-top:12px;animation:fadeUp .6s 1s both}
.home-credit{font-size:10px;color:rgba(122,56,0,.6);margin-top:6px;animation:fadeUp .6s 1.1s both;padding:4px 12px;border-radius:8px;background:rgba(255,255,255,.25);border:1px solid rgba(122,56,0,.1)}
.home-credit a{color:#7a3800;text-decoration:none;font-weight:700}
.tutorial{position:relative;width:100%;max-width:320px;margin:10px auto;padding:20px 20px 16px;background:rgba(255,255,255,.9);border:1px solid rgba(122,56,0,.15);border-radius:16px;text-align:left;overflow:visible;color:#1a1a1a}
.tutorial .tut-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#e8a020;color:#fff;border-radius:50%;font-weight:900;font-size:13px;margin-right:8px;flex-shrink:0}
.tutorial .tut-title{font-size:15px;font-weight:800;color:#7a3800;margin:4px 0 8px;display:flex;align-items:center;padding-right:50px}
.tutorial .tut-body{font-size:12px;color:#5a3000;line-height:1.6;margin:0 0 12px}
.tutorial .tut-dots{display:flex;justify-content:center;gap:8px;margin:0 0 12px}
.tutorial .tut-dots .d{width:8px;height:8px;border-radius:50%;background:rgba(122,56,0,.15);transition:background .2s}
.tutorial .tut-dots .d.on{background:#e8a020}
.tutorial .tut-skip{position:absolute;top:12px;right:14px;background:none;border:none;color:rgba(122,56,0,.5);font-size:11px;cursor:pointer;font-weight:700;padding:4px 8px;border-radius:6px;transition:color .2s;pointer-events:auto}
.tutorial .tut-skip:hover{color:#e8a020}
.tutorial .tut-next{display:block;margin:0 auto;padding:10px 24px;background:linear-gradient(180deg,#e8a020,#d49018);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;width:100%;max-width:200px;-webkit-appearance:none;touch-action:manipulation;box-shadow:0 4px 12px rgba(232,160,32,.3);pointer-events:auto}
.tutorial .tut-next:active{transform:translateY(2px)}
.tutorial .tut-dont{font-size:11px;color:rgba(122,56,0,.5);margin-top:10px;text-align:center;display:flex;justify-content:center;align-items:center;gap:6px;cursor:pointer;pointer-events:auto}
.tutorial .tut-dont input{accent-color:#e8a020;width:14px;height:14px;cursor:pointer;pointer-events:auto}
.pre-stats-box{background:rgba(255,250,240,.8);border:1px solid var(--card-border);border-radius:14px;padding:12px;margin:10px auto;max-width:280px;text-align:left;max-height:40vh;overflow-y:auto}
.pre-stats-title{font-size:14px;font-weight:800;color:var(--coral);margin-bottom:8px;text-align:center}
.pre-rank{font-size:10px;font-weight:600;color:var(--teal)}
.pre-stats-section{margin:8px 0;padding:8px 0;border-top:1px solid var(--card-border)}
.pre-section-label{font-size:10px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.pre-stat-row{display:flex;justify-content:space-between;font-size:11px;padding:3px 0;font-weight:600;color:var(--ink)}
.pre-stat-row span{color:rgba(122,56,0,.5)}
.pre-stat-row b{color:var(--coral)}
.home-username{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 4px;animation:fadeUp .5s .5s both}
.home-username-text{font-size:15px;font-weight:800;color:#7a3800;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.edit-name-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:2px 4px;border-radius:6px;transition:background .2s;color:#3a1e00;pointer-events:auto}
.edit-name-btn:hover{background:rgba(255,255,255,.3)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:320px;margin:8px auto}
.stat-item{background:rgba(255,250,240,.8);border-radius:10px;padding:8px 4px;text-align:center;border:1px solid var(--card-border)}
.stat-item .val{font-size:clamp(16px,3vh,22px);font-weight:900;color:var(--coral);font-family:"Luckiest Guy","Rubik",cursive}
.stat-item .lbl{font-size:9px;color:rgba(122,56,0,.5);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
#profileOverlay,#friendsOverlay{background:#e8a020;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23d49018' stroke-width='1.5' opacity='0.25'/%3E%3C/svg%3E");background-size:56px 100px;backdrop-filter:none;-webkit-backdrop-filter:none}
#profileOverlay h1,#friendsOverlay h1{color:#7a3800}
.profile-card{background:rgba(255,255,255,.9);border-radius:18px;padding:16px;width:100%;max-width:340px;border:1.5px solid var(--card-border);margin-top:10px;color:var(--ink)}
.profile-card h3{margin:0 0 8px;font-size:18px;font-weight:900;color:var(--ink2);font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:1px}
.profile-card .profile-rank{font-size:11px;color:rgba(122,56,0,.6);font-weight:600;margin-bottom:10px}
.profile-section h3{color:var(--teal)}
.stat-item{background:rgba(255,255,255,.8);border:1px solid var(--card-border)}
.stat-item .val{color:#e8a020}
.stat-item .lbl{color:rgba(122,56,0,.6)}
.friend-item{background:rgba(255,255,255,.75);border:1px solid rgba(122,56,0,.1)}
.friend-item:hover{border-color:rgba(232,160,32,.3);background:rgba(255,255,255,.95)}
.friend-avatar{background:rgba(26,122,109,.1);border-color:rgba(26,122,109,.2)}
.friend-name{color:#1a1a1a}
.friend-rank{color:#e8a020}
.friend-tabs .ftab{background:rgba(255,255,255,.6);color:#3a1e00;border:1px solid rgba(122,56,0,.1)}
.friend-tabs .ftab.active{background:#1a7a6d;color:#fff;border-color:#1a7a6d}
.profile-section{margin:10px 0;padding:10px 0;border-top:1px solid var(--card-border)}
.profile-section h3{font-size:13px;font-weight:800;color:var(--teal);margin:0 0 8px;text-transform:uppercase;letter-spacing:1px}
.stat-grid.two-col{grid-template-columns:repeat(2,1fr)}
.opp-profile-card{background:rgba(255,250,240,.8);border-radius:12px;padding:10px;width:100%;max-width:260px;border:1px solid var(--card-border);margin:8px auto;cursor:pointer;transition:all .2s;pointer-events:auto}
.opp-profile-card:hover{background:rgba(255,250,240,.95);border-color:rgba(231,111,81,.3)}
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;width:3px;height:3px;background:rgba(231,111,81,.2);border-radius:50%;animation:particleFloat linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1);opacity:0}}

/* ====== v3 ROLE SYSTEM + STORY MODE + UI REFRESH ====== */
/* Aliases — all resolve to the warm palette defined at line 18 */
:root{--accent:var(--orange);--accent2:#d97706;--text:var(--ink);--blue:#60a5fa}
.gesture-btn.restricted{opacity:.25;pointer-events:none;filter:grayscale(1);border-color:rgba(255,255,255,.04)!important;background:rgba(255,255,255,.02)!important}
.gesture-btn.restricted .big{opacity:.3}
.gesture-btn.restricted .small{opacity:.2}
.gesture-btn.disabled{cursor:default!important}
.role-badge-inline{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;padding:2px 7px;border-radius:8px;margin-left:6px;vertical-align:middle;letter-spacing:.5px}
.role-badge-inline.agg{background:rgba(230,57,70,.12);color:#c1121f;border:1px solid rgba(230,57,70,.25)}
.role-badge-inline.def{background:rgba(96,165,250,.12);color:#1d4ed8;border:1px solid rgba(96,165,250,.25)}
.role-badge-inline.bal{background:rgba(42,157,143,.12);color:#1a6b60;border:1px solid rgba(42,157,143,.25)}
.role-reveal-banner{text-align:center;padding:6px 12px;font-size:clamp(11px,1.4vh,13px);font-weight:700;background:linear-gradient(90deg,transparent,rgba(168,85,247,.15),transparent);color:#7c3aed;display:none;flex-shrink:0;animation:fadeUp .4s ease}
.role-reveal-banner.show{display:block}
.role-reveal-banner .hl-agg{color:#c1121f;font-weight:900}
.role-reveal-banner .hl-def{color:#1d4ed8;font-weight:900}
.role-reveal-banner .hl-bal{color:#1a6b60;font-weight:900}

/* Role Assignment Overlay */
.role-assign-overlay{position:fixed;inset:0;background:rgba(38,70,83,.94);z-index:15;display:flex;flex-direction:column;align-items:center;padding:16px;overflow-y:auto;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.role-assign-overlay.hidden{display:none!important}
.role-assign-title{font-size:clamp(18px,3vh,24px);font-weight:900;color:var(--coral);margin:8px 0 4px;text-align:center}
.role-assign-sub{font-size:clamp(11px,1.5vh,13px);color:rgba(122,56,0,.6);text-align:center;margin-bottom:10px}
.role-assign-grid{width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px}
.role-row{display:grid;grid-template-columns:32px 1fr auto auto;gap:8px;align-items:center;background:rgba(255,250,240,.7);border:1.5px solid var(--card-border);border-radius:12px;padding:8px 10px;transition:all .2s;color:var(--ink)}
.role-row:hover{background:rgba(255,250,240,.85);border-color:rgba(245,158,11,.3)}
.role-row .num{font-size:12px;font-weight:800;color:rgba(122,56,0,.5);text-align:center}
.role-row .pname{font-size:13px;font-weight:700;color:var(--ink)}
.role-row .ptype{font-size:9px;color:rgba(122,56,0,.5);font-weight:600;text-transform:uppercase}
.role-select{display:flex;gap:4px}
.role-select button{padding:4px 8px;border-radius:6px;font-size:10px;font-weight:800;border:2px solid transparent;cursor:pointer;transition:all .15s;background:rgba(122,56,0,.05);color:rgba(122,56,0,.4);-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.role-select button:active{transform:scale(.95)}
.role-select button.sel-agg{background:rgba(230,57,70,.12);color:#c1121f;border-color:var(--red)}
.role-select button.sel-def{background:rgba(96,165,250,.12);color:#1d4ed8;border-color:var(--blue)}
.role-select button.sel-bal{background:rgba(42,157,143,.12);color:#1a6b60;border-color:var(--teal)}
.role-select button.sel-bal{background:rgba(42,157,143,.12);color:#1a6b60;border-color:var(--teal)}
.role-select button.sel-bal:hover{background:rgba(42,157,143,.18)}
.role-bowl-select{display:flex;gap:4px}
.role-bowl-select button{padding:4px 6px;border-radius:6px;font-size:9px;font-weight:700;border:2px solid transparent;cursor:pointer;transition:all .15s;background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.role-bowl-select button:active{transform:scale(.95)}
.role-bowl-select button.sel-agg{background:rgba(230,57,70,.12);color:#c1121f;border-color:rgba(230,57,70,.5)}
.role-bowl-select button.sel-def{background:rgba(96,165,250,.12);color:#1d4ed8;border-color:rgba(96,165,250,.5)}
.role-bowl-select button.sel-bal{background:rgba(42,157,143,.12);color:#1a6b60;border-color:rgba(42,157,143,.5)}
.role-constraints{font-size:10px;color:rgba(122,56,0,.5);text-align:center;margin-top:8px;width:100%;max-width:420px;padding:6px 10px;background:rgba(255,250,240,.6);border:1.5px solid var(--card-border);border-radius:10px;margin-top:12px}
.role-assign-btns{display:flex;gap:8px;margin-top:12px;width:100%;max-width:420px}
.role-assign-btns button{flex:1;padding:10px;border-radius:10px;font-size:12px;font-weight:800;border:none;cursor:pointer;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.role-assign-btns .ra-primary{background:linear-gradient(135deg,var(--teal),#125c52);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.role-assign-btns .ra-secondary{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.12)}
.role-assign-btns .ra-accent{background:rgba(168,85,247,.12);color:#7c3aed;border:1px solid rgba(168,85,247,.25)}

/* Story Mode Overlays */
.story-home{position:fixed;inset:0;background:rgba(38,70,83,.95);z-index:15;display:flex;flex-direction:column;align-items:center;padding:20px 16px;overflow-y:auto;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:oi .4s ease}
.story-home.hidden{display:none!important}
.story-home h1{font-size:clamp(22px,3.5vh,30px);font-weight:900;color:var(--coral);margin:10px 0 4px}
.story-home .sub{font-size:clamp(11px,1.5vh,14px);color:rgba(122,56,0,.6);margin-bottom:12px}
.story-trophy-shelf{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0 12px;max-width:360px}
.story-trophy{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,250,240,.08);border:1px solid var(--card-border);transition:all .3s}
.story-trophy.earned{background:rgba(231,111,81,.12);border-color:rgba(231,111,81,.4);box-shadow:0 0 12px rgba(231,111,81,.2);animation:trophyGlow 2s ease-in-out infinite}
@keyframes trophyGlow{0%,100%{box-shadow:0 0 12px rgba(231,111,81,.2)}50%{box-shadow:0 0 20px rgba(231,111,81,.4)}}
.story-progress{width:100%;max-width:320px;margin:8px 0}
.story-progress-bar{height:8px;background:rgba(122,56,0,.1);border-radius:4px;overflow:hidden}
.story-progress-fill{height:100%;background:linear-gradient(90deg,var(--coral),var(--teal));border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.story-progress-text{font-size:10px;color:rgba(122,56,0,.5);text-align:center;margin-top:4px}
.story-tier-card{width:100%;max-width:340px;background:rgba(255,250,240,.06);border:1px solid var(--card-border);border-radius:14px;padding:14px;margin:6px 0;text-align:left;transition:all .2s}
.story-tier-card.current{border-color:rgba(231,111,81,.4);background:rgba(231,111,81,.06)}
.story-tier-card.completed{border-color:rgba(42,157,143,.3);background:rgba(42,157,143,.06)}
.story-tier-card.locked{opacity:.4;pointer-events:none}
.story-tier-card .tier-header{display:flex;justify-content:space-between;align-items:center}
.story-tier-card .tier-name{font-size:14px;font-weight:800}
.story-tier-card .tier-badge{font-size:10px;padding:2px 8px;border-radius:8px;font-weight:700}
.story-tier-card .tier-badge.active{background:rgba(231,111,81,.12);color:var(--coral)}
.story-tier-card .tier-badge.done{background:rgba(42,157,143,.12);color:var(--teal)}
.story-tier-card .tier-badge.lock{background:rgba(122,56,0,.06);color:rgba(122,56,0,.4)}
.story-tier-card .tier-sub{font-size:11px;color:rgba(122,56,0,.6);margin-top:4px}
.story-tier-card .tier-matches{font-size:10px;color:rgba(122,56,0,.5);margin-top:6px}
.story-tier-card .tier-matches .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 2px;background:rgba(122,56,0,.08);border:1px solid rgba(122,56,0,.15)}
.story-tier-card .tier-matches .dot.won{background:var(--teal);border-color:var(--teal)}
.story-tier-card .tier-matches .dot.lost{background:var(--red);border-color:var(--red)}
.story-tier-card .tier-matches .dot.current{background:var(--coral);border-color:var(--coral);animation:dotPulse 1.5s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* Story Dialogue Box */
.story-dialogue{position:fixed;bottom:0;left:0;right:0;z-index:20;padding:12px 16px max(env(safe-area-inset-bottom),12px);background:linear-gradient(180deg,transparent,rgba(38,70,83,.95) 30%);pointer-events:none;animation:dialogueIn .5s ease}
.story-dialogue.hidden{display:none!important}
.story-dialogue-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;max-width:400px;margin:0 auto;pointer-events:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.story-dialogue-speaker{font-size:12px;font-weight:800;color:#f59e0b;margin-bottom:4px;font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:1px}
.story-dialogue-text{font-size:13px;line-height:1.5;color:var(--text)}
.story-dialogue-btn{display:block;margin:10px auto 0;padding:10px 28px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent2));color:#fff;font-size:13px;font-weight:800;border:none;cursor:pointer;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto;position:relative;z-index:25}
@keyframes dialogueIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Roast Display */
.roast-box{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:12px 14px;margin:10px auto;max-width:340px;text-align:center}
.roast-text{font-size:13px;color:#c1121f;font-weight:700;line-height:1.5}
.roast-emoji{font-size:24px;margin-bottom:6px}

/* Trophy Celebration */
.trophy-celebrate{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(38,70,83,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:oi .5s ease}
.trophy-celebrate.hidden{display:none!important}
.trophy-big{font-size:clamp(60px,14vh,100px);animation:trophyBounce 1s cubic-bezier(.34,1.56,.64,1)}
@keyframes trophyBounce{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
.trophy-title{font-size:clamp(20px,4vh,32px);font-weight:900;color:var(--coral);margin:12px 0 4px;text-shadow:0 0 30px rgba(231,111,81,.5);font-family:"Luckiest Guy","Rubik",cursive;letter-spacing:1px}
.trophy-sub{font-size:clamp(12px,2vh,16px);color:rgba(122,56,0,.7);margin-bottom:16px}
.trophy-cert{background:rgba(255,250,240,.08);border:2px solid rgba(231,111,81,.3);border-radius:16px;padding:20px;max-width:320px;width:90%;text-align:center}
.trophy-cert h3{font-size:16px;font-weight:900;color:var(--coral);margin:0 0 8px}
.trophy-cert p{font-size:12px;color:rgba(122,56,0,.6);margin:4px 0}
.trophy-cert .cert-line{width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--coral),transparent);margin:12px auto}

/* Language Selector */
.lang-select{display:flex;gap:10px;margin:10px 0}
.lang-btn{padding:10px 20px;border-radius:10px;font-size:13px;font-weight:800;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;transition:all .2s;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto;position:relative;z-index:1}
.lang-btn.active{border-color:var(--accent);background:rgba(245,158,11,.1);color:var(--accent)}
.lang-btn:active{transform:scale(.97)}

/* Story Team Builder */
.story-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:clamp(150px,30vh,250px);overflow-y:auto;width:100%;max-width:400px;margin:8px 0;padding:4px}
.story-player-card{background:rgba(255,255,255,.06);border:2px solid transparent;border-radius:10px;padding:8px 10px;cursor:pointer;transition:all .15s;display:flex;justify-content:space-between;align-items:center;pointer-events:auto}
.story-player-card:active{transform:scale(.97)}
.story-player-card.picked{background:rgba(245,158,11,.1);border-color:var(--accent)}
.story-player-card .sp-name{font-size:12px;font-weight:700}
.story-player-card .sp-info{font-size:9px;opacity:.6}

/* Player Selection Overlay */
.ps-timer{font-size:28px;font-weight:900;color:var(--accent);animation:psPulse 1s ease-in-out infinite}
@keyframes psPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
#playerSelectOverlay .pool-item{cursor:pointer;padding:8px 10px;pointer-events:auto}
#playerSelectOverlay .pool-item:hover{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.08)}
#playerSelectOverlay .pool-item.picked{background:rgba(245,158,11,.15);border-color:var(--accent)}

/* Innings Break Stats */
.inn-break-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.inn-break-side{background:rgba(255,250,240,.06);border:1px solid var(--card-border);border-radius:12px;padding:10px;text-align:left}
.inn-break-side h4{font-size:12px;font-weight:800;color:var(--coral);margin:0 0 6px;text-align:center}
.inn-break-player{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(122,56,0,.05)}
.inn-break-player:last-child{border-bottom:none}
.inn-break-player .ib-name{font-weight:700;color:var(--ink);flex:1}
.inn-break-player .ib-role{font-size:8px;padding:1px 4px;border-radius:4px;font-weight:700;margin-left:4px}
.inn-break-player .ib-role.agg{background:rgba(230,57,70,.12);color:#c1121f}
.inn-break-player .ib-role.def{background:rgba(96,165,250,.12);color:#1d4ed8}
.inn-break-player .ib-role.bal{background:rgba(42,157,143,.12);color:#1a6b60}
.inn-break-player .ib-stat{font-weight:800;color:var(--coral);min-width:32px;text-align:right}
.inn-break-summary{text-align:center;padding:8px;background:rgba(231,111,81,.06);border:1px solid rgba(231,111,81,.2);border-radius:10px;margin-top:8px}
.inn-break-summary .big{font-size:20px;font-weight:900;color:var(--coral)}
.inn-break-summary .small{font-size:10px;color:rgba(122,56,0,.5)}

/* Warm palette overrides — all accent references now resolve to warm orange */
.home-title{color:var(--ink2);text-shadow:0 2px 0 rgba(255,255,255,.3);-webkit-text-stroke:1px rgba(122,56,0,.15)}
.mode-btn{border:1.5px solid var(--card-border);transition:all .2s cubic-bezier(.34,1.56,.64,1)}
.mode-btn:hover{transform:translateY(-3px);border-color:rgba(231,111,81,.4);box-shadow:0 8px 24px var(--shadow),0 0 20px rgba(231,111,81,.15)}
.mode-btn:active{transform:translateY(1px) scale(.97)}
.overlay button{background:linear-gradient(135deg,var(--teal),#125c52)}
.overlay button.secondary{background:rgba(255,250,240,.8);color:var(--ink);border:1.5px solid var(--card-border)}
.overlay button.danger{background:rgba(230,57,70,.12);color:#c1121f;border:1px solid rgba(230,57,70,.25)}
.gesture-btn.selected{background:linear-gradient(180deg,var(--orange),#d97706);box-shadow:0 4px 0 rgba(0,0,0,.15),0 0 15px rgba(244,163,97,.3)}
.batting-indicator{background:linear-gradient(180deg,var(--teal),#125c52)}
.flash.six{color:var(--coral);text-shadow:0 0 30px rgba(231,111,81,.8)}
.status .hl{color:var(--coral)}
.home-username-text{color:var(--ink2)}
.stat-item .val{color:var(--coral)}
.profile-card h3{color:var(--ink)}
.pre-stats-title{color:var(--coral)}
.pre-stat-row b{color:var(--coral)}
.footer-credit a{color:var(--coral);background:rgba(231,111,81,.08);border:1px solid rgba(231,111,81,.15)}

/* ====== EMOJI QUICK CHAT ====== */
.emoji-bar{display:flex;gap:6px;justify-content:center;padding:4px 8px;flex-shrink:0}
.emoji-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(122,56,0,.12);background:rgba(255,255,255,.85);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(122,56,0,.1);-webkit-appearance:none;touch-action:manipulation;position:relative;pointer-events:auto}
.emoji-btn:active{transform:scale(.85);box-shadow:0 1px 4px rgba(122,56,0,.15)}
.emoji-btn:hover{border-color:rgba(245,158,11,.4);box-shadow:0 2px 12px rgba(245,158,11,.2)}
.emoji-btn.sent{animation:emojiPop .4s ease}
.emoji-expand{font-size:16px;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#7a3800}
@keyframes emojiPop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.quick-msgs{display:none;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px 10px;max-width:400px;margin:0 auto}
.quick-msgs.show{display:flex}
.qmsg-btn{padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;border:1.5px solid rgba(122,56,0,.15);background:rgba(255,255,255,.8);color:#3a1e00;cursor:pointer;transition:all .15s;white-space:nowrap;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.qmsg-btn:active{transform:scale(.95);background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4)}
.float-emoji{position:fixed;z-index:20;font-size:36px;pointer-events:none;animation:floatUp 2.5s ease-out forwards;text-shadow:0 4px 12px rgba(0,0,0,.5)}
.float-emoji.left{left:15%;bottom:40%}
.float-emoji.right{right:15%;bottom:40%}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-60px) scale(1.2)}100%{opacity:0;transform:translateY(-120px) scale(.8)}}
.float-msg{position:fixed;z-index:20;max-width:180px;padding:8px 14px;border-radius:16px;font-size:12px;font-weight:700;pointer-events:none;animation:floatMsg 3s ease-out forwards;box-shadow:0 4px 16px rgba(0,0,0,.4);word-wrap:break-word}
.float-msg.left{left:10%;bottom:45%;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.25);color:#1d4ed8}
.float-msg.right{right:10%;bottom:45%;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:#fde68a}
@keyframes floatMsg{0%{opacity:1;transform:translateY(0) scale(1)}60%{opacity:1;transform:translateY(-40px) scale(1.05)}100%{opacity:0;transform:translateY(-80px) scale(.9)}}
.bot-chat{position:fixed;z-index:20;max-width:200px;padding:8px 14px;border-radius:16px;font-size:12px;font-weight:700;pointer-events:none;animation:floatMsg 3.5s ease-out forwards;box-shadow:0 4px 16px rgba(0,0,0,.3);word-wrap:break-word;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);color:#7c3aed}
.bot-chat.right{right:10%;bottom:38%}
.bot-chat.left{left:10%;bottom:38%}

/* ====== FRIEND LIST ====== */
.friends-overlay{position:fixed;inset:0;background:rgba(38,70,83,.95);z-index:15;display:flex;flex-direction:column;align-items:center;padding:20px 16px;overflow-y:auto;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:oi .4s ease}
.friends-overlay.hidden{display:none!important}
.friends-overlay h1{font-size:clamp(20px,3vh,26px);font-weight:900;color:var(--accent);margin:0 0 10px}
.friend-tabs{display:flex;gap:8px;margin-bottom:12px;width:100%;max-width:360px}
.ftab{flex:1;padding:8px;border-radius:10px;font-size:12px;font-weight:800;border:1.5px solid var(--card-border);background:rgba(255,250,240,.6);color:rgba(122,56,0,.5);cursor:pointer;transition:all .2s;text-align:center;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto;position:relative;z-index:1}
.ftab.active{background:rgba(231,111,81,.08);border-color:rgba(231,111,81,.3);color:var(--coral)}
.ftab .badge{background:var(--red);color:#fff;font-size:10px;padding:1px 5px;border-radius:8px;margin-left:4px}
.friend-list{width:100%;max-width:360px;display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto}
.friend-item{display:flex;align-items:center;gap:10px;background:rgba(255,250,240,.85);border:1px solid var(--card-border);border-radius:14px;padding:10px 12px;transition:all .2s}
.friend-item:hover{border-color:rgba(231,111,81,.3);background:rgba(255,250,240,.95)}
.friend-avatar{font-size:24px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(231,111,81,.08);border-radius:12px;border:1.5px solid rgba(231,111,81,.15)}
.friend-info{flex:1;min-width:0}
.friend-name{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-rank{font-size:10px;color:var(--coral);font-weight:600}
.friend-bot-badge{font-size:9px;background:rgba(168,85,247,.15);color:#7c3aed;padding:1px 5px;border-radius:6px;margin-left:4px;font-weight:700}
.friend-actions{display:flex;gap:4px}
.friend-actions button{padding:5px 10px;border-radius:8px;font-size:10px;font-weight:800;border:none;cursor:pointer;-webkit-appearance:none;touch-action:manipulation;transition:all .15s;pointer-events:auto}
.friend-actions button:active{transform:scale(.95)}
.fa-challenge{background:linear-gradient(135deg,var(--teal),#125c52);color:#fff}
.fa-remove{background:rgba(230,57,70,.12);color:#c1121f;border:1px solid rgba(230,57,70,.25)}
.fa-accept{background:linear-gradient(135deg,#059669,#047857);color:#fff}
.fa-reject{background:rgba(230,57,70,.12);color:#c1121f}
.pending-item{border-color:rgba(231,111,81,.2);background:rgba(231,111,81,.05)}
.add-friend-btn{padding:8px 16px;border-radius:10px;font-size:12px;font-weight:800;border:none;cursor:pointer;background:linear-gradient(135deg,#059669,#047857);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.1);transition:all .15s;margin-top:8px;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.add-friend-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.1)}
.add-friend-btn.sent{background:rgba(122,56,0,.15);color:rgba(122,56,0,.4);pointer-events:none}
.add-friend-btn.already{background:rgba(245,158,11,.15);color:var(--accent);pointer-events:none}

/* ====== FRIEND NOTIFICATION ====== */
.friend-notif{position:fixed;top:12px;right:12px;z-index:22;background:rgba(255,250,240,.95);border:1.5px solid rgba(231,111,81,.3);border-radius:14px;padding:12px 16px;max-width:280px;box-shadow:0 8px 24px var(--shadow);animation:slideIn .4s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.friend-notif.hidden{display:none}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}
.friend-notif-title{font-size:13px;font-weight:800;color:var(--coral);margin-bottom:4px}
.friend-notif-text{font-size:11px;color:var(--ink);margin-bottom:8px;line-height:1.4}
.friend-notif-btns{display:flex;gap:6px}
.friend-notif-btns button{padding:5px 12px;border-radius:8px;font-size:11px;font-weight:800;border:none;cursor:pointer;transition:all .15s;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.friend-notif-btns button:active{transform:scale(.95)}
.fnb-accept{background:linear-gradient(135deg,#059669,#047857);color:#fff}
.fnb-reject{background:rgba(230,57,70,.12);color:#c1121f}
.fnb-challenge{background:linear-gradient(135deg,var(--teal),#125c52);color:#fff}
.fnb-dismiss{background:rgba(122,56,0,.08);color:rgba(122,56,0,.5)}

/* ====== BOTTOM TAB BAR ====== */
.tab-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;padding:6px 0 max(env(safe-area-inset-bottom),4px);background:var(--card);border-top:2px solid var(--card-border);box-shadow:0 -4px 16px var(--shadow);z-index:11;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tab-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border:none;background:none;cursor:pointer;color:rgba(122,56,0,.45);font-size:9px;font-weight:700;transition:all .2s;-webkit-appearance:none;touch-action:manipulation;border-radius:10px;min-width:56px;pointer-events:auto}
.tab-btn svg{width:22px;height:22px;transition:all .2s}
.tab-btn span{transition:all .2s}
.tab-btn.active{color:var(--teal);background:rgba(42,157,143,.08)}
.tab-btn.active svg{transform:translateY(-2px)}
.tab-btn:active{transform:scale(.92)}
/* Ensure app content doesn't overlap tab bar */

/* ====== COIN BALANCE ====== */
/* Coin balance removed */

/* ====== DAILY CHALLENGE STRIP ====== */
.daily-strip{display:flex;align-items:center;justify-content:center;gap:0;margin:4px 0;padding:6px 12px;background:rgba(255,255,255,.7);border-radius:12px;border:1.5px solid var(--card-border);animation:fadeUp .5s .6s both}
.daily-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px}
.daily-icon{font-size:12px}
.daily-lbl{font-size:8px;color:rgba(122,56,0,.45);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.daily-val{font-size:12px;font-weight:800;color:var(--ink)}
.daily-sep{width:1px;height:24px;background:rgba(122,56,0,.1);margin:0 8px}
.daily-caption{font-size:9px;color:rgba(122,56,0,.4);text-align:center;margin:2px 0 4px}

/* ====== COLLECTING COINS OVERLAY ====== */
/* Collect coins overlay removed */

/* ====== PROFILE CARD RESTYLE ====== */
.prof-header{background:var(--ink);color:#fff;font-family:"Luckiest Guy","Rubik",cursive;font-size:14px;letter-spacing:1.5px;padding:10px;border-radius:12px 12px 0 0;text-align:center}
.prof-row{display:flex;align-items:center;gap:12px;padding:14px;background:var(--ink);border-radius:0 0 12px 12px;margin-bottom:10px}
.prof-avatar{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid rgba(255,255,255,.2)}
.prof-info{flex:1}
.prof-name{font-size:16px;font-weight:800;color:#fff}
.prof-rank{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(135deg,#1a5c52,#1a7a6d);border-radius:12px;margin-bottom:10px;color:#fff}
.prof-rank-icon{font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.prof-rank-name{font-size:15px;font-weight:800;font-family:"Luckiest Guy","Rubik",cursive}
.prof-rank-sub{font-size:10px;opacity:.7}
.prof-tabs{display:flex;gap:4px;margin-bottom:10px;background:rgba(122,56,0,.08);border-radius:10px;padding:3px}
.prof-tab{flex:1;padding:8px;border:none;background:none;border-radius:8px;font-size:11px;font-weight:800;color:rgba(122,56,0,.45);cursor:pointer;transition:all .2s;-webkit-appearance:none;touch-action:manipulation;pointer-events:auto}
.prof-tab.active{background:var(--card);color:var(--ink);box-shadow:0 2px 8px var(--shadow)}
.prof-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.prof-stat-card{background:var(--card);border:1.5px solid var(--card-border);border-radius:12px;padding:12px;text-align:center}
.prof-stat-icon{font-size:20px;margin-bottom:4px}
.prof-stat-val{font-size:22px;font-weight:900;color:var(--ink);font-family:"Luckiest Guy","Rubik",cursive;line-height:1}
.prof-stat-lbl{font-size:9px;color:rgba(122,56,0,.5);font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.g-signin{background:var(--card);border:1.5px solid var(--card-border);border-radius:12px;padding:12px;text-align:center;font-size:12px;font-weight:700;color:rgba(122,56,0,.5);cursor:pointer;transition:all .2s;pointer-events:auto}
.g-signin:hover{border-color:var(--teal);color:var(--teal)}