:root {
  --elevation-1: 0 2px 8px rgba(0,0,0,0.3);
  --elevation-2: 0 4px 16px rgba(0,0,0,0.4);
  --elevation-3: 0 8px 32px rgba(0,0,0,0.5);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;
  --rarity-glow-common: 0 0 8px rgba(237,232,220,0.15);
  --rarity-glow-uncommon: 0 0 12px rgba(74,154,106,0.25);
  --rarity-glow-rare: 0 0 12px rgba(74,143,196,0.25);
  --rarity-glow-ultra: 0 0 16px rgba(0,188,212,0.3);
  --rarity-glow-epic: 0 0 16px rgba(138,74,196,0.3);
  --rarity-glow-mythic: 0 0 20px rgba(196,80,80,0.35);
  --rarity-glow-divine: 0 0 24px rgba(233,30,144,0.4);
  --rarity-glow-mystic: 0 0 20px rgba(44,14,74,0.4);
  --rarity-glow-transcendent: 0 0 24px rgba(138,74,196,0.4);
}

.card-kenney {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--elevation-1);
}
.card-kenney:hover {
  border-color: var(--border2);
  box-shadow: var(--elevation-2);
}
.card-kenney.card-raised {
  border-color: var(--gold-d);
  box-shadow: var(--elevation-2);
}
.card-kenney.card-flat {
  border: none;
  background: var(--surface2);
  box-shadow: none;
}
.card-kenney.card-bordered {
  border-width: 2px;
}

.card-rarity-common { border-color: var(--rarity-common); box-shadow: var(--rarity-glow-common); }
.card-rarity-uncommon { border-color: var(--rarity-uncommon); box-shadow: var(--rarity-glow-uncommon); }
.card-rarity-rare { border-color: var(--rarity-rare); box-shadow: var(--rarity-glow-rare); }
.card-rarity-ultra { border-color: var(--rarity-ultra); box-shadow: var(--rarity-glow-ultra); }
.card-rarity-epic { border-color: var(--rarity-epic); box-shadow: var(--rarity-glow-epic); }
.card-rarity-mythic { border-color: var(--rarity-mythic); box-shadow: var(--rarity-glow-mythic); }
.card-rarity-divine { border-color: var(--rarity-divine); box-shadow: var(--rarity-glow-divine); }
.card-rarity-mystic { border-color: var(--rarity-mystic); box-shadow: var(--rarity-glow-mystic); }
.card-rarity-transcendent { border-color: var(--rarity-transcendent); box-shadow: var(--rarity-glow-transcendent); }

.rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid;
  background: var(--surface2);
}
.badge-common { color: var(--rarity-common); border-color: var(--rarity-common); }
.badge-uncommon { color: var(--rarity-uncommon); border-color: var(--rarity-uncommon); }
.badge-rare { color: var(--rarity-rare); border-color: var(--rarity-rare); }
.badge-ultra { color: var(--rarity-ultra); border-color: var(--rarity-ultra); }
.badge-epic { color: var(--rarity-epic); border-color: var(--rarity-epic); }
.badge-mythic { color: var(--rarity-mythic); border-color: var(--rarity-mythic); }
.badge-divine { color: var(--rarity-divine); border-color: var(--rarity-divine); }
.badge-mystic { color: var(--rarity-mystic); border-color: var(--rarity-mystic); }
.badge-transcendent { color: var(--rarity-transcendent); border-color: var(--rarity-transcendent); }
.badge-sync {
  background: linear-gradient(135deg, #c45050, #e8c97a, #4a8fc4, #8a4ac4, #c44a80);
  color: #fff;
  border-color: transparent;
}

.arch-pattern {
  position: relative;
  overflow: hidden;
}
.arch-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
}
.arch-pattern.eroe::before { background:
  radial-gradient(circle at 30% 40%, var(--blue) 0, transparent 60%),
  repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(74,143,196,.15) 8px, rgba(74,143,196,.15) 9px); }
.arch-pattern.saggio::before { background:
  radial-gradient(circle at 50% 30%, var(--purple) 0, transparent 60%),
  repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(138,74,196,.1) 10px, rgba(138,74,196,.1) 11px); }
.arch-pattern.ribelle::before { background:
  radial-gradient(circle at 60% 60%, var(--orange) 0, transparent 60%),
  repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(196,120,58,.15) 6px, rgba(196,120,58,.15) 7px); }
