/**
 * Duskara — Fase 3: polimento master, profundidade, raridade global, tooltips AAA
 */

:root {
  --dsk-depth-1: 0 2px 8px rgba(0, 0, 0, 0.45);
  --dsk-depth-2: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 1px rgba(139, 92, 246, 0.15);
  --dsk-depth-3: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(75, 42, 103, 0.2);
  --dsk-glass: rgba(21, 21, 32, 0.82);
  --dsk-blur: blur(12px);
}

/* —— Ambient canvas layer —— */
#dsk-ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Apenas telas principais — não modais (position:fixed quebrava recovery-modal) */
body.dsk-ambient-on > section {
  position: relative;
  z-index: 1;
}

.dsk-parallax-bg {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 30% 20%, rgba(139, 92, 246, 0.12), transparent 55%),
    radial-gradient(ellipse 40% 35% at 70% 80%, rgba(212, 175, 55, 0.08), transparent 50%);
  animation: dsk-parallax-drift 18s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes dsk-parallax-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(1.5%, -1%) scale(1.03); }
}

/* —— Login cinematográfico —— */
#view-login .modal-backdrop {
  z-index: 20;
}

#view-login .auth-card,
#view-register .auth-card,
#view-character .auth-card {
  box-shadow: var(--dsk-depth-3);
  backdrop-filter: var(--dsk-blur);
  border: 1px solid rgba(212, 175, 55, 0.2);
  animation: dsk-card-rise 0.6s ease-out;
}

@keyframes dsk-card-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-screen .logo h1 {
  animation: dsk-logo-glow 3s ease-in-out infinite alternate;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.35), 0 0 40px rgba(139, 92, 246, 0.25);
}

@keyframes dsk-logo-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}

.dsk-login-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

.dsk-login-rain span {
  position: absolute;
  top: -10%;
  width: 1px;
  height: 40px;
  background: linear-gradient(transparent, rgba(180, 180, 220, 0.4));
  animation: dsk-rain-fall linear infinite;
}

@keyframes dsk-rain-fall {
  to { transform: translateY(110vh); }
}

.dsk-login-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* —— Raridade global (dsk-rarity) —— */
.dsk-rarity,
.dsk-rarity-border {
  --dsk-r-color: #9ca3af;
  --dsk-r-glow: rgba(156, 163, 175, 0.35);
}

.dsk-rarity--common,
.item-rarity--common { --dsk-r-color: #b4b4c8; --dsk-r-glow: rgba(180, 180, 200, 0.35); }
.dsk-rarity--uncommon,
.item-rarity--refined { --dsk-r-color: #00d98b; --dsk-r-glow: rgba(0, 217, 139, 0.4); }
.dsk-rarity--rare,
.item-rarity--rare { --dsk-r-color: #60a5fa; --dsk-r-glow: rgba(96, 165, 250, 0.45); }
.dsk-rarity--epic,
.item-rarity--epic { --dsk-r-color: #c084fc; --dsk-r-glow: rgba(192, 132, 252, 0.5); }
.dsk-rarity--legendary,
.item-rarity--legendary { --dsk-r-color: #d4af37; --dsk-r-glow: rgba(212, 175, 55, 0.55); }
.dsk-rarity--mythical,
.item-rarity--relic,
.item-rarity--divine { --dsk-r-color: #ff4d5e; --dsk-r-glow: rgba(255, 77, 94, 0.5); }

.dsk-rarity-border {
  border: 1px solid var(--dsk-r-color);
  box-shadow: 0 0 10px var(--dsk-r-glow), inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.dsk-rarity-glow {
  box-shadow: 0 0 12px var(--dsk-r-glow);
}

.dsk-rarity-pulse--legendary,
.item-rarity--legendary.inv-thumb-rarity {
  animation: dsk-legend-pulse 2.2s ease-in-out infinite;
}

.dsk-rarity-pulse--mythical,
.item-rarity--relic.inv-thumb-rarity,
.item-rarity--divine.inv-thumb-rarity {
  animation: dsk-myth-pulse 1.8s ease-in-out infinite;
}

@keyframes dsk-legend-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 0 18px rgba(212, 175, 55, 0.75), 0 0 28px rgba(212, 175, 55, 0.25); }
}

@keyframes dsk-myth-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 77, 94, 0.4); }
  50% { box-shadow: 0 0 20px rgba(255, 77, 94, 0.7), 0 0 8px rgba(139, 92, 246, 0.3); }
}

/* —— Tooltips AAA —— */
#dsk-tooltip,
.dsk-tooltip-premium {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  padding: 0.55rem 0.7rem;
  background: var(--dsk-glass);
  backdrop-filter: var(--dsk-blur);
  border: 1px solid rgba(139, 92, 246, 0.45);
  border-radius: 8px;
  box-shadow: var(--dsk-depth-3), 0 0 16px rgba(139, 92, 246, 0.2);
  font-size: 0.78rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#dsk-tooltip.dsk-tooltip--show,
.dsk-tooltip-premium.dsk-tooltip--show {
  opacity: 1;
  transform: translateY(0);
}

.dsk-tooltip-premium .dsk-tip-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.dsk-tooltip-premium .dsk-tip-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.35);
}

.dsk-tooltip-premium .dsk-tip-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.88rem;
}

