:root {
    --community-panel: #1a283e;
    --community-panel-deep: #111e31;
    --community-panel-soft: #213655;
    --community-border: rgba(159, 179, 201, 0.15);
    --community-text: #f7fbff;
    --community-muted: #91a8bf;
    --community-blue: #34adf1;
    --community-blue-light: #79d9ff;
    --community-green: #60df35;
    --community-purple: #a987ff;
    --community-gold: #ffc93d;
    --community-red: #ff7768;
}

.community-page,
.community-page * {
    box-sizing: border-box;
}

.community-page {
    overflow: hidden;
    padding: 0 0 4.5rem;
    color: var(--community-text);
    font-family: Poppins, sans-serif;
}

.community-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
    gap: 1.25rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3.15rem);
    border: 1px solid rgba(52, 173, 241, 0.22);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 8% 6%, rgba(52, 173, 241, 0.2), transparent 32%),
        radial-gradient(circle at 94% 100%, rgba(96, 223, 53, 0.1), transparent 30%),
        linear-gradient(135deg, #1e3454 0%, #17273e 52%, #121f33 100%);
    box-shadow: 0 30px 80px rgba(3, 10, 22, 0.28);
}

.community-hero::before,
.community-hero::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.community-hero::before {
    top: -210px;
    right: -120px;
    width: 460px;
    height: 460px;
    box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.012), 0 0 0 110px rgba(255, 255, 255, 0.008);
}

.community-hero::after {
    bottom: -210px;
    left: 24%;
    width: 340px;
    height: 340px;
}

.community-hero-copy,
.vote-spotlight,
.rules-overview {
    position: relative;
    z-index: 1;
}

.community-hero-copy {
    display: flex;
    max-width: 750px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.community-eyebrow,
.community-kicker {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--community-blue-light);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.community-eyebrow {
    margin-bottom: 1rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(121, 217, 255, 0.18);
    border-radius: 999px;
    background: rgba(8, 18, 32, 0.3);
}

.community-hero h1 {
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2.45rem, 5.6vw, 4.45rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.99;
}

.community-hero h1 span {
    color: var(--community-blue-light);
}

.community-hero-copy > p {
    max-width: 680px;
    margin: 0;
    color: #b8c9da;
    font-size: clamp(0.92rem, 1.6vw, 1.08rem);
    line-height: 1.75;
}

.community-button {
    display: inline-flex;
    min-height: 46px;
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.72rem;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.community-button:hover,
.community-button:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
}

.community-button-primary {
    background: linear-gradient(135deg, #34adf1, #268cd0);
    color: #071526;
    box-shadow: 0 14px 30px rgba(38, 140, 208, 0.2);
}

.community-button-primary:hover,
.community-button-primary:focus-visible {
    color: #071526;
    box-shadow: 0 18px 36px rgba(38, 140, 208, 0.3);
}

.community-button-secondary {
    border-color: rgba(159, 179, 201, 0.22);
    background: rgba(8, 18, 32, 0.38);
    color: #dce8f5;
}

.community-button-secondary:hover,
.community-button-secondary:focus-visible {
    border-color: rgba(121, 217, 255, 0.45);
    color: #fff;
}

.community-section {
    padding: 3.75rem 0 1.15rem;
}

.community-section-heading {
    display: flex;
    gap: 2rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.community-section-heading h2,
.vote-guide-card h2,
.rules-index-heading h2,
.verification-copy h2 {
    margin: 0.3rem 0 0;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.community-section-heading > p {
    max-width: 440px;
    margin: 0;
    color: #8199b1;
    font-size: 0.78rem;
    line-height: 1.65;
    text-align: right;
}

/* Vote page */

.vote-hero-facts {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.45rem;
}

.vote-hero-facts > span {
    display: flex;
    min-width: 104px;
    flex-direction: column;
    padding: 0.68rem 0.78rem;
    border: 1px solid rgba(159, 179, 201, 0.12);
    border-radius: 0.7rem;
    background: rgba(8, 18, 32, 0.3);
}

.vote-hero-facts strong {
    color: #fff;
    font-size: 0.84rem;
}

.vote-hero-facts small {
    margin-top: 0.08rem;
    color: #7891aa;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
}

.vote-spotlight,
.rules-overview {
    align-self: stretch;
    padding: 1.35rem;
    border: 1px solid rgba(159, 179, 201, 0.16);
    border-radius: 1rem;
    background: rgba(9, 20, 35, 0.72);
    box-shadow: 0 20px 50px rgba(2, 8, 18, 0.24);
    backdrop-filter: blur(10px);
}

.vote-spotlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.spotlight-status {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 1.2rem;
    color: #8ef16d;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.spotlight-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid rgba(255, 201, 61, 0.2);
    border-radius: 0.85rem;
    background: rgba(255, 201, 61, 0.1);
    color: #ffd86e;
    font-size: 1.1rem;
}

.vote-spotlight h2,
.rules-overview h2 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: 1.45rem;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.vote-spotlight > p,
.rules-overview > p {
    margin: 0;
    color: #829bb4;
    font-size: 0.74rem;
    line-height: 1.65;
}

.server-address-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(52, 173, 241, 0.2);
    border-radius: 0.7rem;
    background: rgba(52, 173, 241, 0.07);
}

.server-address-row span {
    color: #7890a9;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.server-address-row strong {
    color: var(--community-blue-light);
    font-size: 0.72rem;
}

.vote-site-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.vote-site-card {
    --vote-color: var(--community-green);
    --vote-glow: rgba(96, 223, 53, 0.12);
    position: relative;
    display: grid;
    min-height: 210px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 0.85rem 1rem;
    overflow: hidden;
    padding: 1.3rem;
    border: 1px solid var(--community-border);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 100% 0%, var(--vote-glow), transparent 42%),
        var(--community-panel);
    color: #fff;
    text-decoration: none;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.vote-site-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--vote-color);
    content: "";
}

.vote-site-card:hover,
.vote-site-card:focus-visible {
    border-color: color-mix(in srgb, var(--vote-color) 38%, transparent);
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 22px 45px rgba(3, 10, 22, 0.25);
}

.vote-site-blue {
    --vote-color: var(--community-blue);
    --vote-glow: rgba(52, 173, 241, 0.14);
}

.vote-site-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: rgba(255, 255, 255, 0.08);
    font-size: 2rem;
    font-weight: 800;
}

