/* =========================
   СТРАНИЦА РОЛИ
========================= */

.role-detail-page {
    width: 100%;
    min-height: 100svh;
  
    padding: 0 22px 70px;
    box-sizing: border-box;
  
    color: #fff;
  
    background:
      radial-gradient(
        circle at 70% 10%,
        rgba(255,255,255,0.04),
        transparent 30%
      ),
      #050505;
  }
  
  
  /* =========================
     ШАПКА
  ========================= */
  
  .role-detail-header {
    position: relative;
    z-index: 10;
  
    height: 84px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .role-detail-back {
    position: absolute;
    left: 0;
  
    color: rgba(255,255,255,0.65);
    text-decoration: none;
  
    font-size: 22px;
  }
  
  .role-detail-logo {
    font-size: 18px;
    letter-spacing: 0.22em;
  }
  
  
/* =========================
   HERO РОЛИ
========================= */

.role-hero {
    position: relative;
  
    min-height: 430px;
  
    /* поднимаем hero под шапку */
    margin: -84px -22px 0;
  
    overflow: hidden;
  }
  
  
  /* ГЛАВНОЕ ИЗОБРАЖЕНИЕ */
  
/* ГЛАВНОЕ ИЗОБРАЖЕНИЕ НА ВСЮ ШАПКУ */

.role-hero-image {
    position: absolute;
    inset: 0;
  
    width: 100%;
    height: 100%;
  
    overflow: hidden;
  }
  
  .role-hero-image img {
    width: 100%;
    height: 100%;
  
    display: block;
  
    object-fit: cover;
    object-position: 114% top;
  
    transform: scale(1.20) translateY(-44px);
    transform-origin: center top;
  }
  
  .role-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  
    background: linear-gradient(
      to bottom,
      transparent 50%,
      rgba(5, 5, 5, 0.25) 65%,
      rgba(5, 5, 5, 0.75) 82%,
      #050505 100%
    );
  }
  
  
  /* ТЕКСТ ПОВЕРХ КАРТИНКИ */
  
  .role-hero-title {
    position: absolute;
  
    z-index: 2;
  
    left: 22px;
    bottom: 172px;
  
    width: 70%;
  }
  
  
  .role-kicker {
    margin: 0 0 20px;
  
    font-size: 9px;
    letter-spacing: 0.30em;
  
    color: rgba(255,255,255,0.42);
  }
  
  
  .role-hero h1 {
    margin: 0;
  
    font-size: 55px;
    line-height: 0.88;
  
    font-weight: 400;
    letter-spacing: 0.04em;
  
    color: #ededed;
  }
  
  
  .role-hero-phrase {
    margin: 28px 0 0;
  
    font-size: 9px;
    line-height: 1.65;
    letter-spacing: 0.25em;
  
    color: rgba(255,255,255,0.52);
  }
  
  
/* =========================
   ИНФОРМАЦИЯ О РОЛИ
========================= */

