@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&family=Rajdhani:wght@400;600;700&display=swap');

:root {
  --bg:     #060810;
  --bg2:    #0c0f1e;
  --panel:  #111425;
  --border: #1e2340;
  --green:  #00f5a0;
  --blue:   #00c8ff;
  --red:    #ff3c5a;
  --gold:   #ffd700;
  --purple: #b56fff;
  --orange: #ff8c00;
  --text:   #dde2f5;
  --dim:    #4a5070;
  --ft: 'Bebas Neue', sans-serif;
  --fu: 'Rajdhani', sans-serif;
  --fb: 'Barlow Condensed', sans-serif;
  --gg: 0 0 18px rgba(0,245,160,.45);
  --gb: 0 0 18px rgba(0,200,255,.45);
  --gr: 0 0 18px rgba(255,60,90,.55);
  --gd: 0 0 18px rgba(255,215,0,.4);
  --gp: 0 0 18px rgba(181,111,255,.45);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text);
             font-family:var(--fu); -webkit-font-smoothing:antialiased; }

/* ── SCREENS ── */
.screen { position:fixed; inset:0; display:flex; flex-direction:column;
          align-items:center; justify-content:center; padding:16px;
          opacity:0; pointer-events:none; transition:opacity .35s; overflow-y:auto; }
.screen.active { opacity:1; pointer-events:all; }
.hidden { display:none !important; }

/* ── LOADING ── */
#screen-loading { overflow:hidden; }
.load-bg {
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at 20% 50%, rgba(0,245,160,.15),transparent 55%),
              radial-gradient(ellipse at 80% 30%, rgba(0,200,255,.12),transparent 55%),#060810;
}
.load-bg::after { content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(0,245,160,.04) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,245,160,.04) 1px,transparent 1px);
  background-size:36px 36px; animation:gm 18s linear infinite; }
@keyframes gm { to { background-position:36px 36px; } }
.load-content { position:relative; z-index:1; display:flex; flex-direction:column;
                align-items:center; gap:10px; text-align:center; }
.ak-logo { font-family:var(--ft); font-size:13px; letter-spacing:6px; color:var(--dim);
           border:1px solid var(--border); border-radius:50px; padding:5px 18px; }
.bat-anim { font-size:56px; animation:batS 1.5s ease-in-out infinite;
            filter:drop-shadow(0 0 18px rgba(0,245,160,.6)); }
