/*
Theme Name: MANGA TITLE Portal
Description: Obsidian Reader portal theme without runtime CSS dependencies.
Version: 1.3.0
*/

:root {
    --bg: #101010;
    --surface-1: #1e1e1e;
    --surface-2: #2a2a2a;
    --surface-3: #353534;
    --text: #ffffff;
    --text-muted: #a0a0a0;
    --text-soft: #c2c6d8;
    --primary: #b3c5ff;
    --primary-strong: #1a67f9;
    --primary-hover: #dbe1ff;
    --border: #424655;
    --focus: #b3c5ff;
    --container: 1280px;
    --gutter: 24px;
    --radius-control: 8px;
    --radius-panel: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.55; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, a, input, select, textarea, summary, [tabindex] { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); background: var(--primary-hover); color: #101010; padding: 10px 14px; border-radius: var(--radius-control); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.site-container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(16, 16, 16, .96); border-bottom: 1px solid rgba(66, 70, 85, .8); }
.site-header__inner { min-height: 80px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--primary); text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.brand img { width: 48px; height: 48px; border: 1px solid rgba(179, 197, 255, .35); border-radius: var(--radius-control); object-fit: cover; }
.site-nav { display: flex; align-items: stretch; gap: 8px; margin-left: auto; }
.site-nav a, .footer-nav a, .nav-dropdown__toggle { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; color: var(--text-soft); text-decoration: none; border-radius: var(--radius-control); }
.site-nav a:hover, .site-nav a:focus-visible, .footer-nav a:hover, .footer-nav a:focus-visible, .nav-dropdown__toggle:hover, .nav-dropdown__toggle:focus-visible { color: var(--primary-hover); background: rgba(179, 197, 255, .08); }
.site-nav a.is-current { color: var(--primary); font-weight: 700; }
.nav-dropdown { position: relative; }
.nav-dropdown__toggle { gap: 8px; border: 0; background: transparent; font: inherit; cursor: pointer; }
.nav-dropdown__chevron { font-size: 18px; line-height: 1; transition: transform 180ms ease; }
.nav-dropdown.is-open .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; min-width: 190px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: rgba(30, 30, 30, .98); box-shadow: 0 16px 36px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; }
.nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu, .nav-dropdown.is-open .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown__menu a { width: 100%; }
.menu-toggle { display: none; border: 1px solid var(--border); min-width: 44px; min-height: 44px; padding: 10px; border-radius: var(--radius-control); background: var(--surface-1); color: var(--text); cursor: pointer; }
.menu-toggle__icon { display: grid; gap: 4px; width: 22px; }
.menu-toggle__icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.site-main { padding-block: 32px 72px; }
.hero { position: relative; isolation: isolate; min-height: 0; max-width: 100%; aspect-ratio: 1280 / 486; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: linear-gradient(120deg, #0e0e0e 0%, #171d35 48%, #101010 100%); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; user-select: none; -webkit-user-drag: none; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(16, 16, 16, .82) 0%, rgba(16, 16, 16, .76) 43%, rgba(16, 16, 16, .56) 74%, rgba(16, 16, 16, .4) 100%), linear-gradient(0deg, rgba(16, 16, 16, .3), rgba(16, 16, 16, .3)); }
.hero__content { position: relative; z-index: 1; width: min(100%, 680px); padding: 48px; }
.eyebrow { margin: 0 0 16px; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 16ch; margin-bottom: 20px; font-size: clamp(32px, 5vw, 48px); line-height: 1.17; letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; letter-spacing: -.02em; }
h3 { margin-bottom: 0; font-size: 18px; line-height: 1.45; }
.hero__description { max-width: 62ch; margin-bottom: 28px; color: var(--text-soft); font-size: 18px; }
.button { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: var(--radius-control); font-weight: 700; text-decoration: none; }
.button--primary { background: var(--primary-strong); color: #fff; }
.button--primary:hover, .button--primary:focus-visible { background: #0054d7; }
.section-block { margin-top: 56px; content-visibility: auto; contain-intrinsic-size: 520px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.section-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.section-link:hover, .section-link:focus-visible { color: var(--primary-hover); }
.genre-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.genre-chip { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; color: var(--text-soft); border: 1px solid var(--border); border-radius: 999px; text-decoration: none; }
.genre-chip:hover, .genre-chip:focus-visible { color: var(--primary-hover); border-color: var(--primary); background: rgba(179, 197, 255, .08); }
.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--gutter); align-items: start; content-visibility: auto; contain-intrinsic-size: 980px; }
.manga-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.manga-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--text); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.manga-card:hover, .manga-card:focus-visible { transform: translateY(-2px); border-color: var(--primary); background: var(--surface-2); }
.manga-card__label { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 8px; color: #101010; background: var(--primary); border-radius: 4px; font-size: 12px; font-weight: 700; }
.manga-card__media { aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-3); }
.manga-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.manga-card:hover .manga-card__image { transform: scale(1.02); }
.manga-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 12px; }
.manga-card__body h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.manga-card__body h3 a { color: var(--text); text-decoration: none; }
.manga-card__body h3 a:hover, .manga-card__body h3 a:focus-visible { color: var(--primary-hover); }
.manga-card__body p { margin: auto 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.image-fallback { display: grid; height: 100%; place-items: center; color: var(--primary); font-size: 48px; font-weight: 700; }
.sidebar-panel { margin-top: 0; padding: 24px; background: rgba(30, 30, 30, .8); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.sidebar-list { display: grid; gap: 16px; margin-top: 20px; }
.sidebar-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 64px; padding: 8px; margin: -8px; border-radius: var(--radius-control); text-decoration: none; }
.sidebar-card:hover, .sidebar-card:focus-visible { background: rgba(179, 197, 255, .08); }
.sidebar-card__media { width: 64px; height: 64px; overflow: hidden; background: var(--surface-3); border-radius: 6px; }
.sidebar-card__image { width: 100%; height: 100%; object-fit: cover; }
.sidebar-card h3 { display: -webkit-box; overflow: hidden; color: var(--text); font-size: 16px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tag, .article-card__meta { color: var(--text-muted); font-size: 12px; }
.tag { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--surface-3); border-radius: 4px; }
.latest-section { margin-top: 72px; }
.blog-intro { max-width: 980px; padding: 40px; background: linear-gradient(135deg, rgba(26, 103, 249, .14), rgba(30, 30, 30, .92)); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.blog-intro h1 { max-width: 22ch; }
.blog-intro__copy { max-width: 78ch; color: var(--text-soft); }
.blog-intro__copy p { margin-bottom: 16px; }
.blog-intro__copy p:last-child { margin-bottom: 0; }
.blog-categories { max-width: 980px; }
.blog-guide-link { margin: 20px 0 0; }
.blog-articles { margin-top: 72px; }
.blog-articles .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-page { max-width: 980px; margin-inline: auto; }
.about-intro { padding: 40px; background: linear-gradient(135deg, rgba(26, 103, 249, .14), rgba(30, 30, 30, .92)); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.about-intro h1 { max-width: 24ch; }
.about-intro__lead { max-width: 78ch; margin-bottom: 0; color: var(--text-soft); font-size: 18px; }
.about-cover { margin: 24px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); }
.about-cover picture { display: block; }
.about-cover__image { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 501; object-fit: cover; }
.about-cover figcaption { padding: 10px 16px; color: var(--text-soft); font-size: 13px; }
.about-content { display: grid; gap: 0; margin-top: 24px; }
.about-section { padding: 32px 0; border-bottom: 1px solid var(--border); }
.about-section:last-child { border-bottom: 0; }
.about-section h2 { max-width: 32ch; margin-bottom: 16px; }
.about-section p { max-width: 78ch; color: var(--text-soft); }
.about-section .about-process { max-width: 78ch; padding-left: 24px; color: var(--text-soft); }
.about-section .about-process li { margin: 10px 0; }
.about-section a { color: var(--primary); font-weight: 700; }
.about-section a:hover, .about-section a:focus-visible { color: var(--primary-hover); }
.review-intro { max-width: 980px; padding: 40px; background: linear-gradient(135deg, rgba(26, 103, 249, .14), rgba(30, 30, 30, .92)); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.review-intro h1 { max-width: 24ch; }
.review-intro__lead { max-width: 78ch; margin-bottom: 0; color: var(--text-soft); font-size: 18px; }
.review-articles { margin-top: 72px; }
.review-support-link { margin: 32px 0 0; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.article-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); }
.article-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.article-card__image { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; }
.article-card__body h3 a { display: flex; align-items: center; width: 100%; min-height: 44px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.article-card__body h3 a:hover, .article-card__body h3 a:focus-visible { color: var(--primary-hover); }
.article-card__body p:last-child { margin-bottom: 0; color: var(--text-soft); font-size: 14px; }
.completed-manga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.completed-manga-grid .completed-card__media { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-3); }
.completed-manga-grid .completed-card__media > a { position: absolute; inset: 0; display: block; }
.completed-manga-grid .completed-card__image, .article-content .completed-card__image { display: block; width: 100% !important; height: 100% !important; min-height: 100%; max-height: none; aspect-ratio: 2 / 3; object-fit: cover; }
.completed-manga-grid .completed-card__image { transition: transform 180ms ease; }
.completed-manga-grid .completed-card__media:hover .completed-card__image, .completed-manga-grid .completed-card__media:focus-visible .completed-card__image { transform: scale(1.02); }
.trending-sakamoto-item, .trending-one-piece-item { display: flow-root; }
.trending-inline-figure { width: min(220px, 100%); margin: 12px auto 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-1); }
.trending-inline-image { display: block; width: 100%; height: auto; }
.trending-inline-figure figcaption { padding: 6px 8px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.action-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 32px; }
.action-article-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); }
.action-card__media, .romance-card__media, .fantasy-card__media, .mystery-card__media { position: relative; }
.action-card__media > a, .romance-card__media > a, .fantasy-card__media > a, .mystery-card__media > a { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.action-card__image, .article-content .action-card__image { display: block; width: 100% !important; height: 100% !important; min-height: 100%; max-height: none; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 180ms ease; }
.action-card__media:hover .action-card__image, .action-card__media:focus-visible .action-card__image { transform: scale(1.02); }
.action-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; }
.action-card__body h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.action-card__body h3 a:hover, .action-card__body h3 a:focus-visible { color: var(--primary-hover); }
.action-card__body > p { margin-bottom: 0; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.action-card__credit { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(66, 70, 85, .7); color: var(--text-muted) !important; font-size: 12px !important; line-height: 1.45 !important; }
.romance-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 32px; }
.romance-article-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); }
.romance-card__media { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-3); }
.romance-card__image, .article-content .romance-card__image { display: block; width: 100% !important; height: 100% !important; min-height: 100%; max-height: none; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 180ms ease; }
.romance-card__media:hover .romance-card__image, .romance-card__media:focus-visible .romance-card__image { transform: scale(1.02); }
.romance-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; }
.romance-card__body h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.romance-card__body h3 a:hover, .romance-card__body h3 a:focus-visible { color: var(--primary-hover); }
.romance-card__body > p { margin-bottom: 0; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.romance-card__credit { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(66, 70, 85, .7); color: var(--text-muted) !important; font-size: 12px !important; line-height: 1.45 !important; }
.fantasy-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 32px; }
.fantasy-article-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); }
.fantasy-card__media { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-3); }
.fantasy-card__image, .article-content .fantasy-card__image { display: block; width: 100% !important; height: 100% !important; min-height: 100%; max-height: none; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 180ms ease; }
.fantasy-card__media:hover .fantasy-card__image, .fantasy-card__media:focus-visible .fantasy-card__image { transform: scale(1.02); }
.fantasy-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; }
.fantasy-card__body h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.fantasy-card__body h3 a:hover, .fantasy-card__body h3 a:focus-visible { color: var(--primary-hover); }
.fantasy-card__body > p { margin-bottom: 0; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.fantasy-card__credit { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(66, 70, 85, .7); color: var(--text-muted) !important; font-size: 12px !important; line-height: 1.45 !important; }
.article-page { max-width: 900px; margin-inline: auto; }
.article-header { margin-bottom: 24px; }
.article-header h1 { max-width: 24ch; }
.article-content { line-height: 1.7; }
.article-content p, .article-content ul, .article-content ol { max-width: 78ch; }
.article-content img { max-width: 100%; height: auto; }
.article-content .creator-figure { width: min(100%, 520px); margin: 24px 0 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-1); }
.article-content .creator-figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-content .creator-figure figcaption { padding: 8px 12px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.article-content .manga-illustration { width: min(100%, 520px); margin: 24px auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-1); }
.article-content .manga-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.article-content .manga-illustration figcaption { padding: 8px 12px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.manga-card__credit { margin: auto 0 0 !important; color: var(--text-muted); font-size: 11px !important; line-height: 1.4 !important; }
/* H162: standalone source links need a real touch target, including wrapped credits. */
.manga-card__credit a { display: flex; align-items: center; width: 100%; min-width: 44px; min-height: 44px; padding: 8px 0; color: var(--primary); font-size: 12px; line-height: 1.5; text-decoration: underline; overflow-wrap: anywhere; }
.article-content p a, .article-content li a { display: inline-block; max-width: 100%; min-height: 44px; padding: 10px 0; color: var(--primary); line-height: 24px; vertical-align: middle; overflow-wrap: anywhere; }
.article-content p a:hover, .article-content p a:focus-visible, .article-content li a:hover, .article-content li a:focus-visible { color: var(--primary-hover); }
.article-content .article-hero { width: min(100%, 683px); aspect-ratio: 2 / 3; margin: 24px auto; overflow: hidden; background: var(--surface-3); border-radius: var(--radius-panel); }
.article-content .article-hero img { width: 100%; height: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.article-content figure.article-hero--manga-artwork { width: min(100%, 700px); margin: 24px auto; aspect-ratio: auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); }
.article-content figure.article-hero--manga-artwork > img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.article-content img.article-hero--manga-artwork { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
/* Reserve the known 2:3 Medalist cover space before its eager image loads. */
body.page-id-1111 .article-content figure.article-hero--manga-artwork { aspect-ratio: 2 / 3; }
body.page-id-1111 .article-content figure.article-hero--manga-artwork > img { height: 100%; aspect-ratio: 2 / 3; }
.article-content .article-hero--genre-illustration { aspect-ratio: 3 / 2; }
.article-content .article-hero--genre-illustration img { height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-content .article-hero--manhwa-historical { aspect-ratio: 899 / 588; }
.article-content .article-hero--manhwa-historical img { height: 100%; aspect-ratio: 899 / 588; object-fit: cover; }
.article-content .article-hero--manga-artwork figcaption { padding: 8px 12px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.article-content .historical-magazine-figure { width: min(100%, 560px); margin: 24px auto; }
.article-content .historical-magazine-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-control); }
.article-content .historical-magazine-figure figcaption { margin-top: 8px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.article-content .manhwa-series-figure { box-sizing: border-box; width: min(150px, 100%); margin: 24px 0 10px; padding: 6px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-1); }
.article-content .manhwa-series-figure > a { display: block; border-radius: 4px; }
.article-content .manhwa-series-figure > a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.article-content .manhwa-series-figure img { display: block; width: 100%; height: 170px; object-fit: contain; background: var(--surface-3); border-radius: 4px; }
.article-content .manhwa-series-figure figcaption { padding: 7px 2px 2px; color: var(--text-soft); font-size: 12px; line-height: 1.4; }
.article-content .manhwa-series-figure figcaption a { color: var(--primary); }
.article-content .mystery-recommendation-figure { width: min(100%, 320px); margin: 24px auto 16px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-control); }
.article-content .mystery-recommendation-figure img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.article-content .mystery-recommendation-figure figcaption { padding: 8px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.article-content .mystery-series-figure { width: min(100%, 320px); margin: 24px auto 16px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-control); }
.article-content .mystery-series-figure img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.article-content .mystery-series-figure figcaption { padding: 8px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.mystery-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 32px; }
.mystery-article-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); }
.mystery-card__media { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-3); }
.mystery-card__image, .article-content .mystery-card__image { display: block; width: 100% !important; height: 100% !important; min-height: 100%; max-height: none; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 180ms ease; }
.mystery-card__media:hover .mystery-card__image, .mystery-card__media:focus-visible .mystery-card__image { transform: scale(1.02); }
.mystery-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; }
.mystery-card__body h3 { margin: 0; }
.mystery-card__body h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.mystery-card__body h3 a:hover, .mystery-card__body h3 a:focus-visible { color: var(--primary-hover); }
.mystery-card__body > p { margin-bottom: 0; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.mystery-card__credit { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(66, 70, 85, .7); color: var(--text-muted) !important; font-size: 12px !important; line-height: 1.45 !important; }
/* H210: normalize stored-content manga cover cards whose images have no component class. */
.action-card__media,
.romance-card__media,
.fantasy-card__media,
.mystery-card__media,
.completed-manga-grid .completed-card__media { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-3); }
.action-card__media > a,
.romance-card__media > a,
.fantasy-card__media > a,
.mystery-card__media > a,
.completed-manga-grid .completed-card__media > a { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.action-card__media img,
.romance-card__media img,
.fantasy-card__media img,
.mystery-card__media img,
.completed-manga-grid .completed-card__media img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100%; max-height: none !important; aspect-ratio: 2 / 3; object-fit: cover !important; object-position: center top; transition: transform 180ms ease; }
.action-card__media:hover img,
.romance-card__media:hover img,
.fantasy-card__media:hover img,
.mystery-card__media:hover img,
.completed-manga-grid .completed-card__media:hover img { transform: scale(1.02); }
.article-content .article-toc { margin: 28px 0 36px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.article-content .article-toc h2 { margin: 0 0 10px; font-size: 1.25rem; }
.article-content .article-toc ol { margin: 0; padding-left: 22px; }
.article-content .article-toc li { margin: 4px 0; }
.article-content > h2 { scroll-margin-top: 88px; }
.article-content > h3 { scroll-margin-top: 88px; }
.article-content .historical-magazine-figure figcaption a { color: var(--primary); }
.article-content .manga-90s-figure { width: min(100%, 680px); margin: 24px 0; }
.article-content .manga-90s-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-control); }
.article-content .manga-90s-figure figcaption { margin-top: 8px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.article-content .manga-90s-figure figcaption a { color: var(--primary); }
.article-content .manga-90s-work-figure { width: min(100%, 320px); margin: 24px 0; }
.article-content .manga-90s-work-figure img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; border-radius: var(--radius-control); }
.article-content .manga-90s-work-figure figcaption { margin-top: 8px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.article-content .manga-90s-work-figure figcaption a { color: var(--primary); }
.article-content .box-set-inline-figure { width: min(100%, 320px); margin: 24px 0 14px; padding: 10px; box-sizing: border-box; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.article-content .box-set-inline-figure img { display: block; width: 100%; height: 220px; object-fit: contain; border-radius: var(--radius-control); background: #11141b; }
.article-content .box-set-inline-figure figcaption { margin-top: 9px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.article-content .box-set-inline-figure figcaption a { color: var(--primary); }
.article-content .box-set-inline-figure + h3 { margin-top: 18px; }
.article-content .box-set-featured-figure { width: min(100%, 320px); margin: 22px 0 20px; padding: 10px; box-sizing: border-box; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.article-content .box-set-featured-figure img { display: block; width: 100%; height: 220px; object-fit: contain; border-radius: var(--radius-control); background: #11141b; }
.article-content .box-set-featured-figure figcaption { margin-top: 9px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.article-content .box-set-featured-figure figcaption a { color: var(--primary); }
@media (max-width: 760px) {
    .article-content .box-set-inline-figure { width: min(100%, 300px); margin: 20px 0 12px; padding: 8px; }
    .article-content .box-set-inline-figure img { height: 190px; }
    .article-content .box-set-featured-figure { width: min(100%, 300px); margin: 18px 0; padding: 8px; }
    .article-content .box-set-featured-figure img { height: 190px; }
}
.reader-reviews { margin-top: 52px; padding-top: 8px; border-top: 1px solid var(--border); }
.reader-reviews__intro { max-width: 70ch; color: var(--text-soft); }
.reader-reviews__notice { padding: 12px 16px; color: var(--text); background: var(--surface-1); border: 1px solid var(--border); border-left: 4px solid var(--primary-strong); border-radius: var(--radius-control); }
.comment-list { margin: 24px 0; padding: 0; list-style: none; }
.comment-list .children { margin: 16px 0 0; padding-left: 24px; list-style: none; }
.comment-body { margin: 16px 0; padding: 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.comment-author .avatar { border-radius: 50%; }
.comment-metadata { margin-top: 4px; font-size: 14px; }
.comment-content { margin-top: 12px; overflow-wrap: anywhere; }
.comment-reply-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.comment-form { margin-top: 24px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; }
.comment-form label { display: block; margin: 12px 0 5px; font-weight: 700; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; max-width: 100%; padding: 10px; color: #fff; background: var(--bg); border: 1px solid #6d7280; border-radius: var(--radius-control); box-sizing: border-box; font: inherit; }
.comment-form textarea { min-height: 140px; resize: vertical; }
/* H163: use the site focus treatment instead of relying on a browser-specific form outline. */
.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea, input[type="checkbox"]):focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; }
.comment-form .submit { min-height: 44px; margin-top: 8px; padding: 10px 16px; color: #fff; background: var(--primary-strong); border: 0; border-radius: var(--radius-control); cursor: pointer; font: inherit; font-weight: 700; }
.comment-form .submit:hover { background: #0054d7; }
.comment-notes, .logged-in-as, .comment-form-cookies-consent { color: var(--text-soft); font-size: 14px; }
.no-reader-reviews { color: var(--text-soft); }
.policy-page { max-width: 980px; margin-inline: auto; }
.policy-intro { padding: 40px; background: linear-gradient(135deg, rgba(26, 103, 249, .14), rgba(30, 30, 30, .92)); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.policy-intro h1 { max-width: 24ch; }
.policy-intro__lead { max-width: 78ch; margin-bottom: 0; color: var(--text-soft); font-size: 18px; }
.policy-content { margin-top: 24px; }
.policy-section { padding: 32px 0; border-bottom: 1px solid var(--border); }
.policy-section:last-child { border-bottom: 0; }
.policy-section h2 { max-width: 32ch; margin-bottom: 16px; }
.policy-section p, .policy-section li { max-width: 78ch; color: var(--text-soft); }
.policy-section a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); font-weight: 700; }
.policy-section a:hover, .policy-section a:focus-visible { color: var(--primary-hover); }
.policy-section ul { max-width: 78ch; padding-left: 24px; color: var(--text-soft); }
.contact-social__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.contact-social__link { width: 100%; min-height: 72px; justify-content: space-between; gap: 16px; padding: 12px 16px; color: var(--text) !important; background: linear-gradient(135deg, rgba(179, 197, 255, .1), rgba(30, 30, 30, .96)); border: 1px solid var(--border); border-radius: var(--radius-control); text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.contact-social__link:hover, .contact-social__link:focus-visible { color: var(--text) !important; background: rgba(179, 197, 255, .14); border-color: var(--primary); transform: translateY(-1px); }
.contact-social__identity { display: grid; min-width: 0; gap: 2px; }
.contact-social__platform { color: var(--text); font-size: 16px; font-weight: 800; }
.contact-social__handle { overflow-wrap: anywhere; color: var(--text-soft); font-size: 13px; font-weight: 500; }
.contact-social__action { flex: 0 0 auto; color: var(--primary); font-size: 12px; font-weight: 700; white-space: nowrap; }
.policy-draft-notice { margin-bottom: 8px; padding: 16px 20px; color: var(--text); background: rgba(26, 103, 249, .12); border: 1px solid var(--primary); border-left-width: 5px; border-radius: var(--radius-control); }
.contact-popup { width: min(calc(100vw - 32px), 480px); max-height: calc(100dvh - 48px); margin: auto; padding: 0; color: var(--text); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow-y: auto; }
body.contact-popup-open { overflow: hidden; }
.contact-popup::backdrop { background: var(--bg); opacity: .72; }
.contact-popup[open] { animation: contact-popup-in 180ms ease; }
@keyframes contact-popup-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.contact-popup__panel { position: relative; display: flex; max-height: calc(100dvh - 48px); flex-direction: column; padding: 24px; }
.contact-popup__panel .eyebrow, .contact-popup__panel h2 { padding-right: 44px; }
.contact-popup__close { position: absolute; top: 16px; right: 16px; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font-size: 28px; line-height: 1; }
.contact-popup__close:hover, .contact-popup__close:focus-visible { color: var(--primary-hover); background: var(--surface-2); }
.contact-popup__intro { margin-bottom: 20px; color: var(--text-soft); }
.contact-popup__channels { display: grid; min-height: 0; flex: 1 1 auto; gap: 8px; overflow-y: auto; }
.contact-popup__channel { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-control); text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease; }
.contact-popup__channel:hover, .contact-popup__channel:focus-visible { background: var(--surface-1); border-color: var(--primary); }
.contact-popup__channel--disabled { opacity: .56; }
.contact-popup__channel-label { font-weight: 700; }
.contact-popup__channel-note { color: var(--text-muted); font-size: 12px; text-align: right; }
.contact-popup__mute { display: flex; min-height: 48px; align-items: center; gap: 8px; margin-top: 12px; color: var(--text-soft); cursor: pointer; }
.contact-popup__mute input { width: 18px; height: 18px; accent-color: var(--primary-strong); }
.contact-popup__mute:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-control); }
.contact-popup__actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.contact-popup__actions .button { min-width: 112px; }
.empty-state { margin: 24px 0 0; padding: 24px; color: var(--text-soft); background: var(--surface-1); border: 1px dashed var(--border); border-radius: var(--radius-control); }
.seo-links { padding: 24px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.portal-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.portal-links a { min-height: 56px; display: flex; align-items: center; padding: 12px 16px; color: var(--primary); border: 1px solid var(--border); border-radius: var(--radius-control); text-decoration: none; }
.portal-links a:hover, .portal-links a:focus-visible { border-color: var(--primary); background: rgba(179, 197, 255, .08); }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 24px; margin-top: 24px; align-items: start; }
.faq-list { display: grid; gap: 12px; max-width: none; margin-top: 0; }
.faq-list details { padding: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); }
/* H162: make the whole FAQ header clickable while preserving native keyboard behavior. */
.faq-list summary { min-height: 44px; padding: 16px; border-radius: var(--radius-control); cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1.55; list-style-position: inside; }
.faq-list summary:hover, .faq-list summary:focus-visible { background: rgba(179, 197, 255, .08); }
.faq-list summary:focus-visible { outline-offset: -3px; }
.faq-list details p { max-width: 70ch; margin: 0; padding: 0 16px 16px; color: var(--text-soft); }
.manga-jigsaw { position: relative; overflow: hidden; margin-top: 12px; padding: 24px; background: linear-gradient(145deg, rgba(205,130,49,.2), var(--surface-1) 62%); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 14px 32px rgba(0,0,0,.22); }
.manga-jigsaw::after { position: absolute; right: -54px; bottom: -54px; width: 148px; height: 148px; border: 1px solid rgba(255,210,151,.24); border-radius: 50%; content: ''; pointer-events: none; }
.manga-jigsaw h3 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 26px; }
.manga-jigsaw__eyebrow { position: relative; z-index: 1; margin: 0 0 8px; color: #ffd199; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.manga-jigsaw__intro { position: relative; z-index: 1; margin-bottom: 16px; color: var(--text-soft); }
.manga-jigsaw__scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.manga-jigsaw__scene { position: relative; min-height: 100px; overflow: hidden; padding: 0; color: #fff; text-align: left; background: #151515; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.manga-jigsaw__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .68; transition: opacity 180ms ease, transform 180ms ease; }
.manga-jigsaw__scene span { position: relative; z-index: 1; min-height: 100px; display: flex; align-items: end; padding: 8px; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0) 70%); font-size: 12px; font-weight: 700; line-height: 1.3; }
.manga-jigsaw__scene:hover img, .manga-jigsaw__scene:focus-visible img, .manga-jigsaw__scene.is-selected img { opacity: 1; transform: scale(1.04); }
.manga-jigsaw__scene.is-selected { border-color: #ffd199; box-shadow: 0 0 0 2px rgba(255,209,153,.2); }
.manga-jigsaw__stats { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 10px 12px; color: var(--text-soft); background: rgba(16,16,16,.42); border: 1px solid rgba(255,209,153,.26); border-radius: var(--radius-control); font-size: 13px; }
.manga-jigsaw__stats strong { color: #fff4e3; font-variant-numeric: tabular-nums; }
.manga-jigsaw__stats span:last-child { color: #ffd199; letter-spacing: .08em; }
.manga-jigsaw__status { min-height: 22px; margin-bottom: 14px; color: #ffd199; font-size: 13px; font-weight: 700; }
.manga-jigsaw__start { min-height: 48px; width: 100%; margin-bottom: 14px; padding: 10px 14px; color: #241609; background: #ffd199; border: 0; border-radius: var(--radius-control); cursor: pointer; font: inherit; font-weight: 800; }
.manga-jigsaw__start:hover, .manga-jigsaw__start:focus-visible { background: #ffe2bb; }
.manga-jigsaw__board { width: min(100%, 560px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 auto; padding: 4px; background: rgba(11,9,6,.75); border: 1px solid rgba(255,209,153,.4); border-radius: 10px; }
.manga-jigsaw__piece { min-width: 0; min-height: 44px; aspect-ratio: 1; padding: 0; background-color: #2c2117; background-repeat: no-repeat; border: 1px solid rgba(255,233,199,.42); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.32); cursor: pointer; filter: grayscale(1) contrast(1.08); transition: filter 220ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.manga-jigsaw__board.is-ready .manga-jigsaw__piece { cursor: not-allowed; opacity: .72; }
.manga-jigsaw__piece:hover, .manga-jigsaw__piece:focus-visible { transform: scale(1.025); border-color: #ffe2bb; box-shadow: 0 0 0 2px rgba(255,209,153,.22); }
.manga-jigsaw__piece.is-selected { border-color: #fff4e3; box-shadow: 0 0 0 3px rgba(255,209,153,.44); transform: scale(.97); }
.manga-jigsaw__board.is-complete .manga-jigsaw__piece { cursor: default; filter: grayscale(0) contrast(1); border-color: rgba(255,245,213,.76); }
.manga-jigsaw__help { margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.manga-jigsaw__restart { min-height: 44px; width: 100%; margin-top: 12px; padding: 9px 14px; color: #ffd199; background: transparent; border: 1px solid rgba(255,209,153,.45); border-radius: var(--radius-control); cursor: pointer; font: inherit; }
.manga-jigsaw__restart:hover, .manga-jigsaw__restart:focus-visible { background: rgba(255,209,153,.1); border-color: #ffe2bb; }
.faq-games { display: grid; gap: 24px; }
.manga-puzzle { position: relative; overflow: hidden; padding: 24px; background: linear-gradient(145deg, rgba(134,91,255,.19), var(--surface-1) 62%); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 14px 32px rgba(0,0,0,.22); }
.manga-puzzle::after { position: absolute; top: -58px; right: -58px; width: 160px; height: 160px; border: 1px solid rgba(204,190,255,.24); border-radius: 50%; content: ''; pointer-events: none; }
.manga-puzzle h3 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 26px; }
.manga-puzzle__eyebrow { position: relative; z-index: 1; margin: 0 0 8px; color: #c7bbff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.manga-puzzle__intro { position: relative; z-index: 1; margin-bottom: 16px; color: var(--text-soft); }
.manga-puzzle__stats { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 12px; color: var(--text-soft); background: rgba(16,16,16,.38); border: 1px solid rgba(199,187,255,.26); border-radius: var(--radius-control); font-size: 13px; }
.manga-puzzle__stats strong { color: #eeeaff; font-variant-numeric: tabular-nums; }
.manga-puzzle__status { min-height: 22px; margin-bottom: 14px; color: #c7bbff; font-size: 13px; font-weight: 700; }
.manga-puzzle__start { min-height: 48px; width: 100%; margin: 0 0 14px; padding: 10px 14px; color: #15132a; background: #c7bbff; border: 0; border-radius: var(--radius-control); cursor: pointer; font: inherit; font-weight: 800; }
.manga-puzzle__start:hover, .manga-puzzle__start:focus-visible { background: #ded7ff; }
.manga-puzzle__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.manga-puzzle__card { position: relative; min-height: 60px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 0; color: #fff; background: radial-gradient(circle at 27% 20%, rgba(130,109,255,.55), transparent 32%), linear-gradient(145deg, #302759, #121225); border: 1px solid rgba(199,187,255,.6); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 12px rgba(0,0,0,.2); cursor: pointer; font: 700 26px/1 Georgia, serif; isolation: isolate; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.manga-puzzle__card::before { position: absolute; inset: 6px; z-index: -1; border: 1px solid rgba(232,224,255,.35); border-radius: 6px; content: ''; }
.manga-puzzle__card::after { position: absolute; inset: -70%; z-index: 2; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.24) 50%, transparent 58%); content: ''; pointer-events: none; transform: translateX(-45%) rotate(12deg); transition: transform 420ms ease; }
.manga-puzzle__card:hover, .manga-puzzle__card:focus-visible { transform: translateY(-2px); border-color: #f0ebff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 16px rgba(0,0,0,.32); }
.manga-puzzle__card:hover::after, .manga-puzzle__card:focus-visible::after { transform: translateX(45%) rotate(12deg); }
.manga-puzzle__card-face { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.85); transition: opacity 180ms ease, transform 180ms ease; }
.manga-puzzle__card-face img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 8px; filter: saturate(1.08) contrast(1.03); }
.manga-puzzle__card-back { position: relative; z-index: 1; color: #fff; text-shadow: 0 1px 0 #121225, 0 0 14px rgba(214,204,255,.8); transition: opacity 150ms ease, transform 150ms ease; }
.manga-puzzle__card.is-open { border-color: #f0ebff; }
.manga-puzzle__card.is-open .manga-puzzle__card-face, .manga-puzzle__card.is-matched .manga-puzzle__card-face { opacity: 1; transform: scale(1); }
.manga-puzzle__card.is-open .manga-puzzle__card-back, .manga-puzzle__card.is-matched .manga-puzzle__card-back { opacity: 0; transform: scale(.6); }
.manga-puzzle__card.is-matched { border-color: #9cf0b9; box-shadow: 0 0 0 2px rgba(124,229,160,.28), 0 8px 18px rgba(0,0,0,.28); cursor: default; }
.manga-puzzle__result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.manga-puzzle__result p { color: var(--text-soft); }
.manga-puzzle__result .button { width: 100%; justify-content: center; }
.manga-puzzle__restart { min-height: 44px; width: 100%; margin-top: 12px; padding: 9px 14px; color: #d8d1ff; background: transparent; border: 1px solid rgba(199,187,255,.45); border-radius: var(--radius-control); cursor: pointer; font: inherit; }
.manga-puzzle__restart:hover, .manga-puzzle__restart:focus-visible { background: rgba(199,187,255,.1); border-color: #d8d1ff; }
.interactive-manga-game { position: relative; overflow: hidden; padding: 24px; background: linear-gradient(145deg, rgba(26,103,249,.18), var(--surface-1) 58%); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 14px 32px rgba(0,0,0,.22); }
.interactive-manga-game::after { position: absolute; right: -42px; top: -42px; width: 130px; height: 130px; border: 1px solid rgba(179,197,255,.24); border-radius: 50%; content: ''; pointer-events: none; }
.interactive-manga-game h3 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 26px; }
.interactive-manga-game__eyebrow { position: relative; z-index: 1; margin: 0 0 8px; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.interactive-manga-game__intro { position: relative; z-index: 1; margin-bottom: 18px; color: var(--text-soft); }
.interactive-manga-game__progress { margin-bottom: 14px; color: var(--primary); font-size: 13px; font-weight: 700; }
.interactive-manga-game__scene { padding-top: 16px; border-top: 1px solid var(--border); }
.interactive-manga-game__prompt { margin-bottom: 14px; font-weight: 700; line-height: 1.55; }
.interactive-manga-game__choices { display: grid; gap: 10px; }
.interactive-manga-game__choices button { min-height: 52px; padding: 12px 14px; color: var(--text); text-align: left; background: rgba(16,16,16,.46); border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font: inherit; line-height: 1.45; transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.interactive-manga-game__choices button:hover, .interactive-manga-game__choices button:focus-visible { background: rgba(179,197,255,.1); border-color: var(--primary); transform: translateY(-1px); }
.interactive-manga-game__result { padding-top: 16px; border-top: 1px solid var(--border); }
.interactive-manga-game__result-label { margin-bottom: 6px; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.interactive-manga-game__result h4 { margin-bottom: 10px; font-size: 21px; line-height: 1.35; }
.interactive-manga-game__result p:not(.interactive-manga-game__result-label) { color: var(--text-soft); }
.interactive-manga-game__result .button { width: 100%; justify-content: center; margin-top: 6px; }
.interactive-manga-game__restart { min-height: 44px; width: 100%; margin-top: 10px; padding: 9px 14px; color: var(--primary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font: inherit; }
.interactive-manga-game__restart:hover, .interactive-manga-game__restart:focus-visible { border-color: var(--primary); background: rgba(179,197,255,.08); }
@media (prefers-reduced-motion: reduce) {
    .manga-jigsaw__scene img, .manga-jigsaw__piece, .manga-puzzle__card, .manga-puzzle__card-face, .manga-puzzle__card-back, .interactive-manga-game__choices button { transition: none; }
}
.site-footer { padding: 40px 0; background: #0e0e0e; border-top: 1px solid rgba(66, 70, 85, .6); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; color: var(--text-muted); }
.brand--footer { color: var(--primary); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.site-footer p { margin: 0; }

@media (max-width: 1100px) { .manga-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .site-header__inner { min-height: 72px; gap: 12px; flex-wrap: wrap; }
    .brand { font-size: 18px; }
    .brand img { width: 42px; height: 42px; }
    .menu-toggle { display: inline-grid; place-items: center; margin-left: auto; }
    .site-nav { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 8px 0 12px; margin-left: 0; }
    .site-nav.is-open { display: flex; }
    .site-nav a, .nav-dropdown, .nav-dropdown__toggle { width: 100%; }
    .nav-dropdown__toggle { justify-content: space-between; text-align: left; }
    .nav-dropdown__menu { position: static; min-width: 0; margin: 0 0 4px 12px; padding: 4px 0 4px 12px; border-width: 0 0 0 1px; border-radius: 0; box-shadow: none; background: transparent; opacity: 0; visibility: hidden; max-height: 0; overflow: hidden; transform: none; transition: opacity 180ms ease, max-height 180ms ease, visibility 180ms ease; }
    .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { opacity: 0; visibility: hidden; max-height: 0; }
    .nav-dropdown.is-open .nav-dropdown__menu { opacity: 1; visibility: visible; max-height: 360px; }
    .hero { min-height: 380px; aspect-ratio: auto; }
    .hero__image { object-position: 50% 50%; }
    .hero__content { padding: 32px 24px; }
    .hero__description { font-size: 16px; }
    .blog-intro { padding: 32px 24px; }
    .about-intro { padding: 32px 24px; }
    .about-intro__lead { font-size: 16px; }
    .review-intro { padding: 32px 24px; }
    .review-intro__lead { font-size: 16px; }
    .policy-intro { padding: 32px 24px; }
    .policy-intro__lead { font-size: 16px; }
    .button { width: 100%; justify-content: center; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .section-link { white-space: normal; }
    .content-grid, .faq-layout { grid-template-columns: 1fr; }
    .manga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .manga-jigsaw__scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manga-card__body { padding: 10px; }
    .manga-card__body p { font-size: 13px; }
    .article-grid, .blog-articles .article-grid, .completed-manga-grid, .action-article-grid, .romance-article-grid, .fantasy-article-grid, .mystery-article-grid, .portal-links, .contact-social__list { grid-template-columns: 1fr; }
    .article-content .article-hero { width: 100%; }
    .comment-list .children { padding-left: 12px; }
    .site-footer__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-height: 460px) {
    .contact-popup__panel { height: calc(100dvh - 48px); padding: 16px; }
    .contact-popup__intro { margin-bottom: 8px; }
    .contact-popup__channel { min-height: 48px; padding-block: 6px; }
    .contact-popup__mute { margin-top: 4px; }
    .contact-popup__actions { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* H-131: visible breadcrumb trail supporting the page hierarchy in JSON-LD. */
.breadcrumbs { margin: 0 0 12px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs__item { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs__item:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--text-muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-inline: 6px; color: var(--primary); text-decoration: none; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--primary-hover); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { overflow-wrap: anywhere; color: var(--text-soft); }
.article-byline { margin: 10px 0 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.article-byline a { color: var(--primary); }
.article-byline a:hover, .article-byline a:focus-visible { color: var(--primary-hover); }

/* H243 — compact, source-aware metadata for time-sensitive collection pages. */
.article-content .editorial-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; max-width: 78ch; margin: 0 0 24px; padding: 12px 14px; color: var(--text-soft); background: var(--surface-1); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-control); font-size: 14px; line-height: 1.55; }
.article-content .editorial-meta span { min-width: 0; }
.article-content .editorial-meta a { min-height: 0; padding: 0; color: var(--primary); font-weight: 700; }
.article-content .collection-item-meta { margin: 0 0 8px; color: var(--text-muted); font-size: 14px; }
.article-content .collection-item-meta strong { color: var(--text); }
.article-content .completed-card__status, .article-content .completed-card__source, .article-content .completed-card__credit { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.article-content .completed-card__source a, .article-content .completed-card__credit a { min-height: 0; padding: 0; font-size: inherit; line-height: inherit; }
.error-page { display: grid; max-width: 760px; gap: 20px; padding: clamp(32px, 7vw, 72px); margin: 32px auto 0; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-1); text-align: center; }
.error-page h1 { max-width: none; margin: 0; }
.error-page p { max-width: 62ch; margin: 0 auto; color: var(--text-soft); }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.error-page__actions a { min-width: 144px; justify-content: center; }
/* H-134: linked review cards in the BL-anime guide. */
.article-content .bl-anime-review-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 32px; }
.article-content .bl-anime-review-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--text); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-control); }
.article-content .bl-anime-review-card__media { display: grid; min-height: 44px; aspect-ratio: 3 / 4; place-items: center; overflow: hidden; background: var(--surface-3); }
.article-content .bl-anime-review-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 180ms ease; }
.article-content .bl-anime-review-card__media:hover img { transform: scale(1.02); }
.article-content .bl-anime-review-card__media:focus-visible, .article-content .bl-anime-review-card__title:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.article-content .bl-anime-review-card__body { display: grid; gap: 8px; padding: 14px 14px 10px; }
.article-content .bl-anime-review-card__title { min-height: 44px; padding: 0; color: var(--text); font-weight: 700; line-height: 1.45; text-decoration: none; }
.article-content .bl-anime-review-card__title:hover { color: var(--primary-hover); }
.article-content .bl-anime-review-card__body p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.article-content .bl-anime-review-card__credit { margin: auto 0 0 !important; padding: 10px 14px 14px; color: var(--text-muted); font-size: 11px !important; line-height: 1.45 !important; }
.article-content .bl-anime-review-card__credit a { min-height: 0; padding: 0; font-size: inherit; line-height: inherit; }
@media (max-width: 680px) { .article-content .bl-anime-review-card-grid { grid-template-columns: 1fr; } .article-content .bl-anime-review-card__media { aspect-ratio: 3 / 2; } }

/* H137 BL review-card art treatment: start */
.article-content .bl-anime-review-card__media {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-3);
}

.article-content .bl-anime-review-card__media::before {
  position: absolute;
  z-index: 0;
  inset: -18px;
  content: "";
  background-image: var(--bl-card-art);
  background-position: center;
  background-size: cover;
  filter: blur(18px) brightness(0.42) saturate(1.15);
  opacity: 0.88;
  transform: scale(1.08);
}

.article-content .bl-anime-review-card__media img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.38));
}
/* H137 BL review-card art treatment: end */

/* H145 — compact credited manga examples in the isekai guide */
.article-content .isekai-pathway-cover { width: min(100%, 224px); margin: 18px auto 24px; }
.article-content .isekai-pathway-cover img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.article-content .isekai-pathway-cover figcaption { padding: 8px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 480px) { .article-content .isekai-pathway-cover { width: min(100%, 192px); } }

/* H147 — linked compact isekai pathway covers */
.article-content .isekai-pathway-cover__link { display: block; border-radius: var(--radius-panel); }
.article-content .isekai-pathway-cover__link:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.article-content .isekai-pathway-cover__link:hover img { opacity: 0.9; }

/* H148 — verified creator portraits in manga reviews */
.article-content .creator-portrait { width: min(100%, 360px); margin: 20px auto 24px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.article-content .creator-portrait img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: var(--surface); }
.article-content .creator-portrait figcaption { padding: 9px 11px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.article-content .creator-portrait figcaption a { overflow-wrap: anywhere; }

/* H211 — consistent, uncropped product-image stage for the five Box Set reviews */
.article-content .manga-authorized-product-image[data-mangatitle-box-set-review-image^="h199-"] {
    width: min(100%, 640px);
    margin: 24px auto 20px;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.article-content .manga-authorized-product-image[data-mangatitle-box-set-review-image^="h199-"] img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: contain;
    object-position: center;
    background: #f5f5f4;
    border-radius: var(--radius-control);
}
.article-content .manga-authorized-product-image[data-mangatitle-box-set-review-image^="h199-"] figcaption {
    margin-top: 10px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}
.article-content .manga-authorized-product-image[data-mangatitle-box-set-review-image^="h199-"] figcaption a {
    color: var(--primary);
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    .article-content .manga-authorized-product-image[data-mangatitle-box-set-review-image^="h199-"] {
        width: min(100%, 420px);
        margin: 20px auto 16px;
        padding: 8px;
    }
    .article-content .manga-authorized-product-image[data-mangatitle-box-set-review-image^="h199-"] img { height: 340px; }
}

/* H212 — keep the One Piece cover aligned with the other 90s article covers */
.article-content .manga-authorized-cover[data-mangatitle-article-cover="h195-one-piece"] img {
    display: block;
    width: min(100%, 320px);
    height: auto;
    max-height: 320px;
    object-fit: contain;
}


/* H282: preserve the complete portrait composition for the user-supplied Captain Tsubasa Dream Team image. */
.article-content .article-hero--captain-dream-team { width: min(100%, 386px); aspect-ratio: 386 / 518; padding: 8px; border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border)); border-radius: var(--radius-panel); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 18%, var(--surface-1)), var(--surface-1) 56%); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24); }
.article-content .article-hero--captain-dream-team img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: calc(var(--radius-panel) - 6px); }
.article-content .article-hero--captain-dream-team figcaption { padding: 10px 4px 2px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }


/* H283: compact group artwork supplied by the user for the Captain Tsubasa inline illustration. */
.article-content .article-inline-figure--captain-dream-team { width: min(180px, 100%); margin: 20px auto 10px; padding: 5px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: var(--radius-control); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 14%, var(--surface-1)), var(--surface-1)); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); }
.article-content .article-inline-figure--captain-dream-team img { display: block; width: 100%; height: auto; border-radius: 5px; }
.article-content .article-inline-figure--captain-dream-team figcaption { padding: 8px 2px 2px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }


/* H284: calm reading rhythm for the compact Captain Tsubasa inline illustration. */
.article-content .article-inline-figure--captain-dream-team { margin: 28px auto 30px; }
.article-content .article-inline-figure--captain-dream-team figcaption { padding: 7px 3px 1px; text-align: center; font-size: 10px; line-height: 1.4; }
@media (max-width: 480px) { .article-content .article-inline-figure--captain-dream-team { margin: 24px auto 28px; } }