/*
 * Nettoge Core plugin bridge (child-theme layer — do not edit nettoge-core CSS).
 * Maps module --*- vars and hardcoded fallbacks to Phase 12 theme tokens.
 */

/* Article Fan */
.nettoge-article-fan__shell {
    background: color-mix(in srgb, var(--surface-widget) 82%, transparent);
    border-color: var(--border-form-input);
    box-shadow: var(--shadow-sidebar-keycap, 0 2px 10px rgba(0, 0, 0, 0.06));
}

.nettoge-article-fan__portrait-placeholder {
    background: color-mix(in srgb, var(--surface-widget) 90%, var(--surface-blogcard-soft));
    color: var(--text-comment-muted);
    box-shadow: inset 0 0 0 1px var(--border-form-input);
}

.nettoge-article-fan__btn-yes:hover:not(:disabled) {
    box-shadow: 0 3px 0 color-mix(in srgb, var(--color_text) 12%, transparent);
}

.nettoge-article-fan__message {
    color: var(--color_main);
}

/* Character Profile */
.character-profile-block {
    --cp-surface: var(--surface-widget);
    --cp-surface-alt: var(--surface-blogcard-soft);
    --cp-border: var(--border-form-input);
    --cp-tag-bg: var(--surface-blogcard-soft);
    --cp-button-bg: var(--color_main, var(--brand-terracotta));
    --cp-shadow: var(--shadow-sidebar-popover, 0 10px 24px rgba(15, 23, 42, 0.08));
}

/* Keyboard Style */
.keybord,
kbd.keybord {
    --kbd-bg: var(--surface-inline-code-article);
    --kbd-border: var(--border-form-input);
    --kbd-highlight: var(--surface-widget);
    --kbd-shadow: color-mix(in srgb, var(--color_text) 16%, transparent);
    --kbd-inset-active: var(--surface-blogcard-soft);
}

/* BGM Player — reinforce token cascade over plugin fallbacks */
.bgm-player-block {
    --bgm-accent: var(--surface-comment-toolbar);
    --bgm-sticky-bg: var(--surface-floating-header-scrim);
    --bgm-sticky-border: var(--border-floating-header);
    --bgm-sticky-border-strong: var(--border-mobile-toc);
    --bgm-surface: var(--surface-blogcard);
    --bgm-surface-soft: var(--surface-blogcard-soft);
    --bgm-border: var(--border-form-input);
    --bgm-border-strong: var(--scrollbar-thumb);
    --bgm-text: var(--color_text);
    --bgm-muted: var(--text-comment-muted);
    --bgm-accent-inverse: var(--border-blogcard-accent);
    --bgm-seek-track: var(--border-form-input);
    --bgm-seek-fill: var(--color_main, var(--border-blogcard-accent));
    --bgm-seek-track-muted: var(--scrollbar-thumb);
    --bgm-shadow: var(--shadow-sidebar-popover, 0 12px 28px rgba(15, 23, 42, 0.08));
}

.bgm-player-block__sticky-bar {
    background: var(--bgm-sticky-bg);
    border-color: var(--bgm-sticky-border);
    color: var(--bgm-text);
}

/*
 * ダーク — accent-inverse が border-blogcard-accent (= color_text) になると
 * 白文字ラベル・再生ボタンが薄灰背景になり視認できない。
 */
