/* Remove browser default, replace with consistent visible ring */
h1:focus {
    outline: none;
}

.text-xxs {
    font-size: 0.55rem;
    /* 11px — used only for ultra-small labels */
}

body {
    /* Standard 16px base — all rem tokens in Home.razor.css scale from here */
    font-size: 1rem;
}

h1, h2, h3 {
    font-family: 'Noto Serif TC', serif;
}

h4, [id] {
    scroll-margin-top: 80px; /* Adjust this value up or down until the overlap disappears */
}


/* ==========================================
   1. 全局正文配置 (轻量、易读)
   ========================================== */
html:lang(en) {
    font-family: 'Inter', system-ui, sans-serif;
}

html:lang(zh) {
    /* 保持正文使用无衬线系统字体，秒开且清晰 */
    font-family: system-ui, "PingFang TC", "Microsoft YaHei", sans-serif;
    letter-spacing: 0.05em;
    /* font-family: source-han-serif-tc, serif, "Microsoft YaHei";*/
    /* font-family: "PingFang SC", "Microsoft YaHei", sans-serif; */
}

html:lang(jp) {
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 1.75;
}

/* ==========================================
   2. 专属标题配置 (高品质衬线/明体)
   ========================================== */
html:lang(zh) h1,
html:lang(zh) h2,
html:lang(zh) h3,
html:lang(zh) h4,
html:lang(zh) .header-font {
    font-family: 'Noto Serif TC', serif;
    font-weight: 600;
}

/* 英文和日语标题依然保留他们各自优秀的无衬线/系统字体 */
html:lang(en) h1, html:lang(en) h2, html:lang(en) h3 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
}
/* ==========================================
   DESIGN TOKENS (DRY — single source of truth)
   ========================================== */
:root {
    /* Colors */
    --aot-red: #ef4444;
    --aot-red-hover: #dc2626;
    --aot-gold: #facc15;
    --aot-gold-hover: #eab308;
    --aot-limegreen: limegreen;
    --aot-black: #000000;
    --aot-dark: #0a0a0a;
    --aot-card-bg: #0b0b0b;
    --aot-white: #ffffff;
    --aot-text-primary: #f8fafc;
    --aot-text-secondary: #d1d5db;
    --aot-text-muted: #878170;
    --aot-border-subtle: rgba(255, 255, 255, 0.1);
    --aot-border-focus: rgba(255, 255, 255, 0.45);
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    /* Shadows */
    --shadow-sm: 2px 2px 0 var(--aot-black);
    --shadow-md: 4px 4px 0 var(--aot-black);
    --shadow-lg: 6px 6px 0 var(--aot-black);
    --shadow-xl: 12px 12px 0 var(--aot-black);
    --shadow-red: 3px 3px 0 1px var(--aot-red);
    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-toast: 800;
    --z-floating: 9999;
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.5s ease;
}


/* ==========================================
   GLOBAL BUTTON SYSTEM
   Change a token here, every button updates.
   ========================================== */
:root {
    --aot-btn-border: 2px;
    --aot-btn-radius: 8px;
    --aot-btn-shadow-color: #000000;
    --aot-btn-font-weight: 600;
}

.aot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    border: var(--aot-btn-border) solid #000000;
    border-radius: var(--aot-btn-radius);
    font-weight: var(--aot-btn-font-weight);
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: 2px 2px 0px var(--aot-btn-shadow-color);
    transition: all 0.15s ease;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    min-height: 48px;
    /* covers Android 48dp + iOS 44pt */
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    /* stop long-press selection callout on Android */
}

/* Only apply hover lift on devices that actually have a mouse —
   prevents the effect getting "stuck" after a tap on iOS Safari */
@media (hover: hover) {
    /*
        .aot-btn:hover {
        transform: translate(-1px, -1px);
        box-shadow: 4px 4px 0px var(--aot-btn-shadow-color);
    }
    */

    .aot-btn:hover {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #000000 !important;
        box-shadow: 3px 3px 0px 1px #ef4444 !important;
        transform: none;
        /* drop the old lift — box-shadow does the work now */
    }

    /* Desktop/pointer-capable only. Per "why :hover fails on mobile" — touch has no real
   cursor, so mobile browsers fake hover-on-tap, causing sticky states and a dead first
   tap. Gating behind (hover: hover) keeps mobile on tap-only, matching the rest of this
   codebase's existing hover-gating convention (see .aot-btn:hover, @media (hover: none)). */
    .manga-spine:hover {
        width: 168px;
        z-index: 5;
        border-color: var(--aot-red);
    }

    .manga-spine:hover .manga-spine-detail {
        opacity: 1;
        pointer-events: auto;
    }

}

.aot-btn:active {
    box-shadow: 2px 2px 0px 1px var(--aot-red) !important;
    transform: translate(1px, 1px);
}

/* more simple button style */
/*
.aot-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--aot-btn-shadow-color);
}
*/

/* Sizes — sm now respects the 44px floor via min-height above,
   padding just controls horizontal width */

.aot-btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    min-height: 52px;
}

