/* static/css/live_panel.css */

.live-panel-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, background 0.25s ease; z-index: 998; }
.live-panel-overlay.is-open { background: rgba(0, 5, 3, .76); backdrop-filter: blur(5px); opacity: 1; pointer-events: auto; }

.live-panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; background: linear-gradient(150deg, rgba(15, 39, 26, .98), rgba(4, 14, 9, .99)); color: var(--tbg-text); border-top-left-radius: 24px; border-top-right-radius: 24px; border: 1px solid rgba(97, 255, 177, .22); border-bottom: 0; box-shadow: 0 -16px 50px rgba(0, 0, 0, .52); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.live-panel.is-open { transform: translateY(0); }

.live-panel-handle { width: 44px; height: 4px; background: #3C7657; border-radius: 999px; margin: 12px auto 8px; }
.live-panel-close { position: absolute; top: 12px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: #153523; border: 1px solid rgba(139, 255, 190, .14); font-size: 1rem; color: #E4FFF0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
.live-panel-close:hover { background: #1C4A31; }

.live-panel-content { padding: 8px 24px 24px; max-width: 560px; margin: 0 auto; }
.live-panel-competition { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--tbg-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.live-panel-badge-row { display: flex; justify-content: center; margin-bottom: 24px; }
.live-panel-badge { display: inline-flex; align-items: center; gap: 6px; background: #ef4444; color: #ffffff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; }
.live-panel-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; animation: live-pulse 1.5s infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

.live-panel-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 24px; }
.live-panel-team { display: flex; flex-direction: column; align-items: center; text-align: center; }
.live-panel-team-name { font-size: 1.05rem; font-weight: 700; color: var(--tbg-text); line-height: 1.3; }
.live-panel-score { font-size: 2.6rem; font-weight: 900; color: var(--neon-mint); text-align: center; white-space: nowrap; padding: 0 8px; letter-spacing: -0.02em; }

.live-panel-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; border-top: 1px solid var(--tbg-border); border-bottom: 1px solid var(--tbg-border); margin-bottom: 20px; }
.live-panel-status { font-size: 0.85rem; font-weight: 700; color: #ef4444; text-transform: uppercase; letter-spacing: 0.06em; }
.live-panel-time { font-size: 0.85rem; color: var(--tbg-text-muted); }

@media (max-width: 640px) {
    .live-panel-content { padding: 8px 16px 20px; }
    .live-panel-score { font-size: 2.2rem; }
    .live-panel-team-name { font-size: 0.95rem; }
}