:root {
      --gold:#f0c040;--gold2:#e8a800;--green:#22c55e;--green-dark:#16a34a;
      --blue:#0ea5e9;--red:#ef4444;--orange:#f97316;--text:#f9fafb;
      --muted:#9ca3af;--border:rgba(255,255,255,0.12);--card-bg:rgba(0,0,0,0.8);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;overflow:hidden}
    body{font-family:'Barlow',sans-serif;background:#020a02;color:var(--text);-webkit-font-smoothing:antialiased}
    .screen{position:absolute;inset:0;display:none;overflow:hidden}
    .screen.active{display:flex;flex-direction:column}

    /* INTRO */
    #introScreen{background:radial-gradient(ellipse at 60% 30%,#f97316 0%,#facc15 20%,#22c55e 45%,#0ea5e9 70%,#020a02 100%);align-items:center;justify-content:center;cursor:pointer}
    .intro-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
    .orb1{width:500px;height:500px;background:rgba(250,204,21,0.4);top:-100px;left:-100px}
    .orb2{width:400px;height:400px;background:rgba(34,197,94,0.4);bottom:-80px;right:-80px}
    .orb3{width:300px;height:300px;background:rgba(14,165,233,0.35);bottom:100px;left:100px}
    .intro-content{position:relative;text-align:center;padding:40px 24px}
    .intro-badge{display:inline-block;background:rgba(0,0,0,0.5);border:3px solid rgba(255,255,255,0.9);border-radius:24px;padding:28px 48px 24px;backdrop-filter:blur(10px);box-shadow:0 40px 80px rgba(0,0,0,0.7);margin-bottom:32px}
    .intro-fifa{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:0.3em;color:var(--gold);text-shadow:0 0 20px rgba(240,192,64,0.8)}
    .intro-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,8vw,6rem);letter-spacing:0.05em;line-height:0.9;color:#fff}
    .intro-year{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:0.2em;color:var(--gold);text-shadow:0 0 30px rgba(240,192,64,0.9)}
    .intro-hosts{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
    .host-pill{padding:6px 16px;border-radius:999px;border:2px solid rgba(255,255,255,0.8);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.9rem;letter-spacing:0.15em;text-transform:uppercase;background:rgba(0,0,0,0.3)}
    .intro-press{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.9);animation:pulse 1.5s ease-in-out infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

    /* TOP BAR */
    .top-bar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:58px;background:linear-gradient(to right,rgba(0,0,0,0.95),rgba(10,20,10,0.95));border-bottom:2px solid var(--gold);box-shadow:0 4px 20px rgba(0,0,0,0.8);flex-shrink:0;z-index:10}
    .tb-logo{display:flex;align-items:center;gap:10px}
    .tb-logo-icon{font-size:1.5rem;filter:drop-shadow(0 0 8px rgba(240,192,64,0.8))}
    .tb-logo-text{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:0.15em;color:var(--gold)}
    .tb-center{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}
    .tb-actions{display:flex;gap:8px}
    .btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;padding:7px 16px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:all 0.15s ease}
    .btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a0a00;border-color:var(--gold);box-shadow:0 4px 15px rgba(240,192,64,0.4)}
    .btn-gold:hover{box-shadow:0 6px 25px rgba(240,192,64,0.7);transform:translateY(-1px)}
    .btn-outline{background:transparent;color:var(--text);border-color:rgba(255,255,255,0.3)}
    .btn-outline:hover{border-color:var(--gold);color:var(--gold)}
    .btn-green{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-color:var(--green);box-shadow:0 4px 15px rgba(34,197,94,0.4)}
    .btn-red{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;border-color:#ef4444}

    /* DRAFT SCREEN */
    #gameScreen{background:radial-gradient(ellipse at top,#0f3020 0%,#020a02 60%)}
    .game-body{flex:1;display:grid;grid-template-columns:1.7fr 1.4fr;gap:14px;padding:14px;overflow:hidden}
    .panel{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(8px)}
    .panel-header{padding:8px 14px 6px;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.03);flex-shrink:0}
    .panel-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:0.95rem;letter-spacing:0.15em;text-transform:uppercase}
    .panel-sub{font-size:0.74rem;color:var(--muted);margin-top:1px}
    .panel-body{flex:1;overflow-y:auto;padding:8px 12px}
    .panel-body::-webkit-scrollbar{width:3px}
    .panel-body::-webkit-scrollbar-thumb{background:var(--border)}

    /* Formation selector */
    .formation-selector{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.02);flex-shrink:0;flex-wrap:wrap}
    .form-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.75rem;letter-spacing:0.1em;padding:5px 10px;border-radius:4px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.05);color:var(--muted);cursor:pointer;transition:all 0.15s}
    .form-btn:hover{border-color:var(--gold);color:var(--gold)}
    .form-btn.active{background:rgba(240,192,64,0.15);border-color:var(--gold);color:var(--gold)}

    /* Spin area */
    .spin-zone{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--border);background:rgba(240,192,64,0.04);flex-shrink:0}
    .spin-displays{display:flex;gap:8px;flex:1}
    .spin-box{flex:1;background:rgba(0,0,0,0.6);border:2px solid var(--gold);border-radius:8px;padding:4px 10px;text-align:center}
    .spin-box-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}
    .spin-box-value{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--gold);letter-spacing:0.05em;line-height:1.1;text-shadow:0 0 15px rgba(240,192,64,0.6);min-height:1.5rem}
    .spin-btns{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
    .spin-btn{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:0.12em;padding:8px 18px;border-radius:6px;border:none;background:linear-gradient(135deg,#f97316,#facc15);color:#1a0a00;cursor:pointer;box-shadow:0 6px 20px rgba(249,115,22,0.5);transition:all 0.15s ease;white-space:nowrap}
    .spin-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(249,115,22,0.7)}
    .spin-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
    .reroll-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.7rem;letter-spacing:0.1em;padding:4px 10px;border-radius:4px;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.06);color:var(--muted);cursor:pointer;transition:all 0.15s;text-align:center}
    .reroll-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
    .reroll-btn:disabled{opacity:0.3;cursor:not-allowed}

    /* Player cards — 5 card types */
    .player-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
    .player-card{position:relative;border-radius:10px;padding:8px 6px;cursor:pointer;transition:all 0.15s ease;text-align:center;border:2px solid transparent;overflow:hidden}
    .player-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 12px 30px rgba(240,192,64,0.35)}

    /* Bronze 60-69 */
    .card-bronze{background:linear-gradient(160deg,#c8875a 0%,#8a5530 55%,#4a2a10 100%);border-color:#c07040}
    .card-bronze:hover{border-color:#e08a50}
    /* Silver 70-79 — lower rated */
    .card-silver{background:linear-gradient(160deg,#d8d8d8 0%,#909090 55%,#4a4a4a 100%);border-color:#aaaaaa}
    .card-silver:hover{border-color:#dddddd}
    /* Gold 80-84 */
    .card-gold{background:linear-gradient(160deg,#ffe066 0%,#c8922a 55%,#6b3a00 100%);border-color:#f0c040}
    .card-gold:hover{border-color:#ffe080}
    /* In-Form 85-89 — green card */
    .card-inform{background:linear-gradient(160deg,#00e078 0%,#009944 55%,#003a18 100%);border-color:#00e078;box-shadow:0 0 12px rgba(0,224,120,0.4)}
    .card-inform:hover{box-shadow:0 0 24px rgba(0,224,120,0.7)}
    .card-inform .pc-rating,.card-inform .pc-pos,.card-inform .pc-name,.card-inform .pc-attrs{color:rgba(255,255,255,0.95)!important}
    /* TOTS 90-91 — teal/cyan */
    .card-tots{background:linear-gradient(160deg,#00f0ff 0%,#0088cc 45%,#003060 100%);border-color:#00d4ff;box-shadow:0 0 16px rgba(0,212,255,0.55)}
    .card-tots:hover{box-shadow:0 0 32px rgba(0,212,255,0.9)}
    .card-tots .pc-rating,.card-tots .pc-pos,.card-tots .pc-name,.card-tots .pc-attrs{color:rgba(255,255,255,0.95)!important}
    /* TOTY 92-93 — animated purple border */
    .card-toty{background:linear-gradient(160deg,#1a0a40 0%,#3a0878 50%,#0a1060 100%);border-color:#b060ff;box-shadow:0 0 14px rgba(160,80,255,0.5)}
    .card-toty:hover{box-shadow:0 0 28px rgba(180,100,255,0.8)}
    .card-toty::after{content:'';position:absolute;inset:-2px;border-radius:12px;background:linear-gradient(45deg,#b060ff,#60b0ff,#b060ff,#ff60c0);z-index:-1;animation:totySpin 2.5s linear infinite;background-size:400%}
    @keyframes totySpin{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    .card-toty .pc-rating,.card-toty .pc-pos,.card-toty .pc-name,.card-toty .pc-attrs{color:rgba(255,255,255,0.9)!important}
    /* WC Icon 94-96 — black & gold */
    .card-icon{background:linear-gradient(160deg,#3a2800 0%,#1a1200 50%,#000000 100%);border-color:#f0c040;box-shadow:0 0 18px rgba(240,192,64,0.55)}
    .card-icon:hover{box-shadow:0 0 36px rgba(240,192,64,0.9)}
    .card-icon::after{content:'★';position:absolute;top:3px;right:5px;font-size:0.8rem;color:var(--gold)}
    .card-icon .pc-rating{color:var(--gold)!important}
    .card-icon .pc-pos{color:rgba(240,192,64,0.7)!important}
    .card-icon .pc-name{color:#fff!important}
    .card-icon .pc-attrs{color:rgba(255,255,255,0.8)!important}
    /* LEGEND 97+ — rare white card */
    .card-legend{background:linear-gradient(160deg,#ffffff 0%,#e8e8f0 40%,#c0c8e0 100%);border-color:#ffffff;box-shadow:0 0 28px rgba(255,255,255,0.8),0 0 50px rgba(180,200,255,0.4)}
    .card-legend:hover{box-shadow:0 0 50px rgba(255,255,255,1),0 0 80px rgba(180,200,255,0.6)}
    .card-legend::before{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,0.6) 0%,transparent 50%,rgba(200,210,255,0.3) 100%);pointer-events:none}
    .card-legend::after{content:'👑';position:absolute;top:2px;right:4px;font-size:0.75rem}
    .card-legend .pc-rating{color:#1a1a4a!important;font-size:1.7rem!important}
    .card-legend .pc-pos{color:rgba(30,30,80,0.7)!important}
    .card-legend .pc-name{color:#1a1a4a!important}
    .card-legend .pc-attrs{color:rgba(30,30,80,0.8)!important}
    /* Legend pitch slot */
    .pos-slot.filled.tier-legend{background:linear-gradient(160deg,#ffffff 0%,#d0d8f0 50%,#a0b0d8 100%);border-color:#fff;box-shadow:0 0 20px rgba(255,255,255,0.9)}

    .card-oop{border-color:var(--red)!important;box-shadow:0 0 12px rgba(239,68,68,0.5)!important}
    .pc-rating{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:rgba(0,0,0,0.85);line-height:1}
    .card-toty .pc-rating,.card-toty .pc-pos,.card-toty .pc-name,.card-toty .pc-attrs{color:rgba(255,255,255,0.9)!important}
    .pc-pos{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.7rem;color:rgba(0,0,0,0.7);text-transform:uppercase}
    .pc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.78rem;color:rgba(0,0,0,0.9);margin:3px 0 2px;line-height:1.1}
    .pc-flag{font-size:0.9rem}
    .pc-attrs{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:3px;font-size:0.6rem;color:rgba(0,0,0,0.75);font-family:'Barlow Condensed',sans-serif;font-weight:600}
    .pc-attr{display:flex;justify-content:space-between}
    .oop-badge{position:absolute;top:3px;left:3px;background:var(--red);color:#fff;font-size:0.5rem;font-weight:800;padding:1px 4px;border-radius:3px;display:none}
    .card-oop .oop-badge{display:block}
    .card-type-label{position:absolute;top:3px;right:4px;font-size:0.5rem;font-weight:800;opacity:0.7;font-family:'Barlow Condensed',sans-serif}
    .card-icon .card-type-label{color:var(--gold);opacity:1}
    .card-legend .card-type-label{color:#1a1a4a;opacity:1}

    /* Pitch & formation */
    .formation-panel{height:100%}
    .pitch-wrap{flex:1;position:relative;border-radius:10px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,0.03) 0px,rgba(255,255,255,0.03) 28px,transparent 28px,transparent 56px),linear-gradient(180deg,#1a7a2a 0%,#158024 50%,#1a7a2a 100%);border:2px solid rgba(0,80,20,0.8);box-shadow:inset 0 0 40px rgba(0,0,0,0.4),0 20px 50px rgba(0,0,0,0.6);overflow:hidden;display:flex;flex-direction:column;padding:8px 6px}
    .pitch-outer{position:absolute;inset:7px;border:2px solid rgba(255,255,255,0.6);border-radius:3px;pointer-events:none}
    .pitch-half{position:absolute;top:50%;left:7px;right:7px;height:2px;background:rgba(255,255,255,0.6);transform:translateY(-50%)}
    .pitch-circle{position:absolute;top:50%;left:50%;width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,0.6);transform:translate(-50%,-50%)}
    .pitch-box-top{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:100px;height:35px;border:2px solid rgba(255,255,255,0.6);border-top:none}
    .pitch-box-bot{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:100px;height:35px;border:2px solid rgba(255,255,255,0.6);border-bottom:none}
    .formation-grid{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;gap:3px}
    .f-row{display:flex;justify-content:center;gap:5px;flex:1;align-items:center}
    .pos-slot{width:66px;border-radius:7px;background:rgba(0,0,0,0.6);border:2px dashed rgba(255,255,255,0.25);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px;text-align:center;transition:all 0.2s ease;height:80px}
    .pos-slot.filled{background:linear-gradient(160deg,#ffe066 0%,#c8922a 55%,#6b3a00 100%);border:2px solid #f0c040;box-shadow:0 4px 12px rgba(240,192,64,0.4)}
    .pos-slot.filled.chem-bad{background:linear-gradient(160deg,#ff6060 0%,#c02020 55%,#6b0000 100%)!important;border-color:var(--red)!important;box-shadow:0 4px 12px rgba(239,68,68,0.5)!important;animation:chemBad 1s ease-in-out infinite alternate}
    @keyframes chemBad{from{box-shadow:0 4px 12px rgba(239,68,68,0.4)}to{box-shadow:0 4px 24px rgba(239,68,68,0.8)}}
    /* Bronze */
    .pos-slot.filled.tier-bronze{background:linear-gradient(160deg,#c8875a 0%,#8a5530 55%,#4a2a10 100%);border-color:#c07040}
    .pos-slot.filled.tier-bronze .slot-rating,.pos-slot.filled.tier-bronze .slot-name{color:rgba(0,0,0,0.85)!important}
    .pos-slot.filled.tier-bronze .slot-pos{color:rgba(0,0,0,0.6)!important}
    /* Silver */
    .pos-slot.filled.tier-silver{background:linear-gradient(160deg,#d8d8d8 0%,#909090 55%,#4a4a4a 100%);border-color:#aaaaaa}
    .pos-slot.filled.tier-silver .slot-rating,.pos-slot.filled.tier-silver .slot-name{color:rgba(0,0,0,0.85)!important}
    .pos-slot.filled.tier-silver .slot-pos{color:rgba(0,0,0,0.6)!important}
    /* Gold (default filled style already handles this, but explicit for clarity) */
    .pos-slot.filled.tier-gold{background:linear-gradient(160deg,#ffe066 0%,#c8922a 55%,#6b3a00 100%);border-color:#f0c040}
    .pos-slot.filled.tier-gold .slot-rating,.pos-slot.filled.tier-gold .slot-name{color:rgba(0,0,0,0.85)!important}
    .pos-slot.filled.tier-gold .slot-pos{color:rgba(0,0,0,0.6)!important}
    /* In-Form */
    .pos-slot.filled.tier-inform{background:linear-gradient(160deg,#00e078 0%,#009944 55%,#003a18 100%);border-color:#00e078;box-shadow:0 0 10px rgba(0,224,120,0.4)}
    .pos-slot.filled.tier-inform .slot-rating,.pos-slot.filled.tier-inform .slot-name,.pos-slot.filled.tier-inform .slot-pos{color:rgba(255,255,255,0.95)!important}
    /* TOTS */
    .pos-slot.filled.tier-tots{background:linear-gradient(160deg,#00f0ff 0%,#0088cc 45%,#003060 100%);border-color:#00d4ff;box-shadow:0 0 12px rgba(0,212,255,0.5)}
    .pos-slot.filled.tier-tots .slot-rating,.pos-slot.filled.tier-tots .slot-name,.pos-slot.filled.tier-tots .slot-pos{color:rgba(255,255,255,0.95)!important}
    /* TOTY */
    .pos-slot.filled.tier-toty{background:linear-gradient(160deg,#1a0a40 0%,#3a0878 50%,#0a1060 100%);border-color:#b060ff;box-shadow:0 0 14px rgba(160,80,255,0.65)}
    .pos-slot.filled.tier-toty .slot-rating,.pos-slot.filled.tier-toty .slot-name,.pos-slot.filled.tier-toty .slot-pos{color:rgba(255,255,255,0.95)!important}
    /* WC Icon — black & gold */
    .pos-slot.filled.tier-icon{background:linear-gradient(160deg,#3a2a00 0%,#1a1200 60%,#000 100%);border-color:#f0c040;box-shadow:0 0 16px rgba(240,192,64,0.6)}
    .pos-slot.filled.tier-icon .slot-rating,.pos-slot.filled.tier-icon .slot-pos{color:var(--gold)!important}
    .pos-slot.filled.tier-icon .slot-name{color:#fff!important}
    /* Legend — white */
    .pos-slot.filled.tier-legend{background:linear-gradient(160deg,#ffffff 0%,#d0d8f0 50%,#a0b0d8 100%);border-color:#fff;box-shadow:0 0 20px rgba(255,255,255,0.9)}
    .pos-slot.filled.tier-legend .slot-rating,.pos-slot.filled.tier-legend .slot-name,.pos-slot.filled.tier-legend .slot-pos{color:#1a1a4a!important}
    .slot-rating{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;color:rgba(0,0,0,0.85);line-height:1}
    .slot-pos{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.6rem;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:1px}
    .slot-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.58rem;color:rgba(0,0,0,0.85);line-height:1.1}
    .slot-empty-pos{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.72rem;color:rgba(255,255,255,0.45);letter-spacing:0.1em}

    .stats-bar{display:flex;gap:7px;padding:8px 12px;border-top:1px solid var(--border);background:rgba(255,255,255,0.02);flex-shrink:0}
    .stat-pill{flex:1;text-align:center;background:rgba(0,0,0,0.5);border:1px solid var(--border);border-radius:5px;padding:5px 3px}
    .stat-pill-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted)}
    .stat-pill-value{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--gold)}
    .chem-bar{width:100%;height:5px;background:rgba(255,255,255,0.1);border-radius:3px;margin-top:2px;overflow:hidden}
    .chem-fill{height:100%;border-radius:3px;transition:width 0.4s ease,background 0.4s ease}

    /* ═══ SHARED BG ═══ */
    .fifa-screen{background:
      radial-gradient(ellipse at 80% 10%,rgba(250,204,21,0.5) 0%,transparent 40%),
      radial-gradient(ellipse at 10% 80%,rgba(34,197,94,0.4) 0%,transparent 45%),
      radial-gradient(ellipse at 90% 85%,rgba(249,115,22,0.38) 0%,transparent 40%),
      radial-gradient(ellipse at 20% 20%,rgba(14,165,233,0.25) 0%,transparent 35%),
      linear-gradient(160deg,#1a2200 0%,#0a1400 60%,#001a08 100%)}
    .fifa-body{flex:1;display:grid;grid-template-columns:1.5fr 1fr;gap:14px;padding:14px;overflow:hidden}
    .fifa-panel{background:rgba(0,0,0,0.82);border:1px solid rgba(255,255,255,0.15);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(10px)}
    .fifa-panel-hd{padding:10px 14px;background:linear-gradient(to right,rgba(240,192,64,0.25),transparent);border-bottom:2px solid var(--gold);display:flex;align-items:center;gap:8px;flex-shrink:0}
    .fifa-panel-icon{font-size:1.2rem}
    .fifa-panel-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:0.15em;color:var(--gold)}
    .fifa-panel-sub{font-size:0.78rem;color:var(--muted);margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:0.1em}
    .fifa-scroll{flex:1;overflow-y:auto;padding:10px}
    .fifa-scroll::-webkit-scrollbar{width:3px}
    .fifa-scroll::-webkit-scrollbar-thumb{background:var(--border)}
    .fixture-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:7px;padding:9px 12px;margin-bottom:7px;transition:all 0.15s}
    .fixture-row:hover{border-color:rgba(240,192,64,0.3);background:rgba(240,192,64,0.05)}
    .fixture-row.result-win{background:rgba(34,197,94,0.22)!important;border-color:rgba(34,197,94,0.6)!important;box-shadow:0 2px 12px rgba(34,197,94,0.2)}
    .fixture-row.result-draw{background:rgba(255,255,255,0.18)!important;border-color:rgba(255,255,255,0.5)!important}
    .fixture-row.result-loss{background:rgba(239,68,68,0.22)!important;border-color:rgba(239,68,68,0.6)!important;box-shadow:0 2px 12px rgba(239,68,68,0.2)}
    .fixture-teams-col{flex:1}
    .fixture-matchup{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:0.05em}
    .fixture-matchup .your-team{color:var(--gold)}
    .fixture-meta{font-size:0.72rem;color:var(--muted);margin-top:2px;font-family:'Barlow Condensed',sans-serif}
    .fixture-score-col{text-align:right;min-width:70px}
    .fixture-score-big{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--gold);letter-spacing:0.1em}
    .play-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;padding:5px 12px;border-radius:4px;border:2px solid var(--green);background:rgba(34,197,94,0.15);color:var(--green);cursor:pointer;transition:all 0.15s;white-space:nowrap;margin-left:8px}
    .play-btn:hover{background:rgba(34,197,94,0.3);box-shadow:0 4px 15px rgba(34,197,94,0.3)}
    .played-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.72rem;color:var(--muted);padding:5px 12px;border-radius:4px;border:1px solid rgba(255,255,255,0.1);margin-left:8px;white-space:nowrap}
    .group-table{width:100%;border-collapse:collapse;font-size:0.8rem}
    .group-table thead tr{background:rgba(240,192,64,0.1);border-bottom:1px solid var(--gold)}
    .group-table th{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);padding:7px 8px;text-align:center}
    .group-table th:first-child{text-align:left}
    .group-table td{padding:11px 6px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.05);font-family:'Barlow Condensed',sans-serif;font-size:1rem}
    .group-table td:first-child{text-align:left;font-weight:700;padding-left:10px;font-size:0.95rem}
    .group-table .your-row td{color:var(--gold)}
    .group-table .pts-col{font-weight:800;font-size:1.1rem;color:var(--green)}
    .qualified-badge{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px;box-shadow:0 0 5px var(--green)}
    .group-status-bar{padding:8px 12px;text-align:center;border-top:1px solid var(--border);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.85rem;color:var(--muted);flex-shrink:0}
    .group-cta-bar{padding:10px 12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}

    /* ═══ QUALIFYING ═══ */
    .qual-hero{flex-shrink:0;padding:14px 20px 0;display:flex;align-items:center;gap:14px}
    .qual-hero-badge{background:linear-gradient(135deg,rgba(250,204,21,0.22),rgba(34,197,94,0.18));border:2px solid rgba(250,204,21,0.45);border-radius:10px;padding:8px 16px;text-align:center;flex-shrink:0}
    .qual-hero-num{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;color:var(--gold);line-height:1}
    .qual-hero-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
    .qual-progress-wrap{flex:1}
    .qual-progress-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:0.15em;color:#fff;margin-bottom:4px}
    .qual-progress-sub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.8rem;color:var(--gold);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:8px}
    .qual-progress-bar{height:10px;background:rgba(255,255,255,0.1);border-radius:5px;overflow:hidden}
    .qual-progress-fill{height:100%;border-radius:5px;background:linear-gradient(to right,#22c55e,#86efac);transition:width 0.7s cubic-bezier(0.25,1,0.5,1)}
    .qual-body{flex:1;display:grid;grid-template-columns:1.55fr 1fr;gap:14px;padding:12px 14px 14px;overflow:hidden;min-height:0}
    .qual-panel{background:rgba(0,0,0,0.72);border:1px solid rgba(255,255,255,0.12);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(12px)}
    .qual-panel-hd{padding:11px 16px;border-bottom:3px solid var(--gold);background:linear-gradient(to right,rgba(250,204,21,0.18),transparent);flex-shrink:0;display:flex;align-items:center;gap:10px}
    .qual-panel-title{font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:0.2em;color:var(--gold)}
    .qual-panel-sub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.75rem;letter-spacing:0.1em;color:var(--muted);margin-left:auto}
    .qual-scroll{flex:1;overflow-y:auto;padding:10px 12px}
    .qual-fixture{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;background:rgba(255,255,255,0.05);border:2px solid rgba(255,255,255,0.1);border-left:4px solid rgba(255,255,255,0.15);border-radius:10px;padding:12px 14px 12px 10px;margin-bottom:9px;transition:all 0.2s}
    .qual-fixture.result-win{background:rgba(34,197,94,0.18)!important;border-color:rgba(34,197,94,0.5)!important;border-left-color:var(--green)!important}
    .qual-fixture.result-loss{background:rgba(239,68,68,0.18)!important;border-color:rgba(239,68,68,0.5)!important;border-left-color:var(--red)!important}
    .qual-fixture.result-draw{background:rgba(255,255,255,0.1)!important;border-color:rgba(255,255,255,0.4)!important;border-left-color:#aaa!important}
    .qual-match-num{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:rgba(255,255,255,0.18);line-height:1}
    .qual-teams-col{}
    .qual-vs-row{display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.05rem;flex-wrap:wrap}
    .qual-your{color:var(--gold)}
    .qual-opp{color:#fff}
    .qual-vs{color:var(--muted);font-size:0.78rem;padding:0 2px}
    .qual-sub-text{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;color:var(--muted);margin-top:2px}
    .qual-score-col{font-family:'Bebas Neue',sans-serif;font-size:1.9rem;color:var(--gold);letter-spacing:0.08em;text-align:right;min-width:56px}
    .qual-tbd-col{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.75rem;color:var(--muted);min-width:56px;text-align:right}
    .qual-status-bar{flex-shrink:0;padding:10px 16px;background:linear-gradient(to right,rgba(0,0,0,0.6),rgba(0,0,0,0.3));border-top:1px solid rgba(255,255,255,0.08);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.9rem;color:var(--muted);text-align:center;letter-spacing:0.05em}
    .qual-play-btn{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:0.15em;padding:7px 16px;border-radius:6px;border:none;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(34,197,94,0.4);transition:all 0.15s;white-space:nowrap}
    .qual-play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(34,197,94,0.6)}
    .qual-done-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.72rem;padding:5px 10px;border-radius:5px;border:1px solid rgba(255,255,255,0.15);color:var(--muted);white-space:nowrap}
    /* qual stats side */
    .qual-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
    .qual-stat{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:14px;text-align:center}
    .qual-stat-num{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;line-height:1}
    .qual-stat-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}
    .qual-rule-box{margin:0 14px 14px;background:rgba(250,204,21,0.07);border:1px solid rgba(250,204,21,0.28);border-radius:10px;padding:14px}
    .qual-rule-title{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:0.2em;color:var(--gold);margin-bottom:6px}
    .qual-rule-text{font-family:'Barlow Condensed',sans-serif;font-size:0.83rem;color:rgba(255,255,255,0.65);line-height:1.65;font-weight:600}

    /* ═══ ROUND OF 16 ═══ */
    #r16Screen{background:
      radial-gradient(ellipse at 50% -10%,rgba(56,189,248,0.5) 0%,transparent 50%),
      radial-gradient(ellipse at 0% 100%,rgba(250,204,21,0.25) 0%,transparent 45%),
      radial-gradient(ellipse at 100% 80%,rgba(249,115,22,0.2) 0%,transparent 40%),
      linear-gradient(180deg,#001830 0%,#020a02 70%)}
    .r16-body{flex:1;display:flex;flex-direction:column;padding:10px 16px 14px;overflow:hidden;gap:10px}
    .r16-hero{flex-shrink:0;background:linear-gradient(135deg,rgba(56,189,248,0.18),rgba(56,189,248,0.06));border:2px solid rgba(56,189,248,0.5);border-radius:14px;padding:14px 20px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden}
    .r16-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(56,189,248,0.12),transparent 70%);pointer-events:none}
    .r16-hero-badge{background:linear-gradient(135deg,rgba(56,189,248,0.3),rgba(56,189,248,0.1));border:2px solid rgba(56,189,248,0.6);border-radius:10px;padding:8px 16px;text-align:center;flex-shrink:0}
    .r16-hero-label{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:#38bdf8;line-height:1;text-shadow:0 0 20px rgba(56,189,248,0.6)}
    .r16-hero-sub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(56,189,248,0.7)}
    .r16-hero-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.1em;color:#fff;text-shadow:0 0 20px rgba(255,255,255,0.2)}
    .r16-hero-desc{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.85rem;color:rgba(255,255,255,0.6);margin-top:2px}
    .r16-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:8px;overflow:hidden;min-height:0}
    /* Each R16 match card */
    .r16-card{background:rgba(0,0,0,0.75);border:2px solid rgba(255,255,255,0.1);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;transition:all 0.2s;backdrop-filter:blur(8px);position:relative}
    .r16-card.your-card{border-color:rgba(56,189,248,0.7)!important;box-shadow:0 0 20px rgba(56,189,248,0.25),inset 0 0 20px rgba(56,189,248,0.05)!important}
    .r16-card.result-win{border-color:rgba(34,197,94,0.8)!important;background:rgba(34,197,94,0.12)!important;box-shadow:0 0 16px rgba(34,197,94,0.2)!important}
    .r16-card.result-loss{border-color:rgba(239,68,68,0.8)!important;background:rgba(239,68,68,0.12)!important;box-shadow:0 0 16px rgba(239,68,68,0.2)!important}
    .r16-card-header{padding:5px 10px 4px;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    .r16-card-num{font-family:'Bebas Neue',sans-serif;font-size:0.75rem;letter-spacing:0.2em;color:rgba(255,255,255,0.25)}
    .r16-card-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
    .r16-card.your-card .r16-card-badge{background:rgba(56,189,248,0.2);color:#38bdf8;border:1px solid rgba(56,189,248,0.4)}
    .r16-card:not(.your-card) .r16-card-badge{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.35);border:1px solid rgba(255,255,255,0.1)}
    .r16-card-teams{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 10px;gap:3px}
    .r16-team-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:7px;transition:background 0.15s}
    .r16-team-row.winner{background:rgba(255,255,255,0.08)}
    .r16-team-flag{font-size:1rem;flex-shrink:0}
    .r16-team-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.88rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,0.85)}
    .r16-team-name.is-you{color:#38bdf8!important;font-weight:900}
    .r16-team-name.won{color:#fff!important}
    .r16-team-name.lost{color:rgba(255,255,255,0.35)!important}
    .r16-team-score{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--gold);min-width:14px;text-align:right;flex-shrink:0}
    .r16-vs-divider{display:flex;align-items:center;gap:6px;padding:0 8px}
    .r16-vs-line{flex:1;height:1px;background:rgba(255,255,255,0.08)}
    .r16-vs-txt{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.65rem;color:rgba(255,255,255,0.25);letter-spacing:0.15em}
    .r16-card-footer{padding:5px 10px;border-top:1px solid rgba(255,255,255,0.07);flex-shrink:0;display:flex;justify-content:center;align-items:center;min-height:32px}
    .r16-play-btn{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:0.15em;padding:5px 20px;border-radius:6px;border:none;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#00131f;cursor:pointer;box-shadow:0 4px 14px rgba(56,189,248,0.45);transition:all 0.15s;font-weight:900;width:100%}
    .r16-play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(56,189,248,0.65)}
    .r16-winner-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.72rem;letter-spacing:0.1em;color:var(--muted)}
    .r16-card.result-win .r16-winner-label{color:var(--green)}
    .r16-card.result-loss .r16-winner-label{color:var(--red)}
    .r16-card.your-card .r16-card-header::after{content:'YOUR MATCH';position:absolute;top:0;right:0;background:rgba(56,189,248,0.15);padding:2px 8px;font-family:'Barlow Condensed',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.2em;color:#38bdf8;border-bottom-left-radius:6px}

    /* ═══ KNOCKOUT BRACKET ═══ */
    #knockoutScreen{background:
      radial-gradient(ellipse at 50% 0%,rgba(250,204,21,0.5) 0%,transparent 45%),
      radial-gradient(ellipse at 0% 100%,rgba(34,197,94,0.4) 0%,transparent 45%),
      radial-gradient(ellipse at 100% 100%,rgba(249,115,22,0.4) 0%,transparent 45%),
      linear-gradient(180deg,#0d1a00 0%,#020a00 100%)}
    .ko-body{flex:1;padding:10px 14px 12px;overflow:hidden;display:flex;flex-direction:column;gap:6px}
    .ko-stage-bar{display:grid;grid-template-columns:1fr 1fr 80px 1fr 1fr;text-align:center;flex-shrink:0;gap:0}
    .ko-stage-lbl{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:0.3em;padding:4px 0;border-bottom:3px solid}
    .ko-stage-lbl:nth-child(1){color:#38bdf8;border-color:rgba(56,189,248,0.6)}
    .ko-stage-lbl:nth-child(2){color:#fb923c;border-color:rgba(251,146,60,0.6)}
    .ko-stage-lbl:nth-child(3){color:var(--gold);border-color:var(--gold);font-size:1.1rem}
    .ko-stage-lbl:nth-child(4){color:#fb923c;border-color:rgba(251,146,60,0.6)}
    .ko-stage-lbl:nth-child(5){color:#38bdf8;border-color:rgba(56,189,248,0.6)}
    .ko-bracket{flex:1;display:grid;grid-template-columns:1fr 22px 1fr 90px 1fr 22px 1fr;gap:0;overflow:hidden;min-height:0}
    .ko-col{display:flex;flex-direction:column;justify-content:space-around;gap:6px;padding:4px 4px;overflow:hidden}
    .ko-connector{display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:4px 0}
    .ko-line-v{width:3px;background:linear-gradient(to bottom,rgba(250,204,21,0.5),rgba(250,204,21,0.15));border-radius:2px;flex:1;min-height:20px}
    .ko-line-h{height:3px;width:100%;background:linear-gradient(to right,rgba(250,204,21,0.4),rgba(250,204,21,0.1));border-radius:1px}
    .ko-center-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px 2px}
    .ko-trophy-big{font-size:3rem;filter:drop-shadow(0 0 18px rgba(250,204,21,0.9));animation:trophyFloat 3s ease-in-out infinite;text-align:center;line-height:1}
    .ko-final-lbl{font-family:'Bebas Neue',sans-serif;font-size:0.9rem;letter-spacing:0.3em;color:var(--gold);text-align:center}
    /* match card */
    .ko-card{background:rgba(0,5,0,0.82);border:2px solid rgba(34,120,20,0.7);border-radius:8px;overflow:hidden;transition:all 0.2s;backdrop-filter:blur(6px)}
    .ko-card.your-match{border-color:rgba(250,204,21,0.65)!important;box-shadow:0 0 10px rgba(250,204,21,0.2)}
    .ko-card.result-win{border-color:rgba(34,197,94,0.8)!important;background:rgba(34,197,94,0.18)!important}
    .ko-card.result-loss{border-color:rgba(239,68,68,0.8)!important;background:rgba(239,68,68,0.18)!important}
    .ko-team-row{display:flex;align-items:center;gap:5px;padding:6px 9px;border-bottom:1px solid rgba(255,255,255,0.06)}
    .ko-team-row:last-of-type{border-bottom:none}
    .ko-team-flag{font-size:1rem;flex-shrink:0;line-height:1}
    .ko-team-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.85rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,0.85)}
    .ko-team-name.your{color:var(--gold)!important}
    .ko-team-name.won{color:#fff!important;font-weight:900}
    .ko-team-score{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;color:var(--gold);min-width:16px;text-align:right;flex-shrink:0}
    .ko-card-action{padding:4px 8px;background:rgba(0,0,0,0.5);border-top:1px solid rgba(255,255,255,0.05);display:flex;justify-content:center;align-items:center}
    .ko-play-btn{font-family:'Bebas Neue',sans-serif;font-size:0.85rem;letter-spacing:0.12em;padding:4px 12px;border-radius:4px;border:none;background:linear-gradient(135deg,#f97316,#facc15);color:#1a0a00;cursor:pointer;transition:all 0.15s;font-weight:900}
    .ko-play-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(249,115,22,0.5)}
    .ko-awaiting{font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;color:var(--muted);font-style:italic}
    .ko-adv-label{font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;color:var(--muted)}
    /* final preview card in centre */
    .ko-final-card{background:rgba(0,0,0,0.88);border:2px solid var(--gold);border-radius:10px;overflow:hidden;box-shadow:0 0 24px rgba(250,204,21,0.35)}
    .ko-final-card .ko-team-row{padding:8px 12px}
    .ko-final-card .ko-team-name{font-size:0.95rem}
    .ko-final-card .ko-team-score{font-size:1.15rem}

    /* ═══ FINAL SCREEN ═══ */
    #finalScreen{background:
      radial-gradient(ellipse at 50% 20%,rgba(180,20,20,0.8) 0%,transparent 50%),
      radial-gradient(ellipse at 20% 80%,rgba(250,204,21,0.3) 0%,transparent 40%),
      radial-gradient(ellipse at 80% 80%,rgba(249,115,22,0.3) 0%,transparent 40%),
      linear-gradient(180deg,#2a0808 0%,#180404 100%);align-items:center;justify-content:center}
    .final-arena{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
    .final-bg-rays{position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(240,192,64,0.07) 10deg,transparent 20deg,rgba(240,192,64,0.07) 30deg,transparent 40deg,rgba(240,192,64,0.05) 50deg,transparent 60deg,rgba(240,192,64,0.07) 70deg,transparent 80deg,rgba(240,192,64,0.05) 90deg,transparent 100deg,rgba(240,192,64,0.07) 110deg,transparent 120deg,rgba(240,192,64,0.05) 130deg,transparent 140deg,rgba(240,192,64,0.07) 150deg,transparent 160deg,rgba(240,192,64,0.05) 170deg,transparent 180deg,rgba(240,192,64,0.07) 190deg,transparent 200deg,rgba(240,192,64,0.05) 210deg,transparent 220deg,rgba(240,192,64,0.07) 230deg,transparent 240deg,rgba(240,192,64,0.05) 250deg,transparent 260deg,rgba(240,192,64,0.07) 270deg,transparent 280deg,rgba(240,192,64,0.05) 290deg,transparent 300deg,rgba(240,192,64,0.07) 310deg,transparent 320deg,rgba(240,192,64,0.05) 330deg,transparent 340deg,rgba(240,192,64,0.07) 350deg,transparent 360deg);animation:slowRotate 30s linear infinite;pointer-events:none}
    @keyframes slowRotate{to{transform:rotate(360deg)}}
    .final-card{position:relative;z-index:2;background:rgba(0,0,0,0.88);border:2px solid var(--gold);border-radius:18px;padding:36px 48px;text-align:center;max-width:560px;width:90%;box-shadow:0 0 80px rgba(240,192,64,0.2),0 40px 80px rgba(0,0,0,0.8);backdrop-filter:blur(15px)}
    .final-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.85rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
    .final-title-text{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,4vw,3.5rem);letter-spacing:0.08em;color:#fff;text-shadow:0 0 30px rgba(240,192,64,0.4);line-height:1;margin-bottom:20px}
    .final-trophy-wrap{font-size:4.5rem;margin-bottom:16px;filter:drop-shadow(0 0 30px rgba(240,192,64,0.8));animation:trophyFloat 3s ease-in-out infinite}
    @keyframes trophyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    @keyframes goalPop{from{opacity:0;transform:scale(0.85) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
    .final-matchup{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.1em;color:#fff;margin-bottom:6px}
    .final-vs{color:var(--gold);margin:0 10px}
    .final-score-display{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--gold);letter-spacing:0.15em;text-shadow:0 0 20px rgba(240,192,64,0.5);margin-bottom:6px}
    .final-scorers-text{font-size:0.82rem;color:var(--muted);margin-bottom:24px}
    .final-btn-row{display:flex;gap:10px;justify-content:center}

    /* WIN SCREEN */
    #winScreen{background:radial-gradient(ellipse at center,#1a0800 0%,#000 100%);align-items:center;justify-content:center}
    .confetti-canvas{position:absolute;inset:0;pointer-events:none}
    .win-rays{position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 40%,rgba(240,192,64,0.15) 0deg,transparent 15deg,rgba(249,115,22,0.1) 30deg,transparent 45deg,rgba(240,192,64,0.15) 60deg,transparent 75deg,rgba(249,115,22,0.1) 90deg,transparent 105deg,rgba(240,192,64,0.15) 120deg,transparent 135deg,rgba(249,115,22,0.1) 150deg,transparent 165deg,rgba(240,192,64,0.15) 180deg,transparent 195deg,rgba(249,115,22,0.1) 210deg,transparent 225deg,rgba(240,192,64,0.15) 240deg,transparent 255deg,rgba(249,115,22,0.1) 270deg,transparent 285deg,rgba(240,192,64,0.15) 300deg,transparent 315deg,rgba(249,115,22,0.1) 330deg,transparent 345deg,rgba(240,192,64,0.15) 360deg);animation:slowRotate 20s linear infinite}
    .win-content{position:relative;z-index:2;text-align:center;animation:winEntrance 0.8s cubic-bezier(0.175,0.885,0.32,1.275) both}
    @keyframes winEntrance{from{opacity:0;transform:scale(0.5) translateY(50px)}to{opacity:1;transform:scale(1) translateY(0)}}
    .win-stars{display:flex;justify-content:center;gap:7px;margin-bottom:8px}
    .win-star{font-size:1.6rem;animation:starPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both}
    .win-star:nth-child(1){animation-delay:0.5s}.win-star:nth-child(2){animation-delay:0.65s}.win-star:nth-child(3){animation-delay:0.8s}.win-star:nth-child(4){animation-delay:0.95s}.win-star:nth-child(5){animation-delay:1.1s}
    @keyframes starPop{from{opacity:0;transform:scale(0) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0)}}
    .win-trophy-huge{font-size:7rem;filter:drop-shadow(0 0 60px rgba(240,192,64,1)) drop-shadow(0 0 100px rgba(240,192,64,0.5));animation:trophyFloat 2s ease-in-out infinite,winEntrance 0.6s ease both;display:block;margin-bottom:8px}
    .win-world-cup{font-family:'Bebas Neue',sans-serif;font-size:clamp(0.9rem,2.5vw,1.3rem);letter-spacing:0.5em;color:var(--gold);text-transform:uppercase;margin-bottom:3px}
    .win-champions{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,9vw,6rem);letter-spacing:0.05em;color:#fff;text-shadow:0 0 60px rgba(240,192,64,0.8),0 8px 40px rgba(0,0,0,0.8);line-height:0.9;margin-bottom:5px}
    .win-team-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.8rem,5vw,3.5rem);color:var(--gold);text-shadow:0 0 40px rgba(240,192,64,0.9);letter-spacing:0.15em;margin-bottom:16px}
    .win-score{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;color:rgba(255,255,255,0.8);letter-spacing:0.1em;margin-bottom:8px}
    .win-fireworks{position:absolute;font-size:2.2rem;animation:firework 1.5s ease-out infinite;pointer-events:none}
    @keyframes firework{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(0)}}

    /* LOSE SCREEN */
    #loseScreen{background:#000;align-items:center;justify-content:center}
    .lose-content{text-align:center;animation:fadeInLose 1.2s ease both}
    @keyframes fadeInLose{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
    .lose-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,12vw,9rem);letter-spacing:0.08em;color:#5a0000;text-shadow:0 0 40px rgba(120,0,0,0.5);line-height:0.9;margin-bottom:10px}
    .lose-sub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:0.3em;color:#3a0000;text-transform:uppercase;margin-bottom:6px}
    .lose-score{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1rem;color:#4a1010;margin-bottom:30px;letter-spacing:0.1em}
    .lose-drip{width:2px;height:60px;background:linear-gradient(to bottom,#5a0000,transparent);margin:0 auto 20px;animation:drip 2s ease-in-out infinite}
    @keyframes drip{0%,100%{height:40px;opacity:0.5}50%{height:80px;opacity:1}}

    /* POST MATCH STATS SCREEN */
    #statsScreen{background:radial-gradient(ellipse at top,#0a1a0a 0%,#020a02 80%);align-items:center;justify-content:center}
    .stats-overlay{position:relative;z-index:2;max-width:700px;width:95%;animation:winEntrance 0.6s ease both}
    .stats-card{background:rgba(0,0,0,0.88);border:2px solid var(--gold);border-radius:16px;padding:28px 32px;backdrop-filter:blur(15px);box-shadow:0 0 60px rgba(240,192,64,0.15)}
    .stats-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:0.2em;color:var(--gold);text-align:center;margin-bottom:4px}
    .stats-subtitle{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.85rem;letter-spacing:0.2em;color:var(--muted);text-align:center;margin-bottom:20px;text-transform:uppercase}
    .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
    .stat-block{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px 14px}
    .stat-block-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
    .stat-block-value{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--gold);letter-spacing:0.05em}
    .stat-block-note{font-size:0.72rem;color:var(--muted);margin-top:2px}
    .win-chance-bar-wrap{margin-bottom:20px}
    .win-chance-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.8rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between}
    .win-chance-bar{height:22px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;position:relative}
    .win-chance-fill{height:100%;border-radius:4px;transition:width 1.2s cubic-bezier(0.25,1,0.5,1);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-family:'Bebas Neue',sans-serif;font-size:0.9rem;color:rgba(0,0,0,0.8);min-width:30px}
    .scorer-list{list-style:none;display:flex;flex-direction:column;gap:4px}
    .scorer-row{display:flex;justify-content:space-between;align-items:center;font-family:'Barlow Condensed',sans-serif;font-size:0.85rem;padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
    .scorer-name{font-weight:700;color:var(--text)}
    .scorer-goals{font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--gold)}

    /* TACTICS PANEL */
    .tactics-panel{background:rgba(0,0,0,0.75);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:7px 12px 8px;flex-shrink:0}
    .tactics-hd{display:flex;align-items:center;gap:8px;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,0.08)}
    .tactics-title{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:0.2em;color:var(--gold)}
    .tactics-subtitle{font-size:0.68rem;color:var(--muted);font-family:'Barlow Condensed',sans-serif;margin-left:auto;font-weight:600;letter-spacing:0.05em}
    .tactic-row{display:flex;align-items:center;gap:10px;margin-bottom:3px}
    .tactic-label-wrap{flex-shrink:0;width:110px}
    .tactic-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text)}
    .tactic-ends{display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-size:0.57rem;color:var(--muted);font-weight:600;width:100%;margin-top:0}
    .tactic-slider-wrap{flex:1;display:flex;flex-direction:column}
    .tactic-slider{width:100%;accent-color:var(--gold);height:3px;cursor:pointer}
    .tactics-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px}
    /* Chem warning — compact inline pill, no layout-busting height */
    .chem-warning{display:none;align-items:center;gap:5px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.35);border-radius:4px;padding:3px 8px;font-size:0.7rem;color:#fca5a5;font-family:'Barlow Condensed',sans-serif;font-weight:600;margin:2px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .chem-warning.visible{display:flex}

    .toast{position:fixed;top:75px;left:50%;transform:translateX(-50%) translateY(-20px);background:rgba(0,0,0,0.92);border:2px solid var(--gold);border-radius:7px;padding:10px 22px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:0.1em;color:var(--gold);z-index:999;opacity:0;pointer-events:none;transition:all 0.3s ease}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .spin-flash{position:fixed;inset:0;background:rgba(240,192,64,0.12);pointer-events:none;opacity:0;z-index:50;transition:opacity 0.2s}
    .spin-flash.flash{opacity:1}

/* ═══ BUY ME A COFFEE ═══ */
.bmc-btn{
  position:fixed;bottom:18px;right:18px;z-index:99999;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FFDD00,#FBB034);
  color:#000;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:9px 16px 9px 12px;border-radius:50px;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(251,176,52,0.55),0 2px 8px rgba(0,0,0,0.4);
  transition:all 0.2s ease;white-space:nowrap;
}
.bmc-btn:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 8px 30px rgba(251,176,52,0.75),0 4px 12px rgba(0,0,0,0.4);
}
.bmc-btn:active{transform:translateY(-1px) scale(1.01)}
.bmc-icon{font-size:1.1rem;line-height:1}