header .logo {
    width: 100%;
    height: auto;
    max-width: 150px;
}

@media (max-width: 768px) {
    #rooms-container {
        border-radius: 1rem;
        overflow: visible;
        background: transparent;
        border: none;
    }
    
    #rooms-container .overflow-x-auto {
        overflow: visible;
    }
    
    #rooms-container table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        background: transparent;
    }
    
    #rooms-container thead {
        display: none;
    }
    
    #rooms-container tbody {
        display: block;
    }
    
    #rooms-container .room-row {
        display: block;
        margin-bottom: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        padding: 1.25rem;
        transition: all 0.2s;
        backdrop-filter: blur(10px);
    }
    
    #rooms-container .room-row:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(234, 179, 8, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(234, 179, 8, 0.15);
    }
    
    #rooms-container .room-row td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.75rem 0;
        border: none;
        text-align: left !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    #rooms-container .room-row td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    #rooms-container .room-row td:first-child {
        padding-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 0.5rem;
        padding-bottom: 1rem;
    }
    
    #rooms-container .room-row td::before {
        content: attr(data-label);
        font-weight: 600;
        color: rgb(234, 179, 8);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-right: 1rem;
        flex-shrink: 0;
        min-width: 90px;
    }
    
    #rooms-container .room-row td > * {
        flex: 1;
        text-align: right;
    }
    
    #rooms-container .room-row td > div {
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    #rooms-container .room-row td:first-child > * {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    
    #rooms-container .room-row td:first-child > div {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    
    #rooms-container .room-row td:first-child > div > * {
        text-align: left !important;
    }
    
    #rooms-container .room-row td:first-child .text-xs,
    #rooms-container .room-row td:first-child .font-semibold {
        text-align: left !important;
        width: 100%;
    }
    
    #rooms-container .room-row td[data-label*="Oyun"] > div,
    #rooms-container .room-row td[data-label*="Game"] > div,
    #rooms-container .room-row td[data-label*="Rank"] > div {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #rooms-container .room-row td[data-label*="Oyun"] span,
    #rooms-container .room-row td[data-label*="Game"] span {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #rooms-container .room-row td:first-child {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start !important;
    }
    
    #rooms-container .room-row td:first-child::before {
        margin-bottom: 0.75rem;
        margin-right: 0;
        font-size: 0.875rem;
    }
    
    #rooms-container .room-row td:first-child > * {
        text-align: left !important;
        width: 100%;
        justify-content: flex-start !important;
    }
    
    #rooms-container .room-row td:first-child > div {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    
    #rooms-container .room-row td[data-label*="Rank"]:not(:first-child) > div,
    #rooms-container .room-row td[data-label*="Oyun"]:not(:first-child) > div,
    #rooms-container .room-row td[data-label*="Game"]:not(:first-child) > div {
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        visibility: visible !important;
    }
    
    #rooms-container .room-row td[data-label*="Rank"]:not(:first-child),
    #rooms-container .room-row td[data-label*="Oyun"]:not(:first-child),
    #rooms-container .room-row td[data-label*="Game"]:not(:first-child) {
        flex-direction: column;
        align-items: center;
        padding: 0.75rem 0;
    }
    
    #rooms-container .room-row td[data-label*="Rank"]:not(:first-child)::before,
    #rooms-container .room-row td[data-label*="Oyun"]:not(:first-child)::before,
    #rooms-container .room-row td[data-label*="Game"]:not(:first-child)::before {
        margin-bottom: 0.5rem;
        margin-right: 0;
        width: 100%;
        text-align: center;
    }
    
    #rooms-container .room-row td[data-label*="Rank"]:not(:first-child) > *,
    #rooms-container .room-row td[data-label*="Oyun"]:not(:first-child) > *,
    #rooms-container .room-row td[data-label*="Game"]:not(:first-child) > * {
        width: 100% !important;
        text-align: center !important;
        flex: none !important;
    }
    
    #rooms-container .room-row td[data-label*="Oyun"] span,
    #rooms-container .room-row td[data-label*="Game"] span,
    #rooms-container .room-row td[data-label*="Rank"] img,
    #rooms-container .room-row td[data-label*="Rank"] span {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    #rooms-container .room-row td:empty {
        display: none;
    }
    
    #rooms-container .room-row td[data-label*="Üye"],
    #rooms-container .room-row td[data-label*="Oluşturan"],
    #rooms-container .room-row td[data-label*="Member"],
    #rooms-container .room-row td[data-label*="Creator"] {
        font-size: 0.875rem;
    }
    
    #rooms-container .room-row td[data-label*="Oyun Kodu"],
    #rooms-container .room-row td[data-label*="Party Code"],
    #rooms-container .room-row td[data-label*="Party Kodu"] {
        justify-content: center !important;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem 0;
    }
    
    #rooms-container .room-row td[data-label*="Oyun Kodu"]::before,
    #rooms-container .room-row td[data-label*="Party Code"]::before,
    #rooms-container .room-row td[data-label*="Party Kodu"]::before {
        display: none !important;
    }
    
    #rooms-container .room-row td[data-label*="Oyun Kodu"] > *,
    #rooms-container .room-row td[data-label*="Party Code"] > *,
    #rooms-container .room-row td[data-label*="Party Kodu"] > * {
        text-align: center !important;
        width: 100%;
        justify-content: center !important;
    }
    
    #rooms-container .room-row td[data-label*="Oyun Kodu"] span,
    #rooms-container .room-row td[data-label*="Party Code"] span,
    #rooms-container .room-row td[data-label*="Party Kodu"] span {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        display: inline-block !important;
        padding: 0.5rem 1rem !important;
    }
    
    #rooms-container .room-row td[data-label*="Oyun Kodu"] .px-3,
    #rooms-container .room-row td[data-label*="Party Code"] .px-3,
    #rooms-container .room-row td[data-label*="Party Kodu"] .px-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        font-size: 1.25rem !important;
    }
    
    #rooms-container .room-row td[data-label*="Party Kodu"] .text-xs {
        font-size: 1.25rem !important;
    }
    
    #rooms-container .room-row td > span,
    #rooms-container .room-row td > div > span {
        display: inline-block;
    }
}