:root {
    --rules-gold: #e6bd55;
    --rules-gold-bright: #ffdc78;
    --rules-panel: rgba(19, 24, 32, .97);
    --rules-panel-light: rgba(28, 35, 45, .97);
    --rules-line: rgba(255, 255, 255, .09);
    --rules-muted: #9ca7b5;
    --rules-danger: #ef747b;
    --rules-green: #58d792;
}

html { scroll-behavior: smooth; }

.rules-page {
    width: min(calc(100% - 32px), 1380px);
    margin: 30px auto 120px;
}

.rules-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: center;
    gap: 34px;
    min-height: 280px;
    padding: clamp(30px, 5vw, 58px);
    overflow: hidden;
    border: 1px solid rgba(230, 189, 85, .28);
    border-radius: 26px;
    background:
        linear-gradient(112deg, rgba(9, 12, 17, .98), rgba(24, 30, 39, .93)),
        radial-gradient(circle at 84% 12%, rgba(230, 189, 85, .22), transparent 34%);
    box-shadow: 0 25px 72px rgba(0, 0, 0, .36);
}

.rules-hero::before,
.rules-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.rules-hero::before {
    right: -120px;
    top: -150px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(230, 189, 85, .13);
    box-shadow: 0 0 0 54px rgba(230, 189, 85, .025), 0 0 0 108px rgba(230, 189, 85, .016);
}

.rules-hero::after {
    left: -100px;
    bottom: -170px;
    width: 330px;
    height: 330px;
    background: radial-gradient(circle, rgba(155, 37, 45, .15), transparent 68%);
}

.rules-hero > * { position: relative; z-index: 1; }
.rules-eyebrow,
.rules-directory header span {
    color: var(--rules-gold-bright);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.rules-hero h1 {
    max-width: 760px;
    margin: .48rem 0 .8rem;
}

.rules-hero__copy > p {
    max-width: 780px;
    margin: 0;
    font-size: 1.03rem;
}

.rules-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.rules-primary-action,
.rules-secondary-action,
.rules-control-button,
.rules-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 16px;
    border-radius: 11px;
    font-weight: 850;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.rules-primary-action {
    color: #171108;
    border: 1px solid var(--rules-gold-bright);
    background: linear-gradient(135deg, var(--rules-gold-bright), var(--rules-gold));
}

.rules-secondary-action,
.rules-control-button {
    color: var(--ec-text);
    border: 1px solid var(--rules-line);
    background: rgba(255, 255, 255, .045);
}

.rules-primary-action:hover,
.rules-secondary-action:hover,
.rules-control-button:hover,
.rules-footer a:hover { transform: translateY(-2px); }

.rules-status-card {
    display: grid;
    gap: 8px;
    padding: 23px;
    border: 1px solid rgba(230, 189, 85, .25);
    border-radius: 19px;
    background: rgba(5, 8, 12, .58);
    backdrop-filter: blur(10px);
}

.rules-status-card > span {
    color: var(--rules-gold);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.rules-status-card strong {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.55rem;
}

.rules-status-card strong::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rules-green);
    box-shadow: 0 0 16px rgba(88, 215, 146, .7);
}

.rules-status-card p,
.rules-status-card small { margin: 0; color: var(--rules-muted); }
.rules-status-card small { padding-top: 10px; border-top: 1px solid var(--rules-line); }

.rules-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.rules-principles article {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    min-height: 110px;
    padding: 17px;
    border: 1px solid var(--rules-line);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(28, 35, 45, .96), rgba(15, 19, 26, .96));
}

.rules-principles article > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: #171108;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--rules-gold-bright), var(--rules-gold));
    font-weight: 950;
}

.rules-principles article div { display: grid; gap: 5px; }
.rules-principles p { margin: 0; color: var(--rules-muted); font-size: .82rem; line-height: 1.5; }

.rules-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--rules-line);
    border-radius: 16px;
    background: rgba(16, 21, 28, .94);
}

.rules-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border: 1px solid var(--rules-line);
    border-radius: 11px;
    background: rgba(5, 8, 12, .65);
}

.rules-search:focus-within {
    border-color: var(--rules-gold);
    box-shadow: 0 0 0 3px rgba(230, 189, 85, .1);
}

.rules-search input {
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.rules-search input:focus { box-shadow: none; }
.rules-control-button { min-width: 110px; cursor: pointer; }

.rules-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.rules-directory {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--rules-line);
    border-radius: 20px;
    background: linear-gradient(150deg, var(--rules-panel-light), var(--rules-panel));
    scrollbar-width: thin;
}

