/* --- FONTS --- */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Roboto+Mono:wght@400;700&family=Inter:wght@400;600;800&display=swap");

body {
  font-family: "Inter", sans-serif;
  overflow: hidden;
  touch-action: manipulation;
  background-color: #0a0a0a;
}

.rpg-font {
  font-family: "Cinzel", serif;
}

/* --- SCROLLBARS --- */
.custom-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4338ca rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
}

.custom-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #4338ca;
  border-radius: 3px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #6366f1;
}

/* --- TABS (Visualização de Ativo) --- */
.tab-btn {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  color: #737373; /* neutral-500 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  transition: all 0.2s;
}

.tab-btn.active {
  border-bottom-color: #6366f1; /* indigo-500 */
  color: #ffffff;
}

/* --- INPUTS & FORMS --- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  background-color: transparent;
  color: inherit;
  font-family: "Roboto Mono", monospace;
  text-align: center;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

input[type="number"]:focus {
  outline: none;
  border-bottom-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 4px;
}

.stat-input {
  width: 100%;
  font-weight: bold;
}

/* --- ANIMAÇÕES --- */
@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
  50% {
    transform: translate(5px, -5px) rotate(5deg);
  }
  75% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
}

.shake-screen {
  animation: shake 0.4s ease-in-out;
}
.fail-shake {
  animation: shake 0.3s ease-in-out;
  border-color: #ef4444 !important;
}
.crit-glow {
  text-shadow: 0 0 10px #fbbf24, 0 0 20px #d97706;
}

.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -10px;
  z-index: 100;
  pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall {
  to {
    transform: translateY(100vh) rotate(720deg);
  }
}

/* --- DADOS --- */
.d4-shape {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-radius: 0 !important;
}
.d6-shape {
  border-radius: 4px !important;
}
.d8-shape {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-radius: 0 !important;
}
.d10-shape {
  clip-path: polygon(50% 0%, 100% 65%, 50% 100%, 0% 65%);
  border-radius: 0 !important;
}
.d12-shape {
  clip-path: polygon(50% 0%, 95% 38%, 81% 90%, 19% 90%, 5% 38%);
  border-radius: 0 !important;
}
.d20-shape {
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  border-radius: 0 !important;
}

/* --- RESPONSIVIDADE --- */
.drawer {
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100dvh;
    width: 85%;
    max-width: 320px;
    z-index: 50;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  }
  .drawer-left {
    left: 0;
    transform: translateX(-100%);
  }
  .drawer-right {
    right: 0;
    transform: translateX(100%);
  }
  .drawer.open {
    transform: translateX(0);
  }
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 768px) {
  .drawer {
    position: static !important;
    transform: none !important;
    height: 100% !important;
    box-shadow: none !important;
  }
  .overlay {
    display: none !important;
  }
}

.modal-bg {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}
.modal-content {
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}
.touch-manipulation {
  touch-action: manipulation;
}

#results-stage { max-height: 30dvh; overflow-y: auto; align-content: flex-start; flex-shrink: 0; }
#formula-help p { max-height: 90px; overflow-y: auto; }

.sheet-value { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid #ffffff0a; font-size: 12px; }
.sheet-value > span:first-child { color: #a5b4fc; }
.sheet-value > span:last-child { white-space: pre-wrap; overflow-wrap: anywhere; }
#full-sheet details { border: 1px solid #30303d; border-radius: 8px; margin: 8px 0; padding: 10px; }
#full-sheet summary { cursor: pointer; color: #c7d2fe; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.snapshot-notice { position: fixed; inset: 0 0 auto; z-index: 60; height: 30px; padding: 6px 12px; background: #25243c; color: #c7d2fe; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.snapshot-session { padding-top: 30px; }
.snapshot-session > .md\:hidden { top: 30px; }
.snapshot-session .drawer { top: 30px; }
.snapshot-session button[onclick="openCharSelectModal()"] { display: none; }
.snapshot-error { margin: auto; padding: 32px; color: #fca5a5; font-family: system-ui; }
.embed-mode #left-panel { width: 280px; }
.embed-mode #right-panel { width: 240px; }
.embed-mode #main-stage { min-width: 0; }
@media (max-width: 1000px) and (min-width: 768px) {
  .embed-mode #right-panel { width: 190px; }
  .embed-mode #left-panel { width: 250px; }
}
@media (max-width: 767px) {
  .embed-mode #left-panel, .embed-mode #right-panel { width: 88%; max-width: 340px; }
  .snapshot-session .drawer { height: calc(100dvh - 30px); }
}