body {
    background: #efefef url("/assets/img/bg.jpg") center top no-repeat;
}
.container {
    width: min(1200px, calc(100% - 20px));
    margin: 0 auto;
}
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.float-end { float: right; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 18px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.col { box-sizing: border-box; flex: 0 0 100%; max-width: 100%; padding: 0 8px; }
.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 74px;
}
.brand {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.topnav .links { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.topnav .links a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}
.topnav .links a.on { border-bottom: 3px solid #face15; padding-bottom: 4px; }
#hot_match { margin-top: -28px; position: relative; z-index: 2; }
#hot_match .bg { background-size: 100% 100%; }
.hotevent ul { width: max-content; }
.hotevent li { display: inline-block; }
.hotevent { height: 40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.crumb { margin: 0 0 14px; color: #888; font-size: 14px; }
.crumb a { color: #2349b4; }
.page-intro { margin: 0 0 16px; color: #555; line-height: 1.7; }
.day-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.day-nav a { color: #2349b4; text-decoration: none; font-size: 16px; }
.day-nav a.on { color: #fff; background: #2349b4; border-radius: 4px; padding: 2px 8px; }
.info_center .vs { display: flex; align-items: center; justify-content: center; min-width: 42px; }
.info_center .vs b { color: #e23d3d; font-size: 16px; }
.live-tag { display: block; color: #e23d3d; font-size: 12px; font-weight: 700; }
.content.alone #main, .content.with-side #main { min-height: 0; }
.content.with-side #main { min-height: 560px; }
#footer { display: flex; align-items: center; justify-content: center; }
#footer p { height: auto; line-height: 1.6; }
.pager { display: flex; justify-content: center; gap: 16px; padding: 18px 0 4px; }
.pager a { color: #2349b4; }
#article .body { padding: 10px 8px 20px; line-height: 1.9; font-size: 16px; }
#article .body p { margin: 0 0 12px; }
#article .cover { display: block; max-width: 720px; margin: 8px auto 16px; }
.score-mid {
    position: absolute;
    left: 50%;
    top: 168px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}
.faq-box { margin-top: 24px; }
.faq-box details { border-bottom: 1px solid #e5e5e5; padding: 10px 0; }
.faq-box summary { cursor: pointer; font-weight: 700; }
.faq-box p { margin: 8px 0 0; color: #555; }
.empty { color: #888; padding: 12px 0; }
@media (min-width: 992px) {
    .row-cols-lg-4 > .col { flex: 0 0 25%; max-width: 25%; }
}
@media (max-width: 720px) {
    .brand { font-size: 24px; }
    .topnav { align-items: flex-start; flex-direction: column; padding-top: 12px; }
    .topnav .links a { font-size: 16px; }
    #match_info .button a { margin: 6px; }
}