#channels {
    padding: 40px 0;
}

.channels-grid {
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.channel-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 220px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #333;
    background: #1a1a2c;
}

.channel-block.center {
    flex: 1.3;
    border-color: #5a4aff;
    box-shadow: 0 0 0 1px rgba(120, 80, 255, 0.25);
}

.channel-block h3 {
    margin-bottom: 12px;
    font-size: 1.1rem;
    color: #a8a8d8;
}

.vertical-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    color: #fff;
    gap: 10px;
}

.btn-icon {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 4px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.btn-label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-social i {
    margin-right: 12px;
    font-size: 20px;
}

.btn-youtube {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
}

.btn-youtube:hover {
    background: linear-gradient(135deg, #CC0000 0%, #AA0000 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,0,0,0.4);
}

.btn-youtube .btn-icon {
    background-image: url("../img/socials/media/youtube.png");
}

.btn-twitch {
    background: linear-gradient(135deg, #9146FF 0%, #6433B8 100%);
}

.btn-twitch:hover {
    background: linear-gradient(135deg, #6433B8 0%, #4A2492 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(145,70,255,0.45);
}

.btn-twitch .btn-icon {
    background-image: url("../img/socials/media/twitch.png");
}

.btn-tiktok {
    background: linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%);
    color: #000;
}

.btn-tiktok:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.btn-tiktok .btn-icon {
    background-image: url("../img/socials/media/tiktok.png");
}

.btn-discord {
    background: linear-gradient(135deg, #5865F2 0%, #404EED 100%);
}

.btn-discord:hover {
    background: linear-gradient(135deg, #404EED 0%, #2B3CE1 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64,78,237,0.45);
}

.btn-discord .btn-icon {
    background-image: url("../img/socials/media/discord.png");
}

.btn-x {
    background: linear-gradient(135deg, #000000 0%, #14171A 100%);
}

.btn-x:hover {
    background: linear-gradient(135deg, #14171A 0%, #000000 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.btn-x .btn-icon {
    background-image: url("../img/socials/media/twitter.png");
}

.btn-patreon {
    background: #000000;
}

.btn-patreon:hover {
    background: linear-gradient(135deg, #D52E38 0%, #B0242D 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,66,77,0.45);
}

.btn-patreon .btn-icon {
    background-image: url("../img/socials/reviews/patreon.png");
}

.btn-kofi {
    background: linear-gradient(135deg, #FF424D 0%, #D52E38 100%);
}

.btn-kofi:hover {
    background: linear-gradient(135deg, #D52E38 0%, #B0242D 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,66,77,0.45);
}

.btn-kofi .btn-icon {
    background-image: url("../img/socials/reviews/kofi.png");
}

.btn-ign {
    background: #BF1313;
}

.btn-ign:hover {
    background: linear-gradient(135deg, #B51822 0%, #000000 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(213,29,41,0.45);
}

.btn-ign .btn-icon {
    background-image: url("../img/socials/reviews/ign.png");
}

.btn-backloggd {
    background: #14151A;
}

.btn-backloggd:hover {
    background: linear-gradient(135deg, #151820 0%, #10131A 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

.btn-backloggd .btn-icon {
    background-image: url("../img/socials/reviews/backloggd.png");
}

.btn-hltb {
    background: #000000;
}

.btn-hltb:hover {
    background: linear-gradient(135deg, #151820 0%, #10131A 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

.btn-hltb .btn-icon {
    background-image: url("../img/socials/reviews/howlongtobeat.png");
}

.btn-steam {
    background: #000000;
}

.btn-steam:hover {
    background: linear-gradient(135deg, #0099D6 0%, #006386 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,175,244,0.45);
}

.btn-steam .btn-icon {
    background-image: url("../img/socials/steam/steam.png");
}

.btn-steamdb {
    background: #000000;
}

.btn-steamdb:hover {
    background: linear-gradient(135deg, #0099D6 0%, #006386 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,175,244,0.45);
}

.btn-steamdb .btn-icon {
    background-image: url("../img/socials/steam/steamdb.png");
}

.btn-steamladder {
    background: #1A1A1A;
}

.btn-steamladder:hover {
    background: linear-gradient(135deg, #0099D6 0%, #006386 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,175,244,0.45);
}

.btn-steamladder .btn-icon {
    background-image: url("../img/socials/steam/steamladder.png");
}

.btn-steamsets {
    background: #060115;
}

.btn-steamsets:hover {
    background: linear-gradient(135deg, #00000a 0%, #7850ce 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

.btn-steamsets .btn-icon {
    background-image: url("../img/socials/steam/steamsets.png");
}

.btn-completionist {
    background: #2E2E2E;
}

.btn-completionist:hover {
    background: linear-gradient(135deg, #27AE60 0%, #1E874B 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39,174,96,0.45);
}

.btn-completionist .btn-icon {
    background-image: url("../img/socials/steam/completionist.png");
}
