/* ==========================================
   DUEL MANAGER — VS Arena Styles
   Extracted from duel-manager.js injectCSS()
   ========================================== */

/* BUTTONS */
.duel-btn {
    background: linear-gradient(135deg,#e11d48,#be123c) !important;
    color: white; font-weight: bold; padding: 10px 20px; border-radius: 20px;
    border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(225,29,72,.4); transition: transform .2s, box-shadow .2s;
    font-family: 'Nunito', sans-serif;
}
.duel-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(225,29,72,.5); }
.duel-btn:disabled { opacity:.5; cursor:not-allowed; }

.duel-btn-used {
    background: linear-gradient(135deg,#334155,#1e293b) !important;
    color:#64748b !important; font-weight:bold; padding:10px 20px; border-radius:20px;
    border:2px dashed #334155 !important; cursor:not-allowed;
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Nunito',sans-serif;
}

/* LOBI */
.duel-modal-overlay {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    background:rgba(2,6,23,.85); backdrop-filter:blur(8px);
    display:flex; justify-content:center; align-items:center; z-index:100000;
    opacity:0; transition:opacity .3s; pointer-events:none;
}
.duel-modal-overlay.active { opacity:1; pointer-events:auto; }
.duel-modal-content {
    background:linear-gradient(160deg,rgba(30,41,59,.98),rgba(15,23,42,.98));
    border:1px solid rgba(225,29,72,.3); border-radius:24px;
    padding:32px; width:420px; max-width:92%;
    color:white; text-align:center;
    box-shadow:0 30px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05) inset;
    transform:scale(.9) translateY(20px);
    transition:transform .35s cubic-bezier(.175,.885,.32,1.275);
}
.duel-modal-overlay.active .duel-modal-content { transform:scale(1) translateY(0); }

.duel-player-item {
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    padding:12px 16px; border-radius:14px; margin-bottom:8px; transition:background .2s;
}
.duel-player-item:hover { background:rgba(255,255,255,.08); }

.challenge-btn {
    background:linear-gradient(135deg,#e11d48,#be123c);
    color:white; border:none; padding:7px 16px; border-radius:10px;
    cursor:pointer; font-size:13px; font-weight:bold;
    transition:all .2s; box-shadow:0 3px 10px rgba(225,29,72,.3);
}
.challenge-btn:hover:not(:disabled) { transform:scale(1.05); box-shadow:0 5px 15px rgba(225,29,72,.5); }
.challenge-btn:disabled { background:#334155; color:#64748b; cursor:not-allowed; box-shadow:none; }

/* ARENA */
.vs-arena {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    background:#020617; z-index:110000;
    display:flex; flex-direction:column; align-items:center; overflow:hidden;
}
.vs-arena::before {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px);
    background-size:50px 50px;
    animation:vsGridScroll 20s linear infinite; z-index:0;
}
@keyframes vsGridScroll { from{background-position:0 0} to{background-position:0 50px} }
.vs-arena::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(99,102,241,.15) 0%,transparent 70%);
    z-index:0; pointer-events:none;
}

