/* ══════════════════════════════════════════════════════════
   MEYDAN OKUMA (ch-*)
   ══════════════════════════════════════════════════════════ */

/* Sidebar pill */
.sb-new-pill { background:#ef4444; color:#fff; font-size:.55rem; font-weight:800; padding:2px 6px; border-radius:10px; margin-left:6px; letter-spacing:.5px; text-transform:uppercase; }

/* Container */
.ch-container { max-width:1100px; margin:0 auto; }

/* Hero */
.ch-hero { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; margin-bottom:20px; }
.ch-hero-left { display:flex; align-items:center; gap:14px; }
.ch-hero-icon { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#fef2f2,#fee2e2); display:flex; align-items:center; justify-content:center; color:#ef4444; font-size:1.5rem; }
.ch-hero-title { margin:0; font-size:1.1rem; font-weight:700; color:#1e293b; }
.ch-hero-sub { font-size:.8rem; color:#64748b; margin:.2rem 0 0; }
.ch-hero-stats { display:flex; gap:20px; }
.ch-stat { text-align:center; }
.ch-stat-val { display:block; font-size:1.4rem; font-weight:800; color:#1e293b; }
.ch-stat-win { color:#22c55e; }
.ch-stat-lose { color:#ef4444; }
.ch-stat-lbl { font-size:.65rem; color:#94a3b8; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

/* Section */
.ch-section { margin-bottom:20px; }
.ch-section-title { font-size:.9rem; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.ch-section-title i { color:#ef4444; font-size:1.1rem; }

/* Invites */
.ch-invites { display:flex; flex-direction:column; gap:10px; }
.ch-invite { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 18px; animation:ch-pulse 2s infinite; }
@keyframes ch-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.1); } 50%{ box-shadow:0 0 0 8px rgba(239,68,68,.05); } }
.ch-invite-avatar { width:42px; height:42px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#94a3b8; font-size:1.2rem; }
.ch-invite-avatar img { width:100%; height:100%; object-fit:cover; }
.ch-invite-info { flex:1; min-width:0; }
.ch-invite-name { display:block; font-size:.85rem; font-weight:700; color:#1e293b; }
.ch-invite-detail { font-size:.72rem; color:#94a3b8; }
.ch-invite-actions { display:flex; gap:6px; }

/* Buttons */
.ch-btn { display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border:none; border-radius:8px; font-size:.78rem; font-weight:600; cursor:pointer; transition:all .2s; }
.ch-btn:hover { transform:translateY(-1px); }
.ch-btn-accept { background:#22c55e; color:#fff; }
.ch-btn-accept:hover { background:#16a34a; }
.ch-btn-decline { background:#f1f5f9; color:#64748b; padding:8px 10px; }
.ch-btn-decline:hover { background:#fee2e2; color:#ef4444; }
.ch-btn-challenge { background:linear-gradient(135deg,#ef4444,#f97316); color:#fff; }
.ch-btn-challenge:hover { background:linear-gradient(135deg,#dc2626,#ea580c); }
.ch-btn-send { background:#ef4444; color:#fff; }
.ch-btn-send:hover { background:#dc2626; }
.ch-btn-cancel { background:#f1f5f9; color:#64748b; }
.ch-btn-back { background:#6366f1; color:#fff; text-decoration:none; }
.ch-btn-back:hover { background:#4f46e5; color:#fff; }

/* Active Games */
.ch-active-games { display:flex; gap:12px; flex-wrap:wrap; }
.ch-game-card { display:block; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px 20px; text-decoration:none; transition:all .3s; min-width:240px; }
.ch-game-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.ch-game-active { border-color:rgba(239,68,68,.3); }
.ch-game-vs { display:flex; align-items:center; gap:10px; }
.ch-game-player { flex:1; text-align:center; }
.ch-game-pname { font-size:.82rem; font-weight:700; color:#1e293b; }
.ch-game-versus { font-size:.7rem; font-weight:800; color:#ef4444; background:#fef2f2; padding:4px 8px; border-radius:6px; }
.ch-game-meta { display:flex; justify-content:space-between; margin-top:8px; font-size:.7rem; color:#94a3b8; }
.ch-game-live { color:#ef4444; font-weight:600; }

/* Columns */
.ch-columns { display:grid; grid-template-columns:1fr 280px; gap:20px; }
.ch-col-main { min-width:0; }
.ch-col-side { min-width:0; }

/* Online Users */
.ch-online-list { display:flex; flex-direction:column; gap:8px; }
.ch-online-user { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 16px; transition:border-color .2s; }
.ch-online-user:hover { border-color:#e2e8f0; }
.ch-ou-avatar { position:relative; width:38px; height:38px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#94a3b8; }
.ch-ou-avatar img { width:100%; height:100%; object-fit:cover; }
.ch-ou-dot { position:absolute; bottom:0; right:0; width:10px; height:10px; background:#22c55e; border:2px solid #fff; border-radius:50%; }
.ch-ou-info { flex:1; min-width:0; }
.ch-ou-name { display:block; font-size:.82rem; font-weight:700; color:#1e293b; }
.ch-ou-stat { font-size:.68rem; color:#94a3b8; }

/* Empty State */
.ch-empty { text-align:center; padding:40px 20px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }
.ch-empty i { font-size:2.5rem; color:#cbd5e1; }
.ch-empty p { font-size:.9rem; font-weight:600; color:#64748b; margin:.5rem 0 .2rem; }
.ch-empty span { font-size:.75rem; color:#94a3b8; }
.ch-empty-sm { text-align:center; color:#94a3b8; font-size:.8rem; padding:20px 0; }

/* History */
.ch-history { display:flex; flex-direction:column; gap:6px; }
.ch-history-item { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px; text-decoration:none; transition:all .2s; }
.ch-history-item:hover { transform:translateX(3px); }
.ch-hist-badge { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.ch-hist-win .ch-hist-badge { background:#dcfce7; color:#22c55e; }
.ch-hist-lose .ch-hist-badge { background:#fef2f2; color:#ef4444; }
.ch-hist-draw .ch-hist-badge { background:#f1f5f9; color:#94a3b8; }
.ch-hist-info { flex:1; min-width:0; }
.ch-hist-name { display:block; font-size:.8rem; font-weight:700; color:#1e293b; }
.ch-hist-score { font-size:.72rem; color:#64748b; font-weight:600; }
.ch-hist-date { font-size:.65rem; color:#94a3b8; white-space:nowrap; }

/* Leaderboard */
.ch-lb-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; margin-bottom:4px; }
.ch-lb-top { background:#fef9c3; }
.ch-lb-rank { font-size:.85rem; font-weight:800; min-width:28px; text-align:center; }
.ch-lb-name { flex:1; font-size:.78rem; font-weight:600; color:#1e293b; }
.ch-lb-wins { font-size:.72rem; font-weight:700; color:#22c55e; background:#dcfce7; padding:2px 8px; border-radius:6px; }
.ch-loading { text-align:center; padding:20px; color:#94a3b8; font-size:.8rem; }

/* Modal */
.ch-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:1050; display:flex; align-items:center; justify-content:center; }
.ch-modal { background:#fff; border-radius:16px; width:420px; max-width:95vw; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.ch-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e5e7eb; }
.ch-modal-header h5 { margin:0; font-size:.95rem; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:6px; }
.ch-modal-header h5 i { color:#ef4444; }
.ch-modal-close { background:none; border:none; font-size:1.3rem; color:#94a3b8; cursor:pointer; }
.ch-modal-body { padding:20px; }
.ch-modal-target { font-size:.85rem; color:#64748b; margin-bottom:16px; }
.ch-modal-field { margin-bottom:14px; }
.ch-modal-field label { display:block; font-size:.78rem; font-weight:600; color:#1e293b; margin-bottom:6px; }
.ch-option-group { display:flex; gap:8px; }
.ch-option { display:flex; align-items:center; gap:6px; padding:10px 16px; border:2px solid #e5e7eb; border-radius:10px; cursor:pointer; font-size:.82rem; font-weight:600; color:#64748b; transition:all .2s; }
.ch-option.active { border-color:#ef4444; background:#fef2f2; color:#ef4444; }
.ch-option input { display:none; }
.ch-select { width:100%; padding:10px 14px; border:2px solid #e5e7eb; border-radius:10px; font-size:.82rem; color:#1e293b; background:#fff; }
.ch-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid #e5e7eb; }

/* ═══ PLAY SCREEN ═══ */
.ch-play-container { max-width:720px; margin:0 auto; }

/* Top Bar */
.ch-play-topbar { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px 24px; margin-bottom:20px; }
.ch-play-player { text-align:center; }
.ch-play-pname { display:block; font-size:.78rem; font-weight:700; color:#1e293b; }
.ch-play-pscore { display:block; font-size:1.6rem; font-weight:800; }
.ch-play-me .ch-play-pscore { color:#6366f1; }
.ch-play-opp .ch-play-pscore { color:#ef4444; }
.ch-play-center { text-align:center; }
.ch-play-progress { font-size:.72rem; font-weight:700; color:#94a3b8; margin-top:4px; }

/* Timer */
.ch-play-timer { width:60px; height:60px; position:relative; margin:0 auto; }
.ch-timer-svg { width:100%; height:100%; transform:rotate(-90deg); }
.ch-timer-bg { fill:none; stroke:#f1f5f9; stroke-width:3; }
.ch-timer-fill { fill:none; stroke:#22c55e; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.ch-timer-fill.ch-timer-danger { stroke:#ef4444; }
.ch-timer-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.1rem; font-weight:800; color:#1e293b; }

/* Question */
.ch-play-question { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:24px; margin-bottom:16px; }
.ch-q-text { font-size:.92rem; color:#1e293b; line-height:1.6; margin-bottom:20px; font-weight:500; }
.ch-q-text img { max-width:100%; border-radius:8px; }
.ch-q-options { display:flex; flex-direction:column; gap:8px; }
.ch-q-option { display:flex; align-items:center; gap:12px; padding:14px 18px; border:2px solid #e5e7eb; border-radius:12px; background:#fff; cursor:pointer; transition:all .2s; text-align:left; font-size:.85rem; }
.ch-q-option:hover { border-color:#6366f1; background:#eef2ff; }
.ch-q-option.selected { border-color:#6366f1; background:#eef2ff; }
.ch-q-option.correct { border-color:#22c55e; background:#dcfce7; }
.ch-q-option.wrong { border-color:#ef4444; background:#fef2f2; }
.ch-q-opt-letter { width:28px; height:28px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.75rem; color:#64748b; flex-shrink:0; }
.ch-q-option.correct .ch-q-opt-letter { background:#22c55e; color:#fff; }
.ch-q-option.wrong .ch-q-opt-letter { background:#ef4444; color:#fff; }
.ch-q-opt-text { flex:1; color:#1e293b; }

/* Feedback */
.ch-feedback { display:flex; flex-direction:column; align-items:center; padding:20px; text-align:center; }
.ch-fb-correct { font-size:2rem; color:#22c55e; }
.ch-fb-wrong { font-size:2rem; color:#ef4444; }
.ch-feedback-text { font-size:1rem; font-weight:700; color:#1e293b; margin:6px 0; }
.ch-feedback-explanation { font-size:.78rem; color:#64748b; max-width:500px; }

/* Opponent Bar */
.ch-play-opponent-bar { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 16px; }
.ch-opp-label { font-size:.72rem; font-weight:700; color:#94a3b8; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.ch-opp-progress { flex:1; height:6px; background:#f1f5f9; border-radius:3px; overflow:hidden; }
.ch-opp-progress-fill { height:100%; background:linear-gradient(90deg,#ef4444,#f97316); border-radius:3px; transition:width .5s ease; }
.ch-opp-qnum { font-size:.72rem; font-weight:700; color:#64748b; }

/* ═══ RESULT SCREEN ═══ */
.ch-result-container { max-width:720px; margin:0 auto; }

.ch-result-banner { text-align:center; padding:30px; border-radius:16px; margin-bottom:20px; }
.ch-result-win { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
.ch-result-lose { background:linear-gradient(135deg,#fef2f2,#fecaca); }
.ch-result-draw { background:linear-gradient(135deg,#f1f5f9,#e2e8f0); }
.ch-result-icon i { font-size:3rem; }
.ch-result-win .ch-result-icon i { color:#22c55e; }
.ch-result-lose .ch-result-icon i { color:#ef4444; }
.ch-result-draw .ch-result-icon i { color:#94a3b8; }
.ch-result-title { font-size:1.2rem; font-weight:800; color:#1e293b; margin:.5rem 0 0; }

.ch-result-scores { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:20px; }
.ch-rscore { text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px 30px; min-width:160px; }
.ch-rscore-winner { border-color:#22c55e; box-shadow:0 4px 12px rgba(34,197,94,.15); }
.ch-rscore-avatar { width:48px; height:48px; border-radius:50%; background:#f1f5f9; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#94a3b8; font-size:1.2rem; }
.ch-rscore-avatar img { width:100%; height:100%; object-fit:cover; }
.ch-rscore-name { display:block; font-size:.82rem; font-weight:700; color:#1e293b; }
.ch-rscore-val { display:block; font-size:2rem; font-weight:800; color:#6366f1; margin:4px 0; }
.ch-rscore-label { font-size:.72rem; color:#94a3b8; }
.ch-result-vs { font-size:1rem; font-weight:800; color:#ef4444; }

/* Compare */
.ch-result-detail { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px; margin-bottom:20px; }
.ch-compare-table { margin-top:12px; }
.ch-compare-header { display:grid; grid-template-columns:40px 1fr 1fr; gap:8px; padding:8px 12px; background:#f8fafc; border-radius:8px; margin-bottom:6px; }
.ch-compare-header span { font-size:.7rem; font-weight:700; color:#94a3b8; text-transform:uppercase; }
.ch-compare-row { display:grid; grid-template-columns:40px 1fr 1fr; gap:8px; padding:8px 12px; border-bottom:1px solid #f1f5f9; }
.ch-compare-qnum { font-size:.78rem; font-weight:700; color:#64748b; }
.ch-compare-ans { font-size:.78rem; font-weight:700; display:flex; align-items:center; gap:4px; }
.ch-ans-correct { color:#22c55e; }
.ch-ans-wrong { color:#ef4444; }
.ch-compare-ans small { font-weight:400; color:#94a3b8; }

.ch-result-actions { text-align:center; padding:20px 0; }

/* ═══ WAITING SCREEN ═══ */
.ch-waiting-container { display:flex; align-items:center; justify-content:center; min-height:60vh; }
.ch-waiting-card { text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:40px; max-width:400px; }
.ch-waiting-anim i { font-size:3rem; color:#6366f1; }
.ch-waiting-title { font-size:1rem; font-weight:700; color:#1e293b; margin:16px 0 8px; }
.ch-waiting-sub { font-size:.85rem; color:#64748b; }
.ch-waiting-hint { font-size:.72rem; color:#94a3b8; margin-top:16px; }
.ch-waiting-dots { display:flex; justify-content:center; gap:6px; margin-top:20px; }
.ch-waiting-dots span { width:8px; height:8px; border-radius:50%; background:#6366f1; animation:ch-dot 1.4s infinite ease-in-out; }
.ch-waiting-dots span:nth-child(2) { animation-delay:.2s; }
.ch-waiting-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes ch-dot { 0%,80%,100%{ transform:scale(0); } 40%{ transform:scale(1); } }

/* ═══ DARK MODE ═══ */
body.dark .ch-hero,
body.dark .ch-invite,
body.dark .ch-game-card,
body.dark .ch-online-user,
body.dark .ch-history-item,
body.dark .ch-play-topbar,
body.dark .ch-play-question,
body.dark .ch-play-opponent-bar,
body.dark .ch-result-detail,
body.dark .ch-rscore,
body.dark .ch-waiting-card,
body.dark .ch-modal { background:#1e293b; border-color:#334155; }

body.dark .ch-hero-title,
body.dark .ch-section-title,
body.dark .ch-invite-name,
body.dark .ch-game-pname,
body.dark .ch-ou-name,
body.dark .ch-hist-name,
body.dark .ch-lb-name,
body.dark .ch-play-pname,
body.dark .ch-q-text,
body.dark .ch-q-opt-text,
body.dark .ch-result-title,
body.dark .ch-rscore-name,
body.dark .ch-waiting-title,
body.dark .ch-timer-text,
body.dark .ch-modal-header h5,
body.dark .ch-compare-qnum,
body.dark .ch-stat-val,
body.dark .ch-feedback-text { color:#f1f5f9; }

body.dark .ch-hero-sub,
body.dark .ch-ou-stat,
body.dark .ch-invite-detail,
body.dark .ch-game-meta,
body.dark .ch-modal-target,
body.dark .ch-waiting-sub { color:#94a3b8; }

body.dark .ch-empty { background:#1e293b; border-color:#334155; }
body.dark .ch-q-option { border-color:#334155; background:#1e293b; }
body.dark .ch-q-option:hover { border-color:#6366f1; background:#1e1b4b; }
body.dark .ch-q-opt-letter { background:#334155; color:#94a3b8; }
body.dark .ch-opp-progress { background:#334155; }
body.dark .ch-timer-bg { stroke:#334155; }
body.dark .ch-compare-header { background:#0f172a; }
body.dark .ch-compare-row { border-color:#334155; }
body.dark .ch-option { border-color:#334155; color:#94a3b8; }
body.dark .ch-option.active { border-color:#ef4444; background:rgba(239,68,68,.1); }
body.dark .ch-select { background:#0f172a; border-color:#334155; color:#f1f5f9; }
body.dark .ch-modal-overlay { background:rgba(0,0,0,.7); }
body.dark .ch-modal-header,
body.dark .ch-modal-footer { border-color:#334155; }
body.dark .ch-lb-top { background:rgba(254,249,195,.1); }
body.dark .ch-result-win { background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05)); }
body.dark .ch-result-lose { background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(239,68,68,.05)); }
body.dark .ch-result-draw { background:linear-gradient(135deg,rgba(148,163,184,.1),rgba(148,163,184,.05)); }
body.dark .ch-btn-decline { background:#334155; color:#94a3b8; }
body.dark .ch-btn-cancel { background:#334155; color:#94a3b8; }
body.dark .ch-ou-dot { border-color:#1e293b; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:768px) {
    .ch-hero { flex-direction:column; gap:14px; text-align:center; }
    .ch-hero-left { flex-direction:column; }
    .ch-columns { grid-template-columns:1fr; }
    .ch-result-scores { flex-direction:column; }
    .ch-result-vs { display:none; }
    .ch-play-topbar { padding:12px 16px; }
    .ch-active-games { flex-direction:column; }
    .ch-online-user { flex-wrap:wrap; }
    .ch-btn-challenge { width:100%; justify-content:center; margin-top:6px; }
}
/* ── End Meydan Okuma ── */