/* ═══════════════════════════════════════════════
   HAND CRICKET — main.css
   Base UI, theme tokens, screens, layout
   (Extracted from original single-file index.html)
   ═══════════════════════════════════════════════ */

:root{--bg:#f1f5fb;--surface:#fff;--surface2:#e8eef8;--accent:#f97316;--accent2:#fb923c;--gold:#d97706;--green:#16a34a;--red:#dc2626;--blue:#2563eb;--text:#0f172a;--muted:#64748b;--border:rgba(0,0,0,0.07);--ta:#ef4444;--tb:#3b82f6;}
body.dark{--bg:#080c14;--surface:#0f1623;--surface2:#162035;--text:#f0f4ff;--muted:#5a6a8a;--border:rgba(255,255,255,0.06);--gold:#fbbf24;--green:#22c55e;--red:#ef4444;--blue:#60a5fa;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;transition:background .3s,color .3s;}
/* Animated grain/noise texture overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px 200px;background-repeat:repeat;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 70% 50% at 20% 0%,rgba(249,115,22,0.05),transparent),radial-gradient(ellipse 50% 60% at 80% 100%,rgba(96,165,250,0.04),transparent);pointer-events:none;z-index:0;}
.screen{display:none;position:relative;z-index:1;height:100vh;overflow:hidden;flex-direction:column;}.screen.active{display:flex;}
.screen.scrollable{overflow-y:auto;}
.field{margin-bottom:.8rem;}.field label{font-size:.7rem;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:.32rem;}
.field input,.inp{width:100%;padding:.7rem .95rem;background:var(--surface2);border:1.5px solid var(--border);border-radius:12px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;outline:none;transition:.2s;}
.field input:focus,.inp:focus{border-color:var(--accent);background:var(--surface);}
.sel{width:100%;padding:.62rem .85rem;background:var(--surface2);border:1.5px solid var(--border);border-radius:12px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;outline:none;appearance:none;cursor:pointer;}.sel:focus{border-color:var(--accent);}
.btn-main{width:100%;padding:.82rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:.2s;}.btn-main:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(249,115,22,0.3);}.btn-main:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-accent{padding:.75rem 1.8rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;transition:.2s;}.btn-accent:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(249,115,22,.3);}.btn-accent:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted);padding:.38rem .8rem;border-radius:8px;cursor:pointer;font-size:.8rem;font-family:'Plus Jakarta Sans',sans-serif;transition:.2s;}.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:.33rem .7rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.73rem;cursor:pointer;transition:.2s;white-space:nowrap;}.btn-sm:hover{background:var(--surface2);color:var(--text);}
.btn-sm.acc{border-color:var(--accent);color:var(--accent);}.btn-sm.acc:hover{background:rgba(249,115,22,.1);}
.btn-sm.grn{border-color:var(--green);color:var(--green);}.btn-sm.grn:hover{background:rgba(34,197,94,.1);}
.btn-sm.red{border-color:var(--red);color:var(--red);}.btn-sm.red:hover{background:rgba(239,68,68,.1);}
.btn-sec{padding:.68rem 1.3rem;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;cursor:pointer;transition:.2s;}.btn-sec:hover{border-color:var(--accent);color:var(--accent);}
.msg{font-size:.8rem;text-align:center;min-height:1.1em;margin-top:.5rem;}.msg.e{color:var(--red);}.msg.s{color:var(--green);}
.card{background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:1.2rem;margin-bottom:1rem;box-shadow:0 1px 8px rgba(0,0,0,.05);}
.btn-main:active{box-shadow:0 0 0 4px rgba(249,115,22,0.35);}
.btn-accent:active{box-shadow:0 0 0 4px rgba(249,115,22,0.35);}
.nm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
@media(max-width:500px){.nm-grid{grid-template-columns:1fr;}.stats-row{grid-template-columns:repeat(2,1fr)!important;}}
.sec-title{font-size:.7rem;font-weight:800;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:.75rem;}
.elo-badge{display:inline-flex;align-items:center;gap:.2rem;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);border-radius:6px;padding:.14rem .42rem;font-size:.7rem;font-weight:700;color:var(--gold);}
.toggle{width:44px;height:24px;border-radius:12px;background:var(--muted);border:none;cursor:pointer;position:relative;transition:.3s;flex-shrink:0;}.toggle.on{background:var(--accent);}.toggle::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.3s;}.toggle.on::after{left:23px;}
/* ANIMATED GRADIENT BG */
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes hcShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes hcEntrance{0%{opacity:0;transform:scale(.85) translateY(-12px);letter-spacing:12px;}100%{opacity:1;transform:scale(1) translateY(0);letter-spacing:6px;}}
@keyframes hcEntranceBig{0%{opacity:0;transform:scale(.85) translateY(-16px);letter-spacing:16px;}100%{opacity:1;transform:scale(1) translateY(0);letter-spacing:5px;}}
.hc-title{font-family:'Bebas Neue';background:linear-gradient(90deg,#f97316,#fbbf24,#fb923c,#f97316);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:hcShimmer 3s ease infinite;}
/* LOADING SCREEN */
/* LOGO REVEAL ANIMATION */
.logo-reveal-wrap{
  display:flex;align-items:center;justify-content:center;
  position:relative;height:160px;
  /* NO overflow:hidden — nothing gets clipped */
}
/* Text sits to the LEFT of centre, hidden behind logo at rest */
.logo-reveal-text{
  font-size:2.4rem;letter-spacing:5px;line-height:1;
  position:absolute;
  /* shifted left so logo covers right portion of text */
  right:calc(50% - 60px);
  white-space:nowrap;
  z-index:1;pointer-events:none;
  clip-path:inset(0 0 0 100%);/* hidden: clipped from right */
}
.logo-reveal-img-wrap{
  position:relative;z-index:2;flex-shrink:0;
}
.logo-reveal-img{
  width:150px;height:150px;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 32px rgba(249,115,22,.45));
  /* Remove white PNG background on dark screens */
  mix-blend-mode:normal;
  border-radius:50%;
  background:transparent;
}

/*
  12s cycle (loading/auth):
  0–1s    hold          0–8.3%
  1–2.2s  slide right   8.3–18.3%
  2.2–7s  hold revealed 18.3–58.3%
  7–8.2s  slide back    58.3–68.3%
  8.2–12s pause         68.3–100%

  41s cycle (main menu):
  0–2s     hold          0–4.9%
  2–3.4s   slide right   4.9–8.3%
  3.4–10s  hold revealed 8.3–24.4%
  10–11.4s slide back    24.4–27.8%
  11.4–41s pause         27.8–100%
*/

/* Loading/Auth: 12s cycle */
.logo-reveal-anim .logo-reveal-img-wrap{animation:logoSlideRight12 12s linear infinite;}
.logo-reveal-anim .logo-reveal-text{animation:logoUnmask12 12s linear infinite;}

/* Main menu: 41s cycle */
.logo-reveal-idle .logo-reveal-img-wrap{animation:logoSlideRight 41s linear infinite;}
.logo-reveal-idle .logo-reveal-text{animation:logoUnmask 41s linear infinite;}

@keyframes logoSlideRight12{
  0%,8.3%  {transform:translateX(0);   animation-timing-function:cubic-bezier(0.16,1,0.3,1);}
  18.3%    {transform:translateX(140px);}
  58.3%    {transform:translateX(140px);animation-timing-function:cubic-bezier(0.7,0,0.84,0);}
  68.3%,100%{transform:translateX(0);}
}
@keyframes logoUnmask12{
  0%,8.3%  {clip-path:inset(0 0 0 100%);animation-timing-function:cubic-bezier(0.16,1,0.3,1);}
  18.3%    {clip-path:inset(0 0 0 0%);}
  58.3%    {clip-path:inset(0 0 0 0%); animation-timing-function:cubic-bezier(0.7,0,0.84,0);}
  68.3%,100%{clip-path:inset(0 0 0 100%);}
}

@keyframes logoSlideRight{
  0%,4.9%  {transform:translateX(0);   animation-timing-function:cubic-bezier(0.16,1,0.3,1);}
  8.3%     {transform:translateX(140px);}
  24.4%    {transform:translateX(140px);animation-timing-function:cubic-bezier(0.7,0,0.84,0);}
  27.8%,100%{transform:translateX(0);}
}
@keyframes logoUnmask{
  0%,4.9%  {clip-path:inset(0 0 0 100%);animation-timing-function:cubic-bezier(0.16,1,0.3,1);}
  8.3%     {clip-path:inset(0 0 0 0%);}
  24.4%    {clip-path:inset(0 0 0 0%); animation-timing-function:cubic-bezier(0.7,0,0.84,0);}
  27.8%,100%{clip-path:inset(0 0 0 100%);}
}
.loading-logo{display:none;}
#loadingScreen{align-items:center;justify-content:center;flex-direction:column;gap:1.2rem;background:linear-gradient(135deg,#0d0118 0%,#1a0533 40%,#0f0a2e 70%,#0d0118 100%);background-size:300% 300%;animation:gradientShift 8s ease infinite;}
.loading-dots{display:flex;gap:.4rem;margin-top:.5rem;}
.loading-dots span{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:dotPulse 1.2s ease-in-out infinite;}
.loading-dots span:nth-child(2){animation-delay:.2s;}.loading-dots span:nth-child(3){animation-delay:.4s;}
@keyframes dotPulse{0%,80%,100%{opacity:.2;transform:scale(.8);background:var(--accent);}40%{opacity:1;transform:scale(1);background:#d97706;}}
/* Bouncing cricket ball */
@keyframes ballBounce{0%,100%{transform:translateY(0) scaleX(1) scaleY(1)}40%{transform:translateY(-28px) scaleX(0.9) scaleY(1.1)}50%{transform:translateY(-30px) scaleX(0.9) scaleY(1.1)}90%{transform:translateY(0) scaleX(1.15) scaleY(0.85)}}
.ball-bounce{width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(249,115,22,0.5);margin-top:.5rem;animation:ballBounce .8s cubic-bezier(.34,1.56,.64,1) infinite;}
/* AUTH */
#authScreen{align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(135deg,#0d0118 0%,#1a0533 40%,#0f0a2e 70%,#0d0118 100%);background-size:300% 300%;animation:gradientShift 8s ease infinite;}
.auth-wrap{width:100%;max-width:380px;}
.logo-big{font-family:'Bebas Neue';font-size:3.6rem;letter-spacing:5px;line-height:1;background:linear-gradient(90deg,#f97316,#fbbf24,#fb923c,#f97316);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;animation:hcShimmer 3s ease infinite,hcEntranceBig .9s cubic-bezier(.34,1.56,.64,1) both;}
.logo-tag{display:none;}
.auth-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:24px;padding:1.6rem;box-shadow:0 8px 48px rgba(0,0,0,0.4);backdrop-filter:blur(16px);transition:box-shadow .4s;animation:authCardIn .6s cubic-bezier(.34,1.56,.64,1) both;}
.auth-card:focus-within{box-shadow:0 0 0 3px rgba(249,115,22,0.25),0 8px 48px rgba(0,0,0,0.4);}
.tab-row{display:flex;gap:4px;background:rgba(255,255,255,0.07);border-radius:10px;padding:4px;margin-bottom:1.2rem;}
.tab{flex:1;padding:.48rem;border:none;border-radius:7px;background:transparent;color:rgba(255,255,255,0.45);font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;transition:.2s;}.tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.4);}
.auth-footer{text-align:center;font-size:.68rem;color:rgba(255,255,255,0.35);margin-top:1rem;letter-spacing:.5px;}
/* Auth screen field overrides for dark bg */
/* Floating cricket bat decorations */
@keyframes floatUp{0%{transform:translateY(0) rotate(-15deg);opacity:.7}100%{transform:translateY(-120vh) rotate(15deg);opacity:0}}
.float-bat{position:absolute;font-size:1.4rem;bottom:-10%;left:var(--x,20%);animation:floatUp calc(5s + var(--d,0s) * 2) linear var(--d,0s) infinite;pointer-events:none;z-index:0;}
/* Auth card entrance + focus-within glow */
@keyframes authCardIn{from{transform:translateY(-4px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Auth screen field overrides for dark bg */
#authScreen .field label{color:rgba(255,255,255,0.5);}
#authScreen .field input,#authScreen .inp{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12);color:#fff;}
#authScreen .field input::placeholder,#authScreen .inp::placeholder{color:rgba(255,255,255,0.3);}
#authScreen .field input:focus,#authScreen .inp:focus{border-color:var(--accent);background:rgba(255,255,255,0.12);}
#authScreen .msg{color:rgba(255,255,255,0.5);}
#authScreen .msg.e{color:#ff6b6b;}
#authScreen .msg.s{color:#6bffaa;}
/* MAIN MENU */
.main-hero{text-align:center;padding:1.4rem 0 .6rem;}
.main-hero-sub{display:none;}
.main-hero-title{font-family:'Bebas Neue';font-size:2.8rem;letter-spacing:5px;line-height:1;background:linear-gradient(90deg,#f97316,#fbbf24,#fb923c,#f97316);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:hcShimmer 3s ease infinite;}
#pgPlay{flex-direction:column;position:relative;}
#pgPlay.active{display:flex !important;}
.pitch-bg{position:absolute;width:70%;max-width:280px;opacity:0.04;pointer-events:none;z-index:0;color:var(--text);left:50%;top:50%;transform:translate(-50%,-50%);display:none;}
body.dark .pitch-bg{display:block;}
.mode-btns{display:flex;flex-direction:column;gap:.85rem;flex:1;justify-content:center;padding:1.2rem 0 2.5rem;position:relative;z-index:1;}
.mode-big-btn{width:100%;padding:1.5rem 1.6rem;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;transition:.25s;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:0 2px 16px rgba(0,0,0,.07);}
.mode-big-btn:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.13);}
.mode-big-btn.sp:hover{border-color:var(--accent);background:rgba(249,115,22,.04);box-shadow:0 0 24px rgba(239,68,68,0.25);}.mode-big-btn.mp:hover{border-color:var(--blue);background:rgba(37,99,235,.04);box-shadow:0 0 24px rgba(59,130,246,0.25);}
.mode-big-btn:active{transform:scale(0.97)!important;}
.mode-big-icon{font-size:2.4rem;}
.mode-big-label{font-size:1.15rem;font-weight:800;color:var(--text);}
.mode-big-sub{font-size:.78rem;color:var(--muted);margin-top:0;}
/* STATS PAGE */
#pgStats .stats-row{grid-template-columns:repeat(2,1fr)!important;gap:.7rem;}
#pgStats .stat{padding:.9rem .6rem;}
#pgStats .stat .v{font-size:2rem;}
#pgStats .stat .l{font-size:.65rem;}
/* PAGE HEADER */
.page-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--border);}
.back-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:.3rem .7rem;color:var(--muted);cursor:pointer;font-size:.8rem;font-family:'Plus Jakarta Sans',sans-serif;transition:.2s;flex-shrink:0;}.back-btn:hover{color:var(--accent);border-color:var(--accent);}
.page-title{font-family:'Bebas Neue';font-size:1.5rem;letter-spacing:3px;color:var(--text);flex:1;text-align:center;}
/* INNER TABS */
.inner-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:10px;padding:4px;margin-bottom:.9rem;}
.itab{flex:1;padding:.45rem;border:none;border-radius:7px;background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;}.itab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.card-label{font-size:.7rem;font-weight:800;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;}
/* TOPBAR tweaks */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;box-shadow:0 1px 0 var(--border);}
.topbar-left{display:flex;align-items:center;gap:.65rem;}
.hamburger{background:none;border:none;cursor:pointer;padding:.3rem;display:flex;flex-direction:column;gap:5px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:.2s;}
.topbar-right{display:flex;align-items:center;gap:.5rem;}
.user-logo{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--accent);cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#fff;flex-shrink:0;}
.user-logo img{width:100%;height:100%;object-fit:cover;}
.user-name{font-weight:700;font-size:.84rem;color:var(--text);}
.elo-badge{font-size:.7rem;color:var(--muted);font-weight:600;}
/* DRAWER */
.drawer-overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.4);display:none;backdrop-filter:blur(3px);cursor:pointer;}.drawer-overlay.open{display:block;}
.drawer{position:fixed;left:0;top:0;bottom:0;width:78%;max-width:290px;z-index:81;background:var(--surface);transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:6px 0 32px rgba(0,0,0,.12);}.drawer.open{transform:translateX(0);}
.drawer-header{padding:1.3rem 1.1rem .85rem;border-bottom:1px solid var(--border);background:var(--surface);}
.drawer-logo-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem;}
.drawer-logo{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--accent);background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:#fff;flex-shrink:0;}.drawer-logo img{width:100%;height:100%;object-fit:cover;}
.drawer-username{font-weight:800;font-size:.95rem;color:var(--text);}.drawer-elo{font-size:.73rem;color:var(--muted);margin-top:.1rem;}
.drawer-nav{flex:1;padding:.5rem 0;overflow-y:auto;}
.drawer-item{display:flex;align-items:center;gap:.7rem;padding:.78rem 1.1rem;cursor:pointer;transition:background .2s;font-weight:600;font-size:.86rem;color:var(--text);border-left:3px solid transparent;}.drawer-item:hover{background:var(--surface2);border-left-color:var(--accent);transition:background .2s;}.drawer-item.active{background:rgba(249,115,22,.08);border-left:3px solid var(--accent);color:var(--accent);}
.drawer-item-icon{font-size:1rem;width:22px;text-align:center;}
.drawer-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;padding:.1rem .42rem;font-size:.65rem;font-weight:800;display:none;}.drawer-badge.show{display:inline;}
.drawer-footer{padding:.85rem 1.1rem;border-top:1px solid var(--border);}
/* LOBBY */
#lobbyScreen{flex-direction:column;}
.lobby-content{flex:1;max-width:860px;margin:0 auto;width:100%;padding:.9rem 1rem;overflow-y:auto;overflow-x:hidden;min-height:0;}
.lobby-page{display:none !important;}.lobby-page.active{display:block !important;}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.9rem;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.7rem .5rem;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.stat .v{font-family:'Bebas Neue';font-size:1.7rem;color:var(--accent);line-height:1;}.stat .l{font-size:.6rem;color:var(--muted);letter-spacing:.5px;margin-top:.1rem;}
/* ONLINE TABS */
.online-tabs{display:flex;gap:.5rem;margin-bottom:1rem;}
.otab{flex:1;padding:.55rem;border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:10px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:600;transition:.2s;}.otab.active{background:var(--surface2);border-color:var(--accent);color:var(--accent);}
/* CREATE ROOM */
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.55rem;}
.config-item{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:.65rem .8rem;}
.config-item label{font-size:.62rem;font-weight:700;letter-spacing:.7px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:.28rem;}
.config-item select{width:100%;background:transparent;border:none;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:600;outline:none;cursor:pointer;appearance:none;}
.config-toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:.65rem .8rem;margin-bottom:.55rem;}
.config-toggle-label{font-size:.82rem;font-weight:600;color:var(--text);}.config-toggle-sub{font-size:.67rem;color:var(--muted);}
/* MATCH SETTINGS REDESIGN */
.mode-pill-row{display:flex;gap:6px;margin-bottom:.9rem;}
.mode-pill{flex:1;padding:.55rem;border-radius:10px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem;font-weight:700;cursor:pointer;transition:.2s;}
.mode-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 12px rgba(249,115,22,.35);}
.ms-row{display:flex;align-items:center;justify-content:space-between;padding:.65rem .1rem;border-bottom:1px solid var(--border);}
.ms-row:last-of-type{border-bottom:none;}
.ms-label{font-size:.84rem;font-weight:600;color:var(--text);}
.ms-sel{background:transparent;border:none;color:var(--accent);font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem;font-weight:700;outline:none;cursor:pointer;appearance:none;text-align:right;padding-right:.1rem;}
/* ROOM/JOIN */
.room-code-big{font-family:'Bebas Neue';font-size:3.5rem;letter-spacing:10px;color:var(--gold);text-align:center;padding:.5rem 0;}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:.4rem;animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.code-input{width:100%;padding:.5rem;background:var(--surface2);border:2px solid var(--border);border-radius:12px;color:var(--text);font-family:'Bebas Neue';font-size:1.3rem;letter-spacing:6px;text-align:center;outline:none;text-transform:uppercase;}.code-input:focus{border-color:var(--gold);}
.rooms-list{display:flex;flex-direction:column;gap:.45rem;max-height:200px;overflow-y:auto;}
.room-item{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:.6rem .85rem;display:flex;align-items:center;justify-content:space-between;}
/* FRIENDS/HISTORY */
.friends-list{display:flex;flex-direction:column;gap:.4rem;}
.friend-item{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:.5rem .85rem;}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:.35rem;}
.offline-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block;margin-right:.35rem;}
.history-list{display:flex;flex-direction:column;gap:.38rem;overflow-y:visible;}
.hist{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.55rem .85rem;display:flex;align-items:center;justify-content:space-between;font-size:.8rem;}
.badge{padding:.15rem .48rem;border-radius:6px;font-size:.7rem;font-weight:700;}
.badge.win{background:rgba(22,163,74,.1);color:var(--green);}.badge.loss{background:rgba(220,38,38,.1);color:var(--red);}.badge.tie{background:rgba(217,119,6,.1);color:var(--gold);}
/* HISTORY PAGE */
#pgHistory{height:auto;}
#pgHistory .history-list{overflow-y:visible;max-height:none;}
/* MUSIC TRACKS */
.music-track-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .4rem;border-radius:10px;cursor:pointer;transition:.15s;margin-bottom:.2rem;}
.music-track-row:hover{background:var(--surface2);}
.music-track-row.active{background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.18);}
.music-track-icon{font-size:.9rem;width:1.2rem;text-align:center;color:var(--muted);}
.music-track-row.active .music-track-icon{color:var(--accent);}
.music-track-name{flex:1;font-size:.84rem;font-weight:600;word-break:break-word;white-space:normal;}
.music-track-row.active .music-track-name{color:var(--accent);}
.music-track-badge{font-size:.65rem;font-weight:700;background:var(--accent);color:#fff;border-radius:6px;padding:.1rem .4rem;}
/* SETTINGS */
.settings-section-title{font-size:.62rem;font-weight:800;letter-spacing:2px;color:var(--muted);text-transform:uppercase;padding:.9rem 1.1rem .4rem;display:flex;align-items:center;gap:.4rem;}
.settings-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:1rem;box-shadow:0 2px 12px rgba(0,0,0,.07);}
.settings-card.no-clip{overflow:visible;}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;border-bottom:1px solid var(--border);transition:background .15s;}.setting-row:last-child{border-bottom:none;}.setting-row:active{background:var(--surface2);}.setting-row.col{flex-direction:column;align-items:flex-start;gap:.7rem;}
.setting-icon{font-size:1.1rem;margin-right:.6rem;flex-shrink:0;}
.setting-left{display:flex;align-items:center;}
.setting-label{font-weight:700;font-size:.9rem;color:var(--text);}.setting-sub{font-size:.7rem;color:var(--muted);margin-top:.15rem;}
.mode-switch{display:flex;gap:3px;background:var(--surface2);border-radius:10px;padding:3px;border:1px solid var(--border);}
.mode-opt{padding:.32rem .65rem;border:none;border-radius:7px;background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;transition:.2s;}.mode-opt.active{background:var(--accent);color:#fff;}
.logo-edit-area{display:flex;align-items:center;gap:.9rem;}
.logo-preview{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2.5px solid var(--accent);background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#fff;cursor:pointer;flex-shrink:0;box-shadow:0 0 0 4px rgba(249,115,22,.1);}.logo-preview img{width:100%;height:100%;object-fit:cover;}
.setting-badge{display:inline-flex;align-items:center;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);border-radius:20px;padding:.18rem .55rem;font-size:.68rem;font-weight:700;color:var(--accent);margin-left:.4rem;}
/* HOW TO PLAY */
.htp-section{margin-bottom:1rem;}.htp-section h3{font-family:'Bebas Neue';letter-spacing:2px;color:var(--accent);font-size:1rem;margin-bottom:.4rem;}
.htp-section p,.htp-section li{font-size:.82rem;line-height:1.6;color:var(--text);margin-bottom:.25rem;}.htp-section ul{padding-left:1.1rem;}.htp-section li::marker{color:var(--accent);}
.htp-badge{display:inline-block;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);border-radius:6px;padding:.1rem .35rem;font-size:.72rem;font-weight:700;color:var(--accent);margin:.1rem;}
.tut-step{background:var(--surface2);border-radius:12px;padding:.85rem 1rem;margin-bottom:.55rem;border:1px solid var(--border);}
.tut-num{font-family:'Bebas Neue';font-size:1.7rem;color:var(--accent);line-height:1;margin-bottom:.18rem;}
.tut-title{font-weight:700;font-size:.88rem;margin-bottom:.3rem;}.tut-desc{font-size:.8rem;color:var(--muted);line-height:1.55;}
/* TOSS */
#tossScreen{align-items:center;justify-content:center;padding:2rem;background:var(--bg);}
.toss-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:2rem 1.6rem;width:100%;max-width:380px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.08);}
.toss-h{font-family:'Bebas Neue';font-size:2.5rem;letter-spacing:4px;color:var(--gold);}
.toss-sub{font-size:.8rem;color:var(--muted);margin:.3rem 0 1rem;}
#countdownEl{font-family:'Bebas Neue';font-size:5rem;color:var(--text);line-height:1;min-height:5rem;}
.choice-row{display:flex;gap:.75rem;margin-bottom:1rem;}
.choice{flex:1;padding:.85rem;border:2px solid var(--border);background:transparent;color:var(--text);border-radius:14px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;font-weight:700;transition:.2s;}.choice:hover{border-color:var(--accent);color:var(--accent);}.choice.sel{border-color:var(--gold);background:rgba(251,191,36,.08);color:var(--gold);}
.countdown-num{font-family:'Bebas Neue';font-size:6rem;color:var(--accent);line-height:1;animation:countPop .8s ease;}
@keyframes countPop{0%{transform:scale(1.5);opacity:0}100%{transform:scale(1);opacity:1}}
.coin{width:110px;height:110px;border-radius:50%;margin:0 auto 1.5rem;box-shadow:0 0 40px rgba(251,191,36,.35);perspective:600px;transform-style:preserve-3d;position:relative;flex-shrink:0;}
.coin-face{position:absolute;width:100%;height:100%;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.18rem;padding:.4rem;}
.coin-front{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:inset 0 0 20px rgba(0,0,0,.15);}
.coin-back{background:linear-gradient(135deg,#60a5fa,#2563eb);box-shadow:inset 0 0 20px rgba(0,0,0,.2);transform:rotateY(180deg);}
.coin-face-label{font-size:.48rem;letter-spacing:1.5px;opacity:.75;color:#fff;text-transform:uppercase;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;}
.coin-face-name{font-family:'Bebas Neue';font-size:.88rem;letter-spacing:1px;color:#fff;text-align:center;line-height:1.1;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.coin.spin-front{animation:coinFlipFront 1.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
.coin.spin-back{animation:coinFlipBack 1.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
@keyframes coinFlipFront{0%{transform:rotateY(0) scale(1);}50%{transform:rotateY(720deg) scale(1.4);}100%{transform:rotateY(1440deg) scale(1);}}
@keyframes coinFlipBack{0%{transform:rotateY(0) scale(1);}50%{transform:rotateY(630deg) scale(1.4);}100%{transform:rotateY(1260deg) scale(1);}}
/* PRE-LOBBY */
#prelobbyScreen{flex-direction:column;background:var(--bg);height:100vh;height:100dvh;overflow:hidden;}
#prelobbyScreen .pl-body{flex:1;overflow-y:auto;padding:.75rem 1rem;-webkit-overflow-scrolling:touch;min-height:0;}
.pl-footer{background:var(--surface);border-top:1px solid var(--border);padding:.65rem 1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom, 16px));flex-shrink:0;position:relative;z-index:2;}
.pl-header{background:var(--surface);border-bottom:1px solid var(--border);padding:.7rem 1.1rem;text-align:center;position:relative;flex-shrink:0;}
.pl-title{font-family:'Bebas Neue';font-size:3rem;letter-spacing:8px;background:linear-gradient(90deg,#f97316,#fbbf24,#fb923c,#f97316);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:hcShimmer 3s ease infinite;}
.pl-code-badge{display:inline-flex;align-items:center;gap:.3rem;margin-top:.3rem;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);border-radius:8px;padding:.22rem .7rem;font-family:'Bebas Neue';font-size:1.4rem;letter-spacing:3px;color:var(--gold);cursor:pointer;transition:.15s;user-select:none;text-shadow:0 0 24px rgba(251,191,36,0.5);}.pl-code-badge:hover{background:rgba(251,191,36,.18);}.pl-code-badge::before{content:'📋';font-size:.7rem;letter-spacing:0;}
@keyframes slideInUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes dashPulse{0%,100%{border-color:rgba(255,255,255,0.3)}50%{border-color:rgba(255,255,255,1)}}
.pl-slot-invite-btn{margin-left:auto;padding:.22rem .6rem;border-radius:6px;border:1px dashed var(--border);background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.7rem;cursor:pointer;transition:.2s;}.pl-slot-invite-btn:hover{border-color:var(--accent);color:var(--accent);}
.pl-teams{display:flex;gap:0;margin-bottom:.7rem;border-radius:18px;overflow:hidden;border:1px solid var(--border);}
.pl-team{flex:1;padding:.9rem .75rem;border:none;min-width:0;}
.pl-team.ta{background:rgba(239,68,68,.07);border-right:1px solid var(--border);}
.pl-team.tb{background:rgba(59,130,246,.07);}
.pl-team-lbl{font-size:.6rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:.3rem;}
.pl-team.ta .pl-team-lbl{color:var(--ta);}.pl-team.tb .pl-team-lbl{color:var(--tb);}
.pl-team-name{font-family:'Bebas Neue';font-size:1.1rem;margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl-team.ta .pl-team-name{color:var(--ta);}.pl-team.tb .pl-team-name{color:var(--tb);}
.pl-slot{display:flex;align-items:center;gap:.4rem;padding:.38rem .5rem;background:var(--bg);border-radius:8px;margin-bottom:.3rem;font-size:.78rem;font-weight:600;cursor:default;transition:.15s;animation:slideInUp .35s cubic-bezier(.34,1.56,.64,1) both;}
.pl-slot.tappable{cursor:pointer;}.pl-slot.tappable:hover{background:var(--surface2);}
.pl-slot.empty{color:var(--muted);font-style:italic;font-weight:400;font-size:.75rem;cursor:default;display:flex;align-items:center;justify-content:space-between;animation:dashPulse 1.8s ease infinite;border:1px dashed rgba(255,255,255,0.3);}
.pl-captain-crown{font-size:.7rem;margin-left:auto;flex-shrink:0;}
/* CAPTAIN / BOWLER SWAP POPUPS */
.mini-popup{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.mini-popup.show{display:flex;}
.mini-popup-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.4rem;width:85%;max-width:320px;text-align:center;animation:popIn .3s cubic-bezier(.34,1.56,.64,1);}
.mini-popup-name{font-family:'Bebas Neue';font-size:1.4rem;letter-spacing:2px;margin-bottom:.9rem;}
.mini-popup-btns{display:flex;flex-direction:column;gap:.55rem;}
/* BOWLER SWAP REQUEST button in game */
.rc-pick-btn{width:100%;padding:.6rem .9rem;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.84rem;font-weight:600;cursor:pointer;text-align:left;transition:.15s;font-family:'Plus Jakarta Sans',sans-serif;}
.rc-pick-btn:hover{border-color:var(--accent);background:rgba(249,115,22,.1);}
.rc-pick-btn.selected{border-color:var(--accent);background:rgba(249,115,22,.18);color:var(--accent);}
.rc-pick-btn:disabled{opacity:.4;cursor:not-allowed;}
.swap-btn{background:transparent;border:1px solid var(--border);color:var(--muted);padding:.3rem .65rem;border-radius:8px;cursor:pointer;font-size:.72rem;font-family:'Plus Jakarta Sans',sans-serif;transition:.2s;margin-left:.4rem;}
.swap-btn:hover{border-color:var(--blue);color:var(--blue);}
.pl-av{width:22px;height:22px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;color:#fff;flex-shrink:0;}
.pl-av.ta{background:var(--ta);}.pl-av.tb{background:var(--tb);}
.pl-av img{width:100%;height:100%;object-fit:cover;}
.pl-invite-btn{width:100%;margin-top:.4rem;padding:.38rem;border-radius:8px;border:1px dashed var(--border);background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;cursor:pointer;transition:.2s;}.pl-invite-btn:hover{border-color:var(--accent);color:var(--accent);}
.pl-settings-toggle{text-align:center;margin-bottom:.6rem;}
.pl-settings-toggle button{background:transparent;border:1px solid var(--border);color:var(--muted);padding:.42rem 1rem;border-radius:10px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;transition:.2s;}.pl-settings-toggle button:hover{border-color:var(--accent);color:var(--accent);}
.pl-settings-toggle.host-only-hidden{display:none;}
.pl-settings-panel{background:var(--surface);border:2px solid var(--accent);border-radius:14px;padding:1rem;margin-bottom:.7rem;display:none;box-shadow:0 4px 20px rgba(249,115,22,.15);}.pl-settings-panel.open{display:block;}
.pl-setting-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.82rem;}.pl-setting-row:last-child{border-bottom:none;}
.pl-setting-row select{background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;padding:.28rem .5rem;outline:none;cursor:pointer;}
.pl-waiting{display:flex;gap:.35rem;justify-content:center;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:.5rem;}
.pd{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:pd 1.2s infinite;}
.pd:nth-child(2){animation-delay:.2s;}.pd:nth-child(3){animation-delay:.4s;}
@keyframes pd{0%,100%{background:var(--muted);transform:scale(1)}50%{background:var(--accent);transform:scale(1.4)}}
.pl-start-note{font-size:.74rem;color:var(--muted);text-align:center;margin-bottom:.5rem;}
/* GAME */
#gameScreen{flex-direction:column;background:var(--bg);}
.role-banner{padding:.45rem 1rem;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:700;flex-shrink:0;}
.role-banner.batting{background:rgba(249,115,22,.1);border-bottom:2px solid rgba(249,115,22,.25);border-left:4px solid var(--accent);}
.role-banner.bowling{background:rgba(59,130,246,.08);border-bottom:2px solid rgba(59,130,246,.18);border-left:4px solid var(--blue);}
.role-txt{letter-spacing:.5px;text-transform:uppercase;}
.role-vs{color:var(--muted);font-size:.72rem;font-weight:500;cursor:pointer;text-decoration:underline dotted;}
.timer-wrap{height:4px;background:var(--bg);display:none;flex-shrink:0;}
.timer-bar{height:100%;background:linear-gradient(90deg,var(--green),var(--gold),var(--red));width:100%;transition:width .1s linear;}.timer-bar.danger{background:var(--red);}
.scoreboard{background:var(--surface);border-bottom:1px solid var(--border);padding:.7rem 1.2rem 0;flex-shrink:0;}
.sb-inner{display:flex;justify-content:space-between;align-items:center;}
.sb-team.right{text-align:right;}
.sb-tname{font-size:.65rem;font-weight:700;letter-spacing:1px;color:var(--muted);text-transform:uppercase;cursor:pointer;}.sb-tname:hover{color:var(--accent);}
.sb-score{font-family:'Bebas Neue';font-size:2.6rem;line-height:1.1;}.sb-score.batting{color:var(--accent);}.sb-score.bowling{color:var(--muted);}
@keyframes scorePop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.sb-score.score-pop{animation:scorePop .3s ease;}
.sb-wk{font-size:.68rem;color:var(--muted);}.sb-mid{text-align:center;}.sb-vs{font-family:'Bebas Neue';font-size:.9rem;color:var(--muted);}.sb-label{font-size:.65rem;color:var(--muted);}
.progress-bar{height:3px;background:var(--bg);margin-top:.55rem;}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .5s;border-radius:2px;}
.gm{flex:1;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.65rem;max-width:680px;width:100%;margin:0 auto;overflow:hidden;}
.turn-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.turn-name{font-weight:800;font-size:.95rem;color:var(--accent);}.turn-role{font-size:.72rem;color:var(--muted);margin-top:.08rem;}
.wk-pips{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end;max-width:120px;}
.pip{width:9px;height:9px;border-radius:50%;background:var(--border);border:1px solid var(--muted);}.pip.out{background:var(--red);border-color:var(--red);}
/* NUM GRID */
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;flex-shrink:0;}
.nb{aspect-ratio:1;border-radius:14px;border:2px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-family:'Bebas Neue';font-size:1.9rem;transition:.15s;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;}
.nb:hover{transform:scale(1.08);filter:brightness(1.12);box-shadow:0 0 12px rgba(255,255,255,0.15);}.nb:active{transform:scale(0.92);}
.nb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;}
.nb.picked{opacity:.65;pointer-events:none;transform:scale(.95);}
.nb.picked.is-bat{background:var(--ta);border-color:var(--ta);color:#fff;}
.nb.picked.is-bowl{background:var(--tb);border-color:var(--tb);color:#fff;}
.nb.opp-reveal{outline:3px solid rgba(255,255,255,.8);transform:scale(1.04);filter:brightness(1.2);}
.nb.opp-reveal.is-bat{background:rgba(239,68,68,.4);border-color:var(--ta);}
.nb.opp-reveal.is-bowl{background:rgba(59,130,246,.4);border-color:var(--tb);}
.nb.flash-out{animation:flashOut .5s;}.nb.flash-run{animation:flashRun .4s;}.nb.flash-six{animation:flashSix .4s;}
@keyframes flashOut{0%,100%{background:var(--surface)}50%{background:rgba(239,68,68,.3)}}
@keyframes flashRun{0%,100%{background:var(--surface)}50%{background:rgba(34,197,94,.2)}}
@keyframes flashSix{0%,100%{background:var(--surface)}50%{background:rgba(251,191,36,.25)}}
@keyframes flashSixGlow{50%{box-shadow:0 0 16px 2px rgba(251,191,36,0.6);border-color:var(--gold);}}
.nb.flash-six{animation:flashSix .4s,flashSixGlow .4s;}
@keyframes feedSlide{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}
/* FEED */
.feed{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.65rem .8rem;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.22rem;min-height:0;}
.fi{font-size:.77rem;padding:.2rem .35rem;border-radius:5px;}
.fi.run{color:var(--green);}.fi.out{color:var(--red);background:rgba(239,68,68,.06);}.fi.zero{color:var(--accent);}
.fi.sys{color:var(--muted);font-style:italic;}.fi.six{color:var(--gold);}.fi.dispute{color:var(--blue);}
.fi.milestone{color:var(--gold);background:rgba(251,191,36,.08);font-weight:700;}
.fi-bat{font-weight:700;}.fi-bowl{font-weight:700;}
/* SCOREBOARD POPUP */
.sb-popup{position:fixed;inset:0;z-index:60;background:rgba(8,12,20,.82);display:none;align-items:flex-start;justify-content:center;padding-top:4.5rem;backdrop-filter:blur(6px);}
.sb-popup.show{display:flex;}
.sb-popup-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:1.2rem;width:92%;max-width:420px;max-height:75vh;overflow-y:auto;animation:popIn .3s cubic-bezier(.34,1.56,.64,1);}
.sb-popup-title{font-family:'Bebas Neue';font-size:1.4rem;letter-spacing:3px;margin-bottom:.9rem;text-align:center;}
.sb-popup table{width:100%;border-collapse:collapse;font-size:.78rem;}
.sb-popup th{color:var(--muted);font-weight:700;font-size:.68rem;letter-spacing:.8px;text-transform:uppercase;padding:.3rem .4rem;text-align:center;border-bottom:1px solid var(--border);}
.sb-popup th:first-child{text-align:left;}
.sb-popup td{padding:.38rem .4rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.04);}
.sb-popup td:first-child{text-align:left;font-weight:600;}
.sb-popup td.wk-cell{cursor:pointer;border-radius:6px;transition:.15s;}
.sb-popup td.wk-cell:hover{background:var(--surface2);}
.sb-popup .total-col{font-weight:700;font-family:'Bebas Neue';font-size:1rem;}
.sb-popup .bonus-row td{color:var(--gold);font-style:italic;cursor:pointer;}
.sb-popup .bonus-row td:hover{background:rgba(251,191,36,.08);}
.sb-mini-pop{position:fixed;z-index:70;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:.65rem .9rem;font-size:.78rem;pointer-events:none;max-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.4);}

/* STATUS/VERIFY */
.status-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.9rem;text-align:center;}
.status-title{font-family:'Bebas Neue';font-size:1.3rem;letter-spacing:2px;color:var(--blue);}.status-sub{color:var(--muted);font-size:.8rem;margin-top:.25rem;}
.picking-dots{display:flex;gap:.4rem;justify-content:center;margin:.65rem 0 0;}
.verify-box{background:var(--surface);border:2px solid var(--gold);border-radius:16px;padding:1.1rem;text-align:center;}
.verify-title{font-family:'Bebas Neue';font-size:1.5rem;letter-spacing:2px;color:var(--gold);margin-bottom:.35rem;}
.verify-sub{color:var(--muted);font-size:.8rem;margin-bottom:.8rem;}
.verify-input{width:100%;padding:.72rem;background:var(--bg);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:'Bebas Neue';font-size:2rem;text-align:center;outline:none;}.verify-input:focus{border-color:var(--gold);}
.verify-timer{font-family:'Bebas Neue';font-size:1.1rem;color:var(--red);margin:.45rem 0;}
/* OVERLAYS */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}.overlay.show{display:flex;}
.over-box{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:2rem;max-width:420px;width:90%;text-align:center;animation:popIn .4s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15);}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.over-emoji{font-size:3.2rem;margin-bottom:.65rem;animation:resultBounce 1.4s ease infinite;}
.over-title{font-family:'Bebas Neue';font-size:2.2rem;letter-spacing:3px;}
@keyframes resultBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes confettiFall{from{transform:translateY(-20px) rotate(0deg);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}
.over-title.win{color:var(--green);}.over-title.lose{color:var(--red);}.over-title.tie{color:var(--gold);}
.over-body{color:var(--muted);font-size:.86rem;margin:.7rem 0 1.4rem;line-height:1.6;white-space:pre-line;}
.over-btns{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;}
#inningsOv{position:fixed;inset:0;z-index:40;background:var(--bg);display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;}#inningsOv.show{display:flex;}
.inn-title{font-family:'Bebas Neue';font-size:2.8rem;letter-spacing:5px;}.inn-sub{color:var(--muted);margin:.5rem 0;}.inn-target{font-family:'Bebas Neue';font-size:1.8rem;color:var(--gold);margin:.5rem 0 1.4rem;}
/* PLAYER STATS */
.pstats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.7rem 0;}
.pstat-box{background:var(--bg);border-radius:12px;padding:.7rem;text-align:center;}.pstat-val{font-family:'Bebas Neue';font-size:1.5rem;color:var(--accent);}.pstat-lbl{font-size:.67rem;color:var(--muted);}
.milestone-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.75rem;}
.mchip{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:20px;padding:.25rem .65rem;font-size:.75rem;font-weight:700;color:var(--gold);}
#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface2);border:1px solid var(--border);padding:.52rem 1rem;border-radius:10px;font-size:.8rem;opacity:0;transition:.3s;z-index:100;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
@media(max-width:380px){.nb{font-size:1.6rem;}.sb-score{font-size:2.2rem;}}