.vote-site-icon {
    display: grid;
    width: 48px;
    height: 48px;
    grid-row: 1;
    place-items: center;
    border-radius: 0.78rem;
    background: var(--vote-glow);
    color: var(--vote-color);
    font-size: 1.08rem;
}

.vote-site-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vote-site-copy small {
    color: var(--vote-color);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.vote-site-copy strong {
    margin: 0.2rem 0 0.38rem;
    color: #fff;
    font-size: 1.45rem;
    letter-spacing: -0.035em;
}

.vote-site-copy > span {
    color: #849db6;
    font-size: 0.7rem;
    line-height: 1.55;
}

.vote-site-action {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    align-self: end;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(159, 179, 201, 0.12);
    color: #eaf4ff;
    font-size: 0.72rem;
    font-weight: 800;
}

.vote-site-action i {
    color: var(--vote-color);
}

.vote-guide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0.9rem;
    padding-top: 0.9rem;
}

.vote-guide-card {
    padding: 1.4rem;
    border: 1px solid var(--community-border);
    border-radius: 1rem;
    background: var(--community-panel);
}

.vote-steps {
    display: grid;
    gap: 0;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}

.vote-steps li {
    position: relative;
    display: flex;
    gap: 0.8rem;
    padding: 0 0 1rem;
}

.vote-steps li:last-child {
    padding-bottom: 0;
}

.vote-steps li:not(:last-child)::after {
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 15px;
    width: 1px;
    background: rgba(52, 173, 241, 0.22);
    content: "";
}

.vote-step-number {
    position: relative;
    z-index: 1;
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(52, 173, 241, 0.22);
    border-radius: 0.58rem;
    background: #182f49;
    color: var(--community-blue-light);
    font-size: 0.66rem;
    font-weight: 800;
}

.vote-steps li > span:last-child {
    display: flex;
    flex-direction: column;
}

.vote-steps strong {
    color: #eaf4ff;
    font-size: 0.76rem;
}

.vote-steps small {
    margin-top: 0.18rem;
    color: #7f98b1;
    font-size: 0.66rem;
    line-height: 1.55;
}

.vote-reward-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 201, 61, 0.1), transparent 42%),
        var(--community-panel);
}

.reward-card-top {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.reward-card-icon {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 201, 61, 0.2);
    border-radius: 0.8rem;
    background: rgba(255, 201, 61, 0.1);
    color: #ffd86e;
    font-size: 1.1rem;
}

.vote-reward-card > p {
    margin: 1.15rem 0;
    color: #8ea6bd;
    font-size: 0.75rem;
    line-height: 1.7;
}