.aot-btn--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.60rem;
    min-height: 32px;
}

.aot-btn--xsm {
    padding: 0.20rem 0.35rem;
    font-size: 0.4rem;
    min-height: 28px;
}

.aot-btn--thin {
    padding: 0.25rem 0.55rem;
    font-size: 0.70rem;
    min-height: 20px;
}



/* Colors — add new ones here only when you actually need a new color */
.aot-btn--white {
    background-color: var(--aot-white);
    color: var(--aot-black);
}

.aot-btn--white:hover {
    background-color: var(--aot-red);
    color: var(--aot-white);
}

.aot-btn--limegreen {
    background-color: var(--aot-limegreen);
    color: var(--aot-black);
}

.aot-btn--limegreen:hover {
    background-color: var(--aot-red);
    color: var(--aot-white);
}

.aot-btn--yellow {
    background-color: var(--aot-gold);
    color: var(--aot-black);
}

.aot-btn--yellow:hover {

    color: var(--aot-white);
}

.aot-btn--red {
    background-color: var(--aot-red);
    color: var(--aot-white);
    border-color: var(--aot-black); /* #f87171;*/
}

.aot-btn--red:hover {
    filter: brightness(1.1);
}

.aot-btn--blue {
    background-color: #2563eb;
    color: var(--aot-white);
    border-color: #60a5fa;
}

.aot-btn--blue:hover {
    filter: brightness(1.1);
}

.aot-btn--lang {
    min-height: clamp(28px, 2vw + 20px, 32px);
    padding: clamp(0.2rem, 0.5vw, 0.25rem) clamp(0.5rem, 1.2vw, 0.65rem);
    font-size: clamp(0.6rem, 0.6vw + 0.4rem, 0.68rem);
    background-color: rgb(0,0,0);
    color: rgba(255, 255, 255);
    border: 1.5px solid #fff; 
    box-shadow: none;
}

.aot-btn--lang.is-active {
    background-color: var(--aot-red);
    color: var(--aot-white);
    border-color: var(--aot-black);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   1.3. SECTION TITLE COMPONENT
   ========================================================================== */
.aot-section-title {
    font-size: clamp(0.9rem, 0.6vw + 0.75rem, 1.05rem);
    padding: clamp(0.65rem, 1vw, 0.8rem) clamp(0.75rem, 1.2vw, 1rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--aot-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.98), rgba(30, 15, 15, 0.98));
    border: 3px solid var(--aot-black);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    opacity: 1;
}

.aot-section-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    pointer-events: none;
}

.aot-section-title i {
    color: var(--aot-gold);
    text-shadow: 2px 2px 0 var(--aot-black);
}

@media (max-width: 767.98px) {
    .aot-section-title {
        font-size: 0.9rem;
        padding: 0.7rem 0.85rem;
        box-shadow: var(--shadow-md);
    }
}


/* ==========================================
   1.5. MANGA NAVBAR GLOBAL OVERRIDE
   ========================================== */

/* The main nav bar — manga comic panel style */
.navbar {
    background-color: var(--aot-dark) !important;
    border-bottom: 5px solid var(--aot-black) !important;
    box-shadow: 0 5px 0px var(--aot-black) !important;
    padding: 0 1rem !important;
    min-height: 3.5rem !important;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    /* was: min-height: 3.5rem !important; */
    min-height: clamp(3.25rem, 3vw + 2.5rem, 4rem) !important;
}

/* Brand mark — sits in a comic panel bubble */
/*
    .brand-mark {
    height: 36px;
    filter: invert(1) contrast(1.5);
    transition: filter 0.2s ease, transform 0.2s ease;
}*/

.brand-mark {
    display: block;
    /* was: height: 2.65rem; max-width: 140px; */
    height: clamp(2.25rem, 3vw + 1.5rem, 2.75rem);
    max-width: clamp(110px, 12vw + 60px, 150px);
    width: auto;
 
    /* was unconstrained — this is what caused the overlap */
    object-fit: contain;
    transition: filter 0.2s ease, transform 0.2s ease;
}


.brand-mark:hover {
    filter: invert(1) contrast(2) sepia(1) hue-rotate(320deg) saturate(3);
    transform: scale(1.05);
}


/* Nav link typography — manga uppercase stencil */
.nav-links>li>details>summary,
.nav-links>li>a {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--aot-text-secondary) !important;
    padding: 0.5rem 0.75rem !important;
    border: 2px solid transparent;
    border-radius: 0.5rem !important;
    transition: all var(--transition-fast) !important;
}

/* Base colour for the top-level nav list itself */
.nav-links {
    color: rgba(255, 255, 255, 0.95);
}

/* Kill the default disclosure triangle on all nav summary elements */
.nav-links li > details > summary::-webkit-details-marker,
.nav-menu details > summary::-webkit-details-marker {
    display: none;
}

/* Sub-menu link sizing — nested items one level deeper than the top summaries */
.nav-menu details ul a {
    padding-inline: 0.7rem;
    padding-block: 0.10rem;
    font-size: 0.90rem;
}