.rules-directory header { padding: 6px 7px 14px; }
.rules-directory h2 { margin: 4px 0 0; }
.rules-directory nav { display: grid; gap: 4px; }

.rules-directory a {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 7px 9px;
    color: var(--rules-muted);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .79rem;
}

.rules-directory a b {
    color: var(--rules-gold);
    font-size: .67rem;
    letter-spacing: .05em;
}

.rules-directory a:hover,
.rules-directory a.is-active {
    color: var(--ec-text);
    border-color: rgba(230, 189, 85, .22);
    background: rgba(230, 189, 85, .07);
}

.rules-directory a.is-hidden { display: none; }
.rules-content { min-width: 0; display: grid; gap: 10px; }

.rule-section {
    scroll-margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--rules-line);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(26, 32, 41, .97), rgba(14, 18, 24, .97));
    box-shadow: 0 11px 30px rgba(0, 0, 0, .15);
}

.rule-section[hidden] { display: none !important; }
.rule-section[open] { border-color: rgba(230, 189, 85, .23); }

.rule-section summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 14px 19px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.rule-section summary::-webkit-details-marker { display: none; }
.rule-section summary:hover { background: rgba(230, 189, 85, .035); }

.rule-number {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--rules-gold-bright);
    border: 1px solid rgba(230, 189, 85, .22);
    border-radius: 13px;
    background: rgba(230, 189, 85, .07);
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .06em;
}

.rule-section summary div { display: grid; gap: 3px; }
.rule-section summary strong { font-size: 1rem; }
.rule-section summary small { color: var(--rules-muted); }
.rule-section summary i { color: var(--rules-gold); font-size: 1.2rem; font-style: normal; transition: transform .18s ease; }
.rule-section[open] summary i { transform: rotate(45deg); }

.rule-body {
    padding: 5px 22px 23px 81px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.rule-body p { margin: 15px 0 0; line-height: 1.72; }
.rule-body h3 { margin: 19px 0 8px; font-size: .82rem; color: var(--rules-gold-bright); letter-spacing: .08em; text-transform: uppercase; }
.rule-body ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; }
.rule-body li { color: #d9dee5; line-height: 1.6; }
.rule-body li::marker { color: var(--rules-danger); }
.rule-list--allowed li::marker { color: var(--rules-green); }

.rule-note {
    margin-top: 18px;
    padding: 13px 15px;
    color: #f0d5d7;
    border-left: 3px solid var(--rules-danger);
    border-radius: 8px;
    background: rgba(239, 116, 123, .07);
}

.rule-note--allowed {
    color: #d5f5e4;
    border-left-color: var(--rules-green);
    background: rgba(88, 215, 146, .07);
}

.rules-no-results {
    margin-bottom: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid var(--rules-line);
    border-radius: 17px;
    background: var(--rules-panel);
}
.rules-no-results p { margin-bottom: 0; }

.rules-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(230, 189, 85, .2);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(28, 35, 45, .96), rgba(14, 18, 24, .96));
}

.rules-footer > span { font-size: 1.8rem; }
.rules-footer div { display: grid; gap: 3px; }
.rules-footer p { margin: 0; color: var(--rules-muted); font-size: .84rem; }
.rules-footer a { color: #171108; background: var(--rules-gold); }

@media (max-width: 1050px) {
    .rules-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rules-layout { grid-template-columns: 230px minmax(0, 1fr); }
}

@media (max-width: 780px) {
    .rules-page { width: calc(100% - 20px); margin-top: 20px; }
    .rules-hero { grid-template-columns: 1fr; padding: 27px 22px; }
    .rules-status-card { width: 100%; }
    .rules-principles { grid-template-columns: 1fr; }
    .rules-toolbar { grid-template-columns: 1fr 1fr; }
    .rules-search { grid-column: 1 / -1; min-height: 45px; }
    .rules-layout { grid-template-columns: 1fr; }
    .rules-directory { position: static; max-height: none; }
    .rules-directory nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rule-body { padding: 5px 18px 20px; }
    .rules-footer { grid-template-columns: auto minmax(0, 1fr); }
    .rules-footer a { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .rules-directory nav { grid-template-columns: 1fr; }
    .rules-toolbar { grid-template-columns: 1fr; }
    .rules-search { grid-column: auto; }
    .rule-section summary { grid-template-columns: 41px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
    .rule-number { width: 41px; height: 41px; }
    .rule-section summary small { font-size: .72rem; }
}