/* CY_BORG — арты из рулбука и дополнительные шрифты (Bebas Neue, Jura, Russo One — близкие кириллические аналоги шрифтов книги) */
:root { --f-bebas: 'Bebas Neue', 'Oswald', Impact, sans-serif; --f-jura: 'Jura', 'Tektur', 'Consolas', monospace; }

/* шрифты */
.ticker, .chapter .vt, .sec-h .tape, .steps a, .dock { font-family: var(--f-bebas); letter-spacing: .08em; }
.ticker span { font-size: 1.15em; }
.btn { font-family: var(--f-bebas); font-size: 18px; letter-spacing: .08em; font-weight: 400; }
.btn.sm { font-size: 16px; } .btn.xs { font-size: 14px; }
.sec-note, .ccard p, .res .sub, .card p, .class-detail .tagline, .trait, .lede, .footer p { font-family: var(--f-jura); font-weight: 500; }
.sec-h h2 { font-family: var(--f-bebas); font-weight: 400; letter-spacing: .02em; }
.ccard h3, .class-detail h3, .ab h3 { font-family: var(--f-bebas); font-weight: 400; letter-spacing: .03em; }
.rule00 h3 { font-family: var(--f-block); letter-spacing: .06em; }

/* арты в шапках секций: справа, растворяются к тексту */
.band > .wrap { isolation: isolate; }
.band > .wrap::before { content: ''; position: absolute; z-index: -1; right: 0; top: -40px; bottom: -48px; width: min(42%, 520px); pointer-events: none;
  background: var(--art) center / cover no-repeat; opacity: var(--a, .34);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%); mask-image: linear-gradient(90deg, transparent 0, #000 55%); }
#s-name { --art: url(../img/name.webp); --a: .5; }
#s-abil { --art: url(../img/abil.webp); --a: .3; }
#s-gear { --art: url(../img/gear.webp); --a: .4; }
#s-debt { --art: url(../img/debt.webp); --a: .28; }
#s-glitch { --art: url(../img/glitch.webp); --a: .55; }
#s-hp { --art: url(../img/hp.webp); --a: .38; }
#s-look { --art: url(../img/look.webp); --a: .45; }
#s-class .wrap::before { display: none; }
.b-yellow > .wrap::before, .b-pink > .wrap::before, .b-blue > .wrap::before, .b-paper > .wrap::before { mix-blend-mode: multiply; }
#s-sheet > .wrap::before { display: none; }

/* герой: неоновая улица под скайлайном */
.hero { isolation: isolate; }
/* фон героя живёт как на столе: медленный дрейф камеры и резкие глитч-подрагивания (кадры tv-drift / tv-glitch из table-ui.css) */
.hero .hero-bg { position: absolute; inset: -6%; z-index: -1; pointer-events: none; backface-visibility: hidden;
  background: linear-gradient(90deg, rgba(5, 6, 13, .9), rgba(5, 6, 13, .55) 55%, rgba(5, 6, 13, .2)), linear-gradient(180deg, rgba(5, 6, 13, .15), rgba(5, 6, 13, .8)), url(../img/hero.webp) center 36% / cover no-repeat; }
.hero .skyline { mix-blend-mode: screen; opacity: .45; }
/* постер обложки справа: растворяется в городе к тексту */
.hero .hero-poster { position: absolute; right: 0; top: 0; width: min(46vw, 640px); height: 100%; object-fit: cover; object-position: center 12%; pointer-events: none; z-index: 0; filter: saturate(1.15) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }

/* карточки классов: арт на фоне */
.ccard { isolation: isolate; overflow: hidden; }
.ccard .cbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: -1; opacity: .3; filter: saturate(1.3);
  transition: opacity .3s, transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.ccard:hover .cbg { opacity: .55; transform: scale(1.08); }
.ccard[aria-pressed=true] .cbg { opacity: .4; mix-blend-mode: multiply; }

/* портрет выбранного класса */
.class-detail { overflow: hidden; }
.class-detail .portrait { float: right; width: min(240px, 34%); aspect-ratio: 5 / 7; object-fit: cover; margin: 0 0 14px 22px; border: 4px solid var(--y); box-shadow: 8px 8px 0 var(--p); transform: rotate(1.5deg); background: #111; }
.class-detail .traits, .class-detail .sub-h { clear: none; }
.class-detail .grid { clear: both; }

/* герой-цитата обложки на листе панка */
.sheet-h .cl { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .class-detail .portrait { animation: portrait .6s cubic-bezier(.2, 1.1, .3, 1); }
  @keyframes portrait { from { opacity: 0; transform: translateX(40px) rotate(6deg) scale(.9); filter: hue-rotate(90deg) brightness(1.6); } }
  .hero .hero-bg { animation: tv-drift 38s ease-in-out infinite alternate, tv-glitch 8s steps(1) infinite; }
  .hero .hero-poster { animation: tv-glitch 8s steps(1) infinite; }
}
@media (max-width: 860px) {
  .band > .wrap::before { width: 70%; opacity: calc(var(--a, .3) * .55); top: -20px; bottom: -24px; }
  .class-detail .portrait { float: none; display: block; width: 100%; max-height: 260px; aspect-ratio: auto; margin: 0 0 14px; transform: none; }
  .hero .hero-poster { width: 80vw; opacity: .5; }
}
@media print { .band > .wrap::before, .ccard .cbg, .class-detail .portrait, .hero .hero-bg, .hero .hero-poster { display: none !important; } .hero { background: none; } }