/* ═══ PROFESSIONAL UI ENHANCEMENTS ═══ */

/* — Smooth screen transitions — */
.screen{
  animation:screenIn .35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes screenIn{
  from{opacity:0;transform:scale(0.98);}
  to{opacity:1;transform:scale(1);}
}

/* — Button press feedback — */
.btn-main,.btn-accent,.btn-sec,.btn-ghost,.btn-sm{
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease !important;
}
.btn-main:active,.btn-accent:active,.btn-sec:active,.btn-ghost:active,.btn-sm:active{
  transform:scale(0.96) !important;
}

/* — Card hover lift — */
.card{
  transition:transform .2s ease,box-shadow .2s ease !important;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.08) !important;
}

/* — Spring entrance for modals — */
.modal,.overlay{
  animation:modalSpring .35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes modalSpring{
  from{opacity:0;transform:translateY(30px) scale(0.92);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* — Toast notification — */
.toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 18px;
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
  max-width:90vw;
  text-align:center;
}
.toast.on{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
  animation:toastSlide .3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes toastSlide{
  from{opacity:0;transform:translateX(-50%) translateY(20px);}
  to{opacity:1;transform:translateX(-50%) translateY(-4px);}
}
.toast.ok{border-color:var(--green);color:var(--green);}
.toast.err{border-color:var(--red);color:var(--red);}

/* — Skeleton loader — */
.skeleton{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface) 50%,var(--surface2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* — Empty state animation — */
.empty-state{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}
.empty-state .icon{
  font-size:48px;
  margin-bottom:12px;
  opacity:0.4;
  animation:emptyFloat 3s ease-in-out infinite;
}
@keyframes emptyFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* — Glow pulse for important buttons — */
.glow-pulse{
  animation:glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 4px 12px rgba(249,115,22,0.3),0 0 0 0 rgba(249,115,22,0.4);}
  50%{box-shadow:0 4px 12px rgba(249,115,22,0.3),0 0 0 8px rgba(249,115,22,0);}
}

/* — Focus visible for accessibility — */
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
button:focus{outline:none;}

/* — Selection color — */
::selection{background:var(--accent);color:#fff;}

/* — Reduced motion — */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════
   ENHANCED ANIMATION LAYER (cinematic feel)
   ═══════════════════════════════════════════════ */

/* — Screen shake on OUT — */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  10%,30%,50%,70%,90%{transform:translateX(-7px);}
  20%,40%,60%,80%{transform:translateX(7px);}
}
.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97);}

/* — "SHOW!" flash before each ball resolves — */
.show-flash{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:5.5rem;letter-spacing:8px;color:#fff;
  background:radial-gradient(circle,rgba(249,115,22,.35) 0%,transparent 65%);
  pointer-events:none;z-index:30;text-shadow:0 0 30px rgba(249,115,22,.6);
  animation:showFlash .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes showFlash{
  0%{opacity:0;transform:scale(.3);}
  30%{opacity:1;transform:scale(1.15);}
  70%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.4);}
}

