body {
        font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
         "Helvetica Neue", Arial, sans-serif;
    }

    .lobby {
        --radius: 36px;
        --machine-width: 399px;
        --machine-height: 256px;
        margin: 1rem 0;
        position: relative;
    }
    
    .lobby.vertical {
        --machine-width: 263px;
        --machine-height: 468px;
    }
    
    .lobby.square {
        --machine-width: 256px;
        --machine-height: 256px;
    }
    
    .lobby:has(.controls) {
        --controls-width: 48px;
        --controls-height: 112px;
    }
    
    .lobby.vertical:has(.controls) {
        --controls-height: 168px;
    }

    .lobby .header {
        text-transform: uppercase;
    }
    
    .lobby .header .title {
        align-items: flex-end;
        display: flex;
        flex-direction: row;
        gap: 1rem;
        padding-bottom: 1rem;
        padding-left: 3rem;
    }
    
    .lobby.grid .header .title {
        padding-left: 0;
    }
    
    .lobby .header .title > * {
        margin: 0;
    }
    
    .lobby .header .title a {
        font-size: .85rem;
        opacity: .85;
        transition: opacity .2s ease-out;
    }
    
    .lobby .header .title a:hover {
        opacity: 1;
    }
    
    .lobby .filters {
        display: flex;
        gap: 12px;
        align-items: center;
        background: #1f1f1f;
        padding-bottom: 2rem;
        border-radius: 14px;
    }
    
    .lobby .filters .filter {
        position: relative;
    }
    
    .lobby .filters .filter {
        flex: 0 0 auto;
        min-width: 0;
    }
    
    .lobby .filters .filter:first-of-type {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .lobby .filters .filter>input {
        width: auto;
        border: 0;
        border-radius: 1rem;
        background: #2a2a2a;
        padding: 1rem;
        color: #fff;
        outline: 1px solid #474747;
    }
    
    .lobby .filters .filter>input[type="search"] {
        width: 100%;
        padding-left: 3rem;
        /* space for icon */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23aaa'%3E%3Cpath d='M10 2a8 8 0 105.293 14.293l4.707 4.707 1.414-1.414-4.707-4.707A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 12px center;
        background-size: 24px;
    }
    
    .lobby .filters .filter>input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }
    
    .lobby .filters .filter>input[type="search"]::placeholder {
        color: #aaa;
        opacity: 1;
    }
    
    .lobby .filters .filter>input[type="button"] {
        cursor: pointer;
        padding-right: 2.5rem;
        /* space for caret */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
    }
    
    .lobby .filters .filter>input[type="button"]:hover {
        background-color: #353535;
    }
    
    .lobby .filters .filter .pop {
        background-color: #2a2a2a;
        border-radius: 1rem;
        position: absolute;
        flex-direction: column;
        filter: drop-shadow(3px 3px 9px black);
        gap: 6px;
        top: calc(100% + 8px);
        left: 0;
        min-width: 260px;
        max-width: 90vw;
        max-height: 60vh;
        overflow: auto;
        outline: 1px solid #474747;
        padding: 1rem;
        display: none;
        z-index: 100;
    }
    
    /* Flip alignment when needed */
    .lobby .filters .filter.end .pop {
        left: auto;
        right: 0;
    }
    
    .lobby .filters .filter.open .pop {
        display: flex;
    }
    
    .lobby .filters .filter .pop .check {
        align-items: center;
        display: flex;
        gap: 6px;
    }
    
    .lobby .filters .filter .pop .check>input[type="checkbox"] {
        /* accent-color: #ff2e02; */
        accent-color: #e0e0e0;
        appearance: auto;
        cursor: pointer;
        width: 1rem !important;
        height: 1rem !important;
    }
    
    .lobby .filters .filter .pop .check>span {
        margin-top: 2px;
    }

    .lobby .games {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--machine-width);
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        user-select: none;
        scrollbar-width: none;  /* Firefox */
        -ms-overflow-style: none;
    }
    
    .lobby.grid .games {
        grid-auto-flow: row;
        grid-auto-columns: unset;
    
        grid-template-columns: repeat(auto-fill, minmax(var(--machine-width), 1fr));
    
        overflow-x: hidden;
    }
    
    .lobby .games::-webkit-scrollbar {
        display: none;  /* Chrome, Safari, new Edge */
    }
    
    .lobby:has(.controls) .games {
        margin: 0 var(--controls-width);
    }

    .lobby .games .game {
        background-color: transparent;
        background-image: var(--image);
        background-position: center;
        background-size: cover;
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        cursor: pointer;
        height: var(--machine-height);
        overflow: hidden;
        position: relative;
        transition: background-color 0.3s;
    }
    
    .lobby .games .game .overlay {
        align-items: center;
        background-color: #000000c9;
        backdrop-filter: blur(3px);
        display: flex;
        flex-direction: column;
        gap: 3px;
        justify-content: center;
        opacity: 0;
        position: absolute;
        text-align: center;
        top: 0;
        transition: opacity .2s ease-out;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .lobby .games .game .overlay > * {
        opacity: 0;
        transform: translateX(-48px);
        transition: transform .2s ease-out, opacity .2s ease-out;
    }
    
    .lobby .games .game .overlay .play {
        background-image: url('/img/tests/play.gif');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin-bottom: 16px;
        height: 80px;
        width: 80px;
    }
    
    .lobby.square .games .game .overlay .play {
        height: 64px;
        width: 64px;
    }
    
    .lobby .games .game .overlay .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    
    .lobby .games .game .overlay .provider {
        font-weight: bold;
    }
    
    .lobby .games .game:hover .overlay {
        opacity: 1;
    }
    
    .lobby .games .game:hover .overlay > * {
        transform: translateX(0);
        opacity: 1;
    }
    
    .lobby .controls {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: space-between;
        left: 0;
        margin-top: 1rem;
        pointer-events: none;
        position: absolute;
        top: 0;
        user-select: none;
        width: 100%;
    }
    
    .lobby .controls > button {
        appearance: none;
        background: url(/img/lobbies/arrow.svg) no-repeat center;
        background-size: 75%;
        border: 0;
        color: white;
        cursor: pointer;
        font-size: 3rem;
        font-weight: bold;
        height: var(--controls-height);
        opacity: .6;
        outline: 0;
        pointer-events: auto;
        text-shadow: 2px 0 black;
        transition: opacity .2s ease-out, color .2s ease-out;
        width: var(--controls-width);
    }
    
    .lobby .controls > button:hover {
       filter: brightness(0) saturate(100%) invert(59%) sepia(99%) saturate(7499%) hue-rotate(2deg) brightness(104%) contrast(102%);
    }
    
    .lobby .controls > button.forward {
        text-shadow: -2px 0 black;
        transform: scaleX(-1);
    }
    
    @media(max-width: 1920px) {
        .lobby {
            --machine-width: 276px;
            --machine-height: 155px;
        }
        
        .lobby.vertical {
            --machine-width: 181px;
            --machine-height: 322px;
        }
        
        .lobby.square {
            --machine-width: 155px;
            --machine-height: 155px;
        }
        
        .lobby .games .game .overlay .play {
            width: 96px;
            height: 96px;
        }
    }
    
    @media(max-width: 1281px) {
        .lobby {
            --machine-width: 256px;
            --machine-height: 144px;
        }
        
        .lobby.vertical {
            --machine-width: 168px;
            --machine-height: 299px;
        }
        
        .lobby.square {
            --machine-width: 144px;
            --machine-height: 144px;
        }
        
        .lobby .games .game .overlay .play {
            width: 96px;
            height: 96px;
        }
    }
    
    @media(max-width: 1201px) {
        .lobby {
            --machine-width: 242px;
            --machine-height: 136px;
        }
        
        .lobby.vertical {
            --machine-width: 158px;
            --machine-height: 281px;
        }
        
        .lobby.square {
            --machine-width: 136px;
            --machine-height: 136px;
        }
        
        .lobby:has(.controls) {
            --controls-width: 42px;
            --controls-height: 86px;
        }
        
        .lobby.vertical:has(.controls) {
            --controls-height: 148px;
        }
        
        .lobby .games .game .overlay .play {
            width: 56px;
            height: 56px;
            margin-bottom: 3px;
        }
        
        .lobby.square .games .game .overlay .name {
            font-size: .85rem;
        }
        
        .lobby .controls > button {
            font-size: 2.5rem;
        }
    }
    
    @media(max-width: 980px) {
        .lobby:has(.controls) .games {
            margin: 0;
        }
        .lobby:has(.controls) .controls {
            display: none;
        }
        .lobby .header .title {
          padding-left: 0;
        }
    }
    
    @media (max-width: 801px) {
        .lobby {
            --machine-width: 190px;
            --machine-height: 107px;
        }
        
        .lobby.vertical {
            --machine-width: 120px;
            --machine-height: 213px;
        }
        
        .lobby.square {
            --machine-width: 107px;
            --machine-height: 107px;
        }
    }
    
    @media (max-width: 481px) {
        .lobby {
            --machine-width: 220px;
            --machine-height: 124px;
        }
        
        .lobby.vertical {
            --machine-width: 140px;
            --machine-height: 249px;
        }
        
        .lobby.square {
            --machine-width: 124px;
            --machine-height: 124px;
        }
    }