/* SKOR BAŞLIĞI */
.vs-header {
    position:relative; z-index:2;
    display:flex; justify-content:space-between; align-items:center;
    width:100%; max-width:700px; padding:20px 20px 10px;
}
.vs-player-card {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    border-radius:20px; width:38%; padding:14px 10px;
    text-align:center; position:relative; overflow:hidden; transition:all .4s;
}
.vs-player-card.me {
    border-color:rgba(99,102,241,.5);
    box-shadow:0 0 20px rgba(99,102,241,.2),inset 0 0 20px rgba(99,102,241,.05);
}
.vs-player-card.opp {
    border-color:rgba(239,68,68,.5);
    box-shadow:0 0 20px rgba(239,68,68,.2),inset 0 0 20px rgba(239,68,68,.05);
}
.vs-card-glow {
    position:absolute; top:-20px; left:50%; transform:translateX(-50%);
    width:80px; height:80px; border-radius:50%;
    opacity:.15; filter:blur(20px); pointer-events:none;
}
.vs-player-card.me .vs-card-glow { background:#6366f1; }
.vs-player-card.opp .vs-card-glow { background:#ef4444; }

.vs-avatar { font-size:34px; margin-bottom:4px; line-height:1; }
.vs-name { font-size:13px; font-weight:800; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.5px; margin-bottom:6px; }
.vs-score {
    font-size:34px; font-weight:900;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
.vs-score.bump { animation:vsBump .4s cubic-bezier(.175,.885,.32,1.275); }
@keyframes vsBump { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }

.vs-center-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; z-index:2; }
.vs-swords { font-size:30px; animation:vsSwordsClash .7s infinite alternate ease-in-out; filter:drop-shadow(0 0 8px rgba(225,29,72,.8)); }
.vs-label { font-size:10px; font-weight:900; letter-spacing:3px; color:#ef4444; text-shadow:0 0 10px rgba(239,68,68,.6); }
@keyframes vsSwordsClash {
    from { transform:scale(1) rotate(-8deg); filter:drop-shadow(0 0 5px red); }
    to   { transform:scale(1.15) rotate(8deg); filter:drop-shadow(0 0 20px #fbbf24); }
}

/* PROGRESS */
.vs-progress-wrap { position:relative; z-index:2; width:100%; max-width:700px; padding:0 20px 8px; }
.vs-progress-bar { height:4px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.vs-progress-fill { height:100%; background:linear-gradient(90deg,#6366f1,#e11d48); border-radius:4px; transition:width .5s ease; box-shadow:0 0 8px rgba(225,29,72,.6); }
.vs-q-counter { text-align:right; font-size:11px; font-weight:700; color:#475569; margin-top:4px; letter-spacing:1px; }

/* SORU */
#vs-mini-game-container {
    position:relative; z-index:2; flex-grow:1; width:100%;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:0 16px 24px;
}
.vs-question-box {
    background:rgba(15,23,42,.8); border:1px solid rgba(99,102,241,.3);
    border-radius:24px; padding:24px 20px;
    width:100%; max-width:640px; text-align:center; color:white;
    box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter:blur(10px);
}
.vs-q-text { font-size:20px; font-weight:800; margin-bottom:20px; color:#f1f5f9; line-height:1.4; text-shadow:0 2px 10px rgba(0,0,0,.5); }
@media(max-width:400px) { .vs-q-text { font-size:17px; } }
.vs-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:500px) { .vs-options-grid { grid-template-columns:1fr; } }

.vs-opt-btn {
    background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.12);
    color:white; padding:14px 12px; border-radius:16px;
    font-size:15px; font-weight:700; cursor:pointer; transition:all .15s;
    display:flex; align-items:center; justify-content:center; gap:8px;
    word-break:break-word; line-height:1.3; font-family:'Nunito',sans-serif;
    position:relative; overflow:hidden;
}
.vs-opt-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(99,102,241,.2),transparent); opacity:0; transition:opacity .2s; }
.vs-opt-btn:hover:not(:disabled)::before { opacity:1; }
.vs-opt-btn:hover:not(:disabled) { border-color:rgba(99,102,241,.6); transform:translateY(-2px); box-shadow:0 8px 20px rgba(99,102,241,.2); }
.vs-opt-btn:active:not(:disabled) { transform:scale(.97); }
.vs-opt-btn:disabled { opacity:.55; cursor:not-allowed; }
.vs-opt-btn .opt-key { background:rgba(255,255,255,.1); border-radius:6px; padding:2px 7px; font-size:11px; font-weight:900; color:#fbbf24; flex-shrink:0; }
.vs-opt-btn.correct { background:linear-gradient(135deg,rgba(16,185,129,.3),rgba(5,150,105,.3))!important; border-color:#10b981!important; box-shadow:0 0 20px rgba(16,185,129,.4)!important; transform:scale(1.03)!important; }
.vs-opt-btn.wrong { background:linear-gradient(135deg,rgba(239,68,68,.3),rgba(185,28,28,.3))!important; border-color:#ef4444!important; animation:vsOptShake .4s ease; }
@keyframes vsOptShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* KAPATMA */
.vs-close-btn {
    position:absolute; top:16px; right:16px; z-index:10;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
    color:#94a3b8; width:38px; height:38px; border-radius:50%;
    cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.vs-close-btn:hover { background:rgba(239,68,68,.2); color:#ef4444; border-color:#ef4444; }

/* GERİ SAYIM */
.vs-countdown-overlay {
    position:absolute; inset:0; z-index:20;
    background:rgba(2,6,23,.95);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.vs-countdown-num { font-size:100px; font-weight:900; line-height:1; animation:vsCountPop .9s cubic-bezier(.175,.885,.32,1.275) forwards; }
@keyframes vsCountPop { 0%{opacity:0;transform:scale(.3)} 60%{opacity:1;transform:scale(1.1)} 80%{transform:scale(.95)} 100%{opacity:1;transform:scale(1)} }
.vs-countdown-label { font-size:16px; font-weight:700; letter-spacing:4px; color:#64748b; text-transform:uppercase; }

/* PARTİKÜL */
.vs-particle { position:fixed; pointer-events:none; z-index:120000; border-radius:50%; animation:vsParticleFly var(--dur) ease-out forwards; }
@keyframes vsParticleFly { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)} }

/* SONUÇ */
.vs-result-box { padding:40px 24px; text-align:center; position:relative; overflow:visible; width:100%; max-width:500px; }
.vs-result-trophy { font-size:80px; animation:vsTrophyBounce .6s .2s cubic-bezier(.175,.885,.32,1.275) both; }
@keyframes vsTrophyBounce { from{opacity:0;transform:scale(.3) translateY(30px)} to{opacity:1;transform:scale(1) translateY(0)} }
.vs-result-title { font-size:38px; font-weight:900; margin:12px 0; animation:vsTitleSlide .5s .4s ease both; }
@keyframes vsTitleSlide { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.vs-result-scores { display:flex; justify-content:center; gap:24px; margin:20px 0; animation:vsTitleSlide .5s .6s ease both; }
.vs-result-score-card { background:rgba(255,255,255,.05); border-radius:16px; padding:16px 24px; border:1px solid rgba(255,255,255,.1); }
.vs-result-score-label { font-size:11px; color:#64748b; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.vs-result-score-num { font-size:36px; font-weight:900; color:white; }

.vs-win-glow { animation:vsWinGlow 1.5s ease-in-out infinite alternate; }
@keyframes vsWinGlow { from{text-shadow:0 0 10px #10b981,0 0 30px #10b981} to{text-shadow:0 0 30px #10b981,0 0 80px #34d399,0 0 120px #fbbf24} }
.vs-lose-shake { animation:vsLoseShake .7s .3s ease both; }
@keyframes vsLoseShake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-3deg) translateX(-4px)} 40%{transform:rotate(3deg) translateX(4px)} 60%{transform:rotate(-2deg) translateX(-2px)} 80%{transform:rotate(2deg) translateX(2px)} }

/* KONFETİ */
.vs-confetti-piece { position:fixed; top:-20px; z-index:120000; pointer-events:none; animation:vsConfettiFall var(--dur) var(--delay) ease-in forwards; border-radius:2px; }
@keyframes vsConfettiFall { 0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)} 100%{opacity:0;transform:translateY(110vh) rotate(720deg) scale(.5)} }

/* TOAST */
#vs-toast-container { position:fixed; top:18%; left:50%; transform:translateX(-50%); z-index:115000; pointer-events:none; display:flex; flex-direction:column; gap:8px; align-items:center; }
.vs-toast { padding:11px 22px; border-radius:30px; font-size:16px; font-weight:800; color:white; box-shadow:0 10px 30px rgba(0,0,0,.5); border:1.5px solid rgba(255,255,255,.15); animation:vsToastPop 1.8s cubic-bezier(.175,.885,.32,1.275) forwards; font-family:'Nunito',sans-serif; }
@keyframes vsToastPop { 0%{opacity:0;transform:translateY(16px) scale(.85)} 12%{opacity:1;transform:translateY(0) scale(1.05)} 20%{transform:scale(1)} 80%{opacity:1} 100%{opacity:0;transform:translateY(-12px) scale(.9)} }