/* — Particle burst (used for SIX and OUT) — */
.particle-burst{
  position:absolute;left:50%;top:55%;width:9px;height:9px;border-radius:50%;
  background:#fbbf24;pointer-events:none;z-index:32;
  transform:translate(-50%,-50%);
  animation:burst .75s cubic-bezier(.34,1.56,.64,1) forwards;
}
.particle-burst.out{background:#ef4444;width:11px;height:11px;}
@keyframes burst{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(0);opacity:0;}
}

/* — "SIX!" celebration text — */
.six-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:7rem;letter-spacing:8px;color:#fbbf24;
  text-shadow:0 0 50px rgba(251,191,36,.9),0 4px 16px rgba(0,0,0,.5);
  pointer-events:none;z-index:35;
  animation:sixText 1s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sixText{
  0%{opacity:0;transform:scale(.2) rotate(-18deg);}
  30%{opacity:1;transform:scale(1.25) rotate(6deg);}
  60%{transform:scale(1) rotate(0);}
  100%{opacity:0;transform:scale(1.6) rotate(0);}
}

/* — "OUT!" text — */
.out-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:6.5rem;letter-spacing:10px;color:#ef4444;
  text-shadow:0 0 50px rgba(239,68,68,.9),0 4px 16px rgba(0,0,0,.5);
  pointer-events:none;z-index:35;
  animation:outText .9s cubic-bezier(.34,1.56,.64,1);
}
@keyframes outText{
  0%{opacity:0;transform:scale(2.5);}
  30%{opacity:1;transform:scale(.88);}
  50%{transform:scale(1.06);}
  70%{transform:scale(1);}
  100%{opacity:0;transform:scale(.8);}
}

