/* O cartão do item (itemTooltip.ts, 26/10/2026): no estilo do tooltip do
   Tibia — couro escuro, título dourado, divisórias com losangos. */
.itt {
  --itt-ouro: #f2c14e;
  --itt-cobre: #c4893a;
  --itt-texto: #e9e0cf;
  --itt-suave: #b9ad97;
  min-width: 190px;
  max-width: 270px;
  padding: 9px 11px 8px;
  color: var(--itt-texto);
  font: 12px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 200, 120, 0.07), transparent 60%),
    linear-gradient(180deg, #2b2219 0%, #1d1711 100%);
  border: 1px solid #6e5634;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 160, 0.08), 0 8px 22px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.itt.flutua { position: fixed; z-index: 9000; pointer-events: none; animation: itt-in 0.12s ease-out; }
@keyframes itt-in { from { opacity: 0; transform: translateY(2px); } }
.itt-topo { display: flex; align-items: center; gap: 9px; }
.itt-ic {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  background: radial-gradient(circle, #3a2e22 0%, #1a140e 75%);
  border: 1px solid #5b4529; border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
}
.itt-ic > * { image-rendering: pixelated; }
.itt .itt-tit { display: block; color: var(--itt-ouro); font-size: 13.5px; font-weight: 700; text-shadow: 0 1px 0 #000, 0 0 8px rgba(242, 193, 78, 0.25); }
.itt .itt-sub { display: block; margin-bottom: 0; color: var(--itt-suave); font-size: 11.5px; margin-top: 1px; }
.itt.rar-incomum .itt-sub { color: #8fdc7a; }
.itt.rar-raro .itt-sub { color: #6fb6ff; }
.itt.rar-muito-raro .itt-sub { color: #c58cff; }
.itt.rar-lendario .itt-sub { color: #ffb347; }
.itt.rar-lendario { border-color: #9a6a2a; }

/* Divisória: linha cobre com losango no meio e nas pontas. */
.itt-div {
  position: relative; height: 9px; margin: 6px 2px;
  background: linear-gradient(90deg, transparent, var(--itt-cobre) 12%, var(--itt-cobre) 88%, transparent) center / 100% 1px no-repeat;
}
.itt-div::before, .itt-div::after {
  content: ''; position: absolute; top: 50%; width: 5px; height: 5px;
  background: var(--itt-ouro); transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 4px rgba(242, 193, 78, 0.6);
}
.itt-div::before { left: 10%; }
.itt-div::after { left: 90%; }
.itt-div + .itt-div { display: none; }

.itt-at, .itt-uso { position: relative; padding-left: 13px; margin: 2px 0; }
.itt-at::before, .itt-uso::before {
  content: ''; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px;
  transform: rotate(45deg);
}
.itt-at { color: #fff3dc; font-weight: 600; }
.itt-at::before { background: #f08c2e; }
.itt-uso::before { background: #8a7550; }
.itt-sec { color: var(--itt-cobre); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.itt-orig { color: var(--itt-suave); font-size: 11px; font-style: italic; margin-top: 5px; }
.itt-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; color: var(--itt-suave); font-size: 11.5px; }
.itt-pe span { white-space: nowrap; }
.itt-pe span:last-child { color: var(--itt-ouro); font-weight: 600; text-align: right; }

/* No menu do item (toque no celular): o cartão vira o cabeçalho. */
.inv-menu:has(> .itt) { width: 250px; background: #1d1711; border-color: #6e5634; }
.inv-menu .itt.compacto { max-width: none; margin: -2px -2px 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
@media (max-width: 600px) { .itt { font-size: 12.5px; } }