/* Force visible overflow so shadows aren't clipped by daisyUI's menu li/details styling */
.nav-links>li,
.nav-links>li>details {
    overflow: visible !important;
}


/* Dropdown menus — manga comic panel frames.
   Mirrors .comic-card: obsidian gradient + hard black border + hard offset shadow.
   The backdrop-filter is intentionally removed: a blur glow has no place in the
   print-style aesthetic this project uses. */
.nav-menu {
    background: radial-gradient(ellipse at 60% 10%, rgba(30, 22, 22, 0.97) 0%, rgba(10, 8, 8, 0.99) 100%) !important;
    border: 3px solid var(--aot-black) !important;
    box-shadow: 6px 6px 0px var(--aot-black) !important;
    border-radius: 0.55rem !important;
    min-width: 14rem;
    overflow: visible !important;
    padding: 0.35rem;
}

/* Nested sub-menu panel: red-tinted obsidian + red border signals "deeper level".
   Same vocabulary as .comic-card.ruby — a crimson cave inside the black panel. */
    .nav-menu .nav-menu {
        background: radial-gradient(ellipse at 50% 10%, rgba(40, 14, 14, 0.98) 0%, rgba(15, 6, 6, 0.99) 100%) !important;
        border: 3px solid var(--aot-black) !important;
        box-shadow: 4px 4px 0px var(--aot-dark) !important;
        margin-top: 0.2rem;
    }

.nav-menu li,
.nav-menu li>details {
    overflow: visible !important;
    /* daisyUI's .menu li clips rounded corners by default — kills our box-shadow */
}

.nav-menu li a,
.nav-menu li summary {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: var(--aot-text-secondary) !important;  /* #d1d5db neutral grey — tier-3 in the hierarchy */
    text-transform: uppercase !important;
    border-radius: 0.5rem !important;
    border: 2px solid transparent !important;
}

/* Hover/active/focus — ONE "comic punch" effect, shared by desktop top-level
nav-links AND the nav-menu dropdown (hamburger flyout on mobile, sub-menus
on desktop). Change it here once, both update. */
.nav-links>li>details>summary:hover,
.nav-links>li>a:hover,
.nav-menu li a:hover,
.nav-menu li summary:hover {
    background-color: var(--aot-white) !important;
    color: var(--aot-black) !important;
    border-color: var(--aot-black) !important;
    box-shadow: var(--shadow-red) !important;
    z-index: 10;
    position: relative;
}


.nav-links>li>details[open]>summary,
.nav-links>li>details>summary:active,
.nav-links>li>a:active,
.nav-links>li>details>summary:focus,
.nav-links>li>a:focus,
.nav-menu li a:active,
.nav-menu li summary:active,
.nav-menu li a:focus,
.nav-menu li summary:focus,
.nav-menu details[open]>summary {
    background-color: var(--aot-white) !important;
    color: var(--aot-black) !important;
    border-color: var(--aot-black) !important;
    box-shadow: var(--shadow-red) !important;
    z-index: 10;
    position: relative;
}


/* On very small phones (≤480px) pull the nav flyout slightly away from the edge */
@media (max-width: 480px) {
    .nav-menu {
        margin-inline: 0.15rem;
    }
}

/* Language switcher pills — manga button style */
.btn-xs.btn-outline,
.btn-xs.btn-error {
    border-radius: 0.5rem !important;
    border-width: 2px !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
}

/* Mobile hamburger button */
.btn-ghost svg {
    color: var(--aot-white);
}



/* ==========================================
   2. 巨幕组件 (Hero Section) - 自适应各端 & 沉浸式动效
   ========================================== */
.aot-hero {
    min-height: 45vh;
    background: radial-gradient(circle at 50% 30%, #2f0f0f 0%, #150909 60%, #050505 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 1.5rem;
    padding: 2.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8),
        inset 0 0 40px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(239, 68, 68, 0.05);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    touch-action: pan-y;
}

@media (min-width: 768px) {
    .aot-hero {
        padding: 3.5rem 3rem;
        min-height: 50vh;
    }
}

/* Touch active/hover states for mobile/desktop */
.aot-hero:hover,
.aot-hero:active {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9),
        inset 0 0 50px rgba(239, 68, 68, 0.1),
        0 0 30px rgba(239, 68, 68, 0.15);
}

/* Scanlines overlay */
.aot-hero-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 6px 100%;
    opacity: 0.8;
}

/* Ember particles wrapper */
.aot-hero-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.aot-hero-embers::before,
.aot-hero-embers::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f97316;
    border-radius: 50%;
    box-shadow: 0 0 10px #f97316, 0 0 20px #ef4444;
    animation: floatEmber 6s linear infinite;
    opacity: 0;
}

.aot-hero-embers::before {
    left: 20%;
    animation-delay: 0s;
    animation-duration: 7s;
}

.aot-hero-embers::after {
    left: 75%;
    animation-delay: 2.5s;
    animation-duration: 5s;
}

