/* Ragnarok's black/gold skin uses the shared article layout and controls. */
:is(.dose-ragnarok-single#article-top, .editor-styles-wrapper .dose-ragnarok-single) {
    --color-border: #49402b;
    --colorGray: #49402b;
    --color-head-text: #fff;
    --color-body-text: #eee7d9;
    --colorBlueMain: #ffcb08;
    --colorBlueDeep: #ffcb08;
    --dose-header-background: linear-gradient(180deg, #1b1308f2, #080808ed);
    --dose-header-navigation-hover: #ffcb08;
    --wp--custom--toc--background: #17130b;
    --wp--custom--toc--foreground: #ffcb08;
    --wp--custom--toc--border: #84712c;
    background: #000;
    color: #fff;
    display: flow-root;
    isolation: isolate;

    & .backdrop_detail { background: #000; pointer-events: none; }
    & .backdrop_detail .backdrop_img { filter: blur(30px) saturate(1.5) brightness(40%); }
    & .backdrop_detail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0003, #0006 55%, #000); }
    & > [aria-hidden="true"]:empty,
    & > .dose-site-header { margin-block: 0; }
    & .blog_detail_head { margin-block: 0; padding-block-start: 48px; }
    & .blog_detail_head:not(.has-background):not([style*="background"]) { background: transparent !important; }
    & .content_detail:not(.has-background):not([style*="background"]) { background: #000 !important; }
    & .dose-site-header:is(.active, .is-scrolled) { background: #17130b !important; }
    & .wp-block-post-content {
        --dose-article-text: #fff;
        --dose-article-prose-text: #eee7d9;
        --dose-article-heading: #ffcb08;
        --dose-article-link: #ffcb08;
    }
    & .head_detail .box_info :is(.author, .category a) { color: #eaaa59; }
    & .head_detail .view-label { background: url("../../images/view-label-gold.svg") center / contain no-repeat; color: #000; }
    & .dose-article-share { --dose-share-foreground: #fff; --dose-share-accent: #ffcb08; }
    & .dose-article-share svg { color: #ffcb08; background: #000; border: 1px solid #84712c; border-radius: 50%; }
    & .tagandshare .tagside a,
    & :is(.share-set, .shareside) :is(h3, h6),
    & .dose-share-total { color: #ffcb08; }
    & .dose-google-source-card,
    & .authorsection:not(.has-background):not([style*="background"]) { background: #17130b; border-color: #84712c; }
    & .dose-google-source-card__copy div > strong { color: #fff; }
    & .dose-google-source-card__copy div > span { color: #eee7d9; }
    & :is(.dose-google-source, .dose-google-source-card__action):not(.wp-block-button),
    & .dose-google-source > .wp-block-button__link,
    & .dose-comments input[type="submit"],
    & header .btn_support { color: #000 !important; background: #ffcb08 !important; border-color: #ffcb08; }
    & .dose-comments { --dose-comment-surface: #17130b; color: #eee7d9; }
    & .dose-comments a,
    & .authorsection :is(h3, .btn_readmore),
    & .backtotop .wp-block-button__link:not(.has-text-color) { color: #ffcb08; }
    & .authorsection p { color: #eee7d9; }
    & :is(.news, .editorial, .popular) .txthead h2 { color: #ffcb08; background: none; -webkit-text-fill-color: currentColor; }
    & .content.revamp .editorial.revamp { background: #17130b; }
    & .editorial .txt a { color: #fff; }
    & .dose-article-panel:not(:has(*)) { display: none; }
    & :is(a, button):focus-visible { outline: 2px solid #ffcb08; outline-offset: 2px; }

    /* The shared header owns progress; retain the editable campaign character. */
    & .dose-site-header > .pacman:not(.ragnarok-pacman),
    & .ragnarok-pacman::after { display: none; }
    & .ragnarok-pacman .wp-block-group,
    & .ragnarok-fireball { margin: 0; padding: 0; }
    & .dose-site-header .ragnarok-pacman { height: 32px; padding: 0; overflow: visible; }
    & .dose-site-header .ragnarok-pacman .pacman_in { height: 32px; overflow: visible; }
    & .dose-site-header .ragnarok-pacman .dot_mask { height: 32px; background: transparent; }
    & .ragnarok-pacman .dot_mask::before,
    & .ragnarok-pacman .dot_mask::after { content: ""; position: absolute; inset: 14px auto auto 0; height: 2px; z-index: -1; }
    & .ragnarok-pacman .dot_mask::before { width: 100%; background: #49402b; }
    & .ragnarok-pacman .dot_mask::after { width: var(--dose-pacman-progress, 0px); max-width: 100%; background: linear-gradient(90deg, #e28c20, #ffcb08); transition: width 200ms ease-out; }
    & .dose-site-header .ragnarok-pacman .pacman_body { display: block; width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .dose-ragnarok-single .ragnarok-pacman .dot_mask::after { transition: none; }
}