.home-tools {
    text-align: center;
}

.home-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.home-links a {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    background: #713c88;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.home-links a:hover,
.home-links a:focus-visible {
    background: #532d64;
}

#level-select {
    padding: 8px;
    font-size: 16px;
}

#level-result {
    margin-top: 10px;
    font-weight: bold;
}

.home-note {
    font-size: 14px;
    color: #555;
}

.collections {
    padding: clamp(24px, 4vw, 44px);
    border-radius: 20px;
    background: #fff;
    color: #32183f;
    text-align: center;
}

.collections .gallery-eyebrow {
    color: #76418b;
}

.collections h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.collections__directory {
    display: inline-block;
    border-radius: 10px;
    padding: 12px 20px;
    background: #713c88;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
.collections__directory:hover,
.collections__directory:focus-visible {
    background: #532d64;
}

.collections > p:not(.gallery-eyebrow) {
    color: #5e5262;
    line-height: 1.5;
}

.collections__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 24px auto;
}

.collection-card {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 290px;
    padding: 22px;
    border: 1px solid #e3d3eb;
    border-radius: 16px;
    background: #faf6fc;
    color: #32183f;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.collection-card:hover,
.collection-card:focus-visible {
    border-color: #9c53bb;
    box-shadow: 0 6px 18px rgba(83, 45, 100, .15);
}

.collection-card:focus-visible {
    outline: 3px solid #a2549a;
    outline-offset: 3px;
}

.collection-card__name {
    font-size: 1.15rem;
    font-weight: 700;
}

.collection-card__action {
    color: #633178;
    font-weight: 700;
}

.collections .mini-monitor-device {
    display: block;
    margin: 0;
}

.collections .mini-monitor-bezel {
    display: block;
    width: 168px;
    padding: 10px 12px 14px;
}

.collections .mini-monitor-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.collections .mini-monitor-screen {
    width: 148px;
    height: 54px;
}

.collection-sprites {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.collections__note {
    max-width: 720px;
    margin: 0 auto;
}

.raid-loot-list {
    max-width: 600px;
    margin: 0 auto 20px;
    text-align: left;
}

#raid-info .loot-table {
    max-width: 600px;
    margin: 0 auto;
    overflow-x: auto;
}

.raid-warning {
    color: #6a3595;
}

.guild-profile {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid #a87bb9;
    border-radius: 22px;
    background: linear-gradient(130deg, #32183f 0%, #59316e 58%, #80538a 100%);
    color: #fff;
    box-shadow: 0 14px 35px rgba(62, 27, 77, .2);
}

.guild-profile__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.guild-profile__eyebrow,
.gallery-eyebrow {
    margin: 0 0 8px;
    color: #f6cfea;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.guild-profile h1 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1;
}

.guild-profile__intro {
    margin: 12px 0 0;
    color: #f1e2f5;
}

.guild-profile__logo {
    width: clamp(85px, 13vw, 150px);
    height: auto;
    flex-shrink: 0;
}

.guild-profile__name {
    margin: 20px 0 0;
    color: #f6cfea;
    font-size: 1rem;
    letter-spacing: .08em;
}

.guild-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 10px;
    margin: 18px 0 22px;
}

.guild-stats div {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
}

.guild-stats dt {
    color: #f0dcf3;
    font-size: .8rem;
    font-weight: 700;
}

.guild-stats dd {
    margin: 7px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

#guild-description {
    max-width: 900px;
    margin: 0;
    color: #f9f2fa;
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-line;
}

.guild-recruitment {
    margin-top: 20px;
    color: #f9f2fa;
}

.guild-recruitment h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.guild-recruitment p {
    margin: 5px 0;
    font-size: .9rem;
    line-height: 1.5;
}

.guild-skills {
    padding: clamp(24px, 4vw, 44px);
    border-radius: 20px;
    background: #fff;
    color: #32183f;
}

.guild-skills .gallery-eyebrow {
    color: #76418b;
}

.guild-skills h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.guild-skills > p:not(.gallery-eyebrow) {
    color: #5e5262;
}

.guild-skills__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
}

.guild-skill {
    padding: 18px;
    border: 1px solid #e3d3eb;
    border-radius: 12px;
    background: #faf6fc;
}

.guild-skill h4 {
    margin: 0;
    font-size: 1rem;
}

.guild-skill p {
    margin: 8px 0;
    font-size: .85rem;
}

.guild-skill .guild-skill__bonus {
    color: #713c88;
    font-size: 1.6rem;
    font-weight: 700;
}

.guild-skill progress {
    width: 100%;
    height: 8px;
    accent-color: #713c88;
}

.guild-skill .guild-skill__next {
    color: #5e5262;
    line-height: 1.4;
}

.guild-profile__status,
.guild-profile__updated {
    color: #f1e2f5;
    font-size: .85rem;
    line-height: 1.5;
}

.guild-profile__link {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 18px;
    border-radius: 8px;
    background: #fff;
    color: #532d64;
    font-weight: 700;
    text-decoration: none;
}

.guild-profile__link:hover,
.guild-profile__link:focus-visible {
    background: #f6cfea;
}

#gallery {
    padding: clamp(24px, 4vw, 44px);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

#gallery .gallery-eyebrow {
    color: #76418b;
}

#gallery h2 {
    margin: 0;
    color: #32183f;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

#gallery > p:not(.gallery-eyebrow) {
    max-width: 720px;
    margin: 12px auto 24px;
    color: #5e5262;
    line-height: 1.5;
}

#gallery .gallery-container {
    max-width: 1000px;
    border-radius: 16px;
    background: #261b30;
    box-shadow: 0 10px 24px rgba(50, 24, 63, .18);
}

#gallery .gallery {
    height: clamp(240px, 58vw, 620px);
}

#gallery .gallery img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0;
}

#gallery button.prev,
#gallery button.next {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    background: rgba(50, 24, 63, .85);
    font-size: 18px;
}

#gallery button.prev { left: 12px; }
#gallery button.next { right: 12px; }

#gallery button.prev:hover,
#gallery button.next:hover {
    background: #713c88;
}

#gallery button:focus-visible,
#gallery a:focus-visible,
#gallery input:focus-visible,
.guild-profile__link:focus-visible {
    outline: 3px solid #f4a8d7;
    outline-offset: 3px;
}

.gallery-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 18px;
    max-width: 1000px;
    margin: 18px auto 0;
}

#gallery .counter {
    margin: 0;
    color: #532d64;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

.gallery-slider-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

#gallery-slider {
    flex: 1 1 200px;
    max-width: 400px;
    accent-color: #713c88;
}

#gallery-original {
    color: #633178;
    font-weight: 700;
}

@media (max-width: 768px) {
    .floating-events {
        position: relative;
        inset: auto;
        max-width: none;
        margin: 12px;
        animation: none;
        opacity: 1;
        cursor: auto;
    }

    .floating-events:hover {
        animation: none;
    }
}

@media (max-width: 480px) {
    .guild-profile, .guild-skills, .collections, #gallery {
        margin: 12px;
    }

    .guild-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-controls {
        justify-content: space-between;
    }

    #gallery-slider {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }
}