/* Metallic gold surfaces from For-New-Image/color.md. */
:root {
    --gold-metal: linear-gradient(to right, #A57138 0%, #CAA257 25%, #A57138 50%, #FFE9A5 75%, #A7743A 100%);
    --gold-vertical: linear-gradient(to bottom, #FEC65E, #B48C43);
    --gold-small-surface: linear-gradient(105deg, rgba(91,55,17,.14) 0%, rgba(255,241,198,.12) 34%, rgba(255,246,211,.45) 62%, rgba(115,76,27,.10) 100%);
    --gold-small-base: #c7aa73;
    --gold-small-hover: #dfc38d;
    --gold-small-active: #b79963;
    --gold-small-border: #9d8051;
    --gold-small-hover-border: #bda06b;
    --gold-small-ink: #241c10;
    --gold-small-shadow: inset 0 1px 0 rgba(255,247,224,.24), 0 1px 2px rgba(0,0,0,.22);
    --gold-action-surface: linear-gradient(105deg, rgba(82,48,16,.14) 0%, rgba(255,236,190,.08) 34%, rgba(255,244,207,.38) 66%, rgba(105,67,23,.10) 100%);
    --gold-action-base: #c39d5d;
    --gold-action-hover: #d6b579;
    --gold-action-active: #af874b;
    --gold-action-border: #98713c;
    --gold-action-hover-border: #b4935b;
    --gold-action-ink: #241b0d;
    --gold-control-dark: #24201a;
    --gold-control-dark-hover: #383025;
    --gold-control-dark-active: #1c1914;
    --gold-control-dark-border: #6f5836;
    --gold-control-light-ink: #f1dfb8;
    --gold-edge: #FEC65E;
    --gold-panel: #111111;
    --gold-text: #FFFFFF;
    --gold-heading-ink: #332009;
    --gold-nav-ink: #6D0707;
    --gold-muted: #BEB5A5;
    --gold-bronze: #A57138;
    --gold-cream: #EDE3AA;
    --gold-prefix: #D1A15A;
    --gold-line: #705333;
    --gold-black-row: linear-gradient(to bottom, #151515 96%, #000000);
    --gold-gloss: linear-gradient(to bottom, #262626 0%, #191919 49%, #000000 51%, #181818 100%);
    --gold-nav-frame: url('/ho135/img/gold-motion/nav-frame.webp?v=20260929-image-maru3');
    --gold-button-frame: url('/ho135/img/gold-motion/button-frame.webp?v=20260929-image-maru3');
    --gold-button-hover-frame: url('/ho135/img/gold-motion/button-frame-hover.webp?v=20260929-image-maru3');
    --gold-card-frame: url('/ho135/img/gold-motion/card-frame.webp?v=20260929-image-maru3');
    --gold-menu-wing-left: url('/ho135/img/gold-motion/menu-wing-left.webp?v=20260929-image-maru3');
    --gold-menu-wing-right: url('/ho135/img/gold-motion/menu-wing-right.webp?v=20260929-image-maru3');
    --gold-menu-surface: url('/ho135/img/gold-motion/menu-center.webp?v=20260929-image-maru3');
}

body.reference-body {
    color: var(--gold-text);
    background-color: #060606;
    background-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.31) 73%, #060606 100%), url('/ho135/img/gold-motion/background.webp?v=20260929-image-maru3');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body.reference-body ::selection { background: #CAA257; color: #21160B; }
body.reference-body :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--gold-edge);
    outline-offset: 3px;
}
/* Keep editable-field focus inside the control's existing border. */
body.reference-body :is(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"])):focus-visible {
    outline-offset: -2px;
}
body.reference-body :is(input[type="checkbox"], input[type="radio"]) { accent-color: #CAA257; }
body.reference-body ::-webkit-scrollbar-thumb { background-color: #A57138; }
body.reference-body ::-webkit-scrollbar-track { background-color: #111111; }

/* Keep label and surface colors synchronized; animate only non-contrast effects. */
body.reference-body :is(.btn_mid, .btn_ui, .btnSearch, .btnConfirm, .default-button, .act-btn) {
    transition-property: border-color, box-shadow, opacity, transform;
    transition-duration: .18s;
}

/* These footer PNGs are single-color interface symbols, not game artwork. */
body.reference-body #quickFoot .icon_size {
    filter: brightness(0) saturate(100%) invert(83%) sepia(49%) saturate(604%) hue-rotate(349deg) brightness(104%) contrast(99%);
}
body.reference-body #quickFoot .home img {
    filter: none;
}

/* Keep the existing opacity animation; recolor only its decorative edge. */
body.reference-body .reference-board-thumb::after {
    border-color: #FEC65E;
    box-shadow: inset 0 0 12px 3px rgba(254,198,94,.75);
}
@supports (container-type:inline-size) {
    body.reference-body .reference-board-thumb::after {
        box-shadow: inset 0 0 4cqw 1cqw rgba(254,198,94,.75);
    }
}

@media (max-width:767px) {
    body.reference-body { background-color: #111111; }

    /* These desktop-only decorations must not become mobile image requests.
       The page's later asset-version style remains unchanged, so override it here. */
    :root {
        --gold-nav-frame: none !important;
        --gold-card-frame: none !important;
        --gold-menu-wing-left: none !important;
        --gold-menu-wing-right: none !important;
        --gold-menu-surface: none !important;
    }
    body.reference-body { background-image: none !important; }
}