/* ============================================================
   Blox Fruits — Custom SVG-Style Fruit Icons
   Usage: <span class="fi fi-kitsune"></span>
============================================================ */

.fi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
}

/* Mythical */
.fi-kitsune  { background: linear-gradient(135deg,#4c1d95,#7c3aed); border-color: rgba(167,139,250,.3); }
.fi-kitsune::before  { content: '🦊'; }
.fi-dragon   { background: linear-gradient(135deg,#991b1b,#dc2626); border-color: rgba(239,68,68,.3); }
.fi-dragon::before   { content: '🐲'; }
.fi-yeti     { background: linear-gradient(135deg,#1e3a5f,#3b82f6); border-color: rgba(96,165,250,.3); }
.fi-yeti::before     { content: '❄️'; }
.fi-leopard  { background: linear-gradient(135deg,#78350f,#d97706); border-color: rgba(251,191,36,.3); }
.fi-leopard::before  { content: '🐆'; }

/* Legendary */
.fi-gas      { background: linear-gradient(135deg,#1a2e1a,#16a34a); border-color: rgba(34,197,94,.3); }
.fi-gas::before      { content: '💨'; }
.fi-dough    { background: linear-gradient(135deg,#3f1f00,#f59e0b); border-color: rgba(245,158,11,.3); }
.fi-dough::before    { content: '🍩'; }
.fi-gravity  { background: linear-gradient(135deg,#0f172a,#6366f1); border-color: rgba(99,102,241,.3); }
.fi-gravity::before  { content: '🌌'; }
.fi-shadow   { background: linear-gradient(135deg,#0a0a0a,#374151); border-color: rgba(107,114,128,.3); }
.fi-shadow::before   { content: '🌑'; }
.fi-venom    { background: linear-gradient(135deg,#1a0a00,#84cc16); border-color: rgba(132,204,22,.3); }
.fi-venom::before    { content: '☠️'; }
.fi-soul     { background: linear-gradient(135deg,#2d0036,#a855f7); border-color: rgba(168,85,247,.3); }
.fi-soul::before     { content: '👻'; }
.fi-control  { background: linear-gradient(135deg,#001a33,#0ea5e9); border-color: rgba(14,165,233,.3); }
.fi-control::before  { content: '🎮'; }
.fi-mammoth  { background: linear-gradient(135deg,#1c1c1c,#6b7280); border-color: rgba(156,163,175,.3); }
.fi-mammoth::before  { content: '🦣'; }
.fi-t-rex    { background: linear-gradient(135deg,#1a0a00,#92400e); border-color: rgba(180,83,9,.3); }
.fi-t-rex::before    { content: '🦖'; }
.fi-spirit   { background: linear-gradient(135deg,#1a1a2e,#8b5cf6); border-color: rgba(139,92,246,.3); }
.fi-spirit::before   { content: '✨'; }
.fi-blizzard { background: linear-gradient(135deg,#0f2744,#bfdbfe); border-color: rgba(147,197,253,.3); }
.fi-blizzard::before { content: '🌨️'; }

/* Rare */
.fi-phoenix  { background: linear-gradient(135deg,#7c1d1d,#f97316); border-color: rgba(251,146,60,.3); }
.fi-phoenix::before  { content: '🔥'; }
.fi-buddha   { background: linear-gradient(135deg,#422006,#fbbf24); border-color: rgba(251,191,36,.3); }
.fi-buddha::before   { content: '☯️'; }
.fi-string   { background: linear-gradient(135deg,#1a1a1a,#9ca3af); border-color: rgba(156,163,175,.3); }
.fi-string::before   { content: '🕸️'; }
.fi-paw      { background: linear-gradient(135deg,#3b0764,#c084fc); border-color: rgba(192,132,252,.3); }
.fi-paw::before      { content: '🐾'; }
.fi-quake    { background: linear-gradient(135deg,#1c1c1c,#ef4444); border-color: rgba(239,68,68,.3); }
.fi-quake::before    { content: '💥'; }
.fi-dark     { background: linear-gradient(135deg,#050505,#1f2937); border-color: rgba(55,65,81,.3); }
.fi-dark::before     { content: '🌑'; }
.fi-light    { background: linear-gradient(135deg,#1a1600,#fde047); border-color: rgba(253,224,71,.3); }
.fi-light::before    { content: '⚡'; }
.fi-creation { background: linear-gradient(135deg,#1a0a2e,#ec4899); border-color: rgba(236,72,153,.3); }
.fi-creation::before { content: '🎨'; }

/* Uncommon */
.fi-magma    { background: linear-gradient(135deg,#450a0a,#dc2626); border-color: rgba(220,38,38,.3); }
.fi-magma::before    { content: '🌋'; }
.fi-rubber   { background: linear-gradient(135deg,#0a1a0a,#4ade80); border-color: rgba(74,222,128,.3); }
.fi-rubber::before   { content: '⭕'; }
.fi-diamond  { background: linear-gradient(135deg,#0a1e2e,#7dd3fc); border-color: rgba(125,211,252,.3); }
.fi-diamond::before  { content: '💎'; }
.fi-revive   { background: linear-gradient(135deg,#0a1a0a,#22c55e); border-color: rgba(34,197,94,.3); }
.fi-revive::before   { content: '💊'; }
.fi-sand     { background: linear-gradient(135deg,#2a1f00,#d97706); border-color: rgba(217,119,6,.3); }
.fi-sand::before     { content: '🏜️'; }
.fi-ice      { background: linear-gradient(135deg,#0a2038,#93c5fd); border-color: rgba(147,197,253,.3); }
.fi-ice::before      { content: '🧊'; }
.fi-smoke    { background: linear-gradient(135deg,#1a1a1a,#9ca3af); border-color: rgba(156,163,175,.3); }
.fi-smoke::before    { content: '🌫️'; }

/* Common */
.fi-flame    { background: linear-gradient(135deg,#3a0a00,#f97316); border-color: rgba(249,115,22,.3); }
.fi-flame::before    { content: '🔥'; }
.fi-spike    { background: linear-gradient(135deg,#1a0a0a,#6b7280); border-color: rgba(107,114,128,.3); }
.fi-spike::before    { content: '📌'; }
.fi-spring   { background: linear-gradient(135deg,#0a1a0a,#4ade80); border-color: rgba(74,222,128,.3); }
.fi-spring::before   { content: '🌀'; }
.fi-chop     { background: linear-gradient(135deg,#1a0a0a,#ef4444); border-color: rgba(239,68,68,.3); }
.fi-chop::before     { content: '🪓'; }
.fi-bomb     { background: linear-gradient(135deg,#0a0a0a,#374151); border-color: rgba(55,65,81,.3); }
.fi-bomb::before     { content: '💣'; }
.fi-spin     { background: linear-gradient(135deg,#0a0a1a,#6366f1); border-color: rgba(99,102,241,.3); }
.fi-spin::before     { content: '🌪️'; }