.reward-reminder {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid rgba(96, 223, 53, 0.15);
    border-radius: 0.75rem;
    background: rgba(96, 223, 53, 0.055);
}

.reward-reminder > i {
    color: #8ef16d;
}

.reward-reminder > span {
    display: flex;
    flex-direction: column;
}

.reward-reminder strong {
    color: #eaffea;
    font-size: 0.7rem;
}

.reward-reminder small {
    margin-top: 0.15rem;
    color: #7e9a88;
    font-size: 0.61rem;
    line-height: 1.5;
}

.community-info-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    margin-top: 0.9rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(169, 135, 255, 0.17);
    border-radius: 0.9rem;
    background: rgba(169, 135, 255, 0.055);
}

.info-banner-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 0.65rem;
    background: rgba(169, 135, 255, 0.11);
    color: #c1a7ff;
}

.community-info-banner > span:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.community-info-banner strong {
    color: #edf3fa;
    font-size: 0.72rem;
}

.community-info-banner small {
    margin-top: 0.13rem;
    color: #7f97af;
    font-size: 0.62rem;
}

.community-info-banner > a {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: #c9b6ff;
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;
}

.community-info-banner > a:hover,
.community-info-banner > a:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* Rules page */

.rules-hero {
    background:
        radial-gradient(circle at 8% 6%, rgba(52, 173, 241, 0.2), transparent 32%),
        radial-gradient(circle at 96% 100%, rgba(169, 135, 255, 0.12), transparent 32%),
        linear-gradient(135deg, #1e3454 0%, #17273e 52%, #121f33 100%);
}

.rules-hero-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 1.45rem;
}

.rules-overview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.rules-overview-icon {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid rgba(169, 135, 255, 0.2);
    border-radius: 0.85rem;
    background: rgba(169, 135, 255, 0.1);
    color: #c1a7ff;
    font-size: 1.1rem;
}

.rules-overview h2 {
    margin-top: 0.5rem;
}

.rules-overview-stats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
}

.rules-overview-stats > span {
    display: flex;
    flex-direction: column;
    padding: 0.7rem;
    border: 1px solid rgba(159, 179, 201, 0.12);
    border-radius: 0.65rem;
    background: rgba(26, 40, 62, 0.58);
}

.rules-overview-stats strong {
    color: #fff;
    font-size: 1.1rem;
}

.rules-overview-stats small {
    color: #7890a9;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
}

.rules-index {
    padding: 3.75rem 0 0.9rem;
    scroll-margin-top: 1rem;
}

.rules-index-heading {
    display: flex;
    gap: 1rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.rules-expand-all {
    display: inline-flex;
    min-height: 38px;
    gap: 0.45rem;
    align-items: center;
    padding: 0.58rem 0.75rem;
    border: 1px solid rgba(159, 179, 201, 0.16);
    border-radius: 0.62rem;
    background: rgba(26, 40, 62, 0.7);
    color: #afc1d3;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.rules-expand-all:hover,
.rules-expand-all:focus-visible {
    border-color: rgba(121, 217, 255, 0.34);
    color: #fff;
    transform: translateY(-1px);
}

.rules-index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.rules-index-card {
    --index-color: var(--community-blue);
    --index-bg: rgba(52, 173, 241, 0.1);
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--community-border);
    border-radius: 0.85rem;
    background: var(--community-panel);
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease;
}

.rules-index-card:hover,
.rules-index-card:focus-visible {
    border-color: color-mix(in srgb, var(--index-color) 35%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(3, 10, 22, 0.2);
}

.rules-index-account {
    --index-color: var(--community-purple);
    --index-bg: rgba(169, 135, 255, 0.1);
}

.rules-index-chat {
    --index-color: var(--community-green);
    --index-bg: rgba(96, 223, 53, 0.1);
}

.rules-index-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 0.65rem;
    background: var(--index-bg);
    color: var(--index-color);
}

.rules-index-card > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.rules-index-card small {
    color: var(--index-color);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.rules-index-card strong {
    color: #edf5fd;
    font-size: 0.82rem;
}

.rules-index-card em {
    color: #7189a2;
    font-size: 0.58rem;
    font-style: normal;
}

.rules-index-arrow {
    color: var(--index-color);
    font-size: 0.7rem;
}

.verification-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(225px, 0.38fr);
    gap: 1.1rem;
    align-items: start;
    margin: 0.9rem 0;
    padding: 1.3rem;
    border: 1px solid rgba(88, 101, 242, 0.19);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 0% 100%, rgba(88, 101, 242, 0.11), transparent 38%),
        var(--community-panel);
}

