/* =============================================
   PREMIUM OVERLAYS PART 2 — VS, Scorecard,
   Bowling Card, Match Summary, Popups
   ============================================= */

/* VS / MATCH INTRO OVERLAY */
.vs-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.5s}
.vs-overlay.active{opacity:1}
.vs-overlay .vs-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.95) 100%);backdrop-filter:blur(8px)}
.vs-overlay .vs-content{position:relative;z-index:1;display:flex;align-items:center;gap:50px;animation:scaleIn 0.6s cubic-bezier(0.34,1.56,0.64,1)}
.vs-overlay .vs-team{text-align:center}
.vs-overlay .vs-team-logo{width:140px;height:140px;border-radius:50%;background:#fff;padding:12px;margin:0 auto 16px;box-shadow:0 0 40px rgba(255,255,255,0.15);object-fit:contain}
.vs-overlay .vs-team-name{font-family:var(--font-display);font-size:42px;color:#fff;text-transform:uppercase;letter-spacing:4px;text-shadow:0 4px 20px rgba(0,0,0,0.7)}
.vs-overlay .vs-badge{font-family:var(--font-display);font-size:80px;color:var(--gold-bright);text-shadow:0 0 40px rgba(245,158,11,0.5)}
.vs-overlay .vs-info{position:absolute;bottom:80px;text-align:center;width:100%;animation:slideInUp 0.7s 0.3s both}
.vs-overlay .vs-match-tag{font-family:var(--font-body);font-size:16px;font-weight:700;color:var(--gold-bright);text-transform:uppercase;letter-spacing:5px;background:rgba(0,0,0,0.6);padding:6px 24px;border-radius:20px;display:inline-block;border:1px solid rgba(245,158,11,0.3)}
.vs-overlay .vs-venue{font-family:var(--font-body);font-size:18px;color:#94a3b8;margin-top:10px;font-weight:500}

/* FULL SCORECARD OVERLAY */
.sc-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.4s}
.sc-overlay.active{opacity:1}
.sc-overlay .sc-bg{position:absolute;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(15px)}
.sc-overlay .sc-panel{position:relative;z-index:1;width:820px;max-height:750px;background:linear-gradient(180deg,rgba(15,15,30,0.85) 0%,rgba(5,5,15,0.90) 100%);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-top:1px solid rgba(245,158,11,0.6);border-radius:16px;overflow:hidden;animation:scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 20px 60px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.05)}
.sc-overlay .sc-hdr{background:linear-gradient(135deg,#1a1a2e,#0f172a);padding:20px 30px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(245,158,11,0.2)}
.sc-overlay .sc-hdr .team-crest{width:50px;height:50px;object-fit:contain}
.sc-overlay .sc-hdr h2{font-family:var(--font-display);font-size:28px;color:#fff;text-transform:uppercase;letter-spacing:3px}
.sc-overlay .sc-hdr .tourney{font-size:12px;color:var(--gold-bright);font-weight:700;text-transform:uppercase;letter-spacing:3px}
.sc-overlay .sc-body{padding:20px 30px;overflow-y:auto;max-height:500px}
.sc-overlay table{width:100%;border-collapse:collapse;font-family:var(--font-body)}
.sc-overlay thead th{text-align:left;color:var(--gold-bright);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:2px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.1)}
.sc-overlay tbody td{padding:7px 10px;font-size:14px;font-weight:500;color:#e2e8f0;border-bottom:1px solid rgba(255,255,255,0.03)}
.sc-overlay .dismissal{color:#ef4444;font-size:11px}
.sc-overlay .sc-footer{display:flex;justify-content:space-around;padding:16px 30px;border-top:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.3)}
.sc-overlay .sc-footer .ft-label{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:2px;font-weight:600}
.sc-overlay .sc-footer .ft-val{font-size:22px;font-weight:800;color:#fff;font-family:var(--font-score);margin-top:2px}

/* BOWLING SCORECARD OVERLAY */
.bwl-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.4s}
.bwl-overlay.active{opacity:1}
.bwl-overlay .bwl-bg{position:absolute;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(15px)}
.bwl-overlay .bwl-panel{position:relative;z-index:1;width:780px;background:linear-gradient(180deg,rgba(15,15,30,0.85) 0%,rgba(5,5,15,0.90) 100%);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-top:1px solid rgba(245,158,11,0.6);border-radius:16px;overflow:hidden;animation:scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 20px 60px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.05)}
.bwl-overlay .bwl-hdr{background:linear-gradient(135deg,#1a1a2e,#0f172a);padding:20px 30px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(245,158,11,0.2)}
.bwl-overlay .bwl-hdr h2{font-family:var(--font-display);font-size:28px;color:#fff;text-transform:uppercase;letter-spacing:3px}
.bwl-overlay .bwl-body{padding:20px 30px;max-height:500px;overflow-y:auto}
.bwl-overlay .fow-section{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08)}
.bwl-overlay .fow-label{font-size:10px;color:var(--gold-bright);font-weight:800;text-transform:uppercase;letter-spacing:2px;margin-bottom:6px}
.bwl-overlay .fow-vals{display:flex;gap:24px;font-size:14px;color:#e2e8f0;font-weight:600}
.bwl-overlay .fow-vals span{color:var(--gold-bright);font-weight:700;margin:0 4px}

/* MATCH SUMMARY OVERLAY */
.sum-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.4s}
.sum-overlay.active{opacity:1}
.sum-overlay .sum-bg{position:absolute;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(15px)}
.sum-overlay .sum-panel{position:relative;z-index:1;width:920px;background:linear-gradient(180deg,rgba(15,15,30,0.85) 0%,rgba(5,5,15,0.90) 100%);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-top:1px solid rgba(245,158,11,0.6);border-radius:16px;overflow:hidden;animation:scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 20px 60px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.05)}
.sum-overlay .sum-hdr{background:linear-gradient(135deg,#1a1a2e,#0f172a);padding:20px 30px;text-align:center;border-bottom:1px solid rgba(245,158,11,0.2)}
.sum-overlay .sum-hdr h2{font-family:var(--font-display);font-size:32px;color:#fff;text-transform:uppercase;letter-spacing:4px}
.sum-overlay .sum-body{display:flex}
.sum-overlay .sum-col{flex:1;padding:20px}
.sum-overlay .sum-col:first-child{background:rgba(30,58,138,0.08);border-right:1px solid rgba(255,255,255,0.08)}
.sum-overlay .sum-col:last-child{background:rgba(22,101,52,0.08)}
.sum-overlay .sum-col .col-hdr{font-family:var(--font-display);font-size:22px;color:#fff;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.sum-overlay .sum-col .col-score{font-family:var(--font-score);font-size:36px;color:var(--gold-bright);margin-bottom:16px}
.sum-overlay .sum-col .p-row{display:flex;justify-content:space-between;padding:3px 0;font-size:13px;color:#cbd5e1}
.sum-overlay .sum-col .p-name{flex:1}
.sum-overlay .sum-col .p-stat{color:var(--gold-bright);font-weight:600}
.sum-overlay .sum-result{text-align:center;padding:20px;background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.05));border-top:1px solid rgba(245,158,11,0.3)}
.sum-overlay .sum-result .result-text{font-family:var(--font-display);font-size:30px;color:var(--gold-bright);text-transform:uppercase;letter-spacing:3px}

/* MILESTONE POPUP */
.milestone-popup{position:fixed;top:50%;left:50%;z-index:600;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,#1a1a2e,#16213e);border:3px solid var(--gold-bright);border-radius:16px;padding:30px 50px;text-align:center;box-shadow:0 0 60px rgba(245,158,11,0.3),0 20px 60px rgba(0,0,0,0.8);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.milestone-popup.show{transform:translate(-50%,-50%) scale(1)}
.milestone-popup .mile-icon{font-size:50px}
.milestone-popup .mile-text{font-family:var(--font-display);font-size:52px;color:#fff;text-transform:uppercase;letter-spacing:3px}
.milestone-popup .mile-player{color:var(--gold-bright);font-size:28px;font-weight:800;font-family:var(--font-body);margin-top:4px}
.milestone-popup .mile-bar{width:60%;height:4px;background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);margin:12px auto 0;border-radius:2px}

/* DRS POPUP */
.drs-popup{position:fixed;top:50%;left:50%;z-index:600;transform:translate(-50%,-50%) scale(0);background:rgba(0,0,0,0.96);border:3px solid #ef4444;border-radius:16px;padding:30px 50px;text-align:center;box-shadow:0 0 60px rgba(239,68,68,0.4),0 20px 60px rgba(0,0,0,0.8);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.drs-popup.show{transform:translate(-50%,-50%) scale(1)}
.drs-popup .drs-title{font-family:var(--font-display);font-size:64px;color:#fff;text-transform:uppercase}
.drs-popup .drs-status{font-size:18px;color:var(--gold-bright);font-weight:800;text-transform:uppercase;letter-spacing:5px;margin-top:6px}
.drs-popup .drs-bar{width:80%;height:8px;background:#333;border-radius:4px;margin:16px auto 0;overflow:hidden;position:relative}
.drs-popup .drs-fill{position:absolute;top:0;left:0;height:100%;width:20%;background:linear-gradient(90deg,#16a34a,#f59e0b,#ef4444);border-radius:4px;animation:drsBarAnim 2s ease-in-out infinite}

/* TOSS POPUP */
.toss-popup{position:fixed;top:50%;left:50%;z-index:600;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,#1a1a2e,#0f172a);border:3px solid var(--gold-bright);border-radius:16px;padding:30px 50px;text-align:center;box-shadow:0 0 60px rgba(245,158,11,0.3),0 20px 60px rgba(0,0,0,0.8);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.toss-popup.show{transform:translate(-50%,-50%) scale(1)}
.toss-popup .toss-coin{font-size:60px;display:inline-block;animation:coinFlip 1.5s ease-in-out}
.toss-popup .toss-text{font-family:var(--font-display);font-size:44px;color:#fff;text-transform:uppercase;margin-top:12px}
.toss-popup .toss-decision{font-family:var(--font-body);font-size:20px;color:var(--gold-bright);font-weight:700;letter-spacing:3px;margin-top:6px;text-transform:uppercase}

/* LINEUP POPUP */
.lineup-popup{position:fixed;top:50%;left:50%;z-index:600;transform:translate(-50%,-50%) scale(0);background:rgba(10,10,18,0.96);backdrop-filter:blur(16px);border:2px solid var(--gold-bright);border-radius:16px;padding:24px 40px;box-shadow:0 20px 60px rgba(0,0,0,0.9);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);min-width:650px}
.lineup-popup.show{transform:translate(-50%,-50%) scale(1)}
.lineup-popup .lu-title{font-family:var(--font-display);font-size:28px;color:var(--gold-bright);text-align:center;letter-spacing:3px;margin-bottom:16px}
.lineup-popup .lu-cols{display:flex;gap:40px;justify-content:center}
.lineup-popup .lu-col h4{color:var(--gold-bright);font-size:16px;text-transform:uppercase;margin-bottom:8px;letter-spacing:2px}
.lineup-popup .lu-col li{color:#cbd5e1;font-size:14px;list-style:none;padding:3px 0;font-weight:600}

/* STINGER */
.stinger{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:translateX(-100%);background:linear-gradient(135deg,#0f172a,#1e3a8a,#dc2626);clip-path:polygon(0 0,100% 0,85% 100%,0% 100%);box-shadow:20px 0 50px rgba(0,0,0,0.8)}
.stinger.play{animation:stingerWipe 1.6s cubic-bezier(0.65,0,0.35,1) forwards}
@keyframes stingerWipe{0%{transform:translateX(-100%);clip-path:polygon(0 0,100% 0,80% 100%,0% 100%)}40%{transform:translateX(0);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}60%{transform:translateX(0);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}100%{transform:translateX(100%);clip-path:polygon(20% 0,100% 0,100% 100%,0% 100%)}}
.stinger h1{font-family:var(--font-display);font-size:160px;color:#fff;text-transform:uppercase;line-height:1;text-shadow:0 10px 30px rgba(0,0,0,0.5);font-style:italic;margin-bottom:-20px}
.stinger .stinger-sub{font-weight:900;font-size:32px;color:var(--gold-bright);letter-spacing:15px;text-transform:uppercase;background:rgba(0,0,0,0.5);padding:5px 30px;font-family:var(--font-body)}

/* BREAK SCREEN */
.break-screen{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:9000;opacity:0;pointer-events:none;transition:opacity 0.5s}
.break-screen.show{opacity:1}
.break-screen h1{color:#ffcc00;font-family:var(--font-display);font-size:140px;text-transform:uppercase;letter-spacing:15px;text-shadow:0 15px 40px rgba(0,0,0,0.9);text-align:center;font-style:italic}