/* ===================================== */
/* БАЗОВЫЕ НАСТРОЙКИ СТРАНИЦЫ */
/* ===================================== */

body{
  margin: 0;
  padding: 0;
  background: black;
  color: white;
  font-family: Georgia, serif;
  overflow-x: hidden;
}

.page-shell{
  width: 100%;
}


/* ===================================== */
/* ОСНОВНАЯ СЦЕНА БИБЛИОТЕКИ */
/* правильный контейнер по картинке */
/* ===================================== */

.library-scene{
  position: relative;
  width: 100%;
  margin: 0 auto;
}


/* ===================================== */
/* ФОНОВАЯ КАРТИНКА */
/* картинка масштабируется пропорционально */
/* ===================================== */

.library-bg{
  display: block;
  width: 100%;
  height: 100%;
  height: auto;
}


/* ===================================== */
/* ОБЩИЕ СТИЛИ HOTSPOT'ОВ */
/* ===================================== */
.book,
.spine{
  position: absolute;

  /* прозрачные зоны */
  background: transparent;
  border: none;
  outline: none;

  cursor: pointer;

  /* якорим hotspot по центру */
  transform: translate(-50%, -50%);
}

.book{
  z-index: 10;
}

.spine{
  z-index: 12;
}


/* ===================================== */
/* КНИГИ НА СТОЛЕ */
/* координаты сохранены из твоей версии */
/* ===================================== */

.book-left{
  left: 30%;
  top: 62%;
  width: 10%;
  height: 20%;
}

.book-center{
  left: 51%;
  top: 60%;
  width: 10%;
  height: 20%;
}

.book-right{
  left: 70%;
  top: 60%;
  width: 20%;
  height: 25%;
}


/* ===================================== */
/* ЭФФЕКТ НАВЕДЕНИЯ НА КНИГИ */
/* ===================================== */

.book:hover{
  transform: scale(1.03);
  filter: drop-shadow(0 0 16px rgba(255, 210, 120, 0.9));
}


/* ===================================== */
/* КОРЕШКИ НА ПОЛКАХ */
/* координаты сохранены из твоей версии */
/* ===================================== */

.spine1{
  left: 45%;
  top: 21%;
  width: 2%;
  height: 9%;
}

.spine2{
  left: 56%;
  top: 22%;
  width: 2%;
  height: 9%;
}

.spine3{
  left: 70%;
  top: 21%;
  width: 2%;
  height: 9%;
}

.spine4{
  left: 75%;
  top: 21%;
  width: 2%;
  height: 9%;
}


/* ===================================== */
/* ЭФФЕКТ НАВЕДЕНИЯ НА КОРЕШКИ */
/* ===================================== */

.spine:hover{
  box-shadow: 0 0 10px rgba(255,200,120,0.55);
}


/* ===================================== */
/* OVERLAY */
/* ===================================== */

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 20;
}


/* ===================================== */
/* СВИТОК / ОКНО ТЕКСТА */
/* ===================================== */

.scroll-window{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 820px;
  height: 68%;
  transform: translate(-50%, -50%);
  z-index: 30;

  background: linear-gradient(to bottom, #e9d7a7, #d6bf86);
  padding: 30px 28px 24px 28px;
  box-sizing: border-box;

  border: 3px solid rgba(100, 60, 20, 0.7);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.65);

  overflow: hidden;
}

.scroll-window h2{
  margin: 0 0 18px 0;
  text-align: center;
  color: #4b2f16;
  font-size: 30px;
  letter-spacing: 1px;
}

.scroll-text{
  height: calc(100% - 70px);
  overflow-y: auto;
  padding-right: 10px;
  color: #3f2712;
  font-size: 18px;
  line-height: 1.7;
}

.close-btn{
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 30px;
  color: #4b2f16;
  cursor: pointer;
}

.close-btn:hover{
  transform: scale(1.1);
}

.hidden{
  display: none;
}


/* =========================================================
   SIGIL PORTAL — BASE
   Базовый desktop-вариант
========================================================= */

.sigil-gate{
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 30;
}

.sigil-gate img{
  display: block;
  width: 120px;
  height: auto;
  opacity: 0.9;
  cursor: pointer;

  filter:
    brightness(1.2)
    contrast(1.1)
    drop-shadow(0 0 12px rgba(255,170,70,0.8));

  mix-blend-mode: screen;
  animation: sigilPulse 4s ease-in-out infinite;
  transition: all 0.4s ease;
}