.dsk-tooltip-premium .dsk-tip-rarity {
  font-size: 0.68rem;
  color: var(--dsk-r-color, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dsk-tooltip-premium .dsk-tip-stats {
  color: #7dd3fc;
  margin: 0.25rem 0;
  font-size: 0.72rem;
}

.dsk-tooltip-premium .dsk-tip-desc {
  color: var(--text-muted);
  margin: 0.2rem 0 0;
  line-height: 1.35;
}

.dsk-tooltip-premium .dsk-tip-compare {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(139, 92, 246, 0.25);
  font-size: 0.7rem;
  color: #86efac;
}

/* Inventário — polimento (estrutura intacta) */
.inv-cell {
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.inv-cell:hover:not(:disabled) {
  transform: translateY(-2px);
  z-index: 2;
}

.inv-cell--selected {
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.45);
}

.inv-hub-col {
  box-shadow: var(--dsk-depth-2);
  backdrop-filter: blur(6px);
}

.inv-tooltip {
  background: var(--dsk-glass) !important;
  backdrop-filter: var(--dsk-blur);
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
  box-shadow: var(--dsk-depth-3) !important;
  animation: dsk-tip-in 0.15s ease;
}

@keyframes dsk-tip-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.inv-tooltip-stats {
  color: #7dd3fc !important;
}

/* —— Perfil social v3 —— */
.profile-frame-wrap {
  position: relative;
  display: inline-block;
}

.profile-frame-wrap .dsk-frame-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid var(--dsk-r-color, #d4af37);
  box-shadow: 0 0 12px var(--dsk-r-glow, rgba(212, 175, 55, 0.4));
}

.profile-frame-wrap.dsk-frame--animated .dsk-frame-ring {
  animation: dsk-frame-spin 4s linear infinite;
}

@keyframes dsk-frame-spin {
  0% { box-shadow: 0 0 8px var(--dsk-r-glow); }
  50% { box-shadow: 0 0 20px var(--dsk-r-glow), 0 0 6px rgba(139, 92, 246, 0.5); }
  100% { box-shadow: 0 0 8px var(--dsk-r-glow); }
}

.profile-upload-zone {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.profile-upload-box {
  flex: 1;
  min-width: 120px;
  border: 1px dashed rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  padding: 0.45rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-size: 0.72rem;
}

.profile-upload-box:hover {
  border-color: var(--gold-title, #d4af37);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.profile-upload-preview {
  width: 100%;
  max-height: 64px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 0.25rem;
}

.profile-stat-bar {
  margin: 0.35rem 0;
}

.profile-stat-bar label {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.profile-stat-bar-track {
  display: block;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
}

.profile-stat-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4b2a67, #8b5cf6);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.profile-showcase-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.profile-showcase-slot {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  background: rgba(13, 13, 18, 0.6);
}

.profile-medal {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.68rem;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(75, 42, 103, 0.25);
}

/* —— Cards profundidade —— */
.adf-card,
.house-modal-sheet,
.auth-card,
.inv-hub-col,
.settings-modal-sheet {
  box-shadow: var(--dsk-depth-2);
}

.adf-card:hover {
  box-shadow: var(--dsk-depth-3);
}

/* —— Micro-animações —— */
.dsk-pressable {
  transition: transform 0.1s ease, filter 0.15s ease;
}

.dsk-pressable:active:not(:disabled) {
  transform: scale(0.97);
}

.dsk-fade-in {
  animation: dsk-fade-in 0.25s ease;
}

@keyframes dsk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dsk-reward-flash {
  animation: dsk-reward 0.5s ease;
}

@keyframes dsk-reward {
  0% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
  40% { box-shadow: 0 0 24px rgba(212, 175, 55, 0.6); }
  100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.2); }
}

.dsk-save-success {
  animation: dsk-save-ok 0.4s ease;
}

@keyframes dsk-save-ok {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

/* Admin flavor labels */
[data-dsk-flavor]::after {
  content: attr(data-dsk-flavor);
}

/* UI sound toggle */
.dsk-sound-toggle {
  font-size: 0.65rem;
  opacity: 0.85;
}

body:not(.dsk-hub-active) .dsk-sound-toggle {
  position: fixed;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 9990;
}

@media (prefers-reduced-motion: reduce) {
  .dsk-parallax-bg,
  .profile-frame-wrap.dsk-frame--animated .dsk-frame-ring,
  .dsk-rarity-pulse--legendary,
  .dsk-rarity-pulse--mythical,
  .auth-screen .logo h1,
  #dsk-ambient-canvas {
    animation: none !important;
  }
}