/* ===== 3D-кубик ===== */
.dice-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2000;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s;
}

.dice-modal.visible {
   visibility: visible;
   opacity: 1;
}

.dice-cube-container {
   width: 200px;
   height: 200px;
   perspective: 1000px;
}

.dice-cube {
   width: 100%;
   height: 100%;
   position: relative;
   transform-style: preserve-3d;
}

.dice-cube.rolling {
   animation: rollDice 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes rollDice {
   0% {
      transform: rotateX(0deg) rotateY(0deg);
   }

   20% {
      transform: rotateX(180deg) rotateY(240deg);
   }

   40% {
      transform: rotateX(360deg) rotateY(480deg);
   }

   60% {
      transform: rotateX(540deg) rotateY(720deg);
   }

   80% {
      transform: rotateX(720deg) rotateY(960deg);
   }

   100% {
      transform: rotateX(900deg) rotateY(1200deg);
   }
}

.dice-face {
   position: absolute;
   width: 100%;
   height: 100%;
   background: #221441;
   border: 3px solid #000000;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 4rem;
   font-weight: bold;
   color: #fff;
   backface-visibility: visible;
}

.dice-face.front {
   transform: translateZ(100px);
}

.dice-face.back {
   transform: rotateY(180deg) translateZ(100px);
}

.dice-face.right {
   transform: rotateY(90deg) translateZ(100px);
}

.dice-face.left {
   transform: rotateY(-90deg) translateZ(100px);
}

.dice-face.top {
   transform: rotateX(90deg) translateZ(100px);
}

.dice-face.bottom {
   transform: rotateX(-90deg) translateZ(100px);
}

/* ===== Современный лог в стиле RPG ===== */
.rpg-log {
   position: fixed;
   top: 20px;
   right: 20px;
   width: 280px;
   background: rgba(20, 20, 30, 0.85);
   backdrop-filter: blur(8px);
   border: 1px solid #8b6f4c;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
   color: #e8dccc;
   font-family: 'Segoe UI', Roboto, Arial, sans-serif;
   z-index: 1500;
   overflow: hidden;
   transition: all 0.3s ease;
}

.rpg-log.collapsed {
   width: 180px;
   height: auto;
}

.rpg-log.collapsed .log-entries {
   display: none;
}

.log-minimize {
   background: none;
   border: none;
   color: #e8dccc;
   font-size: 1.2rem;
   cursor: pointer;
   padding: 0 5px;
   line-height: 1;
}

.log-minimize:hover {
   color: #f1c40f;
}

.log-entries {
   max-height: 300px;
   overflow-y: auto;
   padding: 10px;
   font-size: 0.85rem;
}

.log-entry {
   margin-bottom: 8px;
   padding: 6px 8px;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 6px;
   border-left: 3px solid #8b6f4c;
   animation: fadeIn 0.3s ease;
}

.log-entry.critical {
   border-left-color: #f1c40f;
   background: rgba(241, 196, 15, 0.1);
}

.log-entry.fumble {
   border-left-color: #e74c3c;
   background: rgba(231, 76, 60, 0.1);
}

.log-entry .dice-result {
   font-weight: bold;
}

.log-entry .dice-rolls {
   color: #aaa;
   font-size: 0.8rem;
}

.log-entry .dice-total {
   color: #f1c40f;
   font-weight: bold;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ===== Уведомления о бросках ===== */
.notification-container {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2000;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   pointer-events: none;
}

.notification {
   background: rgba(30, 30, 40, 0.9);
   backdrop-filter: blur(5px);
   border: 1px solid #8b6f4c;
   border-radius: 30px;
   padding: 10px 20px;
   color: #fff;
   font-size: 1rem;
   font-weight: bold;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   gap: 10px;
   animation: slideUp 0.3s ease, fadeOut 0.3s ease 1.7s forwards;
   max-width: 300px;
   text-align: center;
   pointer-events: auto;
}

.notification.critical {
   border-color: #f1c40f;
   background: rgba(241, 196, 15, 0.2);
}

.notification.fumble {
   border-color: #e74c3c;
   background: rgba(231, 76, 60, 0.2);
}

.notification .dice-icon {
   font-size: 1.2rem;
}

@keyframes slideUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeOut {
   to {
      opacity: 0;
   }
}

/* ===== Панель бросков кубиков ===== */
.dice-panel {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   background: #1e1a3a;
   padding: 15px;
   border-radius: 8px;
   margin-top: 15px;
   border: 1px solid #8b6f4c;
}

.dice-panel button {
   min-width: 50px;
   flex: 1 0 auto;
}

.dice-panel input {
   width: 80px;
   background: #0f0c29;
   border: 1px solid #8b6f4c;
   color: #fff;
   padding: 8px;
   border-radius: 5px;
}

/* ===== Адаптация для мобильных ===== */
@media (max-width: 768px) {
   .dice-cube-container {
      width: 150px;
      height: 150px;
   }

   .dice-face {
      font-size: 3rem;
   }

   .dice-face.front {
      transform: translateZ(75px);
   }

   .dice-face.back {
      transform: rotateY(180deg) translateZ(75px);
   }

   .dice-face.right {
      transform: rotateY(90deg) translateZ(75px);
   }

   .dice-face.left {
      transform: rotateY(-90deg) translateZ(75px);
   }

   .dice-face.top {
      transform: rotateX(90deg) translateZ(75px);
   }

   .dice-face.bottom {
      transform: rotateX(-90deg) translateZ(75px);
   }

   .rpg-log {
      top: 10px;
      right: 10px;
      width: 220px;
   }

   .notification {
      font-size: 0.9rem;
      padding: 8px 15px;
   }
}

/* ===== Общие стили ===== */
.ability-value {
   font-size: 2rem;
   font-weight: bold;
   color: #ffffff;
}

.card-body {
   flex: 1 1 auto;
   padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
   color: #fff;
}

.text-muted {
   --bs-text-opacity: 1;
   color: rgb(255 255 255 / 75%) !important;
}

/* ===== Переключатель 3D/2D (исправленный) ===== */
.toggle-label {
   font-size: 0.8rem;
   font-weight: 600;
   color: #e8dccc;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   transition: color 0.2s;
}

.toggle-label-2d {
   color: #aaa;
}

/* Сам переключатель */
.switch {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 24px;
   margin: 0;
   flex-shrink: 0;
   /* не даём сжиматься */
}

.switch input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #555;
   transition: 0.4s;
   border-radius: 24px;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.slider:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: 0.4s;
   border-radius: 50%;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:checked+.slider {
   background-color: #f1c40f;
   /* золотой для 3D */
}

input:checked+.slider:before {
   transform: translateX(26px);
}

/* Стили для подписей (будут управляться через JS, но на всякий случай) */
input:checked~.toggle-label-3d {
   color: #f1c40f;
   font-weight: bold;
}

input:not(:checked)~.toggle-label-2d {
   color: #f1c40f;
   font-weight: bold;
}

/* Заголовок лога – теперь кликабельный */
.log-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 15px;
   background: rgba(50, 40, 30, 0.7);
   border-bottom: 1px solid #8b6f4c;
   cursor: pointer;
   transition: background-color 0.2s;
}

.log-header:hover {
   background: rgba(70, 60, 50, 0.8);
}

.log-title {
   font-weight: bold;
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #f1c40f;
   user-select: none;
   flex: 1;
   /* занимает оставшееся место */
}

/* Переключатель – компактная версия */
.dice-mode-toggle {
   display: flex;
   align-items: center;
   gap: 5px;
   background: rgba(0, 0, 0, 0.3);
   padding: 3px 6px;
   border-radius: 30px;
   border: 1px solid #8b6f4c;
   pointer-events: auto;
   z-index: 10;
   flex-shrink: 0;
   /* не даём сжиматься */
}

.toggle-label {
   font-size: 0.75rem;
   /* чуть меньше */
   font-weight: 600;
   color: #e8dccc;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   transition: color 0.2s;
}

.toggle-label-2d {
   color: #aaa;
}

/* Сам переключатель (меньшего размера) */
.switch {
   position: relative;
   display: inline-block;
   width: 42px;
   /* уменьшили */
   height: 20px;
   /* уменьшили */
   margin: 0;
   flex-shrink: 0;
}

.switch input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #555;
   transition: 0.4s;
   border-radius: 20px;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.slider:before {
   position: absolute;
   content: "";
   height: 14px;
   width: 14px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: 0.4s;
   border-radius: 50%;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:checked+.slider {
   background-color: #f1c40f;
}

input:checked+.slider:before {
   transform: translateX(22px);
   /* 42px - 14px - 6px = 22px */
}

/* Увеличим ширину лога, чтобы всё влезло */
.rpg-log {
   width: 300px;
}

@media (max-width: 768px) {
   .rpg-log {
      width: 250px;
   }

   .dice-mode-toggle {
      gap: 3px;
      padding: 2px 4px;
   }

   .toggle-label {
      font-size: 0.7rem;
   }

   .switch {
      width: 36px;
      height: 18px;
   }

   .slider:before {
      height: 12px;
      width: 12px;
   }

   input:checked+.slider:before {
      transform: translateX(18px);
   }
}