.sigil-gate img:hover{
  transform: scale(1.1);
  filter:
    invert(84%)
    sepia(60%)
    saturate(700%)
    hue-rotate(350deg)
    brightness(120%)
    drop-shadow(0 0 20px rgba(255,180,80,0.9));
}

@keyframes sigilPulse{
  0%{
    transform: scale(1);
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255,170,70,0.6));
  }

  50%{
    transform: scale(1.08);
    filter: brightness(1.4) drop-shadow(0 0 20px rgba(255,200,120,0.9));
  }

  100%{
    transform: scale(1);
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255,170,70,0.6));
  }
}


/* =========================================================
   LARGE DESKTOP / MAC / WIDE SCREEN
   Большие экраны Safari / MacBook / external display
========================================================= */

@media screen and (min-width: 1200px){

  .sigil-gate{
    right: 34px;
    bottom: 28px;
  }

  .sigil-gate img{
    width: 155px;
  }
}


/* =========================================================
   TABLET / MEDIUM SCREEN / SMALLER WINDOW
   Kali browser window / tablet / intermediate screens
========================================================= */

@media screen and (max-width: 900px){

  .sigil-gate{
    right: 18px;
    bottom: 18px;
  }

  .sigil-gate img{
    width: 110px;
  }
}


/* =========================================================
   MOBILE / PHONE
   Телефоны и узкие экраны
========================================================= */

@media screen and (max-width: 600px){

  .sigil-gate{
    right: 14px;
    bottom: 18px;
    z-index: 40;
  }

  .sigil-gate img{
    width: 90px;
  }
}

/* ===================================== */
/* MOBILE PANEL */
/* по умолчанию скрыта */
/* ===================================== */

.mobile-shelf{
  display: none;
}

.mobile-group{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-group-title{
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #e7d3a5;
  font-weight: normal;
}

.mobile-shelf-btn{
  background: rgba(40, 22, 14, 0.92);
  color: #ead7a7;
  border: 1px solid rgba(210, 170, 100, 0.45);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

.mobile-shelf-btn:hover{
  filter: brightness(1.08);
}

.mobile-shelf-btn:focus,
.mobile-shelf-btn:active{
  outline: none;
  box-shadow: 0 0 12px rgba(255, 190, 100, 0.35);
}


/* ===================================== */
/* АДАПТАЦИЯ ДЛЯ ПЛАНШЕТОВ И ТЕЛЕФОНОВ */
/* ===================================== */

@media screen and (max-width: 900px){

  body{
    overflow-y: auto;
  }

  /* на мобильных hotspot'ы скрываем */
  .book,
  .spine{
    display: none;
  }

  /* показываем удобную панель книг */
  .mobile-shelf{
    display: flex;
    flex-direction: column;
    gap: 18px;

    padding: 14px;
    margin: 12px 14px 20px 14px;
  }

  .scroll-window{
    width: 90%;
    height: 72%;
    padding: 22px 18px 18px 18px;
  }

  .scroll-window h2{
    font-size: 24px;
  }

  .scroll-text{
    font-size: 16px;
    line-height: 1.6;
  }

  .sigil-gate{
    right: 11px;
    bottom: 3px;
  }

  .sigil-gate img{
    width: 120px;
  }
}



/* ===================================== */
/* 🜏 INTERACTIVE SPINES — DARK + MAGIC */
/* чистый блок без конфликтов */
/* ===================================== */

/* базовое состояние — темнее и глубже */
.spine1,
.spine2,
.spine3,
.spine4{
  position: absolute;

  /* лёгкое затемнение */
  background: rgba(25, 15, 8, 0.35);

  /* глубина (внутренняя тень) */
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.65),
    inset 0 0 28px rgba(20, 10, 6, 0.7);

  border-radius: 2px;

  transition:
    filter 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


/* при наведении — мягкая “магия” */
.spine1:hover,
.spine2:hover,
.spine3:hover,
.spine4:hover{

  /* чуть “оживают” */
  filter: brightness(1.12);

  /* тёплое золотое дыхание */
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.7),
    inset 0 0 36px rgba(40, 20, 10, 0.85),
    0 0 12px rgba(255, 170, 90, 0.25);

  background: rgba(40, 22, 12, 0.45);
}








/* ===================================== */
/* 🜏 SPINE SYMBOLS */
/* 4 разные метки */
/* ===================================== */

/* 1 — линия */
.spine1::after{
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60%;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,200,120,0.9),
    transparent
  );

  box-shadow: 0 0 6px rgba(255,180,100,0.4);
}


