.teams-grid, .team-name, .score-board, .match-card, .team-box, .rec-game-item, .rec-game-teams, .bo_gall .gall_subject_title, .bo_gall .gall_li, .team-row, .teams-box, .team-name-box, .teams-grid-container, .win-rate {
font-family: var(--font-pretendard) !important;
}
.preview-text, .analysis-preview, .preview-content, .preview-box, .preview-text p, .preview-content p, .ai-preview-section, .ai-preview-section div {
font-family: var(--font-noto) !important;
}
.ai-premium-report-section h3, .report-text, .report-content, .report-content-placeholder, .ai-metrics-container h3, .saas-container h3, .ai-blur-overlay h3, .ai-premium-report-section {
font-family: var(--font-suit) !important;
}
.score-number, .score-vs, .metric-val, .elo-val, .hit-rate, .odds-value, .elo-value, .prob-segment, .metric-value, .metric-label, .ai-point-num, .prob-home, .prob-away, .prob-draw, .ai-metrics-container td, .ai-metrics-container th, .baseball-rationale-box, .hud-soccer-card, .hud-baseball-card, .hud-lol-card, .bo_gall .gall_info_row, .bo_gall .gall_value, .saas-container td, .saas-container th, .scoreix-live-widget-container, .card-metrics, .pick-value, .metric-val, .score-num, .public-betting, .sharp-betting {
font-family: var(--font-inter) !important;
}
.match-card.match-ended, .match-row-wrapper.match-ended {
opacity: 0.8 !important;
}
:root {
--bg-primary: #efe7d6;
--bg-secondary: #efe7d6;
--bg-tertiary: #efe7d6;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #475569;
--accent-gold: #f59e0b;
--accent-cyan: #06b6d4;
--accent-green: #10b981;
--accent-red: #ef4444;
--accent-purple: #8b5cf6;
--accent-color: #10b981;
--live-color: #ef4444;
--border-color:#6f6553;
--glass-bg: rgba(251,247,238,0.96);
--glass-border: rgba(90,78,54,0.12);
--font-outfit: 'Outfit', 'Noto Sans KR', sans-serif;
}
.analysis-content {
font-size: 16px !important;
line-height: 1.8 !important;
}
.analysis-content strong,
.analysis-content span[style*="background"],
.analysis-content .highlight-team,
.analysis-content .highlight-odds,
.analysis-content .highlight-value {
background: rgba(255, 215, 0, 0.15) !important;
border-radius: 3px !important;
padding: 0 2px !important;
}
.match-card {
background: linear-gradient(
135deg,
rgba(251,247,238,0.96) 0%,
rgba(251,247,238,0.96) 100%
) !important;
border: 1px solid rgba(90,78,54,0.12) !important;
border-radius: 12px !important;
backdrop-filter: blur(8px) !important;
margin-bottom: 6px !important;
overflow: hidden !important;
transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1) !important;
position: relative !important;
animation: card-enter 0.3s ease both !important;
height: auto !important;
padding: 0 !important;
}
.match-card::before {
content: '' !important;
position: absolute !important;
left: 0 !important; top: 0 !important; bottom: 0 !important;
width: 3px !important;
border-radius: 10px 0 0 10px !important;
background: transparent !important;
transition: background 0.25s !important;
z-index: 10 !important;
}
.match-card.premium-card::before {
background: #FFD700 !important;
}
.match-card.value-card::before {
background: #FF4500 !important;
}
.match-card.live-card::before {
background: #FF4500 !important;
}
.match-card.finished-card::before {
background: #475569 !important;
}
.match-card::before {
background: #475569 !important;
}
.match-card:hover {
transform: translateY(-2px) !important;
box-shadow:
0 8px 32px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.08) !important;
border-color:#6f6553 !important;
transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1) !important;
}
.match-card.premium-card:hover {
transform: translateY(-2px) !important;
box-shadow:
0 8px 32px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.08) !important;
border-color: rgba(255,215,0,0.4) !important;
transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1) !important;
}
.match-card.value-card:hover {
transform: translateY(-2px) !important;
box-shadow:
0 8px 32px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.08) !important;
border-color: rgba(255,69,0,0.4) !important;
transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1) !important;
}
.match-card.live-card:hover {
transform: translateY(-2px) !important;
box-shadow:
0 8px 32px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.08) !important;
border-color: rgba(255,69,0,0.5) !important;
transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1) !important;
}
.match-card.live-card {
border-color: rgba(255,69,0,0.25) !important;
animation: card-enter 0.3s ease both !important;
}
.mb-live {
position: relative !important;
overflow: hidden !important;
}
.mb-live::after {
content: '' !important;
position: absolute !important;
top: 0 !important; left: -100% !important;
width: 100% !important; height: 100% !important;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.25),
transparent
) !important;
animation: shimmer 2s infinite !important;
}
@keyframes shimmer {
0%{left:-100%}
100%{left:200%}
}
.match-score.live {
background: rgba(239,68,68,0.08) !important;
border: 1px solid rgba(239,68,68,0.3) !important;
color:#2b2519 !important;
font-family: 'JetBrains Mono', monospace !important;
font-weight: 900 !important;
animation: score-glow 1.8s infinite !important;
text-shadow: none !important;
}
.match-score.finished {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(90,78,54,0.12) !important;
color: #64748b !important;
animation: none !important;
text-shadow: none !important;
}
@keyframes score-pulse-live {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 4px rgba(255, 59, 48, 0.2), inset 0 1px 3px rgba(0,0,0,0.4);
}
50% {
transform: scale(1.04);
box-shadow: 0 0 12px rgba(255, 59, 48, 0.7), 0 0 20px rgba(255, 59, 48, 0.4), inset 0 1px 3px rgba(0,0,0,0.2);
}
}
@keyframes score-pulse-final {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 4px rgba(255, 215, 0, 0.2), inset 0 1px 3px rgba(0,0,0,0.4);
}
50% {
transform: scale(1.04);
box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.4), inset 0 1px 3px rgba(0,0,0,0.2);
}
}
.match-score.scheduled {
color: var(--txt3) !important;
font-size: 12px !important;
}
@keyframes dot-blink {
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:0.2;transform:scale(0.6);}
}
.match-team-name {
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: -0.3px !important;
}
.premium-badge-style {
background: linear-gradient(
135deg,
rgba(245,158,11,0.2),
rgba(239,68,68,0.1)
) !important;
border: 1px solid rgba(245,158,11,0.35) !important;
color: #f59e0b !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 0.3px !important;
border-radius: 4px !important;
padding: 2px 7px !important;
}
.value-badge-style {
background: rgba(6,182,212,0.12) !important;
border: 1px solid rgba(6,182,212,0.3) !important;
color: #06b6d4 !important;
}
.general-badge-style {
background: rgba(148,163,184,0.08) !important;
border: 1px solid rgba(148,163,184,0.15) !important;
color:#6f6553 !important;
}
.live-badge {
background: rgba(239,68,68,0.15) !important;
border: 1px solid rgba(239,68,68,0.35) !important;
color: #ef4444 !important;
position: relative !important;
overflow: hidden !important;
animation: badge-pulse 1.4s infinite !important;
}
@keyframes badge-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.match-card.finished-card {
opacity: 0.72 !important;
filter: saturate(0.85) !important;
transition: all 0.2s !important;
}
.match-card.finished-card:hover {
opacity: 1 !important;
filter: saturate(1) !important;
}
@keyframes card-enter {
from {
opacity: 0 !important;
transform: translateY(6px) !important;
}
to {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
.match-card:nth-child(1) { animation-delay: 0s !important; }
.match-card:nth-child(2) { animation-delay: 0.04s !important; }
.match-card:nth-child(3) { animation-delay: 0.08s !important; }
.match-card:nth-child(4) { animation-delay: 0.12s !important; }
.match-card:nth-child(5) { animation-delay: 0.16s !important; }
.match-card:nth-child(6) { animation-delay: 0.15s !important; }
.match-card:nth-child(7) { animation-delay: 0.18s !important; }
.match-card:nth-child(8) { animation-delay: 0.21s !important; }
.match-card:nth-child(9) { animation-delay: 0.24s !important; }
.match-card:nth-child(10) { animation-delay: 0.27s !important; }
.match-card:nth-child(11) { animation-delay: 0.3s !important; }
.match-card:nth-child(12) { animation-delay: 0.33s !important; }
.match-card:nth-child(13) { animation-delay: 0.36s !important; }
.match-card:nth-child(14) { animation-delay: 0.39s !important; }
.match-card:nth-child(15) { animation-delay: 0.42s !important; }
.match-card:nth-child(16) { animation-delay: 0.45s !important; }
.match-card:nth-child(17) { animation-delay: 0.48s !important; }
.match-card:nth-child(18) { animation-delay: 0.51s !important; }
.match-card:nth-child(19) { animation-delay: 0.54s !important; }
.match-card:nth-child(20) { animation-delay: 0.57s !important; }
.match-card:nth-child(21) { animation-delay: 0.6s !important; }
.match-card:nth-child(22) { animation-delay: 0.63s !important; }
.match-card:nth-child(23) { animation-delay: 0.66s !important; }
.match-card:nth-child(24) { animation-delay: 0.69s !important; }
.match-card:nth-child(25) { animation-delay: 0.72s !important; }
.match-card:nth-child(26) { animation-delay: 0.75s !important; }
.match-card:nth-child(27) { animation-delay: 0.78s !important; }
.match-card:nth-child(28) { animation-delay: 0.81s !important; }
.match-card:nth-child(29) { animation-delay: 0.84s !important; }
.match-card:nth-child(30) { animation-delay: 0.87s !important; }
.sx-predict-locked {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color:#6f6553 !important;
filter: blur(0.6px) !important;
transition: filter 0.2s ease, color 0.2s ease !important;
display: inline-flex;
align-items: center !important;
justify-content: flex-end !important;
text-align: right !important;
padding: 0 !important;
font-family: var(--font-pretendard) !important;
}
.sx-predict-locked:hover {
filter: blur(0px) !important;
color:#2b2519 !important;
}
.sx-predict-unlocked {
background: transparent !important;
border: none !important;
color: var(--gold) !important;
padding: 0 !important;
font-family: var(--font-pretendard) !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
body {
background:
radial-gradient(ellipse at 20% 50%,
rgba(6,182,212,0.04) 0%,
transparent 50%),
radial-gradient(ellipse at 80% 20%,
rgba(245,158,11,0.04) 0%,
transparent 50%),
#efe7d6 !important;
color: var(--text-primary);
font-family: 'Outfit', sans-serif;
font-size: 14.5px;
line-height: 1.5;
padding-bottom: 80px;
}
h1, h2, h3, h4, h5, h6, .logo, .timeline-divider {
font-family: 'Outfit', sans-serif !important;
font-weight: 900 !important;
}
.score-number, .score-vs, .metric-val, .elo-val, .hit-rate, .odds-value, .elo-value, .prob-segment, .metric-value, .metric-label, .ai-point-num, .prob-home, .prob-away, .prob-draw, .ai-metrics-container td, .ai-metrics-container th, .baseball-rationale-box, .hud-soccer-card, .hud-baseball-card, .hud-lol-card, .bo_gall .gall_info_row, .bo_gall .gall_value, .saas-container td, .saas-container th, .scoreix-live-widget-container, .card-metrics, .pick-value, .score-num, .public-betting, .sharp-betting, .match-prediction-text, .score-board, .match-score {
font-family: 'JetBrains Mono', monospace !important;
}
::-webkit-scrollbar {
width: 4px !important;
height: 4px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1) !important;
border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2) !important;
}
.stat-card {
background: linear-gradient(
135deg,
rgba(251,247,238,0.96),
rgba(251,247,238,0.96)
) !important;
border: 1px solid rgba(90,78,54,0.12) !important;
border-radius: 12px !important;
padding: 14px !important;
}
.stat-card .number, .stat-card-number, .stat-card-val, .stat-card .metric-val {
font-family: 'JetBrains Mono', monospace !important;
font-size: 24px !important;
font-weight: 900 !important;
letter-spacing: -1px !important;
}
header {
background:#fbf7ee !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(90,78,54,0.12) !important;
padding: 16px 28px;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--font-outfit);
font-size: 24px;
font-weight: 900;
color:#2b2519;
text-decoration: none;
letter-spacing: -0.8px;
display: flex;
align-items: center;
gap: 10px;
}
.logo span {
color: var(--accent-green);
text-shadow: 0 0 10px rgba(0, 230, 118, 0.35);
}
.nav-links {
display: flex;
gap: 8px;
align-items: center;
}
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 700;
padding: 8px 14px;
border-radius: 12px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
}
.nav-links a.active, .nav-links a:hover {
color:#2b2519;
background: rgba(255, 255, 255, 0.04);
border-color:#6f6553;
}
.container {
max-width: 720px;
margin: 0 auto;
padding: 24px 16px;
}
.hero-banner {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 24px;
text-align: center;
margin-bottom: 24px;
box-shadow: var(--shadow-premium);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
position: relative;
overflow: hidden;
}
.hero-banner::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 2px;
background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
}
.hero-title {
font-size: 18px;
font-weight: 900;
margin-bottom: 6px;
color:#2b2519;
letter-spacing: -0.4px;
}
.hero-subtitle {
font-size: 14.5px;
color: var(--text-secondary);
font-weight: 500;
line-height: 1.4;
}
.ad-container {
background: rgba(251,247,238,0.96);
border: 1px dashed var(--border-color);
border-radius: 16px;
padding: 10px;
text-align: center;
margin-bottom: 24px;
position: relative;
}
.ad-container::before {
content: "SPONSOR AD";
position: absolute;
top: -7px;
left: 14px;
background-color: var(--bg-primary);
padding: 0 6px;
font-size: 12px;
font-weight: 800;
color: var(--text-muted);
letter-spacing: 0.5px;
}
.ad-slot-top {
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.filter-widget-card {
position: sticky !important;
top: 68px !important;
z-index: 999 !important;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 18px;
margin-bottom: 24px;
box-shadow: var(--shadow-premium);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
display: flex;
flex-direction: column;
gap: 14px;
}
.sports-tabs-row {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.sports-tabs-row::-webkit-scrollbar {
display: none;
}
.sport-tab-btn {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(90,78,54,0.12);
color: var(--text-secondary);
border-radius: 12px;
padding: 8px 16px;
font-size: 14.5px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.sport-tab-btn:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
}
.sport-tab-btn.active {
background: var(--accent-green);
border-color: var(--accent-green);
color: #000;
font-weight: 800;
box-shadow: 0 0 12px rgba(0, 230, 118, 0.25);
}
.sport-tab-btn[data-sport="premium"].active {
background: linear-gradient(135deg, var(--accent-gold), #ffa500) !important;
color: #000 !important;
border-color: var(--accent-gold) !important;
font-weight: 900 !important;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3) !important;
}
.status-search-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.status-tabs-row {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.status-tabs-row::-webkit-scrollbar {
display: none;
}
.status-tab-btn {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(90,78,54,0.12);
color: var(--text-secondary);
border-radius: 10px;
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.status-tab-btn:hover {
color: var(--text-primary);
}
.status-tab-btn.active {
border-color: var(--accent-green);
color: var(--accent-green);
background: rgba(0, 230, 118, 0.05);
font-weight: 800;
}
.status-tab-btn.active[data-status="favorites"] {
border-color: var(--accent-gold);
color: var(--accent-gold);
background: rgba(255, 188, 0, 0.05);
font-weight: 800;
}
.search-box-row {
position: relative;
flex: 1;
min-width: 160px;
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: var(--text-secondary);
pointer-events: none;
}
#team-search {
width: 100%;
background-color:#6f6553;
border: 1px solid var(--border-color);
color: var(--text-primary);
border-radius: 10px;
padding: 8px 12px 8px 30px;
font-size: 12px;
font-family: inherit;
transition: all 0.25s;
}
#team-search:focus {
outline: none;
border-color: var(--accent-green);
background-color:#6f6553;
box-shadow: 0 0 10px rgba(0, 230, 118, 0.1);
}
#date-slider {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 4px 2px 8px 2px;
margin-bottom: 2px;
border-bottom: 1px solid rgba(90,78,54,0.12);
align-items: center;
}
#date-slider::-webkit-scrollbar {
display: none;
}
.date-tab-btn {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(90,78,54,0.12);
color: var(--text-secondary);
border-radius: 12px;
padding: 8px 12px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 58px;
height: 48px;
flex-shrink: 0;
outline: none;
}
.date-tab-btn:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
border-color:#6f6553;
}
.date-tab-btn.active {
background: rgba(0, 230, 118, 0.08) !important;
border-color: var(--accent-green) !important;
color: var(--accent-green) !important;
font-weight: 800;
box-shadow: 0 0 12px rgba(0, 230, 118, 0.18);
}
.date-tab-btn .date-label {
font-size: 12px;
font-weight: 700;
font-family: var(--font-outfit);
line-height: 1.1;
}
.date-tab-btn .date-sublabel {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
.date-tab-btn.active .date-sublabel {
color: var(--accent-green) !important;
opacity: 0.85;
}
.section-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 0;
margin: 0 auto 20px auto !important;
width: 100% !important;
max-width: 100% !important;
box-shadow: var(--shadow-premium);
overflow: hidden;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
transition: border-color 0.25s;
}
.section-card:hover {
border-color:#6f6553;
}
.league-header-card {
background: linear-gradient(
90deg,
rgba(255,255,255,0.03) 0%,
rgba(255,255,255,0.01) 100%
) !important;
border-bottom: 1px solid rgba(90,78,54,0.12) !important;
padding: 8px 12px !important;
display: flex;
align-items: center;
gap: 8px;
}
.league-star-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 16px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: color 0.2s;
outline: none;
}
.league-star-btn.active {
color: var(--accent-gold);
text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.league-title {
font-size: 14.5px;
font-weight: 800;
color:#2b2519;
letter-spacing: -0.3px;
}
.match-list {
display: flex;
flex-direction: column;
}
.match-row-wrapper {
display: flex;
align-items: center;
border-bottom: 1px solid rgba(90,78,54,0.12);
height: 44px;
padding: 0 12px;
transition: all 0.2s;
}
.match-row-wrapper:last-child {
border-bottom: none;
}
.match-row-wrapper:hover {
background-color:#6f6553;
}
.star-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 16px;
padding: 6px;
margin-right: 6px;
display: flex;
align-items: center;
justify-content: center;
outline: none;
}
.star-btn.active {
color: var(--accent-gold);
text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.match-row-content {
display: grid;
grid-template-columns: 66px 1fr 52px 1fr;
width: 100%;
align-items: center;
text-decoration: none;
color: var(--text-primary);
height: 100%;
overflow: hidden;
}
.match-time {
font-size: 12px;
color: var(--text-secondary);
font-weight: 700;
text-align: center;
white-space: nowrap;
line-height: 1.25;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.match-time.live {
color: var(--accent-red);
font-weight: 800;
animation: blink 1.5s infinite;
}
@keyframes blink {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
.match-team {
font-size: 14.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
letter-spacing: -0.3px;
}
.match-team.home {
text-align: right;
padding-right: 14px;
color:#2b2519;
}
.match-team.away {
text-align: left;
padding-left: 14px;
color:#2b2519;
}
.match-score {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(90,78,54,0.12);
border-radius: 6px;
text-align: center;
font-family: var(--font-outfit);
font-weight: 900;
font-size: 14px;
padding: 3px 0;
color: var(--text-primary);
letter-spacing: 0.3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.match-score.live {
background: rgba(239,68,68,0.08) !important;
border: 1px solid rgba(239,68,68,0.3) !important;
color:#2b2519 !important;
font-family: 'JetBrains Mono', monospace !important;
font-weight: 900 !important;
animation: score-glow 1.8s infinite !important;
text-shadow: none !important;
}
.match-score.finished {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(90,78,54,0.12) !important;
color: #64748b !important;
animation: none !important;
text-shadow: none !important;
}
.match-score.scheduled {
color: var(--text-secondary);
font-size: 14.5px;
font-weight: 600;
box-shadow: none;
background: transparent;
border-color: transparent;
}
footer {
text-align: center;
padding: 32px 16px;
border-top: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 12px;
background: rgba(8, 8, 8, 0.8);
margin-top: 32px;
line-height: 1.6;
}
.bottom-floating-ad {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(251,247,238,0.96);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-top: 2px solid var(--accent-green);
box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.6);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
height: 58px;
}
.bottom-ad-text {
font-size: 12px;
color: #000;
position: absolute;
top: -14px;
right: 16px;
background-color: var(--accent-green);
padding: 2px 6px;
border-radius: 4px 4px 0 0;
font-weight: 900;
letter-spacing: 0.5px;
}
.close-ad-btn {
position: absolute;
left: 8px;
top: -14px;
background-color: #2b2b2b;
color:#2b2519;
border: none;
font-size: 12px;
padding: 2px 6px;
border-radius: 4px 4px 0 0;
cursor: pointer;
font-weight: 800;
transition: background 0.2s;
}
.close-ad-btn:hover {
background-color: #444;
}
.layout-wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 992px) {
.layout-wrapper {
display: flex;
flex-direction: row;
max-width: 1400px;
margin: 20px auto;
gap: 20px;
padding: 0 20px;
align-items: flex-start;
}
.sidebar-container {
width: 320px;
flex-shrink: 0;
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 20px;
}
.container {
flex-grow: 1;
max-width: 1040px;
padding: 0 !important;
width: auto !important;
}
}
@media (max-width: 991px) {
.layout-wrapper {
display: flex;
flex-direction: column;
padding: 0 16px;
}
.sidebar-container {
width: 100%;
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 20px;
order: 2;
}
.container {
width: 100% !important;
margin: 16px auto 0 auto !important;
order: 1;
}
}
@media (max-width: 600px) {
header {
padding: 10px 12px 6px 12px !important;
gap: 6px !important;
flex-direction: column !important;
align-items: flex-start !important;
background: rgba(5, 5, 5, 0.92) !important;
}
.logo {
font-size: 16.5px !important;
gap: 5px !important;
margin-bottom: 4px !important;
}
.logo svg {
width: 22px !important;
height: 22px !important;
}
.nav-links {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
padding: 4px 2px 8px 2px !important;
scrollbar-width: none !important;
margin-left: 0 !important;
align-items: center !important;
}
.nav-links::-webkit-scrollbar {
display: none !important;
}
.nav-links a {
font-size: 12px !important;
padding: 6px 12px !important;
margin-left: 0 !important;
white-space: nowrap !important;
letter-spacing: -0.3px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
#header-nav-links #nav-ai-assistant,
#header-nav-links a[href*="premium.html"],
#header-nav-links a[href*="value.html"] {
display: none !important;
}
.lang-selector-dropdown {
margin-left: 4px !important;
flex-shrink: 0 !important;
}
#header-session-actions {
display: inline-flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
#header-session-actions a, #header-session-actions span {
font-size: 12px !important;
padding: 6px 12px !important;
border-radius: 8px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.filter-widget-card {
top: 84px !important;
}
.list-wrapper, .saas-container, .layout-wrapper, .container {
padding: 8px 4px !important;
}
.date-group-container {
margin: 16px 0 8px 0 !important;
}
.section-card.league-section {
margin-bottom: 8px !important;
border-radius: 6px !important;
}
.league-header-card {
padding: 8px 10px !important;
}
.match-row-content {
grid-template-columns: 42px 1fr 42px 1fr !important;
padding-right: 4px !important;
}
.star-btn {
padding: 0 6px !important;
}
.match-time {
font-size: 12px !important;
letter-spacing: -0.5px !important;
line-height: 1.15 !important;
}
.match-live-min {
font-size: 12px !important;
margin-top: 1px !important;
}
.match-score {
font-size: 12px !important;
padding: 2.5px 0 !important;
}
.match-team {
font-size: 12px !important;
letter-spacing: -0.5px !important;
font-weight: 700 !important;
}
.match-team.home {
padding-right: 3px !important;
}
.match-team.away {
padding-left: 3px !important;
}
.match-team.home span[style*="font-size"] {
font-size: 12px !important;
margin-right: 2px !important;
}
}
.lang-opt:hover {
background: rgba(255, 188, 0, 0.08) !important;
color: var(--accent-gold) !important;
}
@keyframes langFadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner,
.skiptranslate[style*="visibility: visible"] {
display: none !important;
visibility: hidden !important;
}
body {
top: 0px !important;
}
.goog-te-balloon-frame {
display: none !important;
}
.goog-tooltip,
.goog-tooltip:hover {
display: none !important;
visibility: hidden !important;
}
.goog-text-highlight {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
iframe.goog-te-menu-frame {
display: none !important;
}
.sidebar-card {
background: linear-gradient(
180deg,
rgba(251,247,238,0.96) 0%,
rgba(251,247,238,0.96) 100%
) !important;
border: 1px solid rgba(90,78,54,0.12) !important;
border-radius: 12px !important;
padding: 20px;
box-shadow: var(--shadow-premium);
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
position: relative;
overflow: hidden;
text-align: left;
transition: border-color 0.25s;
}
.sidebar-card:hover {
border-color:#6f6553;
}
.sidebar-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
}
.sidebar-card-title {
font-size: 14.5px;
font-weight: 900;
color:#2b2519;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: -0.3px;
}
.login-placeholder {
text-align: center;
padding: 8px 0;
}
.login-subtext {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 14px;
line-height: 1.4;
}
.social-btn-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
border-radius: 8px;
border: 1px solid var(--border-color);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
background-color:#fbf7ee;
color:#2b2519;
}
.social-btn:hover {
background-color: #242424;
border-color: #444;
}
.social-btn.kakao {
background-color: #fee500;
color: #000000;
border: none;
}
.social-btn.kakao:hover {
background-color: #fdd835;
}
.social-btn.naver {
background-color: #03c75a;
color:#2b2519;
border: none;
}
.social-btn.naver:hover {
background-color: #02b34f;
}
.random-login-btn {
background: linear-gradient(135deg, #0084ff 0%, #00e676 100%);
color:#2b2519;
border: none;
padding: 10px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 900;
cursor: pointer;
transition: all 0.25s;
margin-top: 4px;
box-shadow: 0 0 10px rgba(0, 132, 255, 0.15);
}
.random-login-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(0, 132, 255, 0.35);
}
.profile-container {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 12px;
}
.profile-avatar-ring {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 8px rgba(0, 230, 118, 0.15);
}
.profile-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
background-color:#fbf7ee;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 15px;
color:#2b2519;
border: 1px solid rgba(90,78,54,0.12);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ai-quick-widget:hover {
transform: translateY(-2px) scale(1.015);
border-color: rgba(255, 215, 0, 0.5) !important;
box-shadow: 0 12px 40px rgba(255, 215, 0, 0.15) !important;
}
.ai-quick-widget:hover .ai-widget-arrow {
background: rgba(255, 215, 0, 0.15) !important;
border-color: rgba(255, 215, 0, 0.3) !important;
transform: translateX(4px);
}
@keyframes aiPulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
.board-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.board-title-group {
text-align: left;
}
.board-title {
font-family: var(--font-outfit);
font-size: 20px;
font-weight: 900;
color:#2b2519;
letter-spacing: -0.5px;
margin-bottom: 4px;
}
.board-desc {
font-size: 12px;
color: var(--text-secondary);
}
.btn-write-post {
background: linear-gradient(135deg, var(--accent-gold), #ff6f00);
color: #000;
font-family: var(--font-outfit);
font-weight: 900;
font-size: 12.5px;
border: none;
padding: 10px 18px;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
gap: 6px;
}
.btn-write-post:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.35);
}
.board-category-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(90,78,54,0.12);
padding-bottom: 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.board-category-tabs::-webkit-scrollbar {
display: none;
}
.board-tab {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(90,78,54,0.12);
color: var(--text-secondary);
font-size: 14.5px;
font-weight: 700;
padding: 8px 16px;
border-radius: 30px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.board-tab.active {
background: rgba(255, 215, 0, 0.08);
border-color: rgba(255, 215, 0, 0.35);
color: var(--accent-gold);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
.post-card-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.post-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 18px;
padding: 16px 20px;
cursor: pointer;
transition: all 0.25s ease;
text-align: left;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.post-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: rgba(255,255,255,0.05);
}
.post-card.notice::before { background: var(--accent-red); }
.post-card.quant::before { background: var(--accent-gold); }
.post-card.free::before { background: var(--accent-blue); }
.post-card:hover {
transform: translateY(-2px);
border-color:#6f6553;
box-shadow: var(--shadow-premium);
}
.post-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.post-badge {
font-size: 12px;
font-weight: 900;
padding: 2px 7px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.post-badge.notice { background: rgba(255,59,48,0.1); color: var(--accent-red); border: 1px solid rgba(255,59,48,0.2); }
.post-badge.quant { background: rgba(255,215,0,0.1); color: var(--accent-gold); border: 1px solid rgba(255,215,0,0.2); }
.post-badge.free { background: rgba(0,240,255,0.1); color: var(--accent-blue); border: 1px solid rgba(0,240,255,0.2); }
.post-time {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
}
.post-title {
font-size: 14.5px;
font-weight: 800;
color:#2b2519;
margin-bottom: 6px;
line-height: 1.4;
letter-spacing: -0.3px;
transition: color 0.2s;
}
.post-card:hover .post-title {
color: var(--accent-gold);
}
.post-summary {
font-size: 14.5px;
color: var(--text-secondary);
margin-bottom: 12px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-footer-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.post-author {
display: flex;
align-items: center;
gap: 6px;
color:#2b2519;
font-weight: 700;
}
.post-level-badge {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(90,78,54,0.12);
color: var(--text-secondary);
font-size: 12px;
font-weight: 800;
padding: 1px 5px;
border-radius: 4px;
}
.post-stats {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-muted);
font-weight: 600;
}
.post-stat-item {
display: flex;
align-items: center;
gap: 4px;
}
.board-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.page-btn {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(90,78,54,0.12);
color: var(--text-secondary);
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14.5px;
font-weight: bold;
transition: all 0.2s;
}
.page-btn.active {
background: var(--accent-gold);
color: #000;
border-color: var(--accent-gold);
}
.page-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.08);
color:#2b2519;
}
.board-detail-container {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 24px;
box-shadow: var(--shadow-premium);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
text-align: left;
}
.detail-back-row {
margin-bottom: 20px;
}
.btn-board-back {
background: transparent;
border: 1px solid rgba(90,78,54,0.12);
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.btn-board-back:hover {
color:#2b2519;
border-color:#6f6553;
background: rgba(255,255,255,0.03);
}
.detail-header {
border-bottom: 1px solid rgba(90,78,54,0.12);
padding-bottom: 18px;
margin-bottom: 20px;
}
.detail-meta-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.detail-title {
font-size: 18px;
font-weight: 900;
color:#2b2519;
line-height: 1.4;
letter-spacing: -0.4px;
margin-bottom: 12px;
}
.detail-author-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14.5px;
}
.detail-content {
font-size: 14px;
color:#2b2519;
line-height: 1.7;
white-space: pre-wrap;
margin-bottom: 30px;
min-height: 100px;
}
.detail-footer-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 24px;
border-bottom: 1px solid rgba(90,78,54,0.12);
padding-bottom: 16px;
}
.btn-post-delete {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.25);
color: var(--accent-red);
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.btn-post-delete:hover {
background: rgba(239, 68, 68, 0.25);
}
.comments-section-title {
font-size: 14.5px;
font-weight: 900;
color:#2b2519;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 6px;
}
.comment-input-row {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(90,78,54,0.12);
border-radius: 14px;
padding: 4px;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.comment-input-row input {
background: transparent;
border: none;
outline: none;
color:#2b2519;
padding: 10px 14px;
flex: 1;
font-size: 12.5px;
}
.comment-input-row input::placeholder {
color: var(--text-muted);
}
.btn-submit-comment {
background: linear-gradient(135deg, var(--accent-gold), #ff6f00);
border: none;
color: #000;
font-weight: 800;
font-size: 12px;
padding: 8px 16px;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.btn-submit-comment:hover {
transform: scale(1.02);
}
.comments-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.comment-item {
background: rgba(255,255,255,0.015);
border: 1px solid rgba(90,78,54,0.12);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.comment-item-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.comment-item-body {
font-size: 14.5px;
color:#6f6553;
line-height: 1.4;
}
.btn-comment-delete {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
.btn-comment-delete:hover {
color: var(--accent-red);
}
.board-modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.board-modal-card {
background:#fbf7ee;
border: 1px solid rgba(255, 215, 0, 0.15);
border-radius: 24px;
width: 100%;
max-width: 500px;
box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(255, 215, 0, 0.04);
overflow: hidden;
position: relative;
animation: modalScaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
text-align: left;
}
.board-modal-card::before {
content: '';
position: absolute; top: 0; left: 0; width: 100%; height: 3px;
background: linear-gradient(90deg, var(--accent-gold), #ff6f00);
}
@keyframes modalScaleIn {
from { opacity: 0; transform: scale(0.9) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head {
padding: 20px 24px 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-family: var(--font-outfit);
font-size: 16.5px;
font-weight: 900;
color:#2b2519;
}
.btn-modal-close {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 18px;
cursor: pointer;
}
.modal-body {
padding: 12px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.modal-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.modal-form-label {
font-size: 12px;
font-weight: 800;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modal-input {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(90,78,54,0.12);
border-radius: 12px;
color:#2b2519;
padding: 12px 14px;
font-size: 14px;
outline: none;
transition: all 0.25s;
}
.modal-input:focus {
border-color: var(--accent-gold);
box-shadow: 0 0 10px rgba(255,215,0,0.15);
}
.modal-select {
background: #121212;
border: 1px solid rgba(90,78,54,0.12);
border-radius: 12px;
color:#2b2519;
padding: 12px 14px;
font-size: 14px;
outline: none;
cursor: pointer;
}
.modal-textarea {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(90,78,54,0.12);
border-radius: 12px;
color:#2b2519;
padding: 12px 14px;
font-size: 14px;
outline: none;
resize: none;
height: 160px;
line-height: 1.5;
transition: all 0.25s;
}
.modal-textarea:focus {
border-color: var(--accent-gold);
box-shadow: 0 0 10px rgba(255,215,0,0.15);
}
.btn-modal-submit {
background: linear-gradient(135deg, var(--accent-gold), #ff6f00);
color: #000;
font-family: var(--font-outfit);
font-weight: 900;
font-size: 14px;
border: none;
padding: 13px;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255,215,0,0.2);
transition: all 0.2s;
text-align: center;
}
.btn-modal-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255,215,0,0.3);
}
.sx-match-row {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
}
.sx-team {
flex: 1 1 0 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 12px !important;
font-weight: 700 !important;
color:#2b2519 !important;
}
.sx-team.home {
text-align: right !important;
padding-right: 8px !important;
}
.sx-team.away {
text-align: left !important;
padding-left: 8px !important;
}
.sx-score-box {
flex: 0 0 72px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.sx-predict { display: flex; align-items: center; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; gap: 6px; margin-top: 4px; }
.sx-predict-locked { background: transparent !important; border: none !important; color: var(--text-muted, #475569) !important; padding: 0 !important; font-family: var(--font-pretendard) !important; }
.sx-predict-unlocked { background: transparent !important; border: none !important; color: #f59e0b !important; padding: 0 !important; font-family: var(--font-pretendard) !important; }
.sx-match-row {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
}
.sx-team {
flex: 1 1 0 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.sx-team.home {
text-align: right !important;
padding-right: 8px !important;
}
.sx-team.away {
text-align: left !important;
padding-left: 8px !important;
}
.sx-score-box {
flex: 0 0 72px !important;
text-align: center !important;
}
.active-matches-container, .finished-matches-container {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.date-group-container {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.section-card.league-section {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.match-list {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 12px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
align-items: stretch !important;
flex-shrink: 0 !important;
}
.match-row-wrapper {
width: 98% !important;
max-width: 98% !important;
margin: 0 auto 8px auto !important;
height: auto !important;
min-height: 60px !important;
padding: 8px 12px !important;
box-sizing: border-box !important;
transition: all 0.2s;
flex-shrink: 0 !important;
}
#match-section-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.container {
margin-left: auto !important;
margin-right: auto !important;
}
.sx-team {
font-size: 13.5px !important;
white-space: normal !important;
word-break: keep-all !important;
}
@keyframes bannerPulse {
0% { border-bottom-color: rgba(0, 230, 118, 0.2); box-shadow: 0 4px 20px rgba(0, 230, 118, 0.05); }
100% { border-bottom-color: rgba(0, 240, 255, 0.35); box-shadow: 0 4px 25px rgba(0, 240, 255, 0.15); }
}
@keyframes bannerShimmer {
0% { left: -150%; }
50% { left: 150%; }
100% { left: 150%; }
}
@keyframes bannerNeonBlink {
0% { opacity: 0.35; transform: scale(0.9); box-shadow: 0 0 4px #00e676; }
100% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 12px #00e676; }
}