.arch-pattern.amante::before { background:
  radial-gradient(circle at 40% 50%, var(--pink) 0, transparent 60%),
  radial-gradient(circle at 70% 30%, var(--pink) 0, transparent 50%); }
.arch-pattern.custode::before { background:
  radial-gradient(circle at 50% 70%, var(--green) 0, transparent 60%),
  repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(74,154,106,.1) 12px, rgba(74,154,106,.1) 13px); }
.arch-pattern.creatore::before { background:
  radial-gradient(circle at 30% 30%, var(--purple) 0, transparent 50%),
  radial-gradient(circle at 70% 70%, var(--gold) 0, transparent 50%); }
.arch-pattern.sovrano::before { background:
  radial-gradient(circle at 50% 50%, var(--gold) 0, transparent 60%),
  repeating-conic-gradient(from 0deg, transparent 0deg, rgba(201,168,76,.08) 10deg, transparent 20deg); }
.arch-pattern.esploratore::before { background:
  radial-gradient(circle at 20% 80%, var(--blue) 0, transparent 50%),
  radial-gradient(circle at 80% 20%, var(--green) 0, transparent 50%); }

.card-glow {
  position: relative;
}
.card-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card-glow:hover::after {
  opacity: 1;
}
.glow-common::after { box-shadow: 0 0 20px rgba(237,232,220,.1); }
.glow-uncommon::after { box-shadow: 0 0 20px rgba(74,154,106,.15); }
.glow-rare::after { box-shadow: 0 0 20px rgba(74,143,196,.15); }
.glow-ultra::after { box-shadow: 0 0 24px rgba(0,188,212,.2); }
.glow-epic::after { box-shadow: 0 0 24px rgba(138,74,196,.2); }
.glow-mythic::after { box-shadow: 0 0 28px rgba(196,80,80,.25); }
.glow-divine::after { box-shadow: 0 0 32px rgba(233,30,144,.3); }

.progress-kenney {
  height: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-kenney .fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width .5s ease;
}
.progress-kenney .fill.gold { background: linear-gradient(90deg, var(--gold-d), var(--gold-l)); }
.progress-kenney .fill.blue { background: linear-gradient(90deg, #2a6f9a, var(--blue)); }
.progress-kenney .fill.green { background: linear-gradient(90deg, #2a7a4a, var(--green)); }
.progress-kenney .fill.red { background: linear-gradient(90deg, #9a3030, var(--red)); }
.progress-kenney .fill.purple { background: linear-gradient(90deg, #5a2a9a, var(--purple)); }

.btn-kenney {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .12em;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.btn-kenney:hover {
  border-color: var(--gold-d);
  color: var(--gold);
  background: rgba(201,168,76,.05);
}
.btn-kenney.primary {
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.03));
  border-color: var(--gold-d);
  color: var(--gold);
}
.btn-kenney.primary:hover {
  background: linear-gradient(135deg, rgba(201,168,76,.2), rgba(201,168,76,.07));
}
.btn-kenney.sm { padding: 6px 14px; font-size: .68rem; }
.btn-kenney:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }

.tab-bar-kenney {
  display: flex;
  gap: 2px;
  background: var(--surface2);
  border-radius: var(--radius-md);
  padding: 3px;
}
.tab-bar-kenney .tab {
  flex: 1;
  padding: 8px 12px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .1em;
  cursor: pointer;
  transition: all .2s;
}
.tab-bar-kenney .tab.active {
  background: var(--surface);
  color: var(--gold);
  box-shadow: var(--elevation-1);
}
.tab-bar-kenney .tab:hover:not(.active) { color: var(--text-mid); }

.badge-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .6rem;
  font-family: 'Cinzel', serif;
  border: 1px solid;
}
.badge-dot.level { border-color: var(--gold-d); color: var(--gold); background: rgba(201,168,76,.1); }
.badge-dot.xp { border-color: var(--blue); color: var(--blue); background: rgba(74,143,196,.1); }
.badge-dot.streak { border-color: var(--orange); color: var(--orange); background: rgba(196,120,58,.1); }

.tag-kenney {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .08em;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--surface2);
}

.stat-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
}

@media (max-width: 480px) {
  :root { --radius-md: 3px; }
  .card-kenney { padding: 14px; }
}