/*!
 * Republjika Vilgerska · vilgeria.com
 * © 2026 RV Software Board. All rights reserved.
 */

.gl { padding-bottom: 110px; }

.gl__hero {
    position: relative;
    padding: calc(var(--topbar-h) + 90px) 0 64px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.gl__hero::before {
    content: '';
    position: absolute;
    inset: -45% auto auto -10%;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, rgba(95, 174, 126, 0.14), transparent 62%);
    pointer-events: none;
}

.gl__title {
    position: relative;
    margin: 18px 0 22px;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 6.6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
}

.gl__lead { position: relative; max-width: 640px; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); }

.gl__hero .wrap { text-align: center; }
.gl__hero .gl__lead { margin: 0 auto; }
.gl__hero::before { inset: -50% auto auto 50%; transform: translateX(-50%); }

.rule__num { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; line-height: 1.2; }

.rule__num::after {
    content: '';
    width: 14px;
    height: 14px;
    opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fae7e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: opacity 0.2s;
}

.rule:hover .rule__num::after,
.rule__num:focus-visible::after { opacity: 1; }

.rule.is-flash { animation: rule-flash 2.2s var(--ease); }

@keyframes rule-flash {
    0%, 30% { border-color: var(--accent); background: rgba(95, 174, 126, 0.16); box-shadow: 0 0 0 6px rgba(95, 174, 126, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(95, 174, 126, 0); }
}

.gl__layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding-top: 64px;
}

.gl__aside { position: sticky; top: calc(var(--topbar-h) + 24px); }

.gl__panel {
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--line);
}

.gl__label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
}

.gl__label:not(:first-child) { margin-top: 22px; }

.gl__toc { display: grid; gap: 4px; }

.gl__toc a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.86);
    transition: background 0.25s, color 0.25s;
}

.gl__toc span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--accent);
    background: rgba(95, 174, 126, 0.12);
}

.gl__filters { display: flex; flex-wrap: wrap; gap: 6px; }

.gl__filters button {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    font: 700 13px var(--font-body);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.gl__filters button.is-active { background: var(--flag-white); border-color: var(--flag-white); color: #08090a; }

.gl__legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 56px;
}

.gl__legend > div {
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.gl__legend p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tag--warn { color: #e8c46a; background: rgba(232, 196, 106, 0.1); border: 1px solid rgba(232, 196, 106, 0.3); }
.tag--mute { color: #8fb4e8; background: rgba(143, 180, 232, 0.1); border: 1px solid rgba(143, 180, 232, 0.28); }
.tag--ban { color: #ef8a7d; background: rgba(239, 138, 125, 0.1); border: 1px solid rgba(239, 138, 125, 0.32); }
.tag--time { color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); }
.tag--appeal { color: var(--muted); background: transparent; border: 1px dashed var(--line-strong); }

.rules { display: grid; gap: 72px; }

.rules__section { display: grid; gap: 12px; scroll-margin-top: calc(var(--topbar-h) + 24px); }

.rules__head {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
    padding: 24px 26px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(520px circle at 100% 0%, rgba(95, 174, 126, 0.18), transparent 60%),
        linear-gradient(160deg, #142a1e, #0d1411 75%);
    border: 1px solid rgba(95, 174, 126, 0.28);
}

#section-2 .rules__head {
    background:
        radial-gradient(520px circle at 100% 0%, rgba(244, 243, 238, 0.12), transparent 60%),
        linear-gradient(160deg, #1b1d1c, #0f1110 75%);
    border-color: rgba(244, 243, 238, 0.18);
}

.rules__head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, #2d5a41 0 33.4%, var(--flag-white) 33.4% 66.7%, #0c0c0c 66.7%);
}

.rules__badge {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: #08090a;
    background: var(--accent);
}

#section-2 .rules__badge { background: var(--flag-white); }

.rules__head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.15;
    color: #fff;
}

.rules__head p { margin-top: 4px; font-size: 14px; color: var(--muted); }

.rules__count {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
}

.rule {
    position: relative;
    padding: 20px 24px 22px 26px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    scroll-margin-top: calc(var(--topbar-h) + 24px);
    transition: border-color 0.3s, background 0.3s;
}

.rule::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #e8c46a;
}

.rule[data-kind~="ban"]::before { background: #ef8a7d; }
.rule[data-kind="mute"]::before { background: #8fb4e8; }

.rule header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }

.rule__num {
    margin-right: 6px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
}

.rule p { color: rgba(255, 255, 255, 0.82); line-height: 1.65; }

.rule__extra {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    background: rgba(239, 138, 125, 0.07);
    border: 1px solid rgba(239, 138, 125, 0.18);
}

.rule:target { border-color: var(--accent); background: var(--surface-2); }

.rules__note {
    margin-top: 6px;
    padding: 16px 20px;
    border-radius: 14px;
    font-size: 14.5px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--line-strong);
}

.gl__empty { padding: 40px 0; text-align: center; color: var(--dim); }

@media (hover: hover) {
    .gl__toc a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
    .gl__filters button:not(.is-active):hover { border-color: var(--accent); color: #fff; }
    .rule:hover { border-color: var(--line-strong); }
    .rule__num:hover { color: var(--accent); }
}

@media (max-width: 900px) {
    .gl__hero { padding: calc(var(--topbar-h) + 56px) 0 44px; }
    .gl__layout { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
    .gl__aside { position: static; }
    .gl__legend { grid-template-columns: 1fr; margin-bottom: 40px; }
    .rules { gap: 52px; }
    .rules__head { grid-template-columns: auto 1fr; padding: 20px; gap: 16px; }
    .rules__count { grid-column: 2; }
    .rules__badge { width: 48px; height: 48px; font-size: 1.3rem; }
    .rule { padding: 18px 18px 20px 20px; }
}