/* ═══════════════════════════════════════════════════════════
   MANGA-THEME.CSS — Texturas, Hachuras, Bordas, Selos, Efeitos
   Livro Secreto de Operações — Davi Azevedo
═══════════════════════════════════════════════════════════ */

/* ─── Manga Panel Border ─── */
.manga-panel {
  border: 3px solid var(--ink);
  border-radius: 2px;
  position: relative;
  background: var(--parchment-light);
  box-shadow: 4px 4px 0 var(--ink);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.manga-panel:hover {
  box-shadow: 6px 6px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.manga-panel--gold {
  border-color: var(--ink-gold);
  box-shadow: 4px 4px 0 var(--ink-gold);
}

.manga-panel--red {
  border-color: var(--ink-red);
  box-shadow: 4px 4px 0 var(--ink-red);
}

/* ─── Double Border Frame ─── */
.frame-double {
  border: 3px solid var(--ink);
  padding: 6px;
  position: relative;
}
.frame-double::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px solid var(--ink-gold);
  pointer-events: none;
}

/* ─── Corner Ornament ─── */
.corner-ornament {
  position: relative;
}
.corner-ornament::before,
.corner-ornament::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--ink-gold);
  border-style: solid;
}
.corner-ornament::before {
  top: 6px; left: 6px;
  border-width: 2px 0 0 2px;
}
.corner-ornament::after {
  bottom: 6px; right: 6px;
  border-width: 0 2px 2px 0;
}

/* ─── Hatching Texture ─── */
.hatching-bg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    var(--hatching-color) 4px,
    var(--hatching-color) 5px
  );
}

.hatching-bg--dense {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      var(--hatching-color) 3px,
      var(--hatching-color) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      var(--hatching-color) 3px,
      var(--hatching-color) 4px
    );
}

/* ─── Speed Lines ─── */
.speed-lines {
  position: relative;
  overflow: hidden;
}
.speed-lines::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 10deg,
    var(--hatching-color) 10deg,
    var(--hatching-color) 11deg
  );
  animation: spinSlow 60s linear infinite;
  pointer-events: none;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ─── Seal / Stamp ─── */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid currentColor;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  position: relative;
  text-align: center;
  line-height: 1.2;
}

.seal::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed currentColor;
  opacity: 0.5;
}

.seal--green {
  color: var(--green-victory);
  background: rgba(45, 107, 34, 0.1);
  border-color: var(--green-victory);
  box-shadow: 0 0 12px rgba(45, 107, 34, 0.3);
  transform: rotate(-6deg);
}

.seal--red {
  color: var(--red-defeat);
  background: rgba(139, 32, 32, 0.1);
  border-color: var(--red-defeat);
  box-shadow: 0 0 12px rgba(139, 32, 32, 0.3);
  transform: rotate(5deg);
}

.seal--gold {
  color: var(--ink-gold);
  background: rgba(184, 132, 30, 0.1);
  border-color: var(--ink-gold);
  transform: rotate(-3deg);
}

/* ─── Stamp (Rectangular) ─── */
.stamp {
  display: inline-block;
  padding: 4px 12px;
  border: 2.5px solid currentColor;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
}

.stamp--green {
  color: var(--green-victory);
  background: rgba(45, 107, 34, 0.08);
}

.stamp--red {
  color: var(--red-defeat);
  background: rgba(139, 32, 32, 0.08);
}

.stamp--pending {
  color: var(--ink-gold);
  border-color: var(--ink-gold);
  background: rgba(184, 132, 30, 0.08);
}

/* ─── Ink Brush Divider ─── */
.brush-divider {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--ink);
  position: relative;
  margin: var(--spacing-lg) 0;
  clip-path: polygon(
    0% 20%, 2% 0%, 5% 60%, 8% 10%,
    92% 10%, 95% 80%, 98% 0%, 100% 20%,
    100% 80%, 98% 100%, 95% 40%, 92% 90%,
    8% 90%, 5% 40%, 2% 100%, 0% 80%
  );
}