.verification-icon {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border-radius: 0.75rem;
    background: rgba(88, 101, 242, 0.13);
    color: #8f98ff;
    font-size: 1rem;
}

.verification-copy h2 {
    font-size: 1.35rem;
}

.verification-copy p {
    margin: 0.7rem 0 0;
    color: #91a8bf;
    font-size: 0.7rem;
    line-height: 1.7;
}

.verification-copy p strong {
    color: #dce8f5;
}

.verification-copy > a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.9rem;
    color: #9ca4ff;
    font-size: 0.66rem;
    font-weight: 800;
    text-decoration: none;
}

.verification-copy > a:hover,
.verification-copy > a:focus-visible {
    color: #fff;
    text-decoration: none;
}

.verification-key {
    display: flex;
    gap: 0.55rem;
    flex-direction: column;
    padding: 0.9rem;
    border: 1px solid rgba(159, 179, 201, 0.11);
    border-radius: 0.75rem;
    background: rgba(8, 18, 32, 0.3);
}

.verification-key .punishment {
    width: 100%;
    justify-content: center;
}

.verification-key small {
    color: #7189a2;
    font-size: 0.58rem;
    line-height: 1.55;
}

.rules-categories {
    display: grid;
    gap: 0.8rem;
}

.rules-category {
    overflow: hidden;
    border: 1px solid var(--community-border);
    border-radius: 1rem;
    background: var(--community-panel);
    scroll-margin-top: 1rem;
    transition: border-color 170ms ease, box-shadow 170ms ease;
}

.rules-category.is-open {
    border-color: rgba(52, 173, 241, 0.24);
    box-shadow: 0 20px 45px rgba(3, 10, 22, 0.18);
}

.rules-category-toggle {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease;
}

.rules-category-toggle:hover,
.rules-category-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.025);
}

.category-heading-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 0.72rem;
    background: rgba(52, 173, 241, 0.1);
    color: var(--community-blue-light);
}

#account-rules .category-heading-icon {
    background: rgba(169, 135, 255, 0.1);
    color: #c1a7ff;
}

#chat-rules .category-heading-icon {
    background: rgba(96, 223, 53, 0.1);
    color: #8ef16d;
}

.category-heading-copy {
    display: grid;
    min-width: 0;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}

.category-heading-copy small {
    grid-column: 1 / -1;
    color: #6e8ba8;
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.category-heading-copy strong {
    color: #f2f7fc;
    font-size: 0.92rem;
}

.category-heading-copy em {
    justify-self: end;
    color: #7189a2;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
}

.category-chevron {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(159, 179, 201, 0.13);
    border-radius: 0.55rem;
    color: #7890a9;
    font-size: 0.63rem;
    transition: color 170ms ease, transform 170ms ease;
}

.rules-category.is-open .category-chevron {
    color: var(--community-blue-light);
    transform: rotate(180deg);
}

.rules-category-panel {
    border-top: 1px solid rgba(159, 179, 201, 0.1);
    padding: 1rem;
    background: rgba(9, 18, 31, 0.26);
}

.rules-category-panel[hidden] {
    display: none;
}

.rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.modern-rule-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid rgba(159, 179, 201, 0.12);
    border-radius: 0.8rem;
    background: var(--community-panel-deep);
}

.rule-card-featured {
    grid-column: 1 / -1;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 119, 104, 0.065), transparent 32%),
        var(--community-panel-deep);
}

.modern-rule-heading {
    display: flex;
    gap: 0.65rem;
    align-items: center;
}

.modern-rule-number {
    display: inline-flex;
    min-width: 34px;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.4rem;
    border: 1px solid rgba(255, 119, 104, 0.2);
    border-radius: 0.45rem;
    background: rgba(255, 119, 104, 0.1);
    color: #ff998e;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.modern-rule-heading h3 {
    margin: 0;
    color: #f5f8fc;
    font-size: 0.84rem;
    line-height: 1.35;
}

.modern-rule-card > p:not(.modern-rule-note) {
    margin: 0.75rem 0 0.9rem;
    color: #8da5bd;
    font-size: 0.69rem;
    line-height: 1.65;
}

