/* Character archive — modern companion to the home and manga pages. */
.characters-page { --char-red:#d32339; --char-gold:#efc16f; --char-panel:#101012; color:#eee5dc; }
.characters-page .berserk-side { width:74px; background:rgba(5,5,7,.95); border-color:#5e1a27; box-shadow:none; }
.characters-page .side-logo { color:var(--char-red); font-size:11px; }
.characters-page .side-jp { color:#938d8a; font-size:15px; }
.characters-page .side-brand { color:var(--char-red); font-size:54px; text-shadow:0 0 24px #d323394d; }
.characters-page nav { width:100% !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box; }
.characters-page .page-header,
.characters-page .controls-container,
.characters-page .grid,
.characters-page .footer { margin-left:auto !important; margin-right:auto !important; }

.characters-page .character-hero { position:relative; min-height:520px; width:min(calc(100% - 64px),1480px) !important; max-width:1480px !important; margin:34px auto 0 !important; padding:64px clamp(32px,6vw,82px); border-color:#4b343a; border-radius:24px; background:linear-gradient(90deg,#0b0b0e 0%,rgba(11,11,14,.9) 43%,rgba(11,11,14,.18) 82%),url('images/guts-berserk.png') 86% 12% / auto 118% no-repeat,radial-gradient(circle at 82% 48%,#8e152e80,transparent 34%),#111114; box-shadow:0 30px 80px #0009; }
.characters-page .character-hero::after { content:'01'; position:absolute; right:35px; bottom:15px; color:#ffffff0d; font:700 116px/1 'Cinzel',serif; pointer-events:none; }
.characters-page .character-hero__content { max-width:610px; }
.characters-page .eyebrow { color:var(--char-red); font-size:12px; letter-spacing:.17em; }
.characters-page .character-hero h1 { margin:13px 0 18px; font-family:'Cinzel',Georgia,serif; font-size:clamp(56px,7vw,104px); font-weight:700; letter-spacing:.02em; }
.characters-page .character-hero p { max-width:560px; color:#beb5ae; font-size:17px; line-height:1.75; }
.characters-page .character-hero__stats { gap:9px; margin:25px 0 30px; }
.characters-page .character-hero__stats span { padding:10px 14px; border-color:#54383e; border-radius:8px; background:#171216dc; color:#bdb4ae; font-size:12px; }
.characters-page .character-hero__stats b { color:var(--char-gold); }
.characters-page .character-hero__actions .btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px !important; }

.characters-page .page-header { position:relative; width:min(calc(100% - 64px),1480px) !important; max-width:1480px !important; margin-inline:auto !important; padding:100px 0 26px !important; text-align:left; overflow:hidden; }
.characters-page .page-header h1 { margin:8px 0 12px; color:#f4ece5; font-size:clamp(42px,5vw,72px); line-height:1.05; letter-spacing:.01em; text-shadow:none; }
.characters-page .page-header p { margin:0; color:#aaa19a; font-size:17px; font-style:normal; line-height:1.7; }
.characters-page .characters-section-index { position:absolute; left:0; top:36px; z-index:0; color:#8c1527; font:700 76px/1 'Cinzel',serif; opacity:.44; pointer-events:none; }
.characters-page .page-header > :not(.characters-section-index),
.characters-page .comparison-panel > :not(.characters-section-index),
.characters-page .character-links > :not(.characters-section-index) { position:relative; z-index:1; }

.characters-page .controls-container { width:min(calc(100% - 64px),1480px) !important; max-width:1480px !important; margin:4px auto 38px !important; padding:22px; align-items:stretch; gap:18px; border:1px solid #3a3034; border-radius:18px; background:linear-gradient(140deg,#171216,#0c0c0e 68%); box-sizing:border-box; }
.characters-page .character-search { width:100%; box-sizing:border-box; padding:7px 17px; border-color:#43363b; border-radius:10px; background:#0b0b0e; }
.characters-page .character-search input { min-height:40px; font-size:16px; }
.characters-page .filters { justify-content:flex-start; gap:9px; }
.characters-page .filter-btn { min-height:42px; padding:10px 15px; border-color:#44383c; border-radius:8px !important; color:#bdb4ae; background:#121013; font-size:13px; }
.characters-page .filter-btn:hover,
.characters-page .filter-btn.active { border-color:#b32b3d; color:#fff1e6; background:#4b1420; box-shadow:none; }
.characters-page .sort-box { align-self:flex-start; padding:8px 12px; border-color:#43363b; border-radius:9px; background:#0b0b0e; }
.characters-page .sort-box label { color:#aaa19a; font-size:14px; }
.characters-page .sort-box select { min-height:36px; padding:6px 32px 6px 10px; border-color:#43363b; border-radius:6px; background:#151217; font-size:15px; }

.characters-page .grid { display:flex; flex-wrap:wrap; justify-content:center; width:min(calc(100% - 64px),1480px) !important; max-width:1480px !important; margin:0 auto 70px !important; padding:0; gap:22px; box-sizing:border-box; }
.characters-page .card { flex:1 1 286px; width:100%; max-width:338px; min-height:430px; border-color:#393035; border-radius:18px !important; background:#0d0d10; box-shadow:0 18px 42px #0007; }
.characters-page .card::after { background:linear-gradient(180deg,transparent 38%,#0b0b0ee6 70%,#0b0b0e); }
.characters-page .card:hover,
.characters-page .card.selected-card { border-color:#a54a50; box-shadow:0 24px 50px #0009,0 0 0 1px #d3233929; transform:translateY(-7px); }
.characters-page .card-img { height:285px; filter:grayscale(.55) contrast(1.1) brightness(.78); transform:scale(1.01); transition:filter .35s,transform .45s; }
.characters-page .card:hover .card-img { filter:grayscale(.05) contrast(1.07) brightness(.95); transform:scale(1.055); }
.characters-page .card-body { padding:23px 22px 25px; text-align:left; }
.characters-page .card h2 { margin:2px 0 7px; color:#f4ebe3; font-size:25px; text-transform:none; }
.characters-page .card p { color:var(--char-red); font-size:13px; letter-spacing:.06em; }
.characters-page .card .desc-short { margin-top:10px; color:#aaa19a; font-size:15px; line-height:1.5; font-style:normal; }
.characters-page .card-tier { margin-bottom:13px; border-color:#5d3a3d; border-radius:7px; color:#d5b06f; background:#271a18; }
.characters-page .card-action { margin-top:18px; padding:0; border:0; border-radius:0; color:var(--char-gold); background:none; font-size:12px; opacity:1; transform:none; }
.characters-page .status-badge { top:15px; right:15px; padding:7px 10px; border-radius:7px; background:#08080bdb; font-size:12px; backdrop-filter:blur(8px); }
.characters-page .favorite-toggle { border-radius:7px !important; }
.characters-page .atlas-context-menu { display:none !important; }
.characters-page .character-guide { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr); align-items:center; gap:50px; width:min(calc(100% - 64px),1480px) !important; max-width:1480px !important; margin:92px auto 0 !important; padding:40px clamp(34px,5vw,72px); border:1px solid #403338; border-radius:20px; background:linear-gradient(120deg,#171216,#0c0c0e 70%); box-sizing:border-box; }
.characters-page .character-guide::before { display:none; }
.characters-page .character-guide .archive-heading { margin:9px 0 0; color:#f4ece5; font-size:clamp(32px,3.5vw,52px); line-height:1.08; }
.characters-page .character-guide__copy { display:flex; align-items:center; gap:30px; }
.characters-page .character-guide .archive-lead { flex:1; margin:0; color:#aaa19a; font-size:16px; line-height:1.7; }
.characters-page .character-guide .archive-button { flex:0 0 auto; min-height:46px; padding:12px 17px; border:1px solid #8e3442; border-radius:8px !important; color:#f4ded9; background:#4d1721; font-size:12px; cursor:pointer; }
.characters-page .character-guide .archive-button:hover { border-color:#db4559; background:#711c2b; transform:translateY(-2px); }

.characters-page .comparison-panel,
.characters-page .character-links { position:relative; width:min(calc(100% - 64px),1480px) !important; max-width:1480px !important; margin:110px auto 0 !important; padding:58px clamp(34px,5vw,72px); border-color:#403338; border-radius:22px; background:radial-gradient(ellipse at 92% 8%,#78192b30,transparent 48%),#101012; box-shadow:0 25px 65px #0008; box-sizing:border-box; }
.characters-page .comparison-panel { grid-template-columns:minmax(260px,.72fr) minmax(500px,1.45fr); align-items:center; gap:42px 54px; }
.characters-page .comparison-panel .characters-section-index,
.characters-page .character-links .characters-section-index { top:-45px; left:0; }
.characters-page .comparison-panel h2,
.characters-page .character-links h2 { margin:12px 0 16px; color:#f4ece5; font-family:'Cinzel',Georgia,serif; font-size:clamp(36px,4vw,59px); font-weight:700; line-height:1.08; letter-spacing:.01em; }
.characters-page .comparison-panel p { color:#aaa19a; font-size:16px; line-height:1.65; }
.characters-page .comparison-controls { grid-template-columns:minmax(150px,1fr) 40px minmax(150px,1fr) auto; gap:12px; }
.characters-page .comparison-controls select { min-height:48px; padding:12px 14px; border-color:#473a40; border-radius:9px; background:#17141a; font-size:15px; }
.characters-page .comparison-controls .btn { min-height:48px; border-radius:9px !important; }
.characters-page .comparison-result { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-height:0; margin-top:0; padding:0; border:0; background:transparent; color:#c5bbb4; font-size:15px; line-height:1.55; }
.characters-page .comparison-result span { display:block; padding:17px 18px; border:1px solid #403438; border-radius:10px; background:#0a0a0c; }
.characters-page .comparison-meter { width:100px; height:7px; background:#2a2529; }
.characters-page .comparison-meter i { background:linear-gradient(90deg,var(--char-red),var(--char-gold)); }

.characters-page .character-links { margin-bottom:110px !important; overflow:hidden; text-align:left; }
.characters-page .character-links::after { content:'ЗВ’ЯЗКИ'; position:absolute; right:-20px; bottom:-40px; color:#ffffff08; font:700 110px/1 'Cinzel',serif; pointer-events:none; }
.characters-page .character-links > .eyebrow,
.characters-page .character-links > h2 { display:block; text-align:center; }
.characters-page .links-map { grid-template-columns:minmax(190px,1fr) minmax(180px,.7fr) minmax(190px,1fr); max-width:920px; gap:12px 22px; margin-top:38px; padding:24px; border:1px solid #392f33; border-radius:16px; background:#0a0a0c; }
.characters-page .link-node { position:relative; padding:17px 20px 17px 25px; border-color:#544047; border-radius:10px; background:linear-gradient(120deg,#1b1519,#121114); color:#f1e7df; font-size:15px; transition:transform .2s,border-color .2s,background .2s; }
.characters-page .link-node::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--char-red); }
.characters-page .link-node:hover { transform:translateY(-2px); border-color:#8e4d59; background:#21171c; }
.characters-page .links-map i { position:relative; padding:8px 5px; color:#c0a774; font-size:13px; text-align:center; }
.characters-page .links-map i::before,
.characters-page .links-map i::after { content:''; display:inline-block; width:24px; height:1px; margin:0 9px 3px; background:#71424a; }

.characters-page .preview-overlay { background:#000c; backdrop-filter:blur(10px); }
.characters-page #characterPreview.character-preview { width:min(1180px,calc(100vw - 40px)); height:min(760px,calc(100vh - 40px)); border:1px solid #604047; border-radius:24px; background:#0d0d10; box-shadow:0 35px 100px #000; }
.characters-page .dossier-topline { min-height:58px; padding:0 76px 0 25px; border-color:#472f34; background:#0b0b0d; color:var(--char-gold); font-size:12px; }
.characters-page .dossier-topline__actions button { min-height:32px; padding:5px 10px; border-color:#513c3e; border-radius:7px !important; color:#cfb887; background:#171216; }
.characters-page #characterPreview .preview-close { top:11px; right:14px; width:38px; height:38px; border-color:#69343d; border-radius:9px; color:#f2d9d6; background:#35131b; box-shadow:none; }
.characters-page .dossier-layout { grid-template-columns:410px minmax(0,1fr); height:calc(100% - 58px); }
.characters-page .dossier-portrait { padding:24px; border-color:#452e34; background:radial-gradient(circle at 50% 35%,#7a1a2e48,transparent 43%),linear-gradient(145deg,#171216,#09090b); }
.characters-page .dossier-portrait::before,
.characters-page .dossier-portrait::after { border-color:#b52a414d; }
.characters-page .dossier-portrait__runes { inset:43px 27px 128px; border-color:#9d3343a6; }
.characters-page .dossier-portrait__runes::after { color:var(--char-gold); border-color:#8b5360; background:#191015; }
.characters-page #characterPreview .dossier-portrait img { height:min(430px,51vh); border-color:#70434a; border-radius:14px; filter:saturate(.74) contrast(1.1); box-shadow:0 20px 38px #000b; }
.characters-page .dossier-nameplate { margin:-23px 16px 0; padding:17px; border-color:#8f603c; border-radius:10px; background:linear-gradient(115deg,#2b1718,#58311e,#2b1718); box-shadow:0 10px 25px #0009; }
.characters-page #characterPreview .dossier-nameplate h2 { color:#ffe4ad; font-size:29px; }
.characters-page #characterPreview .dossier-nameplate p { color:#d7b572; font-size:12px; }
.characters-page #characterPreview .preview-traits span { padding:7px 10px; border-color:#624747; border-radius:7px; color:#d5b777; background:#171216; font-size:12px; }
.characters-page .dossier-collect { min-height:44px; border-color:#664447; border-radius:8px !important; color:#e1c88f; background:#171216; font-size:12px; }
.characters-page .dossier-content { padding:25px 28px 24px; background:radial-gradient(ellipse at 100% 0,#6e16272b,transparent 48%),#111012; }
.characters-page #characterPreview .dossier-tabs { gap:7px; padding:6px; border-color:#49363a; border-radius:11px; background:#09090b; }
.characters-page #characterPreview .dossier-tabs button { min-height:48px; border-radius:7px !important; color:#b9afa8; font-size:13px; }
.characters-page #characterPreview .dossier-tabs button.active,
.characters-page #characterPreview .dossier-tabs button:hover { color:#ffe7b7; border-color:#805340; background:#3d2020; box-shadow:none; }
.characters-page #characterPreview .dossier-panel h3 { margin:9px 0 15px; color:#f4e7d7; font-size:29px; }
.characters-page .dossier-kicker { color:var(--char-red); font-size:12px; }
.characters-page #characterPreview .dossier-panel p#previewDesc { color:#c4bab2; font-size:16px; line-height:1.75; }
.characters-page #characterPreview blockquote { padding:18px 20px; border-color:#49363a; border-left-color:var(--char-red); border-radius:8px; color:#d7c7b5; background:#0c0b0d; font-size:16px; }
.characters-page #characterPreview .preview-info { gap:15px; padding:22px; border-color:#49363a; border-radius:10px; background:#0b0b0d; }
.characters-page #characterPreview .preview-info p { grid-template-columns:120px 1fr 44px; color:#ead8bd; font-size:15px; }
.characters-page .preview-meter { height:7px; background:#2b2528; }
.characters-page .preview-meter i { background:linear-gradient(90deg,var(--char-red),var(--char-gold)); }
.characters-page .dossier-timeline span { min-height:35px; color:#c1b6ad; font-size:14px; }
.characters-page .dossier-timeline i { width:28px; height:28px; border-color:#76523c; color:var(--char-gold); font-size:11px; }
.characters-page .preview-relationship-map b,
.characters-page .dossier-arsenal article,
.characters-page #characterPreview .preview-related a,
.characters-page .dossier-archive-summary span { border-color:#49383b; border-radius:8px; background:#0c0b0d; }
.characters-page .dossier-arsenal article { min-height:64px; padding:15px; }
.characters-page .dossier-arsenal b { color:#e9d9c1; font-size:15px; }
.characters-page .dossier-arsenal small,
.characters-page .dossier-archive-summary span { font-size:12px; }

@media(max-width:1000px) {
 .characters-page .character-hero,.characters-page .page-header,.characters-page .controls-container,.characters-page .grid,.characters-page .character-guide,.characters-page .comparison-panel,.characters-page .character-links { width:calc(100% - 48px) !important; margin-left:auto !important; margin-right:auto !important; }
 .characters-page .character-guide { grid-template-columns:1fr; gap:22px; }
 .characters-page .comparison-panel { grid-template-columns:1fr; }
 .characters-page .comparison-result { grid-column:1; margin:0; padding:18px 20px; min-height:0; }
 .characters-page .dossier-layout { grid-template-columns:360px minmax(0,1fr); }
 .characters-page .dossier-tabs button span { display:block; margin:0 0 3px; }
}
@media(max-width:800px) {
 .characters-page .berserk-side { display:none; }
 .characters-page nav,.characters-page .page-header,.characters-page .controls-container,.characters-page .grid,.characters-page .footer { margin-left:auto !important; }
 .characters-page .character-hero,.characters-page .page-header,.characters-page .controls-container,.characters-page .grid,.characters-page .character-guide,.characters-page .comparison-panel,.characters-page .character-links { width:calc(100% - 32px) !important; margin-left:auto !important; margin-right:auto !important; }
 .characters-page .character-hero { min-height:520px; margin-top:18px !important; padding:38px 25px; background:linear-gradient(180deg,#0a0a0da6,#0a0a0df5),url('images/guts-berserk.png') 68% 18% / auto 92% no-repeat,#111114; }
 .characters-page .page-header { padding-top:82px !important; }
 .characters-page .comparison-panel,.characters-page .character-links { margin-top:90px !important; padding:30px 24px; }
 .characters-page .character-guide { margin-top:72px !important; padding:28px 24px; }
 .characters-page .character-guide__copy { align-items:stretch; flex-direction:column; }
 .characters-page .comparison-controls { grid-template-columns:1fr; }
 .characters-page .comparison-versus { text-align:center; }
 .characters-page .links-map { grid-template-columns:1fr; }
 .characters-page .links-map i::before,.characters-page .links-map i::after { width:34px; }
 .characters-page #characterPreview.character-preview { width:calc(100vw - 18px); height:calc(100vh - 18px); border-radius:16px; }
 .characters-page .dossier-layout { grid-template-columns:1fr; overflow-y:auto; }
 .characters-page .dossier-portrait { padding:16px; }
 .characters-page #characterPreview .dossier-portrait img { height:310px; }
 .characters-page .dossier-content { padding:20px 16px; overflow:visible; }
 .characters-page .dossier-tabs { position:sticky !important; top:0 !important; z-index:4; }
}
@media(max-width:560px) {
 .characters-page .character-hero h1 { font-size:52px; }
 .characters-page .grid { grid-template-columns:1fr; }
 .characters-page .card { flex-basis:100%; max-width:430px; }
 .characters-page .comparison-result { grid-template-columns:1fr; }
 .characters-page .card-img { height:330px; }
 .characters-page .controls-container { padding:15px; }
 .characters-page .filters { display:grid; grid-template-columns:1fr 1fr; }
 .characters-page .filter-btn { padding:9px; font-size:12px; }
 .characters-page .sort-box { width:100%; box-sizing:border-box; justify-content:space-between; }
 .characters-page #characterPreview .dossier-tabs button { font-size:0; }
 .characters-page #characterPreview .dossier-tabs button span { font-size:18px; }
 .characters-page .dossier-topline { padding-left:15px; }
 .characters-page .dossier-topline > span:first-child { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .characters-page .card,.characters-page .card-img,.characters-page #characterPreview.character-preview { transition:none; }
}