/* 2 — точка */
.spine2::after{
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 4px;
  height: 4px;
  border-radius: 50%;

  background: rgba(255,210,140,0.9);

  box-shadow:
    0 0 6px rgba(255,200,120,0.5),
    0 0 10px rgba(255,160,80,0.3);
}


/* 3 — треугольник */
.spine3::after{
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 0;
  height: 0;

  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid rgba(255,200,120,0.9);

  filter: drop-shadow(0 0 4px rgba(255,170,90,0.5));
}


/* 4 — двойная линия */
.spine4::after{
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);

  width: 3px;
  height: 60%;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,200,120,0.9),
    transparent
  );

  box-shadow:
    -2px 0 0 rgba(255,200,120,0.8),
    2px 0 0 rgba(255,200,120,0.8);
}



/* ===================================== */
/* LANGUAGE SWITCH — NEW BLOCK */
/* добавлено для RU / EN кнопок */
/* не влияет на координаты книг и spine */
/* ===================================== */

.lang-switch{
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;

  display: flex;
  gap: 6px;

  padding: 4px 6px;
  border-radius: 999px;

  background: rgba(18, 10, 6, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lang-btn{
  border: 1px solid rgba(150, 95, 55, 0.45);
  background: linear-gradient(
    145deg,
    rgba(36, 18, 10, 0.96),
    rgba(68, 34, 18, 0.96)
  );
  color: #ead7b3;

  min-width: 42px;
  height: 28px;
  padding: 0 10px;

  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1;

  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35);

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.lang-btn:hover{
  background: linear-gradient(
    145deg,
    rgba(52, 24, 12, 0.98),
    rgba(88, 42, 22, 0.98)
  );

  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.65),
    0 3px 8px rgba(0, 0, 0, 0.45);

  transform: translateY(-1px);
}

.lang-btn.active{
  background: linear-gradient(
    145deg,
    rgba(112, 54, 20, 1),
    rgba(156, 76, 28, 1)
  );
  color: #fff3de;
  border-color: rgba(255, 196, 120, 0.7);

  box-shadow:
    0 0 10px rgba(180, 100, 45, 0.28),
    inset 0 0 6px rgba(0, 0, 0, 0.45);
}

.lang-btn:focus,
.lang-btn:active{
  outline: none;
}

/* ===================================== */
/* LANGUAGE SWITCH — FIXED OVERLAY UI */
/* НОВЫЙ БЛОК */
/* всегда поверх сцены, не привязан к картинке */
/* ===================================== */

.lang-switch{
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 9999 !important;

  display: flex !important;
  gap: 8px !important;

  padding: 6px 8px !important;
  border-radius: 999px !important;

  background: rgba(20, 10, 6, 0.58) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* сами кнопки языка */
.lang-btn{
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 1px solid rgba(164, 112, 62, 0.55) !important;
  background: linear-gradient(
    145deg,
    rgba(48, 22, 10, 0.96),
    rgba(88, 42, 18, 0.96)
  ) !important;

  color: #f0d8ab !important;

  min-width: 46px !important;
  height: 32px !important;
  padding: 0 12px !important;

  border-radius: 999px !important;
  cursor: pointer !important;

  font-family: Georgia, serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;

  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35) !important;

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease !important;
}

.lang-btn:hover{
  background: linear-gradient(
    145deg,
    rgba(72, 32, 14, 0.98),
    rgba(120, 58, 24, 0.98)
  ) !important;

  color: #fff1cf !important;

  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.65),
    0 4px 10px rgba(0, 0, 0, 0.42),
    0 0 10px rgba(214, 156, 79, 0.18) !important;

  transform: translateY(-1px) !important;
}

.lang-btn.active{
  background: linear-gradient(
    145deg,
    rgba(126, 62, 22, 1),
    rgba(176, 94, 34, 1)
  ) !important;

  color: #fff4dc !important;
  border-color: rgba(255, 205, 126, 0.75) !important;

  box-shadow:
    0 0 12px rgba(210, 138, 68, 0.26),
    inset 0 0 6px rgba(0, 0, 0, 0.45) !important;
}

.lang-btn:focus,
.lang-btn:active{
  outline: none !important;
}