.steam-wrap{
width:var(--pw3);
max-width:100%;
margin:0 auto;
}
.steam-wrap .title,
.steam-wrap .page-desc,
.steam-profile,
.steam-controls{
width:var(--pw3);
max-width:100%;
margin-left:auto;
margin-right:auto;
}
.steam-status{
text-align:center;
color:var(--tx2);
font-size:var(--fz3);
min-height:1.4em;
margin-bottom:var(--gap);
}
.steam-status.error{
color:var(--rd1);
}
.steam-status.error a{
color:var(--lnk);
}
.steam-status.loading::before{
content:"";
display:inline-block;
width:16px;
height:16px;
margin-right:var(--gd4);
border:2px solid var(--bc2);
border-top-color:var(--icf);
border-radius:50%;
vertical-align:-3px;
animation:steam-spin .7s linear infinite;
}
@keyframes steam-spin{
to{transform:rotate(360deg);}
}
.steam-profile{
display:flex;
align-items:center;
gap:var(--gap);
padding:var(--gd3) 0;
margin-bottom:var(--gap);
}
.steam-avatar{
flex:0 0 auto;
width:72px;
height:72px;
border-radius:var(--br1);
}
.steam-profile-meta{
flex:1 1 auto;
min-width:0;
}
.steam-profile-name{
display:inline-block;
color:var(--tx1);
font-family:var(--ff2);
font-weight:700;
font-size:1.5rem;
text-decoration:none;
}
.steam-profile-name:hover{
color:var(--icf);
}
.steam-profile-sub{
color:var(--tx3);
font-size:var(--fz4);
margin-top:3px;
word-break:break-all;
}
.steam-profile-stats{
flex:0 0 auto;
display:flex;
gap:var(--gap);
}
.steam-stat{
text-align:center;
}
.steam-stat-n{
display:block;
color:var(--tx1);
font-family:var(--ff2);
font-weight:700;
font-size:var(--fz0);
line-height:1.1;
}
.steam-stat-l{
display:block;
color:var(--tx3);
font-size:var(--fz5);
text-transform:uppercase;
letter-spacing:.04em;
}
.steam-controls{
display:flex;
align-items:center;
gap:var(--gd2);
margin-bottom:var(--gd2);
flex-wrap:wrap;
}
.steam-filter-wrap{
flex:1 1 240px;
}
.steam-filter{
width:100%;
border:var(--bw1) solid var(--bc2);
border-radius:var(--br1);
background:var(--bg3);
color:var(--tx1);
font-family:var(--ff1);
font-size:var(--fz4);
padding:var(--gd3) var(--gd2);
outline:0;
}
.steam-filter:focus{
border-color:var(--icf);
}
.steam-controls-right{
flex:1 1 auto;
display:flex;
align-items:center;
justify-content:flex-end;
gap:var(--gd3);
flex-wrap:wrap;
}
.steam-shown{
color:var(--tx3);
font-size:var(--fz5);
white-space:nowrap;
}
.steam-sel{
border:var(--bw1) solid var(--bc2);
border-radius:var(--br1);
background:var(--bg3);
color:var(--tx1);
font-family:var(--ff1);
font-size:var(--fz4);
padding:var(--gd3) var(--gd3);
cursor:pointer;
outline:0;
}
.steam-sel:focus{
border-color:var(--icf);
}
.steam-game-review{
flex:0 0 auto;
min-width:52px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:2px 8px;
border-radius:var(--br1);
font-family:var(--ff1);
font-size:var(--fz5);
font-weight:700;
line-height:1.5;
white-space:nowrap;
}
.steam-game-review:empty{
min-width:0;
padding:0;
}
.steam-game-review.pos{
color:var(--ctx);
background:color-mix(in srgb,var(--ctx) 14%,transparent);
}
.steam-game-review.mix{
color:#d9922b;
background:color-mix(in srgb,#d9922b 14%,transparent);
}
.steam-game-review.neg{
color:var(--rd1);
background:color-mix(in srgb,var(--rd1) 14%,transparent);
}
.steam-empty{
text-align:center;
color:var(--tx3);
padding:var(--gap);
}
.steam-result [hidden]{
display:none;
}
.steam-hub-body{
position:relative;
}
.steam-hub-head,
.steam-hub-row{
display:grid;
grid-template-columns:112px minmax(0,1fr) 84px 56px 60px 78px 98px 110px;
align-items:center;
gap:var(--gd2);
}
.steam-hub-head{
padding:var(--gd4) var(--gd2);
margin-bottom:var(--gd5);
background:color-mix(in srgb,var(--bg3) 70%,transparent);
border-radius:var(--br1);
color:var(--tx3);
font-size:var(--fz5);
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
}
.steam-hub-head span:nth-child(4),
.steam-hub-head span:nth-child(5),
.steam-hub-head span:nth-child(6),
.steam-hub-head span:nth-child(7),
.steam-hub-head span:nth-child(8){
text-align:right;
}
.steam-hub-head span[data-sort]{
cursor:pointer;
user-select:none;
transition:color .12s;
}
.steam-hub-head span[data-sort]:hover{
color:var(--tx1);
}
.steam-hub-head span.on{
color:var(--icf);
}
.steam-hub-head span.on.asc::after{
content:"\25B2";
font-size:var(--fz5);
margin-left:3px;
}
.steam-hub-head span.on.desc::after{
content:"\25BC";
font-size:var(--fz5);
margin-left:3px;
}
.steam-hub-row{
position:absolute;
top:0;
left:0;
right:0;
height:calc(var(--steam-row-h) - 2px);
padding:var(--gd5) var(--gd2);
border-radius:var(--br1);
}
.steam-hub-row:hover{
background:color-mix(in srgb,var(--bg3) 60%,transparent);
}
.steam-hub-row.steam-dl{
background:color-mix(in srgb,var(--tx3) 6%,transparent);
box-shadow:inset 2px 0 0 color-mix(in srgb,var(--tx3) 45%,transparent);
}
.steam-hub-row.steam-dl:hover{
background:color-mix(in srgb,var(--bg3) 60%,transparent);
}
.steam-hub-row.steam-dl .steam-hub-link{
color:var(--tx2);
}
.steam-hub-thumb{
width:113px;
height:43px;
margin-left:calc(var(--gd5) - var(--gd2));
border-radius:var(--br1);
overflow:hidden;
background:var(--bg5);
}
.steam-hub-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.steam-hub-name{
min-width:0;
display:flex;
align-items:center;
gap:var(--gd4);
overflow:hidden;
}
.steam-hub-link{
flex:0 1 auto;
min-width:0;
color:var(--tx1);
font-weight:700;
font-size:var(--fz2);
text-decoration:none;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
line-height:1.25;
}
a.steam-hub-link[href]:hover{
color:var(--icf);
text-decoration:underline;
}
.steam-chip{
flex:0 0 auto;
display:inline-block;
padding:1px 7px;
border-radius:var(--br1);
font-family:var(--ff1);
font-size:var(--fz5);
font-weight:700;
letter-spacing:.02em;
line-height:1.5;
white-space:nowrap;
}
.steam-chip-ea{
color:#3aa7c4;
background:color-mix(in srgb,#3aa7c4 16%,transparent);
}
.steam-chip-dl{
color:var(--tx3);
background:color-mix(in srgb,var(--tx3) 16%,transparent);
}
.steam-chip-rt{
color:#9b5de5;
background:color-mix(in srgb,#9b5de5 16%,transparent);
}
.steam-hub-mp{
color:var(--tx2);
font-size:var(--fz2);
font-weight:700;
letter-spacing:.02em;
white-space:nowrap;
}
.steam-hub-mp.steam-mp-sp{color:#4a9edb;}
.steam-hub-mp.steam-mp-mp{color:#d9922b;}
.steam-hub-mp.steam-mp-spmp{color:#2f9e44;}
.steam-hub-year{
text-align:right;
color:var(--tx3);
font-size:var(--fz2);
font-weight:700;
white-space:nowrap;
}
.steam-hub-score{
justify-self:end;
}
.steam-hub-score .steam-game-review{
min-width:0;
padding:0;
background:transparent;
font-size:var(--fz2);
font-weight:800;
font-family:var(--ff2);
}
.steam-hub-score .steam-game-review.pos{color:#2f9e44;}
.steam-hub-score .steam-game-review.mix{color:#c08a00;}
.steam-hub-score .steam-game-review.neg{color:#d94848;}
.steam-hub-reviews{
text-align:right;
color:var(--tx2);
font-size:var(--fz2);
font-weight:700;
white-space:nowrap;
}
.steam-hub-time{
text-align:right;
color:var(--tx2);
font-size:var(--fz2);
white-space:nowrap;
}
.steam-hub-last{
text-align:right;
color:var(--tx3);
font-size:var(--fz2);
white-space:nowrap;
}
@media(max-width:700px){
.steam-profile{
flex-wrap:wrap;
gap:var(--gd2);
}
.steam-profile-meta{
flex:1 1 60%;
}
.steam-profile-stats{
flex:1 1 100%;
justify-content:space-around;
border-top:var(--bw1) solid var(--bc3);
padding-top:var(--gd2);
}
.steam-controls-right{
justify-content:flex-start;
}
.steam-hub-head,
.steam-hub-row{
grid-template-columns:88px minmax(0,1fr) 62px 92px;
}
.steam-hub-thumb{
width:88px;
height:34px;
}
.steam-hub-mp,
.steam-hub-year,
.steam-hub-reviews,
.steam-hub-last,
.steam-hub-head span:nth-child(3),
.steam-hub-head span:nth-child(4),
.steam-hub-head span:nth-child(6),
.steam-hub-head span:nth-child(8){
display:none;
}
.steam-hub-head span:nth-child(5),
.steam-hub-head span:nth-child(7){
text-align:right;
}
}