/* Bottom warning stripe */
.aot-hero-danger-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 4px;
    background: repeating-linear-gradient(
        -45deg,
        #facc15,
        #facc15 10px,
        #1e1b4b 10px,
        #1e1b4b 20px
    );
    z-index: 3;
    animation: scrollStripe 12s linear infinite;
    opacity: 0.7;
}

/* Animations */
@keyframes floatEmber {
    0% {
        transform: translateY(110%) translateX(0) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-20%) translateX(20px) scale(1.2);
        opacity: 0;
    }
}

@keyframes scrollStripe {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}



/* ==========================================
   3. 角色卡片组件网格 (Character Grid)
   ========================================== */
.aot-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}


.name-aka {
    font-size: 0.65em;
    font-weight: 600;
    opacity: 0.75;
    text-transform: none;
    letter-spacing: normal;
    margin-left: 0.05rem;
}

@media (min-width: 768px) {
    .aot-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* 独立卡片结构 */
.aot-card {
    width: 100%;
    min-height: 100px;
    border: 6px solid var(--aot-black);
    box-shadow: var(--shadow-xl);
    background-color: var(--aot-card-bg);
    border-radius: 4px;
    /* overflow: hidden; Removed to allow arrows on border */
    touch-action: pan-y;
    display: flex;
    align-items: stretch;
    perspective: 1000px;
    transition: box-shadow 0.3s ease;
    /*transition: all 0.3s ease;*/
}


.aot-card-body {
    padding: 1.25rem;
}


/* ==========================================
   4. 战术时间轴组件 (Timeline)
   ========================================== */
.aot-timeline-card {
    background-color: var(--color-base-100);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-xl);
}

/* ==========================================
   5. 九大巨人图谱网格 (Titan Grid) - 完美适配三端
   ========================================== */
.aot-titan-grid {
    display: grid;
    grid-template-columns: 1fr; /* iPhone 默认单列 */
    gap: 1.25rem;
    margin-top: 0rem;
}


/* 巨人卡片专属样式 */
.aot-titan-card {
    position: relative; /* badge 的定位錨點 */
    background-color: rgb(116, 154, 222, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.25rem;
    padding: 1.5rem;
    padding-top: 2rem; /* 為 badge 留頂部空間 */
    box-shadow: var(--shadow-2xl);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible; /* 允許 badge 超出邊界 */
}

.aot-titan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 223, 0, 0.5); /* 触碰时放射德古拉警戒gold光 */
    box-shadow: 0 20px 25px -5px rgba(255, 223, 0, 0.15);
}

/* 徽章容器：絕對定位在卡片右上角，flex 橫排 */
.aot-titan-badges {
    position: absolute;
    top: -1rem;
    right: -1rem;
    display: flex;
    flex-direction: row-reverse; /* 新徽章從右往左疊加 */
    gap: 0;
    z-index: 10;
}

/* 每枚徽章：普通 flex item，不再自己定位 */
.aot-titan-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    margin-left: -1rem; /* 第二枚向左重疊，形成硬幣疊加感 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

/* 第一枚（最右）不需要負 margin */
.aot-titan-badge:last-child {
    margin-left: 0;
}

.aot-titan-card:hover .aot-titan-badge {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 24px rgba(255, 223, 0, 0.15);
}

/* ==========================================
   6. 兵團戰術裝備網格 (Gear Grid) - 完美適配三端
   ========================================== */
.aot-gear-grid {
    display: grid;
    grid-template-columns: 1fr; /* iPhone 預設單列 */
    gap: 1.25rem;
    margin-top: 0rem;
}

/* 戰術裝備卡片專屬樣式 */
.aot-gear-card {
    background-color: rgb(70, 67, 67, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-xl);
    transition: all 0.25s ease-in-out;
}

.aot-gear-card:hover {
    border-color: rgba(189, 147, 249, 0.4); /* 觸碰时放射德古拉紫色高亮 */
    box-shadow: 0 15px 25px -5px rgba(189, 147, 249, 0.1);
}




@media (min-width: 1280px) {
    .aot-titan-grid {
        grid-template-columns: repeat(3, 1fr); /* Desktop 升级为标准三列 */
    }
    .aot-titan-badges { top: -1.5rem; right: -1.5rem; }
    .aot-titan-badge  { width: 96px; height: 96px; margin-left: -1.25rem; }
    .aot-titan-badge:last-child { margin-left: 0; }
    .aot-gear-grid {
        grid-template-columns: repeat(3, 1fr); /* Desktop 升級為標準三列 */
    }
}

