.wrules-page {
    --wr-gold: #e4ad29;
    --wr-gold-light: #ffd66a;
    --wr-ink: #100d0a;
    --wr-panel: #18130f;
    --wr-panel-2: #211a14;
    --wr-line: #3b3026;
    --wr-muted: #aa9c8d;
    width: 100%;
    padding: 34px 0 72px;
    color: #f4eee7;
}

.wrules-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
    min-height: 230px;
    margin-bottom: 26px;
    padding: 43px 46px 39px;
    overflow: hidden;
    border: 3px solid #090806;
    background:
        linear-gradient(90deg, rgba(12,10,8,.98) 0%, rgba(19,15,11,.94) 58%, rgba(33,24,12,.83) 100%),
        repeating-linear-gradient(135deg, transparent 0 31px, rgba(255,255,255,.025) 32px 33px);
    box-shadow: inset 0 0 0 1px #5b4934, 8px 8px 0 rgba(0,0,0,.2);
}

.wrules-hero::before {
    position: absolute;
    top: -90px;
    right: 60px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(228,173,41,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(228,173,41,.025), 0 0 0 88px rgba(228,173,41,.018);
    content: '';
}

.wrules-hero > * { position: relative; z-index: 1; }
.wrules-kicker,
.wrules-sidebar-label,
.wrules-section-index,
.wrules-penalty > span {
    color: var(--wr-gold);
    font: 10px/1.2 var(--wdev-ui, sans-serif);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.wrules-hero h1 {
    margin: 12px 0 14px;
    color: #fff;
    font: 48px/.94 var(--wdev-heading, var(--wdev-ui, sans-serif));
    letter-spacing: .02em;
    text-shadow: 4px 4px 0 #050403;
}

.wrules-hero p {
    max-width: 690px;
    margin: 0;
    color: #c8bdb2;
    font: 17px/1.65 Arial, sans-serif;
}

.wrules-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 26px; align-items: start; }
.wrules-sidebar { position: sticky; top: 24px; }

.wrules-sidebar-inner {
    padding: 20px;
    border: 3px solid #090806;
    background: var(--wr-panel);
    box-shadow: inset 0 0 0 1px var(--wr-line), 6px 6px 0 rgba(0,0,0,.18);
}

.wrules-sidebar-label { display: block; margin: 2px 8px 15px; color: #827668; }
.wrules-category-nav { display: grid; gap: 7px; }

.wrules-category-link {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 9px 10px;
    border: 1px solid transparent;
    color: #b9aea3;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wrules-category-link:hover { border-color: #60491e; color: var(--wr-gold-light); background: #211a14; transform: translateX(2px); }
.wrules-category-link.is-active { border-color: #a77b24; background: linear-gradient(90deg, rgba(228,173,41,.13), rgba(228,173,41,.035)); color: #fff; box-shadow: inset 0 0 0 1px rgba(228,173,41,.12); }
.wrules-category-link .wb-material { color: #817568; font-size: 18px; }
.wrules-category-link.is-active .wb-material { color: var(--wr-gold-light); }
.wrules-category-name { font: 13px/1.3 var(--wdev-ui, sans-serif); }

.wrules-content { min-width: 0; }

.wrules-section {
    margin: 0;
    scroll-margin-top: 24px;
    border: 3px solid #090806;
    background: var(--wr-panel);
    box-shadow: inset 0 0 0 1px var(--wr-line), 7px 7px 0 rgba(0,0,0,.17);
}
.wrules-section[hidden] { display: none !important; }
.wrules-section.is-entering { animation: wrules-panel-in .32s cubic-bezier(.22,.75,.3,1) both; }
.wrules-section.is-leaving { animation: wrules-panel-out .15s ease both; pointer-events: none; }
@keyframes wrules-panel-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes wrules-panel-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-3px); }
}

.wrules-overview-header {
    position: relative;
    padding: 34px 34px 30px;
    overflow: hidden;
    border-bottom: 1px solid #3b3026;
    background: linear-gradient(115deg, #241c14, #17120e 72%);
}
.wrules-overview-header > * { position: relative; z-index: 1; }
.wrules-overview-header h2 { margin: 9px 0 10px; color: #fff; font: 30px/1 var(--wdev-heading, var(--wdev-ui, sans-serif)); text-shadow: 3px 3px #080604; }
.wrules-overview-header p { max-width: 760px; margin: 0; color: #b8aea4; font: 16px/1.65 Arial, sans-serif; }
.wrules-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.wrules-overview-card {
    display: flex;
    gap: 16px;
    min-height: 142px;
    padding: 27px 28px;
    border-right: 0;
    border-bottom: 1px solid #302720;
    background: #18130f;
    transition: background-color .2s ease;
}
.wrules-overview-card:last-child { border-bottom: 0; }
.wrules-overview-card:hover { background: #1d1712; }
.wrules-overview-card > .wb-material { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid #59431d; background: #21190f; color: var(--wr-gold-light); font-size: 20px; }
.wrules-overview-card h3 { margin: 2px 0 10px; color: #f5efe9; font: 15px/1.3 var(--wdev-ui, sans-serif); }
.wrules-overview-card p { margin: 0; color: #b8ada2; font: 15px/1.68 Arial, sans-serif; }

.wrules-section-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px 27px 23px;
    border-bottom: 1px solid #3b3026;
    background: linear-gradient(90deg, #241c14, #18130f 76%);
}

.wrules-section-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 2px solid #5a441d;
    background: #2a2115;
    color: var(--wr-gold-light);
    box-shadow: inset 0 0 0 2px #171109, 3px 3px 0 #090704;
}

.wrules-section-icon .wb-material { font-size: 25px; }
.wrules-section-header h2 { margin: 5px 0 5px; color: #fff; font: 25px/1 var(--wdev-heading, var(--wdev-ui, sans-serif)); text-shadow: 3px 3px #080604; }
.wrules-section-title { display: flex; align-items: baseline; gap: 11px; margin: 0 0 5px; }
.wrules-section-title .wrules-section-index { color: var(--wr-gold); font-size: 13px; }
.wrules-section-title h2 { margin: 0; }
.wrules-section-header p { margin: 0; color: #b0a398; font: 15px/1.5 Arial, sans-serif; }
.wrules-list { margin: 0; padding: 0; list-style: none; }

.wrules-rule {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(170px, 220px);
    align-items: center;
    gap: 18px;
    min-height: 112px;
    padding: 22px 26px;
    border-bottom: 1px solid #302720;
    transition: background-color .2s ease;
}

.wrules-rule:last-child { border-bottom: 0; }
.wrules-rule:hover { background: rgba(228,173,41,.035); }

.wrules-rule-number {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #45382c;
    color: #807368;
    background: #120f0c;
    font: 10px/1 var(--wdev-ui, sans-serif);
}

.wrules-rule-copy h3 { margin: 0 0 9px; color: #f5efe9; font: 16px/1.3 var(--wdev-ui, sans-serif); }
.wrules-rule-copy p { max-width: 690px; margin: 0; color: #b9afa5; font: 15px/1.68 Arial, sans-serif; }
.wrules-rule-copy a,
.wrules-section-header p a,
.wrules-overview-header p a,
.wrules-overview-card p a,
.wrules-hero p a {
    color: #d9b65d;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(217, 182, 93, .45);
    text-underline-offset: 3px;
    transition: color .16s ease, text-decoration-color .16s ease;
}
.wrules-rule-copy a:hover,
.wrules-section-header p a:hover,
.wrules-overview-header p a:hover,
.wrules-overview-card p a:hover,
.wrules-hero p a:hover {
    color: #f2d98b;
    text-decoration-color: currentColor;
}

.wrules-penalty {
    justify-self: stretch;
    padding: 13px 14px 12px;
    border: 1px solid rgba(163,68,57,.35);
    background: rgba(91,35,29,.32);
    box-shadow: inset 0 0 16px rgba(112,42,34,.08);
}

.wrules-penalty > span { display: block; margin-bottom: 7px; color: #d28479; font-size: 10px; }
.wrules-penalty strong { display: block; color: #efb5ae; font: 12px/1.5 var(--wdev-ui, sans-serif); }

@media (max-width: 900px) {
    .wrules-page { padding-top: 24px; }
    .wrules-hero { min-height: 205px; padding: 34px; }
    .wrules-hero h1 { font-size: 39px; }
    .wrules-layout { grid-template-columns: 1fr; }
    .wrules-sidebar { position: static; }
    .wrules-sidebar-inner { padding: 14px; }
    .wrules-sidebar-label { display: none; }
    .wrules-category-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
    .wrules-category-link { flex: 0 0 auto; grid-template-columns: 20px auto; min-height: 42px; }
    .wrules-overview-grid { grid-template-columns: 1fr; }
    .wrules-overview-card, .wrules-overview-card:nth-child(2n) { min-height: 0; border-right: 0; border-bottom: 1px solid #302720; }
    .wrules-overview-card:last-child { border-bottom: 0; }
}

@media (max-width: 650px) {
    .wrules-page { padding: 16px 0 48px; }
    .wrules-hero { display: block; min-height: 0; margin-bottom: 16px; padding: 29px 24px 25px; }
    .wrules-hero h1 { margin-top: 10px; font-size: 34px; }
    .wrules-hero p { font-size: 15px; line-height: 1.65; }
    .wrules-layout { gap: 16px; }
    .wrules-section { margin-bottom: 16px; }
    .wrules-section-header { align-items: flex-start; gap: 13px; padding: 20px 17px; }
    .wrules-section-icon { flex-basis: 42px; width: 42px; height: 42px; }
    .wrules-section-icon .wb-material { font-size: 21px; }
    .wrules-section-header h2 { font-size: 20px; }
    .wrules-overview-header { padding: 27px 22px 24px; }
    .wrules-overview-header h2 { font-size: 25px; }
    .wrules-overview-card { padding: 22px 18px; }
    .wrules-rule { grid-template-columns: 32px minmax(0, 1fr); gap: 13px; min-height: 0; padding: 20px 16px; }
    .wrules-rule-number { width: 30px; height: 30px; }
    .wrules-penalty { grid-column: 2; margin-top: 2px; padding: 11px 12px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .wrules-category-link, .wrules-rule { transition: none; }
    .wrules-section.is-entering, .wrules-section.is-leaving { animation: none; }
}

/* Open handbook layout: intentionally replaces the former nested card design. */
.wrules-page {
    width: min(calc(100vw - 48px), 1440px);
    margin-left: 50%;
    padding: 42px 0 82px;
    transform: translateX(-50%);
}

.wrules-hero {
    min-height: 190px;
    margin: 0 0 38px;
    padding: 35px 8px 34px;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid #4b4037;
    background: transparent;
    box-shadow: none;
}
.wrules-hero::before { display: none; }
.wrules-hero h1 {
    margin: 11px 0 13px;
    font-size: clamp(42px,5vw,62px);
}
.wrules-hero p { max-width: 820px; color: #b7ada5; font-family: var(--wdev-body,Arial,sans-serif); }

.wrules-layout {
    grid-template-columns: 270px minmax(0,1fr);
    gap: 48px;
}
.wrules-sidebar { top: 28px; }
.wrules-sidebar-inner {
    padding: 4px 27px 4px 0;
    border: 0;
    border-right: 1px solid #40372f;
    background: transparent;
    box-shadow: none;
}
.wrules-sidebar-label { margin: 0 12px 18px; color: #827970; font-family: var(--wdev-body,sans-serif); }
.wrules-category-nav { gap: 3px; }
.wrules-category-link {
    min-height: 49px;
    padding: 10px 12px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #aaa39d !important;
    transition: color .18s ease,background-color .18s ease,padding-left .18s ease;
}
.wrules-category-link:hover {
    padding-left: 15px;
    border: 0;
    background: rgba(255,255,255,.035);
    color: #e7e1dc !important;
    transform: none;
}
.wrules-category-link.is-active {
    border: 0;
    background: #2b2724;
    color: #fff !important;
    box-shadow: none;
}
.wrules-category-link .wb-material,
.wrules-category-link.is-active .wb-material { color: #827c76 !important; }
.wrules-category-link:hover .wb-material { color: #aaa39d !important; }
.wrules-category-link.is-active .wb-material { color: #d2cbc4 !important; }
.wrules-category-link .wrules-category-name { color: inherit !important; }
.wrules-category-name { font: 700 14px/1.35 var(--wdev-body,sans-serif); }

.wrules-content { min-width: 0; }
.wrules-section {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.wrules-overview-header,
.wrules-section-header {
    padding: 4px 0 28px;
    border: 0;
    border-bottom: 1px solid #4a4038;
    background: transparent;
}
.wrules-overview-header h2 {
    margin: 9px 0 12px;
    font-size: 34px;
    text-shadow: 3px 3px #080604;
}
.wrules-overview-header p { max-width: 850px; font-family: var(--wdev-body,Arial,sans-serif); }
.wrules-overview-grid { display: grid; grid-template-columns: 1fr; }
.wrules-overview-card {
    min-height: 0;
    align-items: flex-start;
    gap: 19px;
    padding: 27px 2px;
    border: 0;
    border-bottom: 1px solid #352e28;
    background: transparent;
}
.wrules-overview-card:last-child { border-bottom: 0; }
.wrules-overview-card:hover { background: transparent; }
.wrules-overview-card > .wb-material {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border: 0;
    background: transparent;
    color: #a99f97;
    font-size: 22px;
}
.wrules-overview-card h3 {
    margin: 1px 0 8px;
    color: #f3ede8;
    font: 700 17px/1.35 var(--wdev-body,sans-serif);
}
.wrules-overview-card p {
    max-width: 850px;
    color: #b4aaa2;
    font: 15px/1.75 var(--wdev-body,Arial,sans-serif);
}

.wrules-section-header {
    align-items: center;
    gap: 17px;
}
.wrules-section-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border: 0;
    background: transparent;
    color: #a19a94;
    box-shadow: none;
}
.wrules-section-title {
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}
.wrules-section-title .wrules-section-index {
    min-width: 27px;
    color: #aaa39d;
    font: 800 21px/1 var(--wdev-body,Arial,sans-serif);
    letter-spacing: 0;
    text-align: center;
}
.wrules-section-header h2,
.wrules-section-title h2 {
    color: #f1ece8;
    font: 800 28px/1.2 var(--wdev-body,Arial,sans-serif);
    letter-spacing: -.015em;
    text-shadow: none;
    text-transform: none;
}
.wrules-section-header p {
    max-width: 820px;
    color: #aaa098;
    font-family: var(--wdev-body,Arial,sans-serif);
    line-height: 1.65;
}
.wrules-list { margin: 0; }
.wrules-rule {
    grid-template-columns: 66px minmax(0,1fr) minmax(180px,240px);
    gap: 22px;
    min-height: 124px;
    padding: 26px 2px;
    border: 0;
    border-bottom: 1px solid #352e28;
    background: transparent;
}
.wrules-rule:last-child { border-bottom: 0; }
.wrules-rule:hover { background: transparent; }
.wrules-rule-number {
    width: auto;
    height: auto;
    display: block;
    border: 0;
    background: transparent;
    color: #d1b25c;
    font: 700 14px/1.3 var(--wdev-body,sans-serif);
}
.wrules-rule-copy h3 {
    margin: 0 0 8px;
    color: #f3ede8;
    font: 700 17px/1.35 var(--wdev-body,sans-serif);
}
.wrules-rule-copy p {
    max-width: 820px;
    color: #b8aea6;
    font: 15px/1.72 var(--wdev-body,Arial,sans-serif);
}
.wrules-penalty {
    justify-self: end;
    width: min(100%,220px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: right;
}
.wrules-penalty > span {
    margin-bottom: 7px;
    color: #a97974;
    font-family: var(--wdev-body,sans-serif);
    font-size: 11px;
}
.wrules-penalty strong {
    color: #dca7a1;
    font: 700 13px/1.5 var(--wdev-body,sans-serif);
}

@media (max-width: 1050px) {
    .wrules-page { width: min(calc(100vw - 32px),1440px); }
    .wrules-layout { grid-template-columns: 230px minmax(0,1fr); gap: 30px; }
    .wrules-sidebar-inner { padding-right: 18px; }
}
@media (max-width: 900px) {
    .wrules-page { padding-top: 28px; }
    .wrules-hero { min-height: 0; padding-inline: 0; }
    .wrules-layout { grid-template-columns: 1fr; gap: 28px; }
    .wrules-sidebar-inner { padding: 0 0 15px; border-right: 0; border-bottom: 1px solid #40372f; }
    .wrules-category-nav { padding-bottom: 7px; }
}
@media (max-width: 650px) {
    .wrules-page { width: min(calc(100vw - 22px),1440px); padding: 20px 0 54px; }
    .wrules-hero { margin-bottom: 22px; padding: 22px 0 25px; }
    .wrules-hero h1 { font-size: 38px; }
    .wrules-section { margin-bottom: 0; }
    .wrules-overview-header,
    .wrules-section-header { padding: 2px 0 22px; }
    .wrules-section-title { gap: 10px; }
    .wrules-section-title .wrules-section-index { min-width: 23px; font-size: 18px; }
    .wrules-section-header h2,
    .wrules-section-title h2 { font-size: 23px; }
    .wrules-overview-card { padding: 22px 0; }
    .wrules-rule {
        grid-template-columns: 48px minmax(0,1fr);
        gap: 13px;
        padding: 22px 0;
    }
    .wrules-penalty {
        grid-column: 2;
        justify-self: start;
        width: 100%;
        margin-top: 3px;
        padding: 0;
        text-align: left;
    }
}

/* Quiet rulebook rhythm: spacing replaces the excess separator lines. */
.wrules-hero { border-bottom: 0; }
.wrules-sidebar-inner { border-right: 0; }
.wrules-overview-header,
.wrules-section-header { border-bottom: 0; }
.wrules-overview-header { padding-bottom: 19px; }
.wrules-overview-grid { gap: 4px; }
.wrules-overview-card {
    margin: 0 -12px;
    padding: 22px 12px;
    border-bottom: 0;
    border-radius: 2px;
}
.wrules-overview-card:hover { background: rgba(255,255,255,.022); }
.wrules-list {
    display: grid;
    gap: 5px;
}
.wrules-rule {
    margin: 0 -12px;
    padding: 24px 12px;
    border-bottom: 0;
    border-radius: 2px;
}
.wrules-rule:hover { background: rgba(255,255,255,.018); }
@media (max-width: 900px) {
    .wrules-sidebar-inner { border-bottom: 0; }
}
@media (max-width: 650px) {
    .wrules-overview-card,
    .wrules-rule { margin-inline: 0; }
}

/* Category number is part of the title, not a small metadata label. */
.wrules-section-title {
    align-items: baseline;
    gap: 12px;
}
.wrules-section-title .wrules-section-index {
    min-width: auto;
    color: #c9a64e;
    font-family: "MinecraftTEN", var(--wdev-heading, var(--wdev-ui, sans-serif));
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
    text-shadow: 2px 2px #080604;
}
.wrules-rule-copy h3 {
    font-family: var(--wdev-body, Arial, sans-serif);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: none;
}
.wrules-rule:not(:last-child)::after {
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 100px;
    height: 1px;
    background: rgba(143, 128, 116, .22);
    content: "";
    pointer-events: none;
}
@media (max-width: 650px) {
    .wrules-section-title .wrules-section-index { min-width: auto; font-size: 23px; }
    .wrules-rule:not(:last-child)::after { right: 0; left: 61px; }
}