@keyframes batS { 0%,100%{transform:rotate(-10deg) scale(1)} 50%{transform:rotate(10deg) scale(1.1)} }
.hc-title { font-family:var(--ft); font-size:clamp(52px,13vw,96px); line-height:.9;
            letter-spacing:4px; color:#fff; text-shadow:0 0 40px rgba(0,200,255,.5); }
.hc-title span { color:var(--green); text-shadow:var(--gg); }
.hc-sub { font-family:var(--fb); font-size:13px; letter-spacing:4px; color:var(--dim); text-transform:uppercase; }
.load-bar-wrap { width:220px; height:4px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; margin-top:8px; }
.load-bar { height:100%; width:0; background:linear-gradient(90deg,var(--green),var(--blue)); border-radius:10px; transition:width .2s; }
.load-tip { font-size:12px; color:var(--dim); letter-spacing:1px; }

/* ── AUTH BOX ── */
#screen-auth { overflow:hidden; }
.auth-box {
  position:relative; z-index:1;
  background:var(--panel); border:1px solid var(--border); border-radius:20px;
  padding:28px 28px 24px; width:100%; max-width:360px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 0 60px rgba(0,200,255,.08);
  animation:authIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes authIn { from{transform:scale(.85) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.auth-logo { font-size:42px; filter:drop-shadow(0 0 14px rgba(0,245,160,.5)); }
.auth-title { font-family:var(--ft); font-size:32px; letter-spacing:4px; color:var(--green); text-shadow:var(--gg); }
.auth-sub { font-size:12px; letter-spacing:3px; color:var(--dim); margin-top:-8px; }

.auth-tabs { display:flex; gap:0; width:100%; background:rgba(255,255,255,.04); border-radius:10px; overflow:hidden; }
.atab { flex:1; background:none; border:none; font-family:var(--ft); font-size:17px; letter-spacing:2px;
        color:var(--dim); padding:10px; cursor:pointer; transition:background .2s, color .2s; }
.atab.active { background:rgba(0,245,160,.12); color:var(--green); }

.auth-form { display:flex; flex-direction:column; gap:11px; width:100%; }
.field-wrap { display:flex; align-items:center; gap:8px;
              background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:11px;
              padding:0 12px; transition:border-color .2s; }
.field-wrap:focus-within { border-color:rgba(0,200,255,.4); }
.field-icon { font-size:16px; flex-shrink:0; opacity:.6; }
.field { flex:1; background:none; border:none; outline:none; color:var(--text);
         font-family:var(--fu); font-size:16px; font-weight:600; padding:12px 0; }
.field::placeholder { color:var(--dim); font-weight:400; }
.eye-btn { background:none; border:none; cursor:pointer; font-size:15px; opacity:.5; padding:0; transition:opacity .15s; }
.eye-btn:hover { opacity:1; }

.auth-err { background:rgba(255,60,90,.1); border:1px solid rgba(255,60,90,.3);
            border-radius:8px; padding:8px 12px; font-size:13px; color:var(--red); text-align:center; }
.btn-auth { background:linear-gradient(135deg,var(--green),#00c8a0); color:#000; border:none;
            border-radius:50px; font-family:var(--ft); font-size:19px; letter-spacing:3px;
            padding:13px; width:100%; cursor:pointer; box-shadow:var(--gg);
            transition:transform .15s, box-shadow .15s; }
.btn-auth:hover  { transform:scale(1.04); box-shadow:0 0 35px rgba(0,245,160,.7); }
.btn-auth:active { transform:scale(.97); }

/* ── INTRO ── */
#screen-intro { overflow:hidden; }
.intro-bg { position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at 30% 60%,rgba(0,245,160,.12),transparent 60%),
              radial-gradient(ellipse at 75% 30%,rgba(0,200,255,.10),transparent 55%),
              linear-gradient(180deg,#06080f,#0b0e1e);
  animation:bgP 5s ease-in-out infinite alternate; }
.intro-bg::after { content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(0,245,160,.035) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,245,160,.035) 1px,transparent 1px);
  background-size:42px 42px; animation:gm 20s linear infinite; }
@keyframes bgP { from{opacity:.8} to{opacity:1} }
.intro-content { position:relative; z-index:1; display:flex; flex-direction:column;
                 align-items:center; gap:12px; text-align:center; }
.ak-badge { font-family:var(--ft); font-size:12px; letter-spacing:5px; color:var(--dim);
            border:1px solid var(--border); border-radius:50px; padding:5px 18px; }
.logo-bat { font-size:56px; animation:bounce 2s ease-in-out infinite;
            filter:drop-shadow(0 0 18px rgba(0,245,160,.6)); }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.game-title { font-family:var(--ft); font-size:clamp(52px,13vw,92px); line-height:.9;
              letter-spacing:4px; color:#fff; text-shadow:0 0 30px rgba(0,200,255,.5); }
.game-title span { color:var(--green); text-shadow:var(--gg); }
.subtitle { font-family:var(--fb); font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--dim); }
.budget-pill { background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.3);
               border-radius:50px; padding:9px 22px; font-size:16px; font-weight:600; color:var(--gold); }
.user-pill { background:rgba(0,200,255,.08); border:1px solid rgba(0,200,255,.25);
             border-radius:50px; padding:7px 18px; font-size:14px; color:var(--blue); letter-spacing:1px; }
.gold { color:var(--gold); }
.green { color:var(--green); }
.blue  { color:var(--blue); }
.red   { color:var(--red); }

/* ── BUTTONS ── */
.btn-primary { background:linear-gradient(135deg,var(--green),#00c8a0); color:#000; border:none;
               border-radius:50px; font-family:var(--ft); font-size:20px; letter-spacing:3px;
               padding:14px 46px; cursor:pointer; box-shadow:var(--gg);
               transition:transform .15s, box-shadow .15s; margin-top:6px; }
.btn-primary:hover  { transform:scale(1.06); box-shadow:0 0 35px rgba(0,245,160,.7); }
.btn-primary:active { transform:scale(.97); }
.btn-ghost { background:rgba(255,255,255,.04); color:var(--dim); border:1px solid var(--border);
             border-radius:50px; font-family:var(--ft); font-size:16px; letter-spacing:2px;
             padding:11px 30px; cursor:pointer; transition:background .15s, color .15s; }
.btn-ghost:hover { background:rgba(255,255,255,.09); color:var(--text); }
.btn-icon { background:none; border:none; font-size:22px; cursor:pointer; opacity:.7; transition:opacity .15s; }
.btn-icon:hover { opacity:1; }
.mt8  { margin-top:8px; }
.mt12 { margin-top:12px; }

/* ── HUB ── */
#screen-hub { justify-content:flex-start; padding-top:0; }
.hub-header { width:100%; max-width:480px; display:flex; justify-content:space-between;
              align-items:center; background:var(--panel); border-bottom:2px solid var(--border);
              padding:12px 16px; flex-shrink:0; }
.hub-title  { font-family:var(--ft); font-size:22px; letter-spacing:3px; color:var(--green); }
.hub-stats  { display:flex; gap:14px; font-family:var(--ft); font-size:19px; margin-top:3px; }
.hub-right  { display:flex; align-items:center; gap:10px; }
.hub-user   { font-size:13px; color:var(--blue); letter-spacing:1px; }
.gem-count  { color:var(--purple); }
.format-list { width:100%; max-width:480px; padding:10px 14px; display:flex;
               flex-direction:column; gap:9px; flex:1; overflow-y:auto; }
.format-card { background:var(--panel); border:1px solid var(--border); border-radius:14px;
               padding:14px 16px; display:flex; align-items:center; gap:12px;
               position:relative; overflow:hidden; transition:transform .15s, border-color .15s, box-shadow .15s; }
.format-card.unlocked { cursor:pointer; }
.format-card.unlocked:hover { transform:translateY(-2px); border-color:rgba(0,245,160,.35); box-shadow:var(--gg); }
.format-card.locked   { opacity:.4; cursor:not-allowed; }
.fc-icon { font-size:34px; flex-shrink:0; }
.fc-info { flex:1; }
.fc-name { font-family:var(--ft); font-size:20px; letter-spacing:1px; }
.fc-meta { font-size:11px; color:var(--blue); letter-spacing:1px; margin-top:1px; }
.fc-wins { font-size:12px; color:var(--green); margin-top:3px; }
.fc-req  { font-size:12px; color:var(--dim); margin-top:3px; }

/* ── DIFFICULTY ── */
.screen-header { text-align:center; margin-bottom:16px; }
.screen-header h2 { font-family:var(--ft); font-size:36px; letter-spacing:4px; color:var(--green); text-shadow:var(--gg); }
.screen-sub { font-size:12px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; margin-top:3px; }
.diff-grid { display:flex; flex-direction:column; gap:10px; width:100%; max-width:400px; }
.diff-btn { background:var(--panel); border:1px solid var(--border); border-radius:14px;
            padding:16px 18px; cursor:pointer; text-align:left;
            display:flex; align-items:center; gap:14px; transition:transform .15s, border-color .15s; }
.diff-btn:hover { transform:scale(1.02); }
.diff-btn.easy:hover   { border-color:var(--green); }
.diff-btn.medium:hover { border-color:var(--gold); }
.diff-btn.hard:hover   { border-color:var(--red); }
.diff-icon  { font-size:34px; flex-shrink:0; }
.diff-right { flex:1; }
.diff-name  { font-family:var(--ft); font-size:22px; letter-spacing:2px; }
.diff-desc  { font-size:12px; color:var(--dim); line-height:1.4; margin-top:2px; }
.diff-btn.easy   .diff-name { color:var(--green); }
.diff-btn.medium .diff-name { color:var(--gold);  }
.diff-btn.hard   .diff-name { color:var(--red);   }

/* ── TOP BAR ── */
#screen-auction, #screen-match, #screen-bowling { justify-content:flex-start; padding-top:0; }
.top-bar { width:100%; max-width:480px; display:flex; justify-content:space-between;
           background:var(--panel); border-bottom:2px solid var(--border);
           padding:12px 16px; flex-shrink:0; }
.hud-cell        { display:flex; flex-direction:column; gap:1px; }
.hud-cell.center { align-items:center; }
.hud-cell.right  { align-items:flex-end; }
.hud-lbl { font-size:9px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
.hud-val { font-family:var(--ft); font-size:20px; letter-spacing:1px; }

/* ── AUCTION CARD ── */
.p-card { position:relative; width:100%; max-width:330px; background:linear-gradient(160deg,#191d32,#0e1122);
          border:1px solid var(--border); border-radius:18px; padding:22px 18px 16px;
          margin:12px auto 0; overflow:hidden; flex-shrink:0;
          animation:cardIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes cardIn { from{transform:scale(.85) translateY(18px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.card-glow { position:absolute; top:-40px; left:50%; transform:translateX(-50%);
             width:180px; height:180px;
             background:radial-gradient(circle,rgba(0,200,255,.12),transparent 70%); pointer-events:none; }
.type-badge { display:inline-block; font-family:var(--ft); font-size:10px; letter-spacing:2px;
              padding:3px 11px; border-radius:50px; border:1px solid; margin-bottom:6px; }
.badge-FINISHER { border-color:var(--green);  color:var(--green);  background:rgba(0,245,160,.07); }
.badge-ANCHOR   { border-color:var(--blue);   color:var(--blue);   background:rgba(0,200,255,.07); }
.badge-RISKY    { border-color:var(--red);    color:var(--red);    background:rgba(255,60,90,.07); }
.badge-BOWLER   { border-color:var(--purple); color:var(--purple); background:rgba(181,111,255,.07); }
.p-avatar { font-size:46px; text-align:center; margin-bottom:3px; }
.p-name   { font-family:var(--ft); font-size:26px; letter-spacing:2px; text-align:center; color:#fff; }
.p-cost   { font-family:var(--fb); font-size:16px; font-weight:700; text-align:center; color:var(--gold); margin:3px 0 11px; }
.stat-bars  { display:flex; flex-direction:column; gap:6px; }
.stat-row   { display:flex; align-items:center; gap:7px; }
.stat-lbl   { font-size:9px; letter-spacing:2px; color:var(--dim); width:40px; flex-shrink:0; }
.bar        { flex:1; height:5px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; }
.bar-fill   { height:100%; border-radius:10px; transition:width .5s cubic-bezier(.34,1.56,.64,1); }
.pwr { background:linear-gradient(90deg,var(--green),#00ffd0); box-shadow:0 0 6px rgba(0,245,160,.5); }
.rsk { background:linear-gradient(90deg,var(--red),#ff7b00);   box-shadow:0 0 6px rgba(255,60,90,.5); }
.stat-num { font-size:11px; font-weight:700; width:22px; text-align:right; color:var(--dim); }
.p-desc   { font-size:11px; color:var(--dim); text-align:center; margin-top:9px; line-height:1.4; }
.auction-actions { display:flex; gap:9px; margin:10px auto 0; max-width:330px; width:100%; flex-shrink:0; }
.btn-buy  { flex:1; background:linear-gradient(135deg,var(--green),#00b87a); color:#000; border:none;
            border-radius:11px; font-family:var(--ft); font-size:18px; letter-spacing:2px;
            padding:12px; cursor:pointer; box-shadow:var(--gg); transition:transform .15s, opacity .2s; }
.btn-buy:hover { transform:scale(1.04); } .btn-buy:active { transform:scale(.97); }
.btn-buy:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.btn-skip { flex:1; background:rgba(255,255,255,.04); color:var(--dim); border:1px solid var(--border);
            border-radius:11px; font-family:var(--ft); font-size:18px; letter-spacing:2px;
            padding:12px; cursor:pointer; transition:background .15s, color .15s; }
.btn-skip:hover { background:rgba(255,255,255,.09); color:var(--text); }
.mini-team { display:flex; gap:6px; margin:9px auto 0; max-width:330px; width:100%; flex-shrink:0; flex-wrap:wrap; }
.mini-player { flex:1; min-width:48px; background:var(--panel); border:1px solid var(--border);
               border-radius:8px; padding:6px 4px; text-align:center; font-size:9px; color:var(--dim); }
.mini-player.filled { border-color:var(--green); color:var(--green); background:rgba(0,245,160,.05); }
.mp-name { font-size:9px; font-weight:700; margin-top:1px; }

/* ── TEAM GRID ── */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
             gap:9px; width:100%; max-width:500px; margin-bottom:14px; }
.team-card { background:var(--panel); border:1px solid var(--border); border-radius:13px;
             padding:14px 11px 11px; text-align:center; position:relative; overflow:hidden; transition:transform .2s; }
.team-card:hover { transform:translateY(-3px); }
.tc-badge  { position:absolute; top:7px; right:7px; font-size:8px; letter-spacing:1px;
             padding:2px 6px; border-radius:50px; font-family:var(--fb); font-weight:700; border:1px solid; }
.tc-avatar { font-size:34px; }
.tc-name   { font-family:var(--ft); font-size:16px; margin-top:3px; letter-spacing:1px; }
.tc-level  { font-size:10px; letter-spacing:2px; color:var(--gold); margin-top:1px; }
.tc-stats  { display:flex; justify-content:center; gap:9px; margin-top:7px; font-size:11px; color:var(--dim); }
.stars { color:var(--gold); }

/* ── TOSS ── */
.toss-area { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:340px; }
.toss-oe   { display:flex; gap:12px; width:100%; }
.oe-btn    { flex:1; padding:13px; border-radius:11px; border:2px solid var(--border);
             background:var(--panel); font-family:var(--ft); font-size:21px; letter-spacing:3px;
             color:var(--dim); cursor:pointer; transition:all .15s; }
.oe-btn.sel-odd  { border-color:var(--green); color:var(--green); background:rgba(0,245,160,.08); box-shadow:var(--gg); }
.oe-btn.sel-even { border-color:var(--blue);  color:var(--blue);  background:rgba(0,200,255,.08); box-shadow:var(--gb); }
.oe-btn:hover    { border-color:var(--text); color:var(--text); }
.toss-pick-label { font-size:12px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
.toss-num-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%; }
.toss-num { background:var(--panel); border:1px solid var(--border); border-radius:11px; color:var(--text);
            font-family:var(--ft); font-size:26px; padding:13px; cursor:pointer;
            transition:background .12s, transform .12s; }
.toss-num:hover  { background:rgba(0,245,160,.07); border-color:var(--green); transform:scale(1.05); }
.toss-num:active { transform:scale(.93); }
.toss-num:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.toss-result { background:var(--panel); border:1px solid var(--border); border-radius:13px;
               padding:16px 24px; text-align:center; font-family:var(--ft); font-size:20px;
               letter-spacing:2px; animation:cardIn .4s cubic-bezier(.34,1.56,.64,1); width:100%; }
.toss-win  { color:var(--green); text-shadow:var(--gg); }
.toss-lose { color:var(--red); }

/* ── MATCH ── */
.match-info-bar { width:100%; max-width:480px; display:flex; justify-content:space-between;
                  align-items:center; padding:6px 16px;
                  background:rgba(0,0,0,.25); border-bottom:1px solid var(--border); flex-shrink:0; }
.itag { font-family:var(--fb); font-size:13px; font-weight:700; letter-spacing:2px; color:var(--blue); }
.ttag { font-family:var(--fb); font-size:13px; font-weight:700; letter-spacing:1px; color:var(--gold); }
.mtag { font-family:var(--fb); font-size:12px; letter-spacing:1px; color:var(--dim); }
.bowling-tag { color:var(--purple) !important; }

.reveal-row { display:flex; align-items:center; justify-content:center; gap:10px;
              width:100%; max-width:480px; padding:12px 14px 7px; flex-shrink:0; }
.reveal-box   { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.reveal-label { font-size:9px; letter-spacing:3px; color:var(--dim); text-transform:uppercase; }
.reveal-num   { font-family:var(--ft); font-size:clamp(42px,12vw,66px); line-height:1;
                background:var(--panel); border:2px solid var(--border); border-radius:13px;
                width:100%; text-align:center; padding:9px 0; }
.you-num  { color:var(--green); border-color:rgba(0,245,160,.22); }
.cpu-num  { color:var(--red);   border-color:rgba(255,60,90,.22); }
.bowl-you { color:var(--purple); border-color:rgba(181,111,255,.22); }
.bowl-cpu { color:var(--orange); border-color:rgba(255,140,0,.22); }
.reveal-num.pop { animation:numPop .33s cubic-bezier(.34,1.56,.64,1); }
@keyframes numPop { 0%{transform:scale(.55);opacity:.3} 100%{transform:scale(1);opacity:1} }
.result-mid  { font-family:var(--ft); font-size:clamp(13px,3.5vw,18px); letter-spacing:2px;
               text-align:center; color:var(--dim); min-width:72px; transition:color .15s; }
.result-OUT   { color:var(--red)   !important; text-shadow:var(--gr); }
.result-RUN   { color:var(--green) !important; text-shadow:var(--gg); }
.result-SIX   { color:var(--gold)  !important; text-shadow:var(--gd); }
.result-FOUR  { color:var(--blue)  !important; text-shadow:var(--gb); }
.result-WICKET{ color:var(--purple)!important; text-shadow:var(--gp); }

/* ── BOWLING SCREEN ── */
.cpu-bat-panel { width:100%; max-width:480px; display:flex; align-items:center; gap:14px;
                 padding:10px 18px; background:rgba(181,111,255,.06); border-bottom:1px solid rgba(181,111,255,.15);
                 flex-shrink:0; }
.cpu-bat-avatar { font-size:36px; }
.cpu-bat-name   { font-family:var(--ft); font-size:20px; letter-spacing:2px; color:var(--purple); }
.cpu-bat-mood   { font-size:12px; color:var(--dim); margin-top:2px; font-style:italic; }
.bowl-instruction { font-size:12px; letter-spacing:2px; color:var(--dim); text-transform:uppercase;
                    text-align:center; margin:4px 0 2px; flex-shrink:0; }

.number-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
               width:100%; max-width:330px; flex-shrink:0; margin:0 auto; }
.num-btn { background:var(--panel); border:1px solid var(--border); border-radius:12px;
           color:var(--text); font-family:var(--ft); font-size:28px; padding:15px 0;
           cursor:pointer; transition:background .12s, transform .12s, box-shadow .12s; }
.num-btn:hover  { background:rgba(0,245,160,.07); border-color:var(--green); box-shadow:var(--gg); transform:scale(1.06); }
.num-btn:active { transform:scale(.93); }
.num-btn:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.bowl-btn:hover { background:rgba(181,111,255,.09) !important; border-color:var(--purple) !important; box-shadow:var(--gp) !important; }

.match-footer { width:100%; max-width:480px; padding:5px 13px 7px; flex-shrink:0; }
.over-log { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; min-height:26px; }
.log-ball { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
            font-size:11px; font-weight:700; border:1px solid; font-family:var(--fb);
            animation:ballIn .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes ballIn { from{transform:scale(0)} to{transform:scale(1)} }
.log-run { background:rgba(0,245,160,.09); border-color:var(--green); color:var(--green); }
.log-out { background:rgba(255,60,90,.11); border-color:var(--red);   color:var(--red);   }
.log-6   { background:rgba(255,215,0,.11); border-color:var(--gold);  color:var(--gold);  }
.log-4   { background:rgba(0,200,255,.09); border-color:var(--blue);  color:var(--blue);  }
.log-wkt { background:rgba(181,111,255,.11);border-color:var(--purple);color:var(--purple);}

/* ── BREAK ── */
.break-body   { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px; text-align:center; }
.break-score  { font-family:var(--ft); font-size:34px; letter-spacing:3px; color:var(--green); text-shadow:var(--gg); }
.break-msg    { font-size:15px; letter-spacing:1px; color:var(--text); }
.break-detail { font-size:12px; color:var(--dim); }

/* ── RESULT ── */
.result-banner { display:flex; flex-direction:column; align-items:center; gap:5px; margin-bottom:16px; text-align:center; }
.result-emoji   { font-size:62px; animation:bounce 1s ease-in-out infinite; }
.result-heading { font-family:var(--ft); font-size:46px; letter-spacing:4px; }
.win-heading    { color:var(--green); text-shadow:var(--gg); }
.lose-heading   { color:var(--red);   text-shadow:var(--gr); }
.draw-heading   { color:var(--gold);  text-shadow:var(--gd); }
.result-scores  { font-family:var(--ft); font-size:22px; letter-spacing:2px; color:var(--text); margin-top:2px; }
.result-sub     { font-size:13px; color:var(--dim); letter-spacing:1px; }
.result-btns    { display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:10px; }

/* ── CRATE ── */
.crate-area { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:14px; }
.crate-box  { position:relative; width:130px; height:130px;
              background:linear-gradient(145deg,#1c2040,#13162a);
              border:2px solid var(--gold); border-radius:16px;
              display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
              cursor:pointer; box-shadow:var(--gd); transition:transform .2s; overflow:hidden; }
.crate-box:hover  { transform:scale(1.07) rotate(2deg); }
.crate-shine { position:absolute; top:-40px; left:-40px; width:75px; height:75px;
               background:radial-gradient(circle,rgba(255,215,0,.3),transparent 70%);
               animation:shineM 3s ease-in-out infinite; }
@keyframes shineM { 0%,100%{transform:translate(0,0)} 50%{transform:translate(105px,105px)} }
.crate-emoji  { font-size:50px; animation:crW 2s ease-in-out infinite; }
@keyframes crW { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
.crate-tap    { font-size:10px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; }
.crate-reward { background:var(--panel); border:1px solid var(--border); border-radius:13px;
                padding:16px 24px; text-align:center; min-width:190px;
                animation:cardIn .5s cubic-bezier(.34,1.56,.64,1); }
.reward-emoji { font-size:42px; }
.reward-title { font-family:var(--ft); font-size:24px; letter-spacing:2px; margin-top:4px; }
.reward-desc  { font-size:12px; color:var(--dim); margin-top:2px; letter-spacing:1px; }

/* ── UPGRADES ── */
.upgrade-section { width:100%; max-width:480px; margin-bottom:12px; }
.upgrade-section h3 { font-family:var(--ft); font-size:18px; letter-spacing:3px; color:var(--purple);
                      margin-bottom:9px; text-align:center; }
.gem-hint  { font-size:13px; color:var(--purple); }
.upgrade-list { display:flex; flex-direction:column; gap:6px; }
.upgrade-row  { display:flex; align-items:center; justify-content:space-between;
                background:var(--panel); border:1px solid var(--border);
                border-radius:10px; padding:10px 13px; gap:8px; }
.upgrade-info  { flex:1; }
.upgrade-name  { font-family:var(--fb); font-weight:700; font-size:14px; }
.upgrade-level { font-size:10px; color:var(--gold); letter-spacing:2px; }
.btn-upgrade { background:rgba(181,111,255,.08); border:1px solid var(--purple); color:var(--purple);
               border-radius:7px; font-family:var(--ft); font-size:12px; letter-spacing:1px;
               padding:7px 12px; cursor:pointer; transition:background .15s, transform .12s; }
.btn-upgrade:hover    { background:rgba(181,111,255,.22); transform:scale(1.04); }
.btn-upgrade:disabled { opacity:.35; cursor:not-allowed; transform:none; }

/* ── TOAST ── */
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
         background:var(--panel); border:1px solid var(--border); border-radius:50px;
         padding:8px 20px; font-size:13px; letter-spacing:1px; z-index:999; white-space:nowrap;
         animation:toastIn .3s ease; pointer-events:none; }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(18px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

@media(max-height:680px) {
  .p-card { padding:14px 16px 11px; margin-top:7px; }
  .p-avatar { font-size:34px; }
  .p-name   { font-size:22px; }
  .num-btn  { font-size:24px; padding:12px 0; }
}
@media(max-width:380px) {
  .game-title { font-size:50px; }
  .p-card     { max-width:295px; }
  .number-grid{ max-width:295px; }
}

/* ════════════════════════════════════════════
   FEATURES.JS — Additional CSS
   All new styles appended without changing existing
   ════════════════════════════════════════════ */

/* ── Toss v2 ── */
.toss2-area { display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:360px; }
.toss2-step { display:flex;flex-direction:column;align-items:center;gap:14px;width:100%; }
.toss2-label { font-family:var(--fb);font-size:14px;letter-spacing:2px;color:var(--dim);text-transform:uppercase; }
.ht-row { display:flex;gap:14px;width:100%; }
.ht-btn { flex:1;background:var(--panel);border:2px solid var(--border);border-radius:14px;
          padding:18px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
          transition:transform .15s,border-color .15s,box-shadow .15s; }
.ht-btn:hover { transform:scale(1.04);border-color:var(--green);box-shadow:var(--gg); }
.ht-btn.ht-selected { border-color:var(--green);background:rgba(0,245,160,.08);box-shadow:var(--gg); }
.bat-choice:hover { border-color:var(--green);box-shadow:var(--gg); }
.bowl-choice:hover { border-color:var(--purple);box-shadow:var(--gp); }
.ht-icon { font-size:40px; }
.ht-text { font-family:var(--ft);font-size:20px;letter-spacing:3px;color:var(--text); }
.coin-flip-wrap { display:flex;justify-content:center;align-items:center;height:120px; }
.coin-anim { font-size:80px;display:block; }
.coin-spinning { animation:coinSpin 1.8s ease-in-out; }
@keyframes coinSpin {
  0%  { transform:rotateY(0deg) scale(1); }
  25% { transform:rotateY(180deg) scale(1.2); }
  50% { transform:rotateY(360deg) scale(1); }
  75% { transform:rotateY(540deg) scale(1.3); }
  100%{ transform:rotateY(720deg) scale(1); }
}
.toss2-result { text-align:center;padding:14px 20px;background:var(--panel);border:1px solid var(--border);border-radius:14px;width:100%;animation:cardIn .4s cubic-bezier(.34,1.56,.64,1); }
.toss2-coin-label { font-family:var(--ft);font-size:26px;letter-spacing:4px;color:var(--gold); }

/* ── Commentary Bar ── */
.commentary-bar { width:100%;max-width:480px;display:flex;align-items:center;gap:10px;
                  padding:8px 16px;background:rgba(0,200,255,.06);border-bottom:1px solid rgba(0,200,255,.15);
                  flex-shrink:0; }
.comm-mic { font-size:18px;flex-shrink:0; }
.commentary-text { font-family:var(--fb);font-size:13px;font-weight:600;color:var(--blue);
                   letter-spacing:.5px;flex:1;line-height:1.4;
                   transition:opacity .2s ease; }

/* ── Delivery Screen ── */
.delivery-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
                 width:100%;max-width:340px;flex-shrink:0;margin:0 auto; }
.dlv-btn { background:var(--panel);border:1px solid var(--border);border-radius:12px;
           padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
           transition:background .12s,transform .12s,border-color .15s,box-shadow .15s; }
.dlv-btn:hover { background:rgba(181,111,255,.09);border-color:var(--purple);box-shadow:var(--gp);transform:scale(1.06); }
.dlv-btn:active { transform:scale(.93); }
.dlv-btn:disabled { opacity:.3;cursor:not-allowed;transform:none; }
.dlv-icon { font-size:24px; }
.dlv-name { font-family:var(--ft);font-size:12px;letter-spacing:1px;color:var(--text); }
.dlv-stat { font-size:10px;color:var(--dim);letter-spacing:1px; }
.dlv-type  { color:var(--purple);border-color:rgba(181,111,255,.3);font-size:clamp(12px,3vw,16px); }
.cpu-score-mini { text-align:right; }
.purple { color:var(--purple) !important; }

/* ── Tournament ── */
#screen-tournament { justify-content:flex-start;padding-top:0; }
.tourn-header { width:100%;max-width:480px;display:flex;justify-content:space-between;align-items:center;
                background:var(--panel);border-bottom:2px solid var(--border);padding:12px 16px;flex-shrink:0; }
.tourn-title { font-family:var(--ft);font-size:24px;letter-spacing:2px;color:var(--gold); }
.tourn-tabs { width:100%;max-width:480px;display:flex;background:rgba(255,255,255,.03);
              border-bottom:1px solid var(--border);flex-shrink:0; }
.ttab { flex:1;background:none;border:none;font-family:var(--ft);font-size:13px;letter-spacing:1px;
        color:var(--dim);padding:10px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s; }
.ttab.active { color:var(--green);border-bottom-color:var(--green); }
.tourn-panel { width:100%;max-width:480px;padding:10px 14px;overflow-y:auto;flex:1; }
.fixtures-list { display:flex;flex-direction:column;gap:8px; }
.fixture-row { background:var(--panel);border:1px solid var(--border);border-radius:12px;
               padding:12px 14px;transition:border-color .15s; }
.fixture-row.fix-next { border-color:var(--green);box-shadow:var(--gg); }
.fixture-row.fix-user { border-left:3px solid var(--blue); }
.fixture-row.fix-played { opacity:.7; }
.fix-stage { font-size:10px;letter-spacing:2px;color:var(--dim);margin-bottom:6px; }
.fix-teams { display:flex;align-items:center;justify-content:space-between;font-family:var(--ft);font-size:18px; }
.fix-team { letter-spacing:1px; }
.fix-vs { font-size:14px;color:var(--dim); }
.fix-status { font-size:11px;letter-spacing:1px;margin-top:5px;text-align:right;color:var(--dim); }
.fix-won  { color:var(--green); }
.fix-lost { color:var(--red); }

/* Points Table */
.pts-table-wrap { width:100%; }
.pts-header { display:grid;grid-template-columns:2fr repeat(5,1fr);gap:4px;
              padding:8px 10px;font-size:10px;letter-spacing:2px;color:var(--dim);
              background:rgba(255,255,255,.03);border-radius:8px 8px 0 0; }
.pts-row { display:grid;grid-template-columns:2fr repeat(5,1fr);gap:4px;
           padding:9px 10px;border-bottom:1px solid var(--border);font-size:13px;align-items:center; }
.pts-row.pts-user { background:rgba(0,245,160,.05);font-weight:700; }
.pts-row.pts-qualify { border-left:3px solid var(--green); }

/* Stats Dashboard */
#screen-stats { justify-content:flex-start;padding-top:16px; }
.stats-dashboard { width:100%;max-width:480px;overflow-y:auto;display:flex;flex-direction:column;gap:14px; }
.stats-section { background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px; }
.stats-section-title { font-family:var(--ft);font-size:16px;letter-spacing:2px;color:var(--blue);margin-bottom:10px; }
.stats-tiles { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.stat-tile { background:rgba(255,255,255,.04);border-radius:10px;padding:10px 6px;text-align:center; }
.stat-tile-val { font-family:var(--ft);font-size:22px;letter-spacing:1px; }
.stat-tile-lbl { font-size:10px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-top:2px; }
.stats-grid-inner { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.fmt-wins-list { display:flex;flex-direction:column;gap:7px; }
.stat-fmt-row { display:flex;justify-content:space-between;font-size:13px;
                padding:7px 10px;background:rgba(255,255,255,.03);border-radius:8px; }
.history-list { display:flex;flex-direction:column;gap:6px; }
.hist-row { display:flex;justify-content:space-between;align-items:center;
            padding:8px 10px;border-radius:9px;font-size:12px;letter-spacing:.5px; }
.hist-win  { background:rgba(0,245,160,.06);border:1px solid rgba(0,245,160,.15); }
.hist-loss { background:rgba(255,60,90,.05);border:1px solid rgba(255,60,90,.12); }

/* Ghost small button */
.btn-ghost-sm { background:rgba(255,255,255,.04);color:var(--dim);border:1px solid var(--border);
                border-radius:8px;font-size:15px;padding:6px 10px;cursor:pointer;transition:background .15s,color .15s; }
.btn-ghost-sm:hover { background:rgba(255,255,255,.09);color:var(--text); }

/* Log dot ball */
.log-dot { background:rgba(255,255,255,.04);border-color:var(--border);color:var(--dim); }

/* Smooth opacity transition for commentary */
.commentary-text { transition:opacity .2s ease; }

/* Delivery screen adjustments */
@media(max-height:700px){
  .delivery-grid{gap:6px}
  .dlv-btn{padding:8px 4px}
  .dlv-icon{font-size:20px}
  .cpu-bat-panel{padding:7px 14px}
}