.role-info {
    position: relative;
    z-index: 3;
  
    display: flex;
    flex-direction: column;
    gap: 7px;
  
    margin-top: -140px;
  }
  
  
  /* ОКОШКО */
  
  .role-info-block {
    position: relative;
  
    padding: 18px 18px 20px;
  
    border: 1px solid rgba(180, 180, 180, 0.16);
    border-radius: 14px;
  
    overflow: hidden;
  
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035) 0%,
      rgba(255,255,255,0.012) 45%,
      rgba(0,0,0,0.12) 100%
    ),
    rgba(8,8,8,0.55);
  
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(255,255,255,0.02),
    0 10px 28px rgba(0,0,0,0.38);
  
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
  
  
  /* ЛЁГКИЙ БЛИК */
  
  .role-info-block::after {
    content: "";
  
    position: absolute;
    inset: 0;
  
    border-radius: inherit;
  
    pointer-events: none;
  
    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.035) 0%,
        rgba(255,255,255,0.008) 30%,
        transparent 55%
      );
  }
  
  
  /* НАЗВАНИЕ БЛОКА */
  
  .role-info-label {
    position: relative;
    z-index: 1;
  
    display: block;
  
    margin-bottom: 11px;
  
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.28em;
  
    color: rgba(255,255,255,0.34);
  }
  
  
  /* ОСНОВНОЙ ТЕКСТ */
  
  .role-info-block p {
    position: relative;
    z-index: 1;
  
    margin: 0;
  
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.05em;
  
    color: rgba(255,255,255,0.68);
  }
  
  
  /* ВЫДЕЛЕНИЕ */
  
  .role-info-block strong {
    font-weight: 400;
    color: rgba(255,255,255,0.96);
  }

  /* Индивидуальная настройка шапки МАФИИ */

  .mafia-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-30px) translateY(0px) scale(1.30);
    transform-origin: center top;
  }

  .mafia-page .role-hero-title {
    bottom: 220px;
  }

  .mafia-page .role-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  
    background:
      linear-gradient(
        to right,
        #050505 0%,
        rgba(5, 5, 5, 0.95) 15%,
        rgba(5, 5, 5, 0.72) 32%,
        rgba(5, 5, 5, 0.35) 50%,
        rgba(5, 5, 5, 0.08) 68%,
        transparent 82%
      ),
      linear-gradient(
        to bottom,
        transparent 65%,
        #050505 100%
      );
  }

  /* =========================
   ПСИХ — ИЗОБРАЖЕНИЕ В ШАПКЕ
========================= */

.psycho-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-40px) translateY(15px) scale(1.35);
    transform-origin: center top;
  }

  /* ПСИХ — ТЕКСТ В ШАПКЕ */

.psycho-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   РЕШАЛА — ИЗОБРАЖЕНИЕ В ШАПКЕ
========================= */

.reshala-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-56px) translateY(-20px) scale(1.30);
    transform-origin: center top;
  }

  /* РЕШАЛА — ТЕКСТ В ШАПКЕ */

.reshala-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   КОП — ИЗОБРАЖЕНИЕ В ШАПКЕ
========================= */

.cop-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-46px) translateY(-20px) scale(1.30);
    transform-origin: center top;
  }
  
  
  /* КОП — ТЕКСТ В ШАПКЕ */
  
  .cop-page .role-hero-title {
    bottom: 140px;
  }

  .cop-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   МИРНЫЙ — ШАПКА
========================= */

.peaceful-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-20px) translateY(-28px) scale(1.30);
    transform-origin: center top;
  }
  
  .peaceful-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   СУДЬЯ — ШАПКА
========================= */

.judge-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(0px) translateY(0px) scale(1.30);
    transform-origin: center top;
  }
  
  .judge-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   МАТЬ — ШАПКА
========================= */

.mother-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-60px) translateY(-40px) scale(1.50);
    transform-origin: center top;
  }
  
  .mother-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   БОМБА — ШАПКА
========================= */

.bomb-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-58px) translateY(-48px) scale(1.50);
    transform-origin: center top;
  }
  
  .bomb-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   ДВОЙНИК — ШАПКА
========================= */

.double-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-40px) translateY(-15px) scale(1.30);
    transform-origin: center top;
  }
  
  .double-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   СКОРОСТРЕЛ — ШАПКА
========================= */

.sharpshooter-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-68px) translateY(-40px) scale(1.40);
    transform-origin: center top;
  }
  
  .sharpshooter-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   ВОЛШЕБНИК — ШАПКА
========================= */

.wizard-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-40px) translateY(-60px) scale(1.40);
    transform-origin: center top;
  }
  
  .wizard-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   NEO — ШАПКА
========================= */

.neo-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-40px) translateY(0px) scale(1.30);
    transform-origin: center top;
  }
  
  .neo-page .role-hero-title {
    bottom: 220px;
  }

  /* =========================
   ЧУМА — ШАПКА
========================= */

.plague-page .role-hero-image img {
    width: 100%;
    height: 100%;
  
    object-fit: contain;
    object-position: center top;
  
    transform: translateX(-40px) translateY(-68px) scale(1.30);
    transform-origin: center top;
  }
  
  .plague-page .role-hero-title {
    bottom: 220px;
  }

  .role-detail-logo {
    cursor: pointer;
  }