/* 平板 (768px+) */
@media (min-width: 768px) {
    .aot-card-body {
        padding: 1.5rem;
    }
    .aot-titan-badges { top: -1.25rem; right: -1.25rem; }
    .aot-titan-badge  { width: 84px; height: 84px; margin-left: -1.1rem; }
    .aot-titan-badge:last-child { margin-left: 0; }
    .aot-gear-grid {
        grid-template-columns: repeat(2, 1fr); /* iPad 自動變為雙列 */
        gap: 1.5rem;
    }
    .aot-titan-grid {
        grid-template-columns: repeat(2, 1fr); /* iPad 自动变为双列 */
        gap: 1.5rem;
    }
    .aot-timeline-card {
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .manga-spine {
        width: 140px;
        /* width: 38px; */
        height: 180px;
    }

    .manga-spine.is-pulled {
        width: 146px;
    }
}


/* ==========================================
   GLOBAL COMIC CARD SYSTEM (DRY)
   ========================================== */
.comic-card {
    /* 1. Define a default background variable here */
    --card-bg: radial-gradient(ellipse at 60% 10%, rgba(30, 34, 42, 0.95) 0%, rgba(10, 11, 14, 0.98) 100%);
    /* 2. Use the variable in the background property */
    background: var(--card-bg) !important;
    border: 3px solid var(--aot-black) !important;
    border-radius: 3px !important;
    box-shadow: 6px 6px 0px var(--aot-black), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out !important;
    position: relative;
    overflow: hidden;
}

    .comic-card.gold {
        /*--card-bg: radial-gradient(ellipse at 60% 10%, #dfbb6b 0%, #facc15 100%);*/
        --card-bg:   #ffcc00f7;
    }

    .comic-card.ruby {
        --card-bg: radial-gradient(ellipse at 50% 20%, rgb(185 85 105 / 95%) 0%, rgb(81 1 9 / 98%) 100%);
    }

    /* mainly for home page tabs 駐紮兵團戰術情報 section*/
    .comic-card.black {
        --card-bg: radial-gradient(ellipse at 20% 20%, rgba(10, 11, 14, 0.95) 10%, rgba(30, 34, 42, 0.98) 80%);
    }

.comic-card:hover {
    box-shadow: 6px 6px 0px var(--aot-red), 0 16px 48px rgba(0, 0, 0, 0.7) !important;
}

.comic-card.black:hover {
    box-shadow: 6px 6px 0px var(--aot-black), 0 16px 48px rgba(0, 0, 0, 0.7) !important;
}

.comic-frame {
    border: 2px solid var(--aot-black);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 4px 4px 0px var(--aot-black);
    background: #050505;
}

.comic-badge {
    border: 2px solid var(--aot-black);
    border-radius: 4px;
    font-size: clamp(0.62rem, 0.4vw + 0.5rem, 0.72rem);
    padding: clamp(2px, 0.4vw, 2px) clamp(3px, 1.2vw, 4px);
    font-weight: 900;
    text-transform: uppercase;
    /*box-shadow: 2px 2px 0px var(--aot-black);*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
}

.aot-badge-beta {
    border: 2px solid var(--aot-gold);
    border-radius: 10px;
    font-size: clamp(0.50rem, 0.4vw + 0.5rem, 0.40rem);
    color: var(--aot-black);
    background-color: var(--aot-gold);
    padding: 0px 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

.comic-badge--accent {
    background-color: var(--aot-red);
    color: var(--aot-white);
}

.comic-badge--gold {
    background-color: var(--aot-gold);
    color: var(--aot-black);
}

.comic-badge--silver {
    background-color: #cbd5e1;
    color: var(--aot-black);
}

.comic-badge--bronze {
    background-color: #cd7f32;
    color: var(--aot-black);
}

.comic-badge--success {
    background-color: #22c55e;
    color: var(--aot-black);
}

.comic-badge--warning {
    background-color: #f97316;
    color: var(--aot-black);
}
.comic-tag {
    display: inline-block;
    font-size: clamp(0.68rem, 0.4vw + 0.55rem, 0.78rem);
    padding: clamp(3px, 0.6vw, 4px) clamp(8px, 1.6vw, 12px);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 4px;
    background: var(--aot-white);
    border: 2px solid var(--aot-black);
    box-shadow: 2px 2px 0px var(--aot-black);
    color: var(--aot-black);
}

/* ==========================================================================
   MANGA SHELF SYSTEM — append to the end of wwwroot/app.css
   Global (not .razor.css) because it's shared by Home.razor, Manga.razor,
   and MangaVolume.razor — Blazor CSS isolation only scopes to one component.
   ========================================================================== */
.manga-shelf-row-wrapper {
    margin-bottom: 0.05rem;
}

.manga-arc-title {
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--aot-brass);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.manga-shelf-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.5rem 0.25rem 1rem;
    -webkit-overflow-scrolling: touch;
}

/* Teaser-only variant: wraps instead of scrolling. An 8-item random sample looks
   like a mistake as a horizontal scroller (leaves dead space on anything wider than
   ~500px) — wrapping fills whatever width it's given with no dead space, no per-
   breakpoint magic numbers. /manga's per-arc rows keep the scroll behavior since
   those can have many volumes worth of horizontal browsing. */
.manga-shelf-scroll--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
}

.manga-spine {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    box-shadow: 3px 3px 0px var(--aot-black);
    transition: width 320ms cubic-bezier(0.2, 0.85, 0.2, 1), transform 200ms ease, box-shadow 200ms ease;
    display: block;
    text-decoration: none;
}