.punishment-list,
.punishment-progression {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.punishment {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.62rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.35;
}

.punishment-unverified {
    border-color: rgba(255, 119, 104, 0.2);
    background: rgba(255, 119, 104, 0.1);
    color: #ff9b91;
}

.punishment-verified {
    border-color: rgba(52, 173, 241, 0.2);
    background: rgba(52, 173, 241, 0.1);
    color: #79d9ff;
}

.modern-rule-note {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    margin: 0.85rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(159, 179, 201, 0.1);
    color: #758ca4;
    font-size: 0.61rem;
    line-height: 1.55;
}

.modern-rule-note i {
    margin-top: 0.14rem;
    color: #9bb4cd;
}

.rules-appeal-banner {
    margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .vote-site-card,
    .community-button,
    .rules-index-card,
    .rules-expand-all,
    .category-chevron {
        transition: none;
    }
}

@media (max-width: 1000px) {
    .community-hero {
        grid-template-columns: 1fr;
    }

    .vote-spotlight,
    .rules-overview {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 1rem;
        align-items: center;
    }

    .spotlight-status,
    .rules-overview-icon {
        grid-column: 1 / -1;
    }

    .spotlight-icon {
        grid-column: 1;
        grid-row: 2 / span 2;
        margin: 0;
    }

    .vote-spotlight h2,
    .vote-spotlight > p {
        grid-column: 2;
    }

    .server-address-row {
        grid-column: 1 / -1;
    }

    .rules-overview .community-kicker,
    .rules-overview h2,
    .rules-overview > p {
        grid-column: 1;
    }

    .rules-overview-stats {
        grid-column: 2;
        grid-row: 2 / span 3;
        margin: 0;
    }

    .verification-panel {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .verification-key {
        grid-column: 2;
    }
}

@media (max-width: 780px) {
    .community-section,
    .rules-index {
        padding-top: 3rem;
    }

    .community-section-heading,
    .rules-index-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.7rem;
    }

    .community-section-heading > p {
        text-align: left;
    }

    .vote-site-grid,
    .vote-guide-grid,
    .rule-grid {
        grid-template-columns: 1fr;
    }

    .rule-card-featured {
        grid-column: auto;
    }

    .rules-index-grid {
        grid-template-columns: 1fr;
    }

    .rules-index-card {
        min-height: 76px;
    }

    .community-info-banner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .community-info-banner > a {
        grid-column: 2;
    }
}

@media (max-width: 640px) {
    .community-page {
        padding-bottom: 3rem;
    }

    .community-hero {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .community-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.1rem);
    }

    .community-hero-copy > p {
        font-size: 0.82rem;
    }

    .vote-hero-facts {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .vote-hero-facts > span {
        min-width: 0;
        padding: 0.6rem;
    }

    .vote-spotlight,
    .rules-overview {
        display: flex;
        padding: 1rem;
    }

    .spotlight-icon {
        margin-bottom: 0.85rem;
    }

    .rules-overview-stats {
        margin: 0.9rem 0;
    }

    .rules-hero-actions,
    .rules-hero-actions .community-button {
        width: 100%;
    }

    .vote-site-card {
        min-height: 195px;
        padding: 1.05rem;
    }

    .vote-guide-card {
        padding: 1.1rem;
    }

    .verification-panel {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .verification-key {
        grid-column: 1;
    }

    .rules-category-toggle {
        padding: 0.9rem;
    }

    .category-heading-copy {
        display: flex;
        flex-direction: column;
    }

    .category-heading-copy em {
        justify-self: auto;
    }

    .category-heading-icon {
        width: 40px;
        height: 40px;
    }

    .rules-category-panel {
        padding: 0.7rem;
    }

    .modern-rule-card {
        padding: 0.85rem;
    }

    .punishment-list,
    .punishment-progression {
        flex-direction: column;
        align-items: flex-start;
    }

    .punishment {
        max-width: 100%;
        border-radius: 0.55rem;
    }

    .community-info-banner {
        align-items: start;
        padding: 0.9rem;
    }

    .community-info-banner small {
        line-height: 1.5;
    }
}

@media (max-width: 420px) {
    .vote-hero-facts {
        grid-template-columns: 1fr;
    }

    .vote-hero-facts > span {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.4rem;
        align-items: baseline;
    }

    .vote-site-card {
        grid-template-columns: 1fr;
    }

    .vote-site-icon {
        grid-row: auto;
    }

    .rules-expand-all {
        width: 100%;
        justify-content: center;
    }

    .category-heading-copy em,
    .category-heading-copy small {
        display: none;
    }

    .category-chevron {
        width: 28px;
        height: 28px;
    }
}