/* — Staggered entrance for num-grid buttons — */
@keyframes nbStagger{
  0%{opacity:0;transform:scale(.5) translateY(10px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* — 3D flip on opponent reveal (replaces static scale) — */
.nb.opp-reveal{
  animation:nbFlip .55s cubic-bezier(.34,1.56,.64,1);
  outline:3px solid rgba(255,255,255,.85);
  transform:scale(1.04);
  filter:brightness(1.2);
}
@keyframes nbFlip{
  0%{transform:perspective(500px) rotateY(0) scale(1);}
  50%{transform:perspective(500px) rotateY(180deg) scale(1.18);filter:brightness(1.5);}
  100%{transform:perspective(500px) rotateY(360deg) scale(1.04);}
}

/* — Spring bounce on picked button — */
.nb.picked{
  animation:pickedSpring .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pickedSpring{
  0%{transform:scale(1);}
  45%{transform:scale(.82);}
  100%{transform:scale(.95);}
}

/* — Button ripple — */
.nb{position:relative;overflow:hidden;}
.btn-ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none;
}
@keyframes rippleAnim{
  to{transform:scale(2.6);opacity:0;}
}

/* — Role banner slide-in on every turn change — */
.role-banner{animation:roleSlide .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes roleSlide{
  from{opacity:0;transform:translateY(-14px);}
  to{opacity:1;transform:translateY(0);}
}

/* — Elo pop after tick — */
.elo-done{animation:eloPop .4s ease;}
@keyframes eloPop{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}

/* — Innings / result overlay extra polish — */
.over-box{animation:popIn .45s cubic-bezier(.34,1.56,.64,1);}
.inn-title{animation:roleSlide .6s cubic-bezier(.34,1.56,.64,1);}

/* — Feed item slide-in (enhanced) — */
.fi{animation:feedSlide .25s ease;}

/* — Mobile bottom safe area — */
@media (max-width:500px){
  .screen{padding-bottom:env(safe-area-inset-bottom);}
  .show-flash{font-size:4rem;}
  .six-text{font-size:5rem;}
  .out-text{font-size:4.5rem;}
}

/* — Better number animation — */
.nb,.sb-score{
  transition:transform .15s ease;
}
.nb:active,.sb-score:active{
  transform:scale(1.1);
}

/* — Room item slide-in — */
.room-item{
  animation:slideIn .3s ease;
}
@keyframes slideIn{
  from{opacity:0;transform:translateX(-12px);}
  to{opacity:1;transform:translateX(0);}
}

/* — Friend list item slide-in — */
.friend-item{
  animation:slideIn .3s ease;
}

/* — History item slide-in — */
.hist{
  animation:slideIn .25s ease;
}

/* — Online dot pulse — */
.online-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  display:inline-block;position:relative;
}
.online-dot::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:var(--green);opacity:0.4;
  animation:onlinePulse 1.5s ease-out infinite;
}
@keyframes onlinePulse{
  0%{transform:scale(1);opacity:0.4;}
  100%{transform:scale(2);opacity:0;}
}
.offline-dot{
  width:8px;height:8px;border-radius:50%;background:var(--muted);
  display:inline-block;
}

/* — Print styles — */
@media print{
  body{background:#fff;color:#000;}
  .screen{display:none !important;}
}
/* ═══════════════════════════════════════════════
   THEME SYSTEM — 10 color themes
   ═══════════════════════════════════════════════ */

/* Theme 1: Orange (default) */
:root[data-theme="orange"]{--accent:#f97316;--accent2:#fb923c;--gold:#d97706;}

/* Theme 2: Blue */
:root[data-theme="blue"]{--accent:#3b82f6;--accent2:#60a5fa;--gold:#d97706;}

/* Theme 3: Green */
:root[data-theme="green"]{--accent:#22c55e;--accent2:#4ade80;--gold:#d97706;}

/* Theme 4: Red */
:root[data-theme="red"]{--accent:#ef4444;--accent2:#f87171;--gold:#d97706;}

/* Theme 5: Purple */
:root[data-theme="purple"]{--accent:#a855f7;--accent2:#c084fc;--gold:#d97706;}

/* Theme 6: Pink */
:root[data-theme="pink"]{--accent:#ec4899;--accent2:#f472b6;--gold:#d97706;}

/* Theme 7: Gold */
:root[data-theme="gold"]{--accent:#f59e0b;--accent2:#fbbf24;--gold:#d97706;}

/* Theme 8: Teal */
:root[data-theme="teal"]{--accent:#14b8a6;--accent2:#2dd4bf;--gold:#d97706;}

/* Theme 9: Indigo */
:root[data-theme="indigo"]{--accent:#6366f1;--accent2:#818cf8;--gold:#d97706;}

/* Theme 10: Cyan */
:root[data-theme="cyan"]{--accent:#06b6d4;--accent2:#22d3ee;--gold:#d97706;}

/* Theme selector grid */
.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:.5rem;}
.theme-swatch{
  aspect-ratio:1;border-radius:12px;cursor:pointer;
  border:3px solid var(--border);transition:transform .2s,border-color .2s,box-shadow .2s;
  position:relative;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
}
.theme-swatch:hover{transform:scale(1.1);}
.theme-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--accent),0 4px 16px rgba(0,0,0,.15);}
.theme-swatch.active::after{content:'✓';color:#fff;font-weight:800;font-size:1rem;}
.theme-swatch.t-orange{background:linear-gradient(135deg,#f97316,#fb923c);}
.theme-swatch.t-blue{background:linear-gradient(135deg,#3b82f6,#60a5fa);}
.theme-swatch.t-green{background:linear-gradient(135deg,#22c55e,#4ade80);}
.theme-swatch.t-red{background:linear-gradient(135deg,#ef4444,#f87171);}
.theme-swatch.t-purple{background:linear-gradient(135deg,#a855f7,#c084fc);}
.theme-swatch.t-pink{background:linear-gradient(135deg,#ec4899,#f472b6);}
.theme-swatch.t-gold{background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.theme-swatch.t-teal{background:linear-gradient(135deg,#14b8a6,#2dd4bf);}
.theme-swatch.t-indigo{background:linear-gradient(135deg,#6366f1,#818cf8);}
.theme-swatch.t-cyan{background:linear-gradient(135deg,#06b6d4,#22d3ee);}

/* ═══ Logo animations (applied to logo.png) ═══ */
.logo-reveal-img{
  animation:logoEntrance 1s cubic-bezier(.34,1.56,.64,1),logoFloat 4s ease-in-out infinite 1s,logoGlow 3s ease-in-out infinite;
}
@keyframes logoEntrance{
  0%{opacity:0;transform:scale(.3) rotate(-180deg);}
  60%{opacity:1;transform:scale(1.15) rotate(10deg);}
  100%{opacity:1;transform:scale(1) rotate(0deg);}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-8px) rotate(3deg);}
}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 6px 24px rgba(249,115,22,.4));}
  50%{filter:drop-shadow(0 8px 36px rgba(249,115,22,.7));}
}

/* Auth logo animation */
.auth-logo-wrap .logo-reveal-img,.auth-logo{
  animation:logoEntrance 1s cubic-bezier(.34,1.56,.64,1),logoFloat 4s ease-in-out infinite 1s,logoGlow 3s ease-in-out infinite;
}

/* Topbar logo spin on hover */
.topbar-logo{height:36px;width:36px;object-fit:contain;cursor:pointer;transition:transform .3s;}
.topbar-logo:hover{transform:scale(1.15) rotate(15deg);}