.manga-spine-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* ponytail: fixed to the pulled/hover width, not the spine's own current width —
      object-fit:cover recalculates its zoom level whenever the box's aspect ratio
       changes, so letting the image resize with the narrow<->pulled spine caused a
       visible re-crop/zoom jump on hover. Locking the image to a constant width and
       right-anchoring it means the narrow spine's overflow:hidden just clips the left
       portion of an image that never changes scale — same crop, different window. */
    /*width: 146px;*/
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right center;
}

.manga-spine-number {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--aot-white);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid var(--aot-black);
    border-radius: 4px;
    padding: 1px 5px;
}

.manga-spine-detail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 40%, transparent 100%);
    /* ponytail: always in the DOM now (was a Blazor @if before) so CSS :hover has
       something to reveal on desktop with zero server round-trip. Hidden by default;
       shown by .is-pulled (tap-confirmed, all devices) or :hover (pointer devices only). */
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}


.manga-spine.is-pulled {
    width: 146px;
    z-index: 5;
    border-color: var(--aot-red);
}

.manga-spine.is-pulled .manga-spine-detail {
    opacity: 1;
    pointer-events: auto;
}

.manga-detail-rating {
    display: flex;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--aot-gold);
}

.manga-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 4px;
}

.manga-tag-badge {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    border: none;
    cursor: pointer;
}

.manga-tag-badge.is-active {
    background-color: var(--aot-red) !important;
    color: var(--aot-white) !important;
}

.manga-spine--viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--aot-brass);
    background: rgba(255, 255, 255, 0.04);
    border-style: dashed;
    text-decoration: none;
}

.manga-detail-cover {
    width: 120px;
    border-radius: 6px;
    box-shadow: 3px 3px 0px var(--aot-black);
}





/* ==========================================================================
   MANGA PAGE — HERO BANNER
   ========================================================================== */
.manga-page-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 2rem 2.5rem;
    margin-bottom: 0;
    background: linear-gradient(135deg, #0a0b0d 0%, #12080a 50%, #0a0b0d 100%);
    border-bottom: 2px solid rgba(239, 68, 68, 0.35);
}
/* Animated speed-line burst (pure CSS, no image needed) */
.manga-page-hero-speed-lines {
    pointer-events: none;
    position: absolute;
    inset: 0;
    /* radial conic gradient that simulates speed lines emanating from top-right */
    background: conic-gradient( from 200deg at 85% 20%, transparent 0deg, rgba(239, 68, 68, 0.04) 3deg, transparent 6deg, transparent 9deg, rgba(239, 68, 68, 0.025) 11deg, transparent 14deg, transparent 18deg, rgba(239, 68, 68, 0.035) 19deg, transparent 22deg, transparent 26deg, rgba(239, 68, 68, 0.02) 27deg, transparent 30deg, transparent 0deg );
    mix-blend-mode: screen;
}

.manga-page-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(139, 0, 0, 0.12) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(20, 10, 10, 0.8) 0%, transparent 70%);
    pointer-events: none;
}

.manga-page-hero-content {
    position: relative;
    z-index: 2;
}

.manga-page-hero-eyebrow {
    font-size: clamp(0.65rem, 0.5vw + 0.5rem, 0.78rem);
    font-weight: 900;
    letter-spacing: 0.28em;
    color: var(--aot-red);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.manga-page-header {
    text-align: center;
    padding: 2rem 2rem 1rem;
}

.manga-page-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--aot-white);
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    text-shadow: 2px 2px 0px var(--aot-black);
}

.manga-page-title .ti {
    color: var(--aot-brass);
    margin-right: 0.2em;
}

.manga-page-subtitle {
    font-size: clamp(0.92rem, 0.5vw + 0.75rem, 1.08rem);
    font-weight: 700;
    color: var(--aot-brass);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.manga-arc-title {
    font-size: clamp(1rem, 0.7vw + 0.85rem, 1.2rem);
    font-weight: 900;
    color: var(--aot-red);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 1.5rem 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.manga-continuous-grid > .manga-arc-title:first-child {
    margin-top: 0;
}

.manga-arc-title-count {
    font-size: 0.7rem;
    color: var(--aot-brass);
    background: rgba(223, 187, 107, 0.1);
    border: 1px solid rgba(223, 187, 107, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
}
/* ==========================================================================
   MANGA PAGE — CONTINUOUS GRID
   ========================================================================== */
.manga-continuous-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

@media (min-width: 768px) {
    .manga-continuous-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (min-width: 1200px) {
    .manga-continuous-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (min-width: 1600px) {
    .manga-continuous-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}


/* Manga Cover Card (Larger) */
.manga-cover-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 4px;
    overflow: hidden;
    background: var(--aot-card-bg);
    border: 3px solid var(--aot-black);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
}

.manga-cover-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 8px 8px 0px var(--aot-red);
    border-color: var(--aot-black);
}

.manga-cover-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #0a0b0d;
}

.manga-cover-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s ease;
}

.manga-cover-card:hover .manga-cover-card-img {
    transform: scale(1.08);
}

.manga-cover-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.manga-cover-card:hover .manga-cover-card-shine {
    opacity: 1;
}

/* Top corner badge overlay */
.manga-cover-card-top-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--aot-white);
    font-size: clamp(0.6rem, 0.5vw + 0.45rem, 0.72rem);
    padding: clamp(2px, 0.4vw, 3px) clamp(5px, 0.9vw, 6px);
    font-weight: 900;
    border-radius: 4px;
    letter-spacing: 0.1em;
    backdrop-filter: blur(4px);
}


