/* Second visual pass. Existing layout/breakpoints live in style.css.
   A faction changes only these tokens; unknown or unset factions stay neutral. */
:root {
  --bg: #101012;
  --panel: #19191b;
  --line: #3d3936;
  --ink: #e7decb;
  --muted: #b5afa4;
  --red: #9b403c;
  --red-dark: #78302e;
  --gold: #c0ac86;
  --faction-accent: #aa987c;
  --faction-soft: #aa987c1c;
  --paper: #cbbb9c;
  --paper-ink: #29251f;
  --paper-muted: #51483b;
}
/* Exact state colors from RL_MAP_LORE in game/rl_worldmap.rpy. */
[data-faction="empire"] { --faction-accent: #b23a2c; --faction-soft: #b23a2c29; }
[data-faction="elven_trinity"] { --faction-accent: #7d5ca6; --faction-soft: #7d5ca626; }
[data-faction="holy_duocracy"] { --faction-accent: #d8ab4e; --faction-soft: #d8ab4e26; }
[data-faction="orc_union"] { --faction-accent: #e6e0d2; --faction-soft: #e6e0d21c; }
[data-faction="wagg"] { --faction-accent: #3f6ba0; --faction-soft: #3f6ba029; }
[data-faction="feudal_kingdom"] { --faction-accent: #5c7d40; --faction-soft: #5c7d4026; }

body { background: radial-gradient(ellipse at 0 35%, #582d2010, transparent 50%), var(--bg); }
.site-header { background: #121214; border-bottom: 3px double #4e423b; }
.brand img { filter: saturate(.65); }
.brand>span { letter-spacing: 2.5px; }
nav a { min-height: 44px; display: inline-flex; align-items: center; }
.button { border-color: #b07361; box-shadow: inset 0 0 0 3px #170a091c; }
.button-outline, .button-ghost { border-color: #756450; }
.button-text { box-shadow: none; }
.hero { border-bottom: 3px double #544337; background: #141418; }
.hero:before {
  background: linear-gradient(90deg,#111113f5 0%,#111113df 27%,#11111383 54%,#11111322 88%),linear-gradient(0deg,#101012,transparent 60%);
}
.hero-art img { filter: saturate(.35) sepia(.12); }
.hero-content { position: relative; }
.hero .eyebrow { color: #cab598; }
.hero-logo { letter-spacing: 6px; }
.hero-meta { border-top: 1px solid #7c665f55; width: fit-content; padding-top: 20px; }
.hero-caption { border: 1px solid #b2846866; padding: 10px 16px; transform: rotate(-3deg); color: #c1ab91; }
.eyebrow { letter-spacing: 2.2px; }
.about, .casting, .closing, .site-footer { border-color: #514338; }
.about h2, .section-heading h2, .help-section h2 { text-wrap: balance; }
.page-heading { position: relative; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.page-heading:after { content: ''; position: absolute; width: 74px; height: 3px; bottom: -2px; left: 0; background: var(--red); }
.demo-notice { border-color: #94724f; background: #98805e10; color: #c1b6a4; }
.filters { border-top: 0; }
.filters input, .filters select { background: #1d1c1c; border-color: #65564a; }

/* Portraits sit in a recessed iron plate; the image itself never uses cover. */
.character-grid { gap: 30px; row-gap: 42px; }
.character-card {
  position: relative;
  border: 1px solid #63574a;
  background: #19191b;
  box-shadow: 0 12px 26px #0003;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card-portrait {
  height: 450px;
  overflow: visible;
  background: transparent;
  border-bottom: 0;
  isolation: isolate;
}
.card-portrait:before {
  content: '';
  position: absolute;
  inset: 46px 18px 0;
  background: radial-gradient(ellipse at 50% 54%,#e0cba926,transparent 67%),linear-gradient(145deg,var(--faction-soft),#212126 55%,#151518);
  border: 1px solid #5f554a;
  border-top-color: var(--faction-accent);
  box-shadow: inset 0 0 36px #0004;
  z-index: -1;
}
.card-portrait:after { inset: 58px 30px 12px; box-shadow: none; border: 1px solid #a6947021; z-index: -1; }
.file-number { top: 15px; left: 18px; font: 10px/1.4 'Courier New',monospace; color: #c0b39b; letter-spacing: 1.2px; }
.portrait-mark { color: var(--faction-soft); top: 105px; right: 40px; font-size: 140px; }
.sprite-frame { display: block; position: relative; width: 100%; height: 100%; z-index: 1; }
.card-portrait .sprite-frame { height: calc(100% - 20px); top: 20px; }
.card-portrait .sprite-frame img {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  padding: 0 10px; filter: drop-shadow(0 9px 8px #0007);
}
.sprite-placeholder {
  display: none; position: absolute; inset: 25px 15px; align-items: center; justify-content: flex-end;
  flex-direction: column; padding: 25px 12px; text-align: center; color: #d2c2a7;
  background: url('/assets/ui/portrait-pending.svg') center 30% / auto 65% no-repeat;
}
.sprite-placeholder strong { font: 22px var(--serif); font-weight: normal; }
.sprite-placeholder small { font-size: 11px; margin-top: 8px; color: #b5a991; }
.sprite-frame.is-missing .sprite-placeholder { display: flex; }
.sprite-frame.is-missing img { display: none; }
.card-portrait .status {
  position: absolute; right: 15px; bottom: 16px; z-index: 3;
  padding: 7px 10px; background: #151517ed; border: 1px solid #625d50;
  font-size: 10px; box-shadow: 0 3px 8px #0004;
}
.card-body {
  position: relative;
  padding: 26px;
  background: url('/assets/ui/paper-grain.svg'),linear-gradient(115deg,#ded1b7,var(--paper) 65%,#b4a180);
  color: var(--paper-ink);
  border-top: 3px double #857155;
}
.card-body:after { content: ''; position: absolute; left: 9px; top: 13px; bottom: 13px; width: 1px; background: #6e473c36; pointer-events: none; }
.card-body .faction { color: #5d4033; font-size: 9px; margin: 0 0 9px; }
.card-body h3 { font-size: 36px; margin-bottom: 15px; letter-spacing: -.7px; }
.card-body>p:not(.faction) { color: var(--paper-muted); line-height: 1.65; font-size: 12px; }
.card-body .voice-spec { border-color: #75634a66; margin: 0 0 15px; padding: 12px 0; }
.card-body .voice-spec dt { color: #5c5141; font-size: 10px; }
.card-body .voice-spec dd { color: #25221c; font-size: 14px; }
.card-body .traits { font-style: italic; }
.card-body>.button, .card-body>.text-link { font-size: 12px; color: #30251d; border-color: #786348; }
.card-body>.button { background: #422f1b08; }
.card-body>.text-link { border-top: 1px solid #78634866; justify-content: space-between; }

/* Waist-up dossier framing; original sprites and catalogue framing stay intact. */
.dossier { gap: 40px; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
.dossier-portrait {
  background: radial-gradient(ellipse at center,#dccca628,transparent 68%),linear-gradient(140deg,var(--faction-soft),#202025 60%,#141417);
  border-color: #76634d;
  border-top: 3px solid var(--faction-accent);
  margin-top: 25px;
}
.dossier-portrait:before { content: ''; position: absolute; inset: 15px 15px 72px; border: 1px solid #ae926333; pointer-events: none; }
.dossier-portrait .sprite-frame { height: auto; aspect-ratio: 1 / 1.1; overflow: hidden; }
.dossier-portrait .sprite-frame img {
  position: absolute; top: 12px; left: -65%; width: 230%; height: 220%;
  max-width: none; max-height: none; object-fit: contain; object-position: center top;
  padding: 0; filter: drop-shadow(0 9px 10px #0006);
}
.dossier-stamp { border-top: 1px solid #76634d; font: 11px/1.4 'Courier New',monospace; color: #d1bd9b; letter-spacing: 2px; }
.dossier-content {
  position: relative;
  background: url('/assets/ui/paper-grain.svg'),linear-gradient(115deg,#dfd2b5,#c9b895 85%,#bfab84);
  color: var(--paper-ink); padding: 37px 38px; border: 1px solid #9a8057;
  box-shadow: 5px 5px 0 #514332, 6px 6px 0 #1a1715, 0 12px 25px #0003;
}
.dossier-content:before { content: ''; position: absolute; inset: 12px; border: 1px solid #69513940; pointer-events: none; }
.dossier-content>.eyebrow { color: #71443a; padding-bottom: 17px; border-bottom: 3px double #927d5a; letter-spacing: 1px; font-family: 'Courier New',monospace; overflow-wrap: anywhere; }
.dossier h1 { font-size: clamp(42px,4.8vw,66px); margin: 18px 0 14px; overflow-wrap: anywhere; }
.dossier-content p { color: #4b4133; line-height: 1.8; }
.dossier-content .lead { color: #3c3025; font-size: 16px; }
.dossier-content .faction { color: #75493c; font-size: 10px; }
.dossier-content h2 { font-size: 28px; margin-top: 28px; }
.dossier-content h3 { font-size: 21px; }
.dossier-content .status { color: #3f5331; border: 1px solid currentColor; padding: 5px 9px; font: 10px/1.4 'Courier New',monospace; text-transform: uppercase; transform: rotate(-2deg); }
.dossier-content .status-review { color: #75541a; }
.dossier-content .status-cast { color: #3e5266; }
.dossier-content .status-closed { color: #6d4038; }
.dossier-content .tags span { color: #53402a; border-color: #88704c88; }
.dossier-content .voice-panel { background: #4636200b; border-color: #825046; padding: 21px; }
.dossier-content .voice-panel .eyebrow { color: #644337; }
.dossier-content .voice-spec { border-color: #87705066; }
.dossier-content .voice-spec dt { color: #655440; }
.dossier-content .voice-spec dd { color: #2f281e; }
.test-lines { max-width: 930px; border-top: 3px double #6f5742; }
.test-lines ol { padding: 0; list-style: none; counter-reset: line; }
.test-lines li { counter-increment: line; display: flex; align-items: baseline; border: 1px solid #aa9067; margin-bottom: 12px; padding: 14px 25px; background: url('/assets/ui/paper-grain.svg'),#cdbd9e; }
.test-lines li:before { content: counter(line,decimal-leading-zero); color: #805345; font: 14px 'Courier New',monospace; }
.test-lines blockquote { color: #30271e; padding: 10px 20px; font-size: 24px; }
.dossier-apply { text-align: center; padding-top: 15px; }
.dossier-apply>.button { min-width: min(100%,380px); min-height: 60px; font-size: 14px; }
.dossier-apply>.notice { color: var(--ink); }

/* Faction accents are shared with character cards via faction_id. */
.faction-card { background: linear-gradient(135deg,var(--faction-soft),#19191d 75%); border-color: #594e45; border-top: 2px solid var(--faction-accent); }
.faction-index { font-family: 'Courier New',monospace; font-size: 36px; color: var(--faction-accent); opacity: .55; }
.faction-card .eyebrow,.faction-card .archive-label { color: color-mix(in srgb,var(--faction-accent) 65%,#fff); }
.faction-emblem { position: absolute; right: 22px; top: 27px; width: 74px; height: 74px; background: var(--faction-accent); opacity: .6; mask: url('/assets/factions/placeholder.svg') center / contain no-repeat; }
.faction-emblem.has-emblem { background: none; mask: none; opacity: 1; }
.faction-emblem img { width: 100%; height: 100%; object-fit: contain; }
.faction-emblem img[hidden] { display: none; }

/* Help directions read as archive slips, each retaining its own Telegram payload. */
.help-grid { border: 0; gap: 18px; }
.help-card { position: relative; min-width: 0; min-height: 264px; padding: 26px; border: 1px solid #5c4e42; background: linear-gradient(115deg,#282322,#18181b 80%); box-shadow: 3px 3px 0 #0003; }
.help-card:before { content: ''; position: absolute; top: -1px; left: 24px; width: 38px; height: 3px; background: #9d5a4c; }
.help-number { font: 13px 'Courier New',monospace; color: #c7a787; margin: 0 0 27px; padding-bottom: 12px; border-bottom: 1px solid #61503e; }
.help-number:after { content: ' / НАПРАВЛЕНИЕ'; font-size: 8px; letter-spacing: 1px; }
.help-card h3 { font-size: 27px; overflow-wrap: anywhere; }
.help-card p { font-size: 13px; }
.help-card .button { padding-top: 12px; border-top: 1px solid #68533f66; width: 100%; justify-content: space-between; font-size: 12px; color: #d4b596; }
.steps li { border-color: #514338; }
.steps li>span { font-family: 'Courier New',monospace; font-size: 24px; color: #b88c71; }
.closing { border-top: 3px double #65503d; }
@media(hover:hover) {
  .character-card:hover { border-color: var(--faction-accent); box-shadow: 0 15px 30px #0005; }
  .card-portrait:hover img { transform: translateY(-4px); }
  .card-body>.button:hover { color: #fff0d6; background: #643f32; border-color: #643f32; }
  .card-body>.text-link:hover { color: #7b3226; }
  .help-card:hover { background: linear-gradient(115deg,#342a25,#201d1d 80%); border-color: #9b7658; }
}
@media(min-width:1600px) { .card-portrait { height: 480px; } }
@media(max-width:1100px) {
  .character-grid { gap: 22px; row-gap: 32px; }
  .card-portrait { height: 405px; }
  .card-body { padding: 23px; }
  .dossier { gap: 28px; }
  .dossier-content { padding: 28px; }
}
@media(max-width:800px) {
  .dossier { grid-template-columns: 1fr; }
  .dossier-portrait { margin-top: 0; }
  .dossier-content { padding: 35px; }
  .card-portrait { height: 440px; }
  .hero:before { background: linear-gradient(90deg,#111113ed,#111113b3 65%,#11111373),linear-gradient(0deg,#101012,transparent); }
}
@media(max-width:600px) {
  .character-grid { gap: 30px; }
  .card-portrait { height: clamp(370px,112vw,480px); }
  .card-portrait .sprite-frame img { padding-inline: 8px; }
  .card-body { padding: 25px; }
  .card-body h3 { font-size: 38px; }
  .hero-meta { width: 100%; }
  .dossier-content { padding: 27px 25px; }
  .dossier-content .voice-panel { padding: 16px; }
  .dossier-content .voice-spec { grid-template-columns: 1fr; gap: 12px; }
  .test-lines li { padding: 10px 14px; }
  .test-lines blockquote { font-size: 21px; padding: 9px 0 9px 15px; }
  .help-grid { gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .help-card { padding: 21px 15px; min-height: 275px; }
  .help-card h3 { font-size: 23px; }
  .help-card p { font-size: 12px; }
  .help-card .button { font-size: 11px; flex-wrap: wrap; }
  .help-number:after { font-size: 7px; letter-spacing: 0; }
}
@media(max-width:380px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-card { min-height: 230px; padding: 25px; }
  .help-card h3 { font-size: 26px; }
  .help-card .button { font-size: 12px; }
  .dossier-content { padding: 25px 21px; }
}
@media(prefers-reduced-motion:reduce) {
  .card-portrait:hover img { transform: none; }
}

/* Final catalogue pass: variations stay attached to the original record order,
   so filtering never changes the dossier number or its appearance. */
.catalog-presets { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 0 12px; }
.catalog-presets button {
  min-height: 46px; padding: 11px 23px; border: 1px solid #665342;
  background: #1b1919; color: #cbbfa9; font-size: 13px; line-height: 1.5;
  box-shadow: inset 0 -2px #0003;
}
.catalog-presets button[aria-pressed="true"] { background: #71332d; border-color: #be8468; color: #fff1db; }
.filter-hint { color: #b9aa94; font-size: 11px; margin: 0 0 8px; }
.catalog-list .filters { padding-top: 13px; margin-bottom: 38px; }
.character-card { --file-angle: 115deg; --file-patina: #9375511a; --stamp-angle: -6deg; }
.character-card[data-file-variant="1"] { --file-angle: 155deg; --file-patina: #c0b09e16; --paper: #d1c1a6; --stamp-angle: 5deg; }
.character-card[data-file-variant="2"] { --file-angle: 75deg; --file-patina: #62594425; --paper: #bcaf90; --stamp-angle: -3deg; }
.character-card[data-file-variant="3"] { --file-angle: 130deg; --file-patina: #717d8622; --paper: #c3baa6; --stamp-angle: 7deg; }
.character-card .card-portrait:before {
  background: radial-gradient(circle at 8px 8px,#b1a08766 0 1px,transparent 2px),radial-gradient(circle at calc(100% - 8px) 8px,#b1a08766 0 1px,transparent 2px),linear-gradient(var(--file-angle),var(--file-patina),transparent 62%),radial-gradient(ellipse at 50% 54%,#e0cba926,transparent 67%),linear-gradient(145deg,var(--faction-soft),#212126 55%,#151518);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.character-card[data-file-variant="1"] .card-portrait:after { inset: 60px 34px 12px 24px; border-style: solid double; }
.character-card[data-file-variant="2"] .card-portrait:after { border-left-style: double; border-left-width: 3px; }
.character-card[data-file-variant="3"] .card-portrait:after { inset: 55px 26px 16px 32px; border-top-style: double; border-top-width: 3px; }
.file-number { display: flex; align-items: baseline; gap: 8px; letter-spacing: 1.6px; }
.file-number b { color: #e2d1b5; font-size: 13px; font-weight: normal; }
.file-edition { position: absolute; top: 17px; right: 19px; font: 9px 'Courier New',monospace; letter-spacing: 1px; color: #b0a189; }
.character-card .card-body {
  background: url('/assets/ui/paper-grain.svg'),radial-gradient(ellipse at 100% 0,#69472416,transparent 65%),linear-gradient(var(--file-angle),#dacdb3,var(--paper) 65%,#b4a180);
}
.character-card .card-body:before { content: ''; position: absolute; width: 56px; height: 6px; background: #6b483525; top: -3px; left: 25px; transform: rotate(-1deg); pointer-events: none; }
.character-card[data-file-variant="1"] .card-body:before { left: auto; right: 35px; width: 70px; transform: rotate(2deg); }
.character-card[data-file-variant="2"] .card-body:before { width: 36px; left: 52px; }
.character-card[data-file-variant="3"] .card-body:before { left: 32%; width: 78px; }
.card-insignia { position: absolute; top: 17px; right: 18px; width: 45px; height: 45px; }
.card-insignia .faction-emblem { position: static; display: block; width: 45px; height: 45px; background: #6a4734; opacity: .7; }
.card-insignia .faction-emblem.has-emblem { background: none; opacity: 1; }
.character-card .faction { padding-right: 47px; min-height: 16px; }
.character-card .card-body h3 { padding-right: 28px; overflow-wrap: anywhere; }
.paper-stamp {
  align-self: flex-end; margin: -3px 0 10px; padding: 3px 7px;
  border: 1px solid #74473970; color: #754a3c; transform: rotate(var(--stamp-angle));
  font: 9px/1.2 'Courier New',monospace; letter-spacing: 1.8px;
}
.character-card .card-body .paper-stamp + h3 { margin-top: -17px; }
.card-characteristic { min-height: 40px; margin: 2px 0 18px; transition: opacity .25s ease, transform .25s ease; }
.card-characteristic span { display: block; font: 9px/1.5 'Courier New',monospace; color: #764d3c; letter-spacing: 1.4px; margin-bottom: 3px; }
.card-body>.button.button-apply {
  color: #fff3dc; border: 1px solid #5b211d; background: linear-gradient(110deg,#8b3d33,#6c2b28);
  min-height: 57px; font-size: 13px; box-shadow: inset 0 0 0 3px #d5a27420,0 3px 0 #4520194d;
}
.role-outcome { border: 3px double #645148; padding: 7px 10px; margin: auto 0 0; text-align: center; color: #54473b; background: #46352108; }
.role-outcome span { display: block; font: 9px/1.4 'Courier New',monospace; letter-spacing: 2px; margin-bottom: 4px; }
.role-outcome strong { font: 25px/1.2 var(--serif); display: block; text-wrap: balance; }
[data-casting="CAST"] .role-outcome { color: #3d505a; border-color: #5c6870; }
[data-casting="CLOSED"] .role-outcome { color: #71463d; border-color: #86574b; }
.character-card .card-portrait .sprite-frame img { transform-origin: center bottom; transition: transform .3s ease; }
.character-card:focus-within { border-color: var(--faction-accent); box-shadow: 0 0 0 1px var(--faction-accent),0 14px 30px #0005; }
@media(hover:hover) and (pointer:fine) {
  .card-characteristic { opacity: 0; transform: translateY(5px); }
  .character-card:hover .card-characteristic,.character-card:focus-within .card-characteristic { opacity: 1; transform: none; }
  .character-card:hover { border-color: var(--faction-accent); box-shadow: 0 0 0 1px var(--faction-accent),0 15px 30px #0006; }
  .character-card:hover .card-portrait:before,.character-card:focus-within .card-portrait:before { border-color: var(--faction-accent); box-shadow: inset 0 0 28px var(--faction-soft); }
  .character-card:hover .card-portrait .sprite-frame img,.character-card:focus-within .card-portrait .sprite-frame img { transform: translateY(-3px) scale(1.035); }
  .card-body>.button.button-apply:hover { background: #9b4639; border-color: #703225; color: #fff5e5; }
  .catalog-presets button:hover { border-color: #c19770; color: #fff1db; }
}
@media(min-width:1800px) {
  body[data-page="characters"] .page-heading,body[data-page="characters"] .catalog-list { width: min(1800px,calc(100% - 120px)); }
  .catalog-list .character-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; row-gap: 42px; }
  .catalog-list .card-portrait { height: 460px; }
}
@media(min-width:601px) and (max-width:1100px) {
  .catalog-list .character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-list .card-portrait { height: 440px; }
}
@media(max-width:600px) {
  .catalog-presets { gap: 8px; }
  .catalog-presets button { flex: 1 1 calc(33.333% - 8px); padding: 10px 11px; font-size: 12px; }
  .file-edition { font-size: 8px; }
  .card-body>.button.button-apply { min-height: 58px; font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .character-card .card-characteristic { opacity: 1; transform: none; }
  .character-card:hover .card-portrait .sprite-frame img,.character-card:focus-within .card-portrait .sprite-frame img { transform: none; }
}
@media(max-width:1100px),(hover:none),(pointer:coarse) {
  .character-card .card-characteristic { opacity: 1; transform: none; }
}