.fg-live{
max-width:var(--pw3);
margin:var(--gap) auto 0;
}
.fg-live-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gd2);
flex-wrap:wrap;
width:100%;
min-height:72px;
padding:14px 18px;
border:0;
border-radius:var(--br1);
appearance:none;
background:var(--bg3);
font:inherit;
text-align:left;
cursor:pointer;
transition:background .15s ease;
}
.fg-live-bar:focus-visible{
outline:var(--bw1) solid var(--cl1);
outline-offset:2px;
}
.fg-live-head{
display:flex;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
}
.fg-live-h{
margin:0;
font-family:var(--ff2);
font-size:var(--fz0);
font-weight:calc(700 + var(--fw-offset));
text-transform:uppercase;
letter-spacing:.5px;
color:var(--tx1);
}
.fg-live-count{
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:calc(800 + var(--fw-offset));
color:var(--cl1);
}
.fg-live-meta{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.fg-live-upd{
font-family:var(--ff1);
font-size:var(--fz2);
color:var(--tx3);
}
.fg-live-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:var(--tx3);
transition:color .15s ease,transform .15s ease;
}
.fg-live-arrow svg{
display:block;
width:18px;
height:18px;
}
.fg-live-bar:hover .fg-live-arrow,.fg-live-bar:focus-visible .fg-live-arrow{
color:var(--cl1);
}
.fg-live-open .fg-live-arrow{
color:var(--cl1);
transform:rotate(180deg);
}
.fg-live-body{
padding-top:var(--gd2);
}
.fg-live-tabs{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--gd3);
margin-bottom:var(--gd2);
}
.fg-tab{
display:inline-flex;
align-items:center;
gap:7px;
padding:6px 15px;
border:var(--bw1) solid var(--bg6);
border-radius:999px;
background:transparent;
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:calc(700 + var(--fw-offset));
color:var(--tx2);
cursor:pointer;
transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.fg-tab:hover{
color:var(--tx1);
border-color:var(--cl1);
}
.fg-tab.active{
background:var(--cl1);
border-color:var(--cl1);
color:#fff;
}
.fg-tab-n{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:20px;
height:20px;
padding:0 6px;
border-radius:999px;
background:var(--bg6);
font-size:var(--fz2);
font-weight:calc(800 + var(--fw-offset));
color:var(--tx2);
}
.fg-tab.active .fg-tab-n{
background:rgba(0,0,0,.2);
color:#fff;
}
.fg-panel[hidden]{
display:none;
}
.fg-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
gap:var(--gd2);
}
.fg-card{
display:flex;
flex-direction:column;
border:var(--bw1) solid transparent;
border-radius:var(--br1);
background:var(--bg3);
overflow:hidden;
text-decoration:none;
transition:border-color .15s ease,box-shadow .15s ease;
}
.fg-card:hover{
border-color:var(--cl1);
box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.fg-card.fg-visited{
border-color:rgba(19,181,138,.55);
opacity:.62;
}
.fg-card.fg-visited:hover{
border-color:rgba(19,181,138,.9);
}
.fg-card.fg-visited .fg-card-shot img{
filter:saturate(.7) brightness(.82);
}
.fg-card-shot{
position:relative;
display:block;
aspect-ratio:16 / 9;
background:var(--bg5);
overflow:hidden;
}
.fg-card-shot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.fg-card-noimg{
display:block;
width:100%;
height:100%;
background:linear-gradient(135deg,var(--bg5),var(--bg6));
}
.fg-tag{
position:absolute;
top:8px;
left:8px;
padding:3px 8px;
border-radius:var(--br1);
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:calc(800 + var(--fw-offset));
text-transform:uppercase;
letter-spacing:.4px;
color:#fff;
background:var(--cl1);
}
.fg-tag-subscriber_claim{
background:#2b7fff;
}
.fg-tag-free_play_days{
background:#13b58a;
}
.fg-tag-prime_claim{
background:#9146ff;
}
.fg-card-info{
display:flex;
flex:1;
flex-direction:column;
gap:4px;
padding:10px 12px 12px;
}
.fg-card-store{
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:calc(700 + var(--fw-offset));
text-transform:uppercase;
letter-spacing:.4px;
color:var(--cl1);
}
.fg-card-name{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:calc(700 + var(--fw-offset));
line-height:1.2;
color:var(--tx1);
}
.fg-card-foot{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
margin-top:auto;
padding-top:6px;
}
.fg-price{
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:calc(800 + var(--fw-offset));
color:var(--cl1);
}
.fg-price s{
margin-left:3px;
font-weight:calc(600 + var(--fw-offset));
color:var(--tx3);
}
.fg-added{
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:calc(700 + var(--fw-offset));
white-space:nowrap;
color:var(--tx3);
}
.fg-added-new{
font-weight:calc(800 + var(--fw-offset));
color:#13b58a;
}
.fg-end{
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:calc(700 + var(--fw-offset));
white-space:nowrap;
color:var(--tx2);
}
.fg-empty{
padding:var(--gap) var(--gd2);
border-radius:var(--br1);
background:var(--bg3);
font-family:var(--ff1);
font-size:var(--fz2);
text-align:center;
color:var(--tx3);
}