.manga-cover-card-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, transparent 100%);
    color: var(--aot-white);
    font-size: clamp(0.8rem, 0.5vw + 0.65rem, 0.92rem);
    padding: clamp(16px, 2vw, 20px) clamp(8px, 1.5vw, 10px) clamp(8px, 1.5vw, 10px);
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

/* Character roster: holographic game-card treatment. */
.character-game-card {
    --card-accent: #8aa58a;
    --card-glow: rgba(138, 165, 138, .28);
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-angle: 120deg;
    position: relative;
    display: block;
    min-width: 0;
    aspect-ratio: .72;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--card-accent) 68%, white 8%);
    border-radius: .7rem;
    background: #080b0b;
    color: #f5f0e8;
    box-shadow: 0 1.25rem 2.75rem rgba(0,0,0,.32), 0 0 .8rem color-mix(in srgb, var(--card-accent) 20%, transparent), inset 0 0 0 1px rgba(255,255,255,.12);
    transform: perspective(900px) rotateX(0) rotateY(0) translateY(0);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.character-game-card::before { content: ""; position: absolute; z-index: 4; inset: .42rem; pointer-events: none; border: 1px solid rgba(255,255,255,.24); border-radius: .52rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.character-game-card::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: .32; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.26), transparent 22%), repeating-linear-gradient(115deg, transparent 0 17px, rgba(255,255,255,.035) 18px, transparent 19px); mix-blend-mode: screen; }
 

/* was: background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.72), transparent 13%), conic-gradient(...); */
.character-game-card__holo {
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.35), transparent 45%), conic-gradient(from var(--pointer-angle) at var(--pointer-x) var(--pointer-y), rgba(255,67,106,.34), rgba(255,216,83,.3), rgba(77,235,191,.36), rgba(91,156,255,.32), rgba(217,105,255,.34), rgba(255,67,106,.34));
    mix-blend-mode: screen;
    transition: opacity .18s ease;
}
.character-game-card__glare { position: absolute; z-index: 6; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; background: linear-gradient(var(--pointer-angle), transparent 35%, rgba(255,255,255,.42) 48%, transparent 60%); mix-blend-mode: overlay; transition: opacity .18s ease; }
.character-game-card.is-holo-active .character-game-card__holo,
.character-game-card.is-holo-active .character-game-card__glare { opacity: .72; }

.character-game-card--featured { aspect-ratio: .69; }
.character-game-card:hover,
.character-game-card:focus-visible {
    z-index: 2;
    border-color: var(--card-accent);
    transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-.65rem);
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,.34), 0 0 2.5rem var(--card-glow), inset 0 0 0 1px rgba(255,255,255,.18);
}

