.gr-wrap{
max-width:var(--pw3);
margin:var(--gd2) auto var(--gt2);
}
.gr-platform-list{
margin-left:0;
margin-right:0;
}
.simple-list-link-icon.gr-platform-icon>svg{
color:inherit;
}
.gr-platform-icon-pc:hover{
color:#00a4ef;
}
.gr-platform-icon-ps5:hover,
.gr-platform-icon-ps4:hover{
color:#006fcd;
}
.gr-platform-icon-xbox:hover,
.gr-platform-icon-xbox-one:hover{
color:#107c10;
}
.gr-platform-icon-switch:hover,
.gr-platform-icon-switch-2:hover{
color:#e60012;
}
.gr-platform-icon-macos:hover,
.gr-platform-icon-ios:hover{
color:#a2aaad;
}
.gr-platform-icon-android:hover{
color:#3ddc84;
}
.gr-platform-icon-linux:hover{
color:#fcc624;
}
.gr-summary{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gd3);
margin:var(--gd2) 0 var(--gap);
}
.gr-stat{
display:flex;
flex-direction:column;
gap:var(--gd7);
min-width:0;
}
.gr-stat span{
font-family:var(--ff2);
font-size:2rem;
line-height:1;
color:var(--cl1);
}
.gr-stat strong{
font-size:var(--fz4);
font-weight:calc(700 + var(--fw-offset));
color:var(--tx2);
text-transform:uppercase;
letter-spacing:.05em;
}
.gr-months{
display:flex;
flex-direction:column;
gap:var(--gap);
}
.gr-month h2{
margin:0 0 var(--gd3);
padding:var(--gd4) var(--gd2);
font-family:var(--ff2);
font-size:1.9rem;
line-height:1.1;
color:var(--tx1);
background:color-mix(in srgb,var(--bg3) 58%,transparent);
border-radius:var(--br1);
display:flex;
justify-content:center;
text-align:center;
}
.gr-list{
display:flex;
flex-direction:column;
gap:var(--gd4);
}
.gr-item{
display:grid;
grid-template-columns:86px minmax(0,1fr) 132px 96px;
gap:var(--gd2);
align-items:center;
padding-block:0;
padding-inline:var(--gd2);
background-color:transparent;
border-radius:var(--br1);
}
.gr-item:hover{
background-color:color-mix(in srgb,var(--bg3) 58%,transparent);
}
.gr-date{
display:flex;
flex-direction:column;
gap:var(--gd8);
align-items:flex-start;
}
.gr-date span{
font-weight:calc(800 + var(--fw-offset));
color:var(--tx1);
font-size:var(--fz2);
line-height:1.1;
}
.gr-date em{
font-style:normal;
font-size:var(--fz5);
font-weight:calc(800 + var(--fw-offset));
line-height:1;
color:var(--tx3);
text-transform:uppercase;
letter-spacing:.04em;
}
.gr-item-upcoming .gr-date em,
.gr-item-today .gr-date em,
.gr-item-window .gr-date em{
color:var(--cl1);
}
.gr-body{
min-width:0;
display:grid;
grid-column:2;
}
.gr-body h3{
margin:0;
min-width:0;
font-family:var(--ff1);
font-size:var(--fz0);
font-weight:calc(650 + var(--fw-offset));
line-height:1.25;
color:#b4b4b4;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.gr-body h3 a{
display:inline-block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--tx1);
text-decoration:none;
vertical-align:top;
}
.gr-body h3 a:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
[data-theme="light"] .gr-body h3{
color:#545454;
}
.gr-platforms{
display:flex;
flex:1 1 auto;
flex-wrap:nowrap;
justify-content:flex-start;
gap:var(--gd6);
min-width:0;
max-width:100%;
overflow:hidden;
}
.gr-platforms span,
.gr-platforms a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:24px;
color:var(--tx2);
font-size:var(--fz5);
font-weight:calc(800 + var(--fw-offset));
line-height:1;
white-space:nowrap;
}
.gr-platforms a{
text-decoration:none;
}
.gr-platforms a:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
.gr-ratings{
display:grid;
grid-template-columns:repeat(3,44px);
grid-column:3;
align-items:center;
justify-content:end;
justify-self:end;
column-gap:0;
min-width:132px;
text-align:center;
}
.gr-rating{
display:inline-flex;
flex-direction:column;
align-items:center;
justify-self:center;
gap:0;
width:44px;
min-height:24px;
max-width:100%;
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:calc(600 + var(--fw-offset));
line-height:1;
text-decoration:none;
white-space:nowrap;
color:var(--tx2);
}
.gr-rating-steam{
grid-column:1;
}
.gr-rating-opencritic{
grid-column:2;
}
.gr-rating-metacritic,
.gr-rating-metacritic-user{
grid-column:3;
}
.gr-rating span,
.gr-rating strong{
font-weight:calc(600 + var(--fw-offset));
}
.gr-rating span{
color:var(--tx2);
}
.gr-rating-score-good{
color:#2f9e44;
}
.gr-rating-score-mid{
color:#c08a00;
}
.gr-rating-score-bad{
color:#d94848;
}
.gr-stores{
display:flex;
grid-column:4;
inline-size:96px;
flex-wrap:nowrap;
justify-content:flex-end;
gap:var(--gd6);
}
.gr-store{
box-sizing:border-box;
inline-size:96px;
block-size:40px;
display:grid;
place-items:center;
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:calc(600 + var(--fw-offset));
line-height:1;
text-decoration:none;
text-transform:none;
overflow:visible;
border-radius:var(--br1);
color:var(--tx2);
background-color:transparent;
}
.gr-store:hover,
.gr-store:focus-visible{
color:var(--tx2);
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
.gr-store-icon{
width:30px;
height:30px;
display:block;
background-color:currentColor;
mask-position:center;
mask-repeat:no-repeat;
mask-size:contain;
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:contain;
}
.gr-store-steam .gr-store-icon{
mask-image:url('/site/vlad/svg/steam-color.svg');
-webkit-mask-image:url('/site/vlad/svg/steam-color.svg');
}
.gr-store-gog .gr-store-icon{
mask-image:url('/site/vlad/svg/gog-color.svg');
-webkit-mask-image:url('/site/vlad/svg/gog-color.svg');
}
.gr-store-greenman .gr-store-icon{
mask-image:url('/site/vlad/svg/greenman-color.svg');
-webkit-mask-image:url('/site/vlad/svg/greenman-color.svg');
}
.gr-store-label{
white-space:nowrap;
}
.gr-source{
display:flex;
flex-wrap:wrap;
gap:var(--gd4) var(--gd2);
margin-top:var(--gap);
color:var(--tx3);
font-size:var(--fz4);
line-height:1.45;
}
.gr-source a{
color:var(--tx2);
text-decoration:none;
}
.gr-source a:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:2px;
}
.gr-empty{
margin:var(--gap) 0;
color:var(--tx2);
font-size:var(--fz0);
}
@media(max-width:700px){
.gr-summary{
grid-template-columns:1fr 1fr 1fr;
gap:var(--gd5);
}
.gr-stat span{
font-size:1.55rem;
}
.gr-item{
grid-template-columns:70px minmax(0,1fr) auto;
gap:var(--gd3);
}
.gr-body{
grid-column:2;
}
.gr-ratings{
grid-column:2;
justify-content:start;
}
.gr-stores{
grid-column:3;
grid-row:1 / span 2;
}
.gr-store{
min-inline-size:82px;
block-size:34px;
font-size:var(--fz3);
}
.gr-store-icon{
width:26px;
height:26px;
}
}
@media(max-width:480px){
.gr-summary{
grid-template-columns:1fr;
}
.gr-item{
grid-template-columns:62px minmax(0,1fr) auto;
}
.gr-store{
min-inline-size:78px;
block-size:32px;
font-size:var(--fz1);
}
.gr-store-icon{
width:24px;
height:24px;
}
}