:root{--page-bg:#090f13;--surface:#121d23;--ink:#edf5f2;--muted:#9baea9;--accent:#7bc8a8;--on-accent:#092019;--soft:#1d332e;--line:#2b3e3b;--font:Arial,Helvetica,sans-serif;--page-width:1400px;--dialog-radius:2px}
body{background-image:linear-gradient(#090f13e8,#090f13f5),url('../assets/stadium-night.png');background-position:center top;background-size:cover;background-attachment:fixed}
.site-header{min-height:108px;border-bottom:1px solid var(--ink);margin-bottom:36px}
.logo__text{font-family:Georgia,'Times New Roman',serif;font-size:30px;letter-spacing:-1.7px}
.logo:before{content:'';width:18px;height:24px;border:3px solid var(--accent);border-right-width:8px;margin-right:10px;transform:skewY(-16deg)}
.instruction-btn{border:0;padding-right:0}
.instruction-btn:hover{color:var(--accent)}
.editorial-layout{display:grid;grid-template-columns:202px minmax(0,1fr);gap:45px}
.catalog-sidebar{border-right:1px solid var(--line);padding-right:25px}
.seo-links{display:flex;flex-direction:column;gap:0}
.seo-links a{min-height:44px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5}
.seo-links a:first-child{color:var(--accent);font-weight:750;border-top:2px solid var(--accent)}
.seo-links .icon{color:#819084}
.seo-links a:hover{padding-left:5px;background:var(--soft)}
.sidebar-photo{height:245px;margin-top:30px;background:url('../assets/stadium-night.png') 6% center/auto 100%;filter:saturate(.55)}
.hero{padding:5px 0 34px;border-bottom:1px solid var(--line);margin-bottom:18px}
.hero__caption{color:#a9bbb5;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;max-width:440px}
.hero__title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,4vw,58px);font-weight:400;max-width:680px;line-height:1.12;letter-spacing:-.045em}
.hero__title em{font-style:italic}
.hero__brand{font-family:Arial,Helvetica,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.18em;margin-top:24px;color:var(--muted)}
.rating-toolbar{margin:0 0 21px}
.sort-tabs{gap:20px}
.sort-tabs__btn{padding:10px 0;background:transparent;border-bottom:2px solid transparent;font-size:11px;min-height:37px}
.sort-tabs__btn.is-active{background:transparent;border-color:var(--accent);color:var(--accent)}
.sort-tabs__btn:hover{background:transparent}
.rating__head,.card{display:grid;grid-template-columns:24px 230px minmax(145px,1fr) 180px;gap:17px;align-items:center}
.rating__head{padding:0 17px 12px}
.rating__col--bonus{text-align:right}
.rating__list{gap:0;border-top:1px solid var(--line)}
.card{padding:24px 17px;border-bottom:1px solid var(--line);background:#0e191ed9;transition:background .2s}
.card:hover{background:#16272be8}
.card__num{align-self:start;padding-top:15px;font-family:Georgia,'Times New Roman',serif;font-size:21px;color:#92a094}
.brand{display:flex;align-items:flex-start;gap:13px}
.brand__logo-link{width:88px;height:58px;border:1px solid var(--line)}
.brand__logo{padding:9px}
.brand__identity{flex:1;min-width:0;padding-top:3px}
.brand__name{font-size:15px}
.brand__tags{flex-direction:column;align-items:flex-start;margin-top:7px;gap:0}
.tag{padding:3px 0;min-height:28px;gap:5px;font-size:10px}
.tag:hover{background:transparent;text-decoration:underline}
.tag .icon{width:13px;height:13px}
.info-list{font-size:12px;line-height:1.65}
.info-list .icon{width:12px;height:12px;margin-top:3px}
.bonus{display:flex;flex-direction:column;gap:11px;align-items:stretch}
.bonus__accept{justify-content:flex-end;font-size:9px}
.bonus__cta{gap:8px;align-items:center}
.bonus__value{font-size:13px;text-align:left}
.bonus__btn{width:29px;height:29px;background:var(--soft);color:var(--accent);border-radius:50%}
.bonus__btn .icon{width:16px;height:16px}
.brand__play{background:#397e63;color:#fff;font-size:10px;min-height:34px;padding:5px 12px;justify-content:space-between}
.brand__play:hover{background:#4b9878}
.brand__play .icon{width:15px;height:15px}
.site-footer{background:#091116ed;border-color:#2b3e3b}
.site-footer__inner{padding-top:40px}
.site-footer .logo__text{font-size:26px}
@media(max-width:1250px){
 .editorial-layout{grid-template-columns:175px minmax(0,1fr);gap:28px}
 .catalog-sidebar{padding-right:20px}
 .seo-links a{font-size:10px}
 .card{grid-template-columns:24px minmax(0,1fr) 175px;gap:12px 20px;padding:22px 10px}
 .card__num{grid-column:1;grid-row:1/3}
 .brand{grid-column:2;grid-row:1}
 .info-list{grid-column:2;grid-row:2}
 .bonus{grid-column:3;grid-row:1/3;align-self:center}
 .rating__head{display:none}
 .hero__title{font-size:45px}
}
@media(max-width:1000px) and (min-width:761px){
 .editorial-layout{display:block}
 .catalog-sidebar{border:0;padding:0;margin-bottom:26px}
 .catalog-sidebar .seo-links{display:grid;grid-template-columns:repeat(4,1fr);gap:0 15px}
 .sidebar-photo{display:none}
 .hero__title{max-width:680px;font-size:49px}
 .card{grid-template-columns:30px minmax(0,1fr) 235px;gap:15px 25px}
}
@media(max-width:760px){
 .site-header{min-height:82px;margin-bottom:28px}
 .logo__text{font-size:24px}
 .logo:before{width:12px;height:19px;margin-right:7px;border-width:2px;border-right-width:5px}
 .instruction-btn{padding:8px 7px}
 .editorial-layout{display:block}
 .catalog-sidebar{display:none}
 .hero{padding:0 0 26px;margin-bottom:16px}
 .hero__title{font-size:39px;max-width:500px}
 .hero:after{content:'';display:block;height:134px;margin-top:23px;background:url('../assets/stadium-night.png') center/cover}
 .hero__caption{font-size:9px;max-width:280px}
 .hero__brand{font-size:11px;letter-spacing:.14em}
 .rating-toolbar{margin-bottom:9px}
 .sort-tabs{gap:18px}
 .sort-tabs__btn{font-size:10px;min-height:40px}
 .card{grid-template-columns:28px minmax(0,1fr);gap:13px;padding:22px 0}
 .card__num{grid-row:1;grid-column:1;padding-top:12px}
 .brand{grid-row:1;grid-column:2;align-items:center}
 .brand__logo-link{width:105px;height:62px}
 .brand__identity{display:contents}
 .brand__name{font-size:19px}
 .brand__tags{grid-column:1/-1;flex-direction:row}
 .brand{display:grid;grid-template-columns:105px 1fr;gap:6px 16px}
 .tag{font-size:10px;min-height:38px;padding:5px 8px;border:1px solid var(--line)}
 .info-list{grid-column:2;grid-row:2;font-size:11px}
 .bonus{grid-column:2;grid-row:3;gap:12px}
 .bonus__accept{justify-content:flex-start;order:2;font-size:10px}
 .bonus__cta{padding:13px 14px;background:#192e28}
 .bonus__value{font-size:14px}
 .bonus__btn{width:32px;height:32px;background:#27473a}
 .brand__play{min-height:43px;font-size:12px;order:1;padding:8px 14px}
 .site-footer .logo__text{font-size:23px}
}