html[data-nettoge-theme="dark"] .bgm-player-block,
body[data-nettoge-theme="dark"] .bgm-player-block {
    --bgm-sticky-bg: rgba(45, 45, 48, 0.98);
    --bgm-sticky-border: rgba(255, 255, 255, 0.12);
    --bgm-sticky-border-strong: rgba(255, 255, 255, 0.18);
    --bgm-text: #e8e8e8;
    --bgm-muted: #a3a3a3;
    --bgm-accent: #46464a;
    --bgm-accent-inverse: var(--color_main, var(--brand-terracotta));
    --bgm-seek-track-muted: #5a5a5a;
    --bgm-seek-fill: var(--color_main, var(--brand-terracotta));
    --bgm-border-strong: #6b6b6b;
    --bgm-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

html[data-nettoge-theme="dark"] .bgm-player-block__label-link,
body[data-nettoge-theme="dark"] .bgm-player-block__label-link {
    color: var(--text-on-accent, #fff);
    background: var(--color_main, var(--brand-terracotta));
}

html[data-nettoge-theme="dark"] .bgm-player-block__button.is-primary,
html[data-nettoge-theme="dark"] .bgm-player-block__button:hover,
html[data-nettoge-theme="dark"] .bgm-player-block__button:focus-visible,
body[data-nettoge-theme="dark"] .bgm-player-block__button.is-primary,
body[data-nettoge-theme="dark"] .bgm-player-block__button:hover,
body[data-nettoge-theme="dark"] .bgm-player-block__button:focus-visible {
    color: var(--text-on-accent, #fff);
    background: var(--color_main, var(--brand-terracotta));
    border-color: var(--color_main, var(--brand-terracotta));
}

html[data-nettoge-theme="dark"] .bgm-player-block__sticky-bar .bgm-player-block__button:not(.is-primary):not(:hover):not(:focus-visible),
body[data-nettoge-theme="dark"] .bgm-player-block__sticky-bar .bgm-player-block__button:not(.is-primary):not(:hover):not(:focus-visible) {
    color: #e8e8e8;
}

html[data-nettoge-theme="dark"] .bgm-player-block__seek-fill,
body[data-nettoge-theme="dark"] .bgm-player-block__seek-fill {
    background: var(--color_main, var(--brand-terracotta));
}

/* GitHub Release */
.github-release-info {
    background: var(--surface-widget);
    border-color: var(--border-form-input);
    color: var(--color_text);
}

.release-description {
    background: var(--surface-blogcard-soft);
    border-left-color: var(--color_main);
    color: var(--color_text);
}

.grd-release-meta {
    color: var(--text-comment-muted);
}

.shortcode-display {
    background: var(--surface-blogcard-soft);
    color: var(--color_text);
}

/* Inline Gallery */
.inline-gallery-lightbox {
    --igl-surface: var(--surface-widget);
    --igl-surface-alt: var(--surface-blogcard-soft);
    --igl-border: var(--border-form-input);
    --igl-border-strong: var(--scrollbar-thumb);
    --igl-text: var(--color_text);
    --igl-accent: var(--color_main, var(--border-blogcard-hover));
    --igl-accent-hover: var(--color_main_dark, var(--color_main));
    --igl-shadow: var(--shadow-sidebar-popover, 0 18px 48px rgba(0, 0, 0, 0.32));
    --igl-overlay: var(--surface-sp-menu-overlay);
}

/* Inline Spoiler */
.isr-spoiler {
    --isr-hidden-bg: var(--border-blogcard-accent);
}

/* Game Mod Block */
.game-mod-block {
    --game-mod-surface: var(--surface-comment-toolbar);
    --game-mod-tag-bg: var(--surface-blogcard-soft);
    --game-mod-hover: var(--surface-blogcard-soft);
}

/* Image Comparison (nettoge-core) */
.ics-block {
    --ics-surface-alt: var(--surface-comment-toolbar);
    --ics-surface-hover: var(--surface-blogcard-soft);
    --ics-text: var(--color_text);
    --ics-control-border: var(--border-form-input);
    --ics-handle: var(--surface-widget);
    --ics-handle-shadow: color-mix(in srgb, var(--color_text) 28%, transparent);
}

/* Vertical Flowchart */
.nettoge-vflow {
    --nettoge-vflow-border: var(--border-blogcard-accent);
    --nettoge-vflow-muted: var(--text-comment-muted);
    --nettoge-vflow-bg: var(--nettoge-page-bg);
    --nettoge-vflow-number-bg: var(--border-blogcard-accent);
    --nettoge-vflow-number-fg: var(--text-on-accent);
}

/* Nettoge Code Block — syntax over plugin hardcoded colors */
body :is(.post_content, .entry-content, .wp-block-post-content) figure.wp-block-nettoge-code-block.code-block :is(.token.comment, .token.prolog, .token.doctype, .token.cdata, .tk-c) {
    color: var(--syntax-comment);
}

body :is(.post_content, .entry-content, .wp-block-post-content) figure.wp-block-nettoge-code-block.code-block :is(.token.keyword, .token.atrule, .tk-k, .tk-t) {
    color: var(--syntax-keyword);
    font-weight: 600;
}

body :is(.post_content, .entry-content, .wp-block-post-content) figure.wp-block-nettoge-code-block.code-block :is(.token.property, .token.attr-name, .token.deleted, .token.selector, .tk-p, .tk-n) {
    color: var(--syntax-property);
}

body :is(.post_content, .entry-content, .wp-block-post-content) figure.wp-block-nettoge-code-block.code-block :is(.token.string, .token.char, .token.attr-value, .token.inserted, .tk-s) {
    color: var(--syntax-string);
}

body :is(.post_content, .entry-content, .wp-block-post-content) figure.wp-block-nettoge-code-block.code-block :is(.token.function, .token.class-name, .token.tag, .tk-f) {
    color: var(--syntax-function);
    font-weight: 500;
}

body :is(.post_content, .entry-content, .wp-block-post-content) figure.wp-block-nettoge-code-block.code-block :is(.token.operator, .token.punctuation, .token.number, .token.boolean, .tk-o) {
    color: var(--syntax-punctuation);
}

body :is(.post_content, .entry-content, .wp-block-post-content) figure.wp-block-nettoge-code-block.code-block :is(.token.tag .token.punctuation, .token.attr-value .token.punctuation, .token.entity) {
    color: var(--syntax-punctuation);
}