.brush-divider--gold {
  background: var(--ink-gold);
}

/* ─── RPG Status Bar ─── */
.rpg-bar {
  width: 100%;
  height: 16px;
  background: rgba(26, 18, 9, 0.15);
  border: 2px solid var(--ink);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.rpg-bar__fill {
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--ink-gold),
    var(--ink-gold) 8px,
    rgba(184,132,30,0.7) 8px,
    rgba(184,132,30,0.7) 10px
  );
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.rpg-bar__fill--green {
  background: repeating-linear-gradient(
    90deg,
    var(--green-victory),
    var(--green-victory) 8px,
    rgba(45,107,34,0.7) 8px,
    rgba(45,107,34,0.7) 10px
  );
}

.rpg-bar__fill--red {
  background: repeating-linear-gradient(
    90deg,
    var(--red-defeat),
    var(--red-defeat) 8px,
    rgba(139,32,32,0.7) 8px,
    rgba(139,32,32,0.7) 10px
  );
}

.rpg-bar__fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: rgba(255,255,255,0.15);
}

/* ─── Manga Speech Bubble ─── */
.speech-bubble {
  background: var(--parchment-light);
  border: 2.5px solid var(--ink);
  border-radius: 12px 12px 12px 0;
  padding: var(--spacing-md);
  position: relative;
  font-family: var(--font-body);
  box-shadow: 3px 3px 0 var(--ink);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -12px; left: 20px;
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 0px solid transparent;
  border-top: 12px solid var(--ink);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 22px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 0px solid transparent;
  border-top: 10px solid var(--parchment-light);
}

/* ─── Ink Splash / Emphasis ─── */
.ink-emphasis {
  display: inline-block;
  position: relative;
  padding: 0 var(--spacing-xs);
}

.ink-emphasis::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink-gold);
  transform: skewX(-8deg);
  z-index: -1;
  opacity: 0.25;
}

/* ─── Torn Edge Effect (bottom of panels) ─── */
.torn-edge {
  position: relative;
}
.torn-edge::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0; right: 0;
  height: 10px;
  background: var(--paper-bg);
  clip-path: polygon(
    0% 100%, 3% 0%, 7% 80%, 11% 20%, 15% 90%,
    20% 10%, 25% 70%, 30% 0%, 35% 85%, 40% 15%,
    45% 75%, 50% 5%, 55% 80%, 60% 20%, 65% 90%,
    70% 0%, 75% 70%, 80% 10%, 85% 85%, 90% 25%,
    95% 75%, 100% 0%, 100% 100%
  );
}

/* ─── Kanji Watermark ─── */
.kanji-watermark {
  position: absolute;
  font-family: var(--font-title);
  font-size: 12rem;
  font-weight: 900;
  color: rgba(26, 18, 9, 0.04);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

/* ─── Achievement Badge ─── */
.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border: 2px solid var(--ink-gold);
  background: linear-gradient(135deg, var(--parchment-light), var(--parchment-dark));
  position: relative;
  text-align: center;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  width: 120px;
  height: 120px;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.achievement-badge:hover {
  transform: scale(1.1) rotate(3deg);
  filter: brightness(1.1);
}

.achievement-badge.locked {
  filter: grayscale(1) opacity(0.5);
}

.badge-icon { font-size: 2rem; }
.badge-label {
  font-family: var(--font-title);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-top: -8px;
}

/* ─── Manga Impact Lines ─── */
@keyframes impactFlash {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.impact-anim {
  animation: impactFlash 0.3s ease-in-out;
}

/* ─── Number Display (Trading Data) ─── */
.number-display {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.number-display--positive { color: var(--green-victory); }
.number-display--negative { color: var(--red-defeat); }
.number-display--neutral  { color: var(--ink-faded); }
.number-display--gold     { color: var(--ink-gold); }
.number-display--large    { font-size: 2rem; }
.number-display--xl       { font-size: 2.8rem; }