.gfi-sheet { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: flex-end; justify-content: center; }
.gfi-backdrop { position: absolute; inset: 0; background: rgba(6, 4, 14, 0.62); }
.gfi-panel {
    position: relative;
    width: 100%; max-width: 480px; max-height: 78vh;
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    background: #17121f;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: inherit;
}
.gfi-title { font-size: 16px; font-weight: 800; }
.gfi-sub { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.gfi-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 4px -4px; padding: 0 4px; }
.gfi-row {
    font: inherit; color: #fff; text-align: left;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 16px;
    background: transparent; border: 0; cursor: pointer;
}
.gfi-row:active { background: rgba(255, 255, 255, 0.06); }
.gfi-av {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #E91E63, #7C4DFF) center / cover no-repeat;
}
.gfi-av--txt { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.gfi-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfi-online { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.gfi-empty { font-size: 13px; color: rgba(255, 255, 255, 0.6); padding: 18px 4px; }
.gfi-cancel { align-self: stretch; }

.gfi-status {
    position: fixed; left: 14px; right: 14px; margin: 0 auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 4050;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: fit-content; max-width: 452px;
    padding: 10px 12px 10px 16px; border-radius: 999px;
    background: rgba(23, 18, 31, 0.94); border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.86); font-size: 12.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.gfi-status-t { min-width: 0; flex: 1 1 auto; }
.gfi-status-b {
    font: inherit; font-size: 12px; font-weight: 700; flex: 0 0 auto;
    color: #fff; background: transparent; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 5px 11px;
}


.gfi-pop {
    position: fixed; inset: 0; z-index: 4300;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.gfi-pop-scrim { position: absolute; inset: 0; background: rgba(6, 4, 14, 0.7); animation: gfi-fade .2s ease; }
.gfi-pop-card {
    position: relative;
    width: 100%; max-width: 360px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 30px 22px 20px;
    border-radius: 30px;
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--gfi-acc) 30%, transparent), transparent 70%),
        #17121f;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--gfi-acc) 18%, transparent);
    color: #fff;
    animation: gfi-pop .3s cubic-bezier(.34, 1.4, .64, 1);
}
.gfi-pop-x {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); cursor: pointer;
}
[dir="rtl"] .gfi-pop-x { right: auto; left: 12px; }
.gfi-pop-art { position: relative; width: 84px; height: 84px; margin-bottom: 10px; }
.gfi-pop-av {
    display: flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gfi-acc), var(--gfi-acc2)) center / cover no-repeat;
    box-shadow: 0 0 0 3px #17121f, 0 0 0 5px color-mix(in srgb, var(--gfi-acc) 70%, transparent);
    font-size: 32px; font-weight: 800;
}
.gfi-pop-game {
    position: absolute; right: -8px; bottom: -6px;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    background: linear-gradient(135deg, var(--gfi-acc), var(--gfi-acc2));
    border: 3px solid #17121f;
}
.gfi-pop-t { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; max-width: 290px; }
.gfi-pop-ask { font-size: 26px; font-weight: 850; letter-spacing: -0.02em; margin-top: 2px; }
.gfi-pop-left {
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--gfi-acc) 55%, #fff);
    padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.06);
}
.gfi-pop-gone { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 6px 0 2px; }
.gfi-pop-a { display: flex; gap: 10px; align-self: stretch; margin-top: 14px; }
.gfi-pop-a .gh-btn { flex: 1 1 0; }
.gfi-pop-a .gh-btn[disabled] { opacity: .55; pointer-events: none; }
@keyframes gfi-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gfi-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gfi-pop-card, .gfi-pop-scrim { animation: none; } }