.character-game-card__frame { position: absolute; inset: .45rem; display: flex; flex-direction: column; border-radius: .52rem; overflow: hidden; }
.character-game-card__topline { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; justify-content: flex-end; align-items: flex-start; padding: .8rem .85rem; background: linear-gradient(180deg, rgba(7,11,10,.88), rgba(7,11,10,.14), transparent); }
.character-game-card__logo-wrap { position: absolute; z-index: 3; right: 50%; bottom: .15rem; transform: translateX(50%); display: flex; justify-content: center; align-items: center; pointer-events: none; }
.character-game-card__logo { display: block; width: 4.9rem; height: auto; object-fit: contain; object-position: center center; opacity: .94; }
.character-game-card__badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.character-game-card__multiform {
    position: absolute;
    z-index: 4;
    top: .8rem;
    left: .85rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #000000;
    border-radius: 50%;
    color: #dfbb6b;
    font-size: 0.75rem;
    box-shadow: 2px 2px 0px #000000;
}.character-game-card__portrait-wrap { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(145deg, var(--card-glow), transparent 50%), #222b28; }
.character-game-card__portrait { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.82) contrast(1.08); transition: transform .55s ease, filter .35s ease; }
.character-game-card:hover .character-game-card__portrait { transform: scale(1.06); filter: saturate(1.08) contrast(1.1); }
.character-game-card__scanlines { position: absolute; inset: 0; opacity: .24; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.13) 4px); mix-blend-mode: overlay; }
.character-game-card__portrait-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,8,.1) 18%, transparent 42%, rgba(5,8,8,.94) 88%, #080b0b 100%); }
.character-game-card__copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; min-width: 0; padding: 1.2rem .95rem 2.25rem; background: linear-gradient(180deg, transparent, rgba(5,8,8,.78) 27%, #080b0b 66%); }
.character-game-card__name {
    display: block;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
    font: 800 clamp(1.05rem, 1.60vw, 1.55rem)/0.95 sans-serif;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.character-game-card__title {
    display: -webkit-box;
    margin-top: .35rem;
    overflow: hidden;
    color: var(--card-accent);
    font: 600 clamp(.58rem, .9vw, .72rem)/1.25 system-ui, sans-serif;
    letter-spacing: .07em;
    text-overflow: ellipsis;
    text-transform: capitalize;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.character-game-card__glow { position: absolute; z-index: -1; inset: 10% -30%; pointer-events: none; background: var(--card-glow); filter: blur(2rem); opacity: .8; }
.faction-Titans { --card-accent: #e1725e; --card-glow: rgba(225,114,94,.3); }
.faction-Marley, .faction-MilitaryPolice { --card-accent: #80a8bc; --card-glow: rgba(128,168,188,.28); }
.faction-Yeagerists, .faction-FirstInteriorSquad { --card-accent: #d4a45e; --card-glow: rgba(212,164,94,.28); }
.faction-RulingFamily, .faction-RoyalGovernment { --card-accent: #c9b47a; --card-glow: rgba(201,180,122,.25); }
@media (hover: none) { .character-game-card:hover { transform: none; } .character-game-card:active { transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { .character-game-card, .character-game-card__portrait { transition: none; } .character-game-card:hover, .character-game-card:focus-visible { transform: none; } }
@media (max-width: 767px) {
    .manga-continuous-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .character-game-card,
    .character-game-card--featured { aspect-ratio: .7; }
    .character-game-card__frame { inset: .28rem; border-radius: .48rem; }
    .character-game-card::before { border-radius: .48rem; }
    .character-game-card__topline { padding: .45rem .45rem 0; }
    .character-game-card__logo-wrap { bottom: 0.05rem; }
    .character-game-card__logo { width: 3.25rem; }
    .character-game-card__badge { padding: 2px 5px; font-size: .48rem; line-height: 1; }
    .character-game-card__copy { padding: .58rem .55rem 1.45rem; }
    .character-game-card__name { font-size: clamp(.82rem, 4vw, 1.05rem); }
    .character-game-card__title { margin-top: .3rem; font-size: .60rem; letter-spacing: .04em; }
}
/* ==========================================================================
   MANGA DETAIL PAGE — PREMIUM REDESIGN
   ========================================================================== */
.manga-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .manga-detail-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }
}

.manga-detail-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .manga-detail-sidebar {
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 2rem;
    }
}

.manga-detail-sidebar-cover {
    width: 200px;
    border-radius: 4px;
    border: 3px solid var(--aot-black);
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1024px) {
    .manga-detail-sidebar-cover {
        width: 100%;
    }
}

.manga-detail-sidebar-meta {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.25rem;
}

@media (min-width: 1024px) {
    .manga-detail-sidebar-meta {
        align-items: flex-start;
        width: 100%;
    }
}

.manga-detail-sidebar-chapters {
    font-size: clamp(0.78rem, 0.4vw + 0.65rem, 0.9rem);
    font-weight: 900;
    color: var(--aot-text-secondary);
    letter-spacing: 0.1em;
}

.manga-detail-content {
    flex: 1;
    min-width: 0; /* Prevents flex children from overflowing */
}

.manga-chapter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .manga-chapter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.manga-chapter-card {
    background: var(--aot-card-bg);
    border: 3px solid var(--aot-black);
    border-radius: 4px;
    padding: 1.5rem;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}

.manga-chapter-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
    background-size: 8px 8px;
    opacity: 0.85;
    z-index: 0;
}

.manga-chapter-card > * {
    position: relative;
    z-index: 1;
}

.manga-chapter-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0px var(--aot-red);
}

.manga-chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
}

.manga-chapter-title {
    font-size: clamp(1.1rem, 0.9vw + 0.9rem, 1.4rem);
    font-weight: 700;
    color: var(--aot-white);
    margin: 0;
}

.manga-chapter-moments {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manga-chapter-moment {
    font-size: clamp(0.85rem, 0.3vw + 0.75rem, 0.95rem);
    color: var(--aot-text-secondary);
    line-height: 1.5;
    position: relative;
    padding-left: 1rem;
}

.manga-chapter-moment::before {
    content: "•";
    color: var(--aot-brass);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

.manga-chapter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

/* Tablet (450px–1023px): cover left, meta right, to fill the dead space at this width */
@media (min-width: 450px) and (max-width: 1023.98px) {
    .manga-detail-sidebar {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
    }

    .manga-detail-sidebar-cover {
        width: 180px;
        flex-shrink: 0;
    }

    .manga-detail-sidebar-meta {
        align-items: flex-start;
        width: auto;
        flex: 1;
        min-width: 0;
    }
    .manga-cover-card-top-badge {
        font-size: clamp(0.55rem, 1.4vw, 0.7rem);
        padding: clamp(2px, 0.4vw, 3px) clamp(5px, 0.9vw, 6px);
    }
}