/* ===== 67 Clicker - tema gaming/tech con font Orbitron + Rajdhani ===== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --bg-dark: #0f0f1e;
  --bg-darker: #0a0a14;
  --panel-border: #1a1a2e;
  --red: #f56565;
  --red-shadow: #c53030;
  --cream: #fff5f5;
  --text-light: #f5f5f0;
  --gold: #ecc94b;
  --gold-shadow: #b7791f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-light);
  font-family: 'Orbitron', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  touch-action: manipulation;
}

.hidden { display: none !important; }

#game-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* ===== Header ===== */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  background: var(--bg-darker);
  border-bottom: 4px solid var(--panel-border);
  flex-wrap: wrap;
  gap: 10px;
}

.game-title {
  font-size: 1.1rem;
  color: var(--red);
  text-shadow: 3px 3px 0 var(--red-shadow);
  letter-spacing: 1px;
}

.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

#btn-switch-account {
  font-size: 0.55rem;
  padding: 10px 12px;
}

#btn-settings {
  font-size: 0.55rem;
  padding: 10px 12px;
}

/* ===== Bottoni pixel ===== */
.btn-nav, .btn-icon, .btn-save, .btn-mute, .btn-resume, .btn-prestige {
  background-color: var(--red);
  color: var(--cream);
  border: 4px solid var(--panel-border);
  box-shadow: 0 5px 0 var(--red-shadow), 0 5px 0 4px var(--panel-border);
  padding: 10px 16px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-nav:hover, .btn-icon:hover, .btn-save:hover, .btn-mute:hover, .btn-resume:hover, .btn-prestige:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--red-shadow), 0 3px 0 4px var(--panel-border);
}

.btn-nav:active, .btn-icon:active, .btn-save:active, .btn-mute:active, .btn-resume:active, .btn-prestige:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--red-shadow), 0 0 0 4px var(--panel-border);
}

.btn-icon {
  padding: 10px 14px;
  font-size: 0.9rem;
}

.btn-prestige {
  background-color: var(--gold);
  color: #1a1a2e;
  box-shadow: 0 5px 0 var(--gold-shadow), 0 5px 0 4px var(--panel-border);
}

/* ===== Layout principale ===== */
.game-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  padding: 24px;
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-box {
  background: var(--bg-darker);
  border: 4px solid var(--panel-border);
  padding: 12px 14px;
}

.stat-label {
  display: block;
  font-size: 0.6rem;
  color: #a0a0b8;
  margin-bottom: 6px;
}

.stat-value {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  word-break: break-all;
}

.text-red { color: var(--red); }

.clicker-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 280px;
  position: relative;
  touch-action: manipulation;
}

/* ===== Bottone 67 ===== */
.main-click-button {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: var(--red);
  border: 6px solid var(--panel-border);
  box-shadow: 0 8px 0 var(--red-shadow), 0 8px 0 6px var(--panel-border);
  color: var(--cream);
  font-size: 3.6rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.07s ease;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.main-click-button:active {
  transform: scale(0.94) translateY(3px);
}

.click-character-img {
  position: relative;
  z-index: 2;
  width: 86%;
  height: 86%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.45));
  -webkit-user-drag: none;
}

.main-click-button::before {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 101, 101, 0.28), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* ===== Blocco anti-autoclicker ===== */
.autoclick-lock-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(10, 10, 20, 0.86);
  border: 6px solid var(--red);
  box-shadow: 0 0 24px rgba(245, 101, 101, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
}
.autoclick-lock-overlay.hidden {
  display: none;
}
.autoclick-lock-text {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--red);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(245, 101, 101, 0.7);
}
.autoclick-lock-timer {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  color: #fff5f5;
  font-size: 2.2rem;
  text-shadow: 0 0 14px rgba(245, 101, 101, 0.8);
}

/* ===== Particelle ===== */
.particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 50;
}

.particle {
  position: absolute;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: var(--red);
  pointer-events: none;
  animation: float-up 0.9s ease-out forwards;
}

.particle.crit {
  color: var(--gold);
  font-size: 0.9rem;
}

@keyframes float-up {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-70px) scale(1.3); }
}

/* ===== 67 dorato ===== */
.gold-67 {
  display: none;
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: var(--gold);
  border: 5px solid var(--panel-border);
  box-shadow: 0 6px 0 var(--gold-shadow), 0 6px 0 5px var(--panel-border);
  color: #1a1a2e;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 5;
  align-items: center;
  justify-content: center;
  animation: pulse-gold 0.7s infinite alternate;
}

@keyframes pulse-gold {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.bonus-popup {
  position: absolute;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  color: var(--gold);
  pointer-events: none;
  animation: float-up-slow 1.4s ease-out forwards;
  z-index: 10;
}

@keyframes float-up-slow {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-90px); }
}

/* ===== Pannello destro / tabs ===== */
.right-panel {
  background: var(--bg-darker);
  border: 4px solid var(--panel-border);
  display: flex;
  flex-direction: column;
}

.section-tabs {
  display: flex;
  background: var(--bg-dark);
  border-bottom: 4px solid var(--panel-border);
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #a0a0b8;
  padding: 14px 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  cursor: pointer;
  transition: all 0.15s;
}

.tab-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.03);
}

.tab-btn.active {
  color: var(--cream);
  background: var(--red);
}

.tab-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  max-height: 600px;
}

.tab-content::-webkit-scrollbar { width: 8px; }
.tab-content::-webkit-scrollbar-thumb { background-color: var(--panel-border); }
.tab-content::-webkit-scrollbar-track { background-color: var(--bg-dark); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ===== Liste upgrade / generatori ===== */
.shop-item, .gen-item {
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: border-color 0.15s;
  max-width: 100%;
}

.item-info, .gen-info {
  min-width: 0;
  flex: 1;
  overflow-wrap: break-word;
}

.buy-fused-btn:hover:not(.disabled) {
  border-color: var(--cream);
}

.shop-item.disabled, .gen-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shop-item.maxed, .gen-item.maxed {
  opacity: 0.6;
  border-color: var(--gold);
  cursor: default;
}

.item-info h3, .gen-info h3 {
  font-size: 0.75rem;
  margin-bottom: 8px;
  color: var(--text-light);
}

.item-info p, .gen-info p {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: #a0a0b8;
}

.item-cost, .gen-cost {
  font-size: 0.75rem;
  color: var(--gold);
  white-space: nowrap;
  margin-left: 12px;
}

.icon-pixel {
  width: 100%;
  height: 100%;
}

.item-icon-box {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.buy-fused-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--red);
  border: 3px solid var(--panel-border);
  box-shadow: 0 3px 0 var(--red-shadow), 0 3px 0 3px var(--panel-border);
  padding: 8px 12px;
  min-width: 86px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
}

.buy-fused-btn .price-line {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  color: var(--cream);
  font-weight: bold;
  text-shadow: 1px 1px 0 var(--red-shadow);
}

.buy-fused-btn .action-line {
  font-size: 0.5rem;
  color: var(--cream);
}

.buy-fused-btn.disabled {
  background: #2a2a3a;
  box-shadow: 0 3px 0 #1f1f2e, 0 3px 0 3px var(--panel-border);
  cursor: not-allowed;
}

.buy-fused-btn.disabled .price-line {
  color: #a0a0b8;
  text-shadow: none;
}

.buy-fused-btn.disabled .action-line {
  color: #7a7a8e;
}

.gen-count {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  color: var(--red);
  margin-top: 6px;
}

.section-title {
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-bottom: 18px;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--red-shadow);
}

.generators-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 16px;
}

.buy-mode-selector {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.buy-mode-btn {
  background-color: var(--bg-dark);
  color: #a0a0b8;
  border: 4px solid var(--panel-border);
  box-shadow: 0 4px 0 var(--panel-border);
  padding: 10px 16px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.buy-mode-btn:hover {
  color: #fff;
  transform: translateY(1px);
  box-shadow: 0 3px 0 var(--panel-border);
}

.buy-mode-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--panel-border);
}

.buy-mode-btn.active {
  background-color: var(--red);
  color: var(--cream);
  border-color: var(--panel-border);
  box-shadow: 0 4px 0 var(--red-shadow), 0 4px 0 4px var(--panel-border);
}

.buy-mode-btn.active:hover {
  box-shadow: 0 3px 0 var(--red-shadow), 0 3px 0 4px var(--panel-border);
}

.prestige-info-bar {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  color: var(--gold);
  margin-bottom: 16px;
}

.prestige-box {
  background: var(--bg-dark);
  border: 4px solid var(--gold);
  padding: 18px;
  text-align: center;
  margin-top: 14px;
}

.prestige-box p {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  margin-bottom: 12px;
  color: var(--text-light);
}

.empty-msg {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  color: #6a6a82;
  padding: 26px;
  font-size: 0.75rem;
}

/* ===== Classifica ===== */
.leaderboard-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 8px;
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
}

.leaderboard-table th, .leaderboard-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
}

.leaderboard-table th, .leaderboard-table td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colonna POS: non deve MAI troncare, il numero di posizione
   (anche a 3+ cifre, es. #100) va sempre mostrato per intero. */
.leaderboard-table td:nth-child(1) {
  white-space: nowrap;
  overflow: visible;
}

/* Colonna POS larga abbastanza per 3 cifre, PLAYER flessibile, PUNTI
   con larghezza fissa e troncamento forzato: solo i punti (già abbreviati
   da fmt(), es. 53.36k) possono eventualmente venire ulteriormente troncati
   in casi estremi — la posizione non viene mai tagliata. */
.leaderboard-table th:nth-child(1), .leaderboard-table td:nth-child(1) {
  width: 64px;
  padding-left: 10px;
  padding-right: 4px;
}
.leaderboard-table th:nth-child(3), .leaderboard-table td:nth-child(3) {
  width: 90px;
  max-width: 90px;
}

.leaderboard-table th {
  background-color: var(--bg-darker);
  color: var(--red);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
}

.leaderboard-table tr:hover {
  background: rgba(245, 101, 101, 0.05);
}

/* ===== PODIO: alone statico per le prime 3 posizioni =====
   #1 = alone blu, #2 = alone arancio/fuoco, #3 = alone oro. Effetto
   puramente CSS (box-shadow), niente particelle animate via JS: sempre
   contenuto entro i bordi della cella, su qualsiasi dispositivo. */

.legend-row {
  position: relative;
}
.legend-cell {
  border: none !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  background: var(--bg-darker);
}
.legend-inner {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.legend-bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.legend-bg-layer-inner {
  position: absolute;
  inset: 0;
}
.legend-particles-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.legend-pos {
  width: 50px;
  flex-shrink: 0;
  color: var(--cream);
  position: relative;
  z-index: 5;
}
.legend-player {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.legend-score {
  width: 90px;
  flex-shrink: 0;
  text-align: left;
  color: var(--cream);
  position: relative;
  z-index: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legend-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  flex-shrink: 0;
  overflow: hidden;
}
.legend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-rank-1 { z-index: 30; position: relative; }
.row-rank-2 { z-index: 20; position: relative; }
.row-rank-3 { z-index: 10; position: relative; }

/* ----- #1: tempesta elettrica blu ----- */
@keyframes storm-bg {
  0%, 100% { background: radial-gradient(ellipse at 15% 50%, rgba(77,171,247,0.42), rgba(20,60,140,0.18) 35%, rgba(5,5,14,1) 78%); }
  50% { background: radial-gradient(ellipse at 85% 50%, rgba(140,210,255,0.46), rgba(20,60,140,0.2) 35%, rgba(5,5,14,1) 78%); }
}
@keyframes border-storm {
  0%, 70%, 100% { box-shadow: 0 0 14px rgba(77,171,247,0.6), 0 0 28px rgba(30,100,200,0.35), inset 0 0 22px rgba(77,171,247,0.25); }
  72% { box-shadow: 0 0 55px rgba(190,230,255,1), 0 0 100px rgba(77,171,247,1), inset 0 0 65px rgba(200,235,255,0.8); }
  74% { box-shadow: 0 0 14px rgba(77,171,247,0.6); }
  76% { box-shadow: 0 0 65px rgba(220,240,255,1), 0 0 120px rgba(140,210,255,1), inset 0 0 75px rgba(220,240,255,0.9); }
  79% { box-shadow: 0 0 14px rgba(77,171,247,0.6); }
}
@keyframes flash1 {
  0%, 70%, 100% { opacity: 0; }
  71% { opacity: 0.8; } 72.5% { opacity: 0.1; } 73% { opacity: 0.65; } 74% { opacity: 0; }
}
@keyframes flash2 {
  0%, 75%, 100% { opacity: 0; }
  76% { opacity: 0.95; } 77% { opacity: 0.15; } 78% { opacity: 0.55; } 79.5% { opacity: 0; }
}
.row-rank-1 .legend-bg-layer-inner {
  background: radial-gradient(ellipse at 50% 50%, rgba(77,171,247,0.42), rgba(20,60,140,0.18) 35%, rgba(5,5,14,1) 78%);
  box-shadow: 0 0 14px rgba(77,171,247,0.6), 0 0 28px rgba(30,100,200,0.35), inset 0 0 22px rgba(77,171,247,0.25);
  animation: storm-bg 3.5s ease-in-out infinite, border-storm 2s linear infinite;
}
.flash-overlay-1, .flash-overlay-2 {
  position: absolute; inset: 0; background: #fff; pointer-events: none; mix-blend-mode: screen; z-index: 3;
}
.flash-overlay-1 { animation: flash1 2s linear infinite; }
.flash-overlay-2 { animation: flash2 2s linear infinite; }

.pulse-ring {
  position: absolute; border-radius: 50%; border: 1.5px solid; pointer-events: none; mix-blend-mode: screen; z-index: 2;
}
@keyframes pulse-ring-expand {
  0% { opacity: 0.9; transform: scale(0.2); }
  60% { opacity: 0.4; }
  100% { opacity: 0; transform: scale(2.2); }
}
.crackle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #c0e8ff; box-shadow: 0 0 6px #4dabf7, 0 0 10px #82c8ff;
  pointer-events: none; z-index: 4;
}
@keyframes crackle-rise {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.3); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px) translateX(var(--driftX)) scale(1); }
}
.h-bolt-canvas {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 6; opacity: 0;
}

/* Effetto "maestà" sul nome del giocatore #1: riflesso di luce che scorre
   attraverso il testo (come su una superficie metallica preziosa), con
   bagliore che varia solo in intensità, mai in dimensione del testo. */
.majesty-name {
  display: inline-block;
  font-weight: bold;
  position: relative;
  z-index: 6;
  color: #fff6dc;
  background: linear-gradient(
    100deg,
    #fff6dc 0%, #fff6dc 35%,
    #ffffff 45%, #ffe9b0 50%, #ffffff 55%,
    #fff6dc 65%, #fff6dc 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: majesty-shine 3.2s ease-in-out infinite, majesty-glow-pulse 3.2s ease-in-out infinite;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
@keyframes majesty-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
@keyframes majesty-glow-pulse {
  0%, 100% {
    text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 9px rgba(255,210,140,0.55), 0 0 18px rgba(255,180,70,0.35);
  }
  50% {
    text-shadow: 0 0 5px rgba(255,255,255,0.95), 0 0 14px rgba(255,225,160,0.8), 0 0 28px rgba(255,195,90,0.55), 0 0 44px rgba(255,255,255,0.25);
  }
}
.majesty-orbit-wrap { position: relative; display: inline-block; min-width: 0; overflow: visible; }
.orbit-particle {
  position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #fff9e6; box-shadow: 0 0 5px #fff, 0 0 9px #ffd9a0;
  pointer-events: none; z-index: 6;
}
@keyframes orbit-spin {
  0% { transform: rotate(0deg) translateX(var(--orbit-r)) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); }
}

/* ----- #2: fuoco di drago ----- */
@keyframes fire-bg {
  0% { background: radial-gradient(ellipse at 30% 85%, rgba(255,70,0,0.5), rgba(150,20,0,0.16) 45%, rgba(8,5,5,1) 80%); }
  50% { background: radial-gradient(ellipse at 65% 80%, rgba(255,120,0,0.5), rgba(180,30,0,0.16) 45%, rgba(8,5,5,1) 80%); }
  100% { background: radial-gradient(ellipse at 30% 85%, rgba(255,70,0,0.5), rgba(150,20,0,0.16) 45%, rgba(8,5,5,1) 80%); }
}
@keyframes fire-border {
  0%, 100% { box-shadow: 0 0 10px rgba(255,60,0,0.45), 0 0 20px rgba(200,20,0,0.28), inset 0 0 16px rgba(255,90,0,0.25); }
  50% { box-shadow: 0 0 24px rgba(255,100,0,0.75), 0 0 42px rgba(220,30,0,0.5), inset 0 0 30px rgba(255,120,0,0.45); }
}
.row-rank-2 .legend-bg-layer-inner {
  background: radial-gradient(ellipse at 50% 85%, rgba(255,70,0,0.5), rgba(150,20,0,0.16) 45%, rgba(8,5,5,1) 80%);
  box-shadow: 0 0 10px rgba(255,60,0,0.45), 0 0 20px rgba(200,20,0,0.28), inset 0 0 16px rgba(255,90,0,0.25);
  animation: fire-bg 2.8s ease-in-out infinite, fire-border 1.3s ease-in-out infinite;
}
.flame-blob {
  position: absolute; bottom: -10px; border-radius: 50%; filter: blur(4px);
  pointer-events: none; mix-blend-mode: screen; z-index: 4;
}
@keyframes flame-blob-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6,0.5); }
  15% { opacity: 0.9; }
  50% { transform: translateY(-22px) scale(1.1,1.4); }
  80% { opacity: 0.5; transform: translateY(-38px) scale(0.8,1.6); }
  100% { opacity: 0; transform: translateY(-52px) scale(0.4,1.8); }
}
.flame-spark {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #ffd166; box-shadow: 0 0 4px #ff8c00; pointer-events: none; z-index: 5;
}
@keyframes flame-spark-rise {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50px) translateX(var(--driftX)); }
}

/* ----- #3: oro ----- */
@keyframes gold-bg {
  0% { background: radial-gradient(ellipse at 20% 50%, rgba(255,215,0,0.34), rgba(255,150,0,0.15) 38%, rgba(10,10,16,1) 80%); }
  50% { background: radial-gradient(ellipse at 80% 50%, rgba(255,230,120,0.38), rgba(255,150,0,0.16) 38%, rgba(10,10,16,1) 80%); }
  100% { background: radial-gradient(ellipse at 20% 50%, rgba(255,215,0,0.34), rgba(255,150,0,0.15) 38%, rgba(10,10,16,1) 80%); }
}
@keyframes gold-border {
  0%, 100% { box-shadow: 0 0 12px rgba(255,200,0,0.5), 0 0 24px rgba(255,150,0,0.3), inset 0 0 18px rgba(255,215,0,0.28); }
  50% { box-shadow: 0 0 24px rgba(255,210,0,0.85), 0 0 44px rgba(255,160,0,0.55), inset 0 0 30px rgba(255,225,100,0.45); }
}
@keyframes shimmer-sweep-gold {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}
.row-rank-3 .legend-bg-layer-inner {
  background: radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.34), rgba(255,150,0,0.15) 38%, rgba(10,10,16,1) 80%);
  box-shadow: 0 0 12px rgba(255,200,0,0.5), 0 0 24px rgba(255,150,0,0.3), inset 0 0 18px rgba(255,215,0,0.28);
  animation: gold-bg 4.2s ease-in-out infinite, gold-border 1.8s ease-in-out infinite;
}
.gold-shimmer-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.gold-shimmer-bar {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,235,160,0.5), transparent);
  animation: shimmer-sweep-gold 2s ease-in-out infinite;
}
.gold-coin {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at 35% 35%, #fff6d0, #ffd700 45%, #b8860b 100%);
  box-shadow: 0 0 6px rgba(255,215,0,0.8);
}
@keyframes coin-spin-rise {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.3) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) translateX(var(--driftX)) scale(0.9) rotate(380deg); }
}
.gold-sparkle {
  position: absolute; width: 3px; height: 3px; background: #fff8e1; border-radius: 50%;
  box-shadow: 0 0 5px #ffd700, 0 0 9px #ffae00; pointer-events: none; z-index: 5;
}
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ===== Popup profilo a schermo intero per il podio (#1/#2/#3) =====
   Lo sfondo dell'intero overlay riprende l'effetto della posizione. */
.profile-overlay-podium {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow-y: auto;
  padding: 24px;
}
.profile-overlay-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.profile-overlay-bg.bg-rank-1 { animation: storm-bg 3.5s ease-in-out infinite; }
.profile-overlay-bg.bg-rank-2 { animation: fire-bg 2.8s ease-in-out infinite; }
.profile-overlay-bg.bg-rank-3 { animation: gold-bg 4.2s ease-in-out infinite; }
.profile-overlay-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* La card statistiche deve SEMPRE restare sopra i layer di sfondo e
   particelle dell'overlay podio, altrimenti il bottone "chiudi" al suo
   interno risulta visivamente coperto e non cliccabile. */
.profile-overlay-podium .profile-modal-card {
  position: relative;
  z-index: 10;
  cursor: default;
}

/* Bordo pulsante e lampi adattati a riempire l'intero schermo invece che
   un singolo banner: stesso ritmo/colore del banner corrispondente. */
.overlay-rank-1 { animation: border-storm 2s linear infinite; }
.overlay-rank-2 { animation: fire-border 1.3s ease-in-out infinite; }
.overlay-rank-3 { animation: gold-border 1.8s ease-in-out infinite; }
.overlay-rank-1 .flash-overlay-1, .overlay-rank-1 .flash-overlay-2,
.overlay-rank-3 .gold-shimmer-layer {
  z-index: 1;
}


.user-row {
  color: var(--red);
  font-weight: bold;
  background: rgba(245, 101, 101, 0.1);
}

/* ===== Bandiere pixel-art ===== */
.flag-pixel {
  width: 18px;
  height: 12px;
  min-width: 18px;
  min-height: 12px;
  max-width: 18px;
  max-height: 12px;
  vertical-align: middle;
  border: 1px solid var(--panel-border);
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
}

/* ===== Badge prestigio / leggendari in classifica ===== */
.lb-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.65rem;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 3px;
  vertical-align: middle;
}

.lb-badge-prestige {
  background: rgba(236, 201, 75, 0.15);
  color: var(--gold);
  border: 1px solid var(--gold-shadow);
}

.lb-badge-legend {
  background: rgba(245, 101, 101, 0.15);
  color: var(--red);
  border: 1px solid var(--red-shadow);
}

/* ===== Pausa a schermo intero ===== */
.pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.97);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.pause-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.pause-overlay h1 {
  font-size: 1.4rem;
  color: var(--red);
  text-shadow: 4px 4px 0 var(--red-shadow);
  letter-spacing: 2px;
}

.btn-resume {
  font-size: 0.9rem;
  padding: 20px 44px;
}

/* ===== Login overlay ===== */
.login-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 950;
  padding: 20px;
}

.login-box {
  background-color: var(--bg-darker);
  border: 6px solid var(--panel-border);
  box-shadow: 0 8px 0 0 var(--panel-border);
  padding: 36px 28px;
  text-align: center;
  max-width: 380px;
}

.login-box h1 {
  font-size: 1.3rem;
  color: var(--red);
  text-shadow: 4px 4px 0 var(--red-shadow);
  margin-bottom: 10px;
}

.login-box p {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  margin-bottom: 20px;
}

.login-box input[type="text"], .login-box select {
  display: block;
  width: 100%;
  background-color: var(--bg-dark);
  border: 4px solid var(--panel-border);
  color: var(--text-light);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  padding: 12px;
  margin-bottom: 14px;
  text-align: center;
}

/* ===== Popup impostazioni ===== */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.popup-content {
  background: var(--bg-darker);
  border: 6px solid var(--panel-border);
  box-shadow: 0 8px 0 0 var(--panel-border);
  padding: 30px;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
}

.popup-content::-webkit-scrollbar { width: 8px; }
.popup-content::-webkit-scrollbar-thumb { background-color: var(--panel-border); }

.popup-content h2 {
  color: var(--red);
  font-size: 1rem;
  text-shadow: 3px 3px 0 var(--red-shadow);
  margin-bottom: 10px;
}

.popup-content hr {
  border: 0;
  height: 2px;
  background: var(--panel-border);
  margin-bottom: 20px;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  font-size: 0.65rem;
  color: var(--red);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label, .audio-control-group label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  margin-bottom: 6px;
  color: #a0a0b8;
}

.input-disabled {
  width: 100%;
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 10px;
  color: #6a6a82;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  cursor: not-allowed;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: var(--bg-dark);
  height: 8px;
  border: 2px solid var(--panel-border);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--red);
  cursor: pointer;
  border: 2px solid var(--panel-border);
}

.image-controls {
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 14px;
}

.image-controls .form-group span {
  color: var(--red);
  font-weight: bold;
  float: right;
}

.file-input {
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 8px;
  color: var(--text-light);
  width: 100%;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
}

.btn-save {
  width: 100%;
  padding: 14px;
  font-size: 0.8rem;
}

/* ===== Footer ===== */
.game-footer {
  text-align: center;
  padding: 14px;
  background: var(--bg-darker);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: #5a5a72;
  border-top: 4px solid var(--panel-border);
}

@media (max-width: 900px) {
  .game-container {
    grid-template-columns: 1fr;
  }
}

/* ===== Mobile: header impilato e compatto ===== */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .game-header {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 10px;
  }

  .game-title {
    text-align: center;
    font-size: 0.9rem;
    order: -1;
  }

  .header-right {
    justify-content: center;
    width: 100%;
  }

  #btn-home {
    align-self: center;
  }

  .btn-nav, .btn-icon {
    font-size: 0.55rem;
    padding: 9px 10px;
    flex: 1;
    text-align: center;
  }

  #btn-switch-account {
    font-size: 0.5rem;
    padding: 9px 8px;
  }

  .header-right {
    gap: 6px;
  }

  /* Evita che la pagina "salti" di larghezza cambiando modalità x1/x10/MAX:
     riserviamo sempre lo spazio massimo possibile per il testo del costo. */
  .gen-cost {
    min-width: 110px;
    text-align: right;
    display: inline-block;
  }

  .gen-item, .shop-item {
    flex-wrap: wrap;
  }

  .generators-header {
    flex-direction: column;
    align-items: stretch;
  }

  .buy-mode-selector {
    margin-left: 0;
    justify-content: stretch;
  }

  .buy-mode-btn {
    flex: 1;
    text-align: center;
    font-size: 0.6rem;
    padding: 10px 6px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .stat-value {
    font-size: 0.75rem;
  }

  .main-click-button {
    width: 160px;
    height: 160px;
    font-size: 2.6rem;
  }

  /* ===== Sezione OBIETTIVI/SHOP/COLLEZIONE: responsive mobile =====
     Su schermi piccoli tutta questa sezione usava larghezze fisse in px
     pensate per desktop (shop-side 200px, wheel-item 92px+margini,
     reveal-card-frame 120px, ecc.) che sommate sforavano la larghezza
     dello schermo e causavano lo scroll/allungamento orizzontale. */

  .obj-subtabs {
    gap: 4px;
  }
  .obj-subtab-btn {
    font-size: 0.42rem;
    padding: 8px 4px;
  }

  .objective-card {
    padding: 10px;
  }
  .obj-title {
    font-size: 0.55rem;
  }
  .obj-progress-text {
    font-size: 0.5rem;
  }
  .obj-star {
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
  }
  .obj-gems-hint {
    font-size: 0.42rem;
  }

  /* Shop: colonna unica invece di pacchetti + scena affiancati */
  .shop-layout {
    flex-direction: column;
  }
  .shop-side {
    width: 100%;
  }
  .shop-main {
    width: 100%;
    min-width: 0;
    min-height: 260px;
  }

  /* Scena apertura cassa: tutto ridotto e contenuto entro lo schermo */
  .case-scene-bg {
    height: 260px;
  }
  .side-items {
    padding: 0 4px;
  }
  .side-item {
    width: 50px;
    height: 62px;
    font-size: 1rem;
  }
  .side-item.far {
    width: 36px;
    height: 46px;
  }
  .center-mystery {
    width: 78px;
    height: 96px;
  }
  .mystery-q {
    font-size: 1.4rem;
  }
  .case-box {
    width: 84px;
    height: 62px;
  }
  .case-wrap {
    bottom: 28px;
  }
  .case-shadow {
    width: 96px;
    bottom: 28px;
  }
  .case-label {
    font-size: 0.32rem;
  }

  .wheel-overlay {
    height: 86px;
  }
  .wheel-item {
    width: 66px;
    height: 66px;
    margin: 0 4px;
  }
  .wheel-item .icon-pixel,
  .wheel-item span {
    font-size: 1.1rem !important;
  }

  .reveal-card-frame {
    width: 92px;
    height: 116px;
  }
  .reveal-card-icon {
    width: 40px;
    height: 40px;
    margin: 12px auto 6px;
  }
  .reveal-card-name {
    font-size: 0.4rem;
  }
  .reveal-title {
    font-size: 0.48rem;
  }
  .reveal-sub {
    font-size: 0.42rem;
    text-align: center;
    padding: 0 10px;
  }
  .action-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
  .action-btn {
    font-size: 0.42rem;
    padding: 7px 12px;
  }

  /* Collezione: griglie più dense su schermo piccolo */
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  }
  .cosmetic-grid {
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  }

  /* Classifica/podio: rete di sicurezza anti-overflow. Gli effetti del
     podio (fulmini su canvas, fiamme, scintille, monete) sono disegnati
     con overflow:visible apposta per "uscire" leggermente dai bordi del
     banner; su schermi molto piccoli questo poteva spingere il contenuto
     fuori dalla pagina e causare lo scroll orizzontale indesiderato. */
  #section-rank {
    overflow-x: hidden;
    max-width: 100%;
  }
  .leaderboard-table {
    font-size: 0.7rem;
  }
}


/* ===== Profilo box (sostituisce "valore click" in cima) ===== */
.profile-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-darker);
  border: 4px solid var(--panel-border);
  padding: 12px;
  margin-bottom: 14px;
  cursor: pointer;
}

.avatar-frame {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  color: var(--cream);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-frame-settings {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}

.profile-box-info {
  flex: 1;
  min-width: 0;
}

.profile-box-name {
  font-size: 0.85rem;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-box-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: #a0a0b8;
}

/* ===== Colori nickname ===== */
@keyframes name-rainbow { 0%{color:#ff6b6b} 16%{color:#feca57} 33%{color:#48dbfb} 50%{color:#1dd1a1} 66%{color:#a55eea} 83%{color:#ff9ff3} 100%{color:#ff6b6b} }
@keyframes name-chrome-shine { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes name-lightning { 0%,100%{opacity:1;text-shadow:0 0 4px #fff,0 0 10px #4dabf7} 50%{opacity:0.7;text-shadow:0 0 8px #fff,0 0 20px #4dabf7,0 0 30px #4dabf7} }
@keyframes name-fire { 0%,100%{text-shadow:0 0 4px #ff6b00,0 0 8px #ff3d00} 50%{text-shadow:0 0 8px #ffae00,0 0 16px #ff3d00} }

.name-rainbow { animation: name-rainbow 3s linear infinite; }
.name-chrome {
  background: linear-gradient(90deg,#c0c0c0,#fff,#888,#fff,#c0c0c0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: name-chrome-shine 3s linear infinite;
}
.name-lightning { color: #4dabf7; animation: name-lightning 1s ease-in-out infinite; }
.name-fire { color: #ff6b00; animation: name-fire 0.8s ease-in-out infinite; }

/* ===== Livello tocco ===== */
.tap-level-box {
  background: var(--bg-darker);
  border: 4px solid var(--panel-border);
  padding: 12px;
  margin-top: 14px;
}

.lvl-bar-label {
  display: flex;
  justify-content: space-between;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: #a0a0b8;
  margin-bottom: 6px;
}

.lvl-bar-bg {
  background: var(--bg-dark);
  height: 10px;
  border: 2px solid var(--panel-border);
  margin-bottom: 10px;
}

.lvl-bar-fill {
  background: var(--red);
  height: 100%;
  transition: width 0.2s ease;
}

.tap-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--red);
  border: 4px solid var(--panel-border);
  box-shadow: 0 5px 0 var(--red-shadow), 0 5px 0 4px var(--panel-border);
  padding: 10px 14px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
}

.tap-upgrade-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--red-shadow), 0 3px 0 4px var(--panel-border);
}

.tap-upgrade-btn .left {
  font-size: 0.6rem;
  color: var(--cream);
}

.tap-upgrade-btn .right {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: var(--cream);
  font-weight: bold;
}

.tap-upgrade-btn.maxlevel {
  background: var(--gold);
  box-shadow: 0 5px 0 var(--gold-shadow), 0 5px 0 4px var(--panel-border);
}
.tap-upgrade-btn.maxlevel .left,
.tap-upgrade-btn.maxlevel .right { color: #1a1a2e; }

.tap-upgrade-btn.disabled {
  background: #2a2a3a;
  box-shadow: 0 5px 0 #1f1f2e, 0 5px 0 4px var(--panel-border);
  cursor: not-allowed;
}
.tap-upgrade-btn.disabled .left,
.tap-upgrade-btn.disabled .right { color: #7a7a8e; }

/* ===== Contatore upgrade ===== */
.section-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}

.upg-counter {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  color: var(--gold);
}

/* ===== Avatar upload (impostazioni) ===== */
.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.small-btn {
  font-size: 0.6rem;
  padding: 8px 14px;
}

.avatar-upload-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  color: #6a6a82;
  margin-top: 6px;
}

/* ===== Selettore colore nickname ===== */
.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.color-swatch {
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
}

.color-swatch.selected { border-color: var(--gold); }
.color-swatch.previewing { border-color: #4dabf7; }
.color-swatch.locked { opacity: 0.7; }

.swatch-preview { font-family: 'Orbitron', sans-serif; font-size: 0.65rem; }
.swatch-label { font-family: 'Rajdhani', sans-serif; font-size: 0.45rem; color: #a0a0b8; text-align: center; }
.swatch-lock { position: absolute; top: 2px; right: 2px; font-size: 0.45rem; color: #6a6a82; }

.color-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.58rem;
  color: #a0a0b8;
  background: var(--bg-dark);
  border: 2px dashed var(--panel-border);
  padding: 8px;
  min-height: 16px;
}
.color-hint.active { color: #4dabf7; border-color: #4dabf7; }

/* ===== Bandiere pixel (classifica + profilo) ===== */
.flag-pixel {
  width: 18px;
  height: 12px;
  min-width: 18px;
  min-height: 12px;
  max-width: 18px;
  max-height: 12px;
  vertical-align: middle;
  border: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.lb-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  overflow: hidden;
}

.lb-name-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.lb-mini-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  overflow: hidden;
}
.lb-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Pallino online/offline: verde con un leggero alone se il giocatore è
   connesso ora, grigio spento altrimenti. Usato sia nelle righe normali
   della classifica che nel banner del podio. */
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.online-dot.online {
  background: #51cf66;
  box-shadow: 0 0 4px #51cf66;
}
.online-dot.offline {
  background: #4a4a5e;
}

/* Badge cosmetico attivo (stella/fulmine/drago/corona dai pacchetti),
   mostrato accanto al nome nella classifica e nel profilo pubblico. */
.lb-cosmetic-badge {
  font-size: 0.7rem;
  flex-shrink: 0;
}
.legend-player .lb-cosmetic-badge {
  font-size: 0.85rem;
}
.profile-modal-cosmetic-badge {
  font-size: 0.9rem;
}

/* ===== Popup profilo pubblico ===== */
.profile-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 980;
  padding: 20px;
}

.profile-modal-card {
  background: var(--bg-darker);
  border: 6px solid var(--panel-border);
  box-shadow: 0 8px 0 0 var(--panel-border);
  padding: 24px;
  max-width: 360px;
  width: 100%;
}

.profile-modal-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--red);
  border: 4px solid var(--panel-border);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--cream);
  overflow: hidden;
}
.profile-modal-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-modal-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}

.profile-modal-name { font-size: 1rem; }

.profile-modal-sub {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: #a0a0b8;
  margin-bottom: 14px;
}

.profile-modal-badges {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.profile-badge-pill {
  font-size: 0.55rem;
  background: rgba(236, 201, 75, 0.15);
  border: 1px solid var(--gold-shadow);
  color: var(--gold);
  padding: 4px 8px;
}

.profile-modal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.profile-modal-stat-box {
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 8px;
  text-align: center;
}

.profile-modal-stat-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.5rem;
  color: #a0a0b8;
  margin-bottom: 4px;
}

.profile-modal-stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  color: var(--gold);
}

.profile-modal-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.55rem;
  color: #6a6a82;
  text-align: center;
  margin-bottom: 14px;
}

.profile-modal-close {
  display: block;
  width: 100%;
  background: var(--red);
  color: var(--cream);
  border: 4px solid var(--panel-border);
  box-shadow: 0 4px 0 var(--red-shadow), 0 4px 0 4px var(--panel-border);
  padding: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  cursor: pointer;
}

/* ===== MODAL CARTA COLLEZIONE (schermo intero) ===== */
.card-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 980;
  padding: 20px;
}
.card-modal-card {
  background: var(--bg-darker);
  border: 6px solid var(--panel-border);
  box-shadow: 0 8px 0 0 var(--panel-border);
  padding: 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
}
.card-modal-rarity {
  font-size: 0.55rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.card-modal-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 14px;
  background: var(--bg-dark);
  border: 4px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.card-modal-icon svg { width: 100%; height: 100%; }
.card-modal-icon.locked-icon {
  filter: brightness(0.3);
}
.card-modal-name {
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.card-modal-level {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: var(--gold);
  margin-bottom: 14px;
}
.card-modal-locked-msg {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  color: #6a6a82;
  margin-bottom: 14px;
}
.card-modal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.card-modal-stat-box {
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 10px 8px;
  text-align: center;
}
.card-modal-stat-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.48rem;
  color: #a0a0b8;
  margin-bottom: 6px;
}
.card-modal-stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: var(--gold);
}
.card-modal-close {
  display: block;
  width: 100%;
  background: var(--red);
  color: var(--cream);
  border: 4px solid var(--panel-border);
  box-shadow: 0 4px 0 var(--red-shadow), 0 4px 0 4px var(--panel-border);
  padding: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  cursor: pointer;
}

/* ===== STAT BOX GEMME ===== */
.stat-box-gems {
  border-color: #22d3ee;
}
.text-cyan {
  color: #22d3ee;
}

/* ===== SOTTO-TAB OBIETTIVI ===== */
.obj-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.obj-subtab-btn {
  flex: 1;
  background: var(--bg-dark);
  color: #a0a0b8;
  border: 2px solid var(--panel-border);
  padding: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  cursor: pointer;
}
.obj-subtab-btn.active {
  background: var(--red);
  color: var(--cream);
}

/* ===== CARD OBIETTIVO ===== */
.objective-card {
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  padding: 14px;
  margin-bottom: 12px;
}
.obj-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 4px;
}
.obj-title {
  font-size: 0.65rem;
  color: var(--cream);
}
.obj-progress-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: #a0a0b8;
}
.obj-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.obj-star {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border-radius: 50%;
  background: var(--bg-darker);
  color: #3a3a4e;
  flex-shrink: 0;
  cursor: default;
}
.obj-star.unlocked {
  background: #ecc94b;
  color: #1a1a2e;
  box-shadow: 0 0 6px rgba(236, 201, 75, 0.6);
}
.obj-star.claimable {
  background: #51cf66;
  color: #0a3a14;
  cursor: pointer;
  animation: star-pulse 1.2s ease-in-out infinite;
}
@keyframes star-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(81, 207, 102, 0.6); }
  50% { box-shadow: 0 0 14px rgba(81, 207, 102, 1); }
}
.obj-bar-bg {
  background: var(--bg-darker);
  height: 8px;
  border: 1px solid var(--panel-border);
}
.obj-bar-fill {
  background: var(--red);
  height: 100%;
  transition: width 0.3s;
}
.obj-gems-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.5rem;
  color: #22d3ee;
  margin-top: 6px;
}

/* ===== SHOP PACCHETTI ===== */
.shop-layout {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.shop-side {
  width: 200px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #1a1530, #0a0814);
  border: 3px solid #4a3a6a;
  padding: 14px;
}
.shop-side h3 {
  font-size: 0.55rem;
  color: #c9a8ff;
  text-shadow: 0 0 6px rgba(167, 139, 250, 0.6);
  margin-bottom: 12px;
  text-align: center;
}
.gem-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-darker);
  border: 2px solid #22d3ee;
  padding: 8px;
  margin-bottom: 14px;
}
.gem-balance .gem-icon {
  width: 16px;
  height: 16px;
}
.gem-balance .gem-amt {
  font-family: 'Rajdhani', sans-serif;
  color: #22d3ee;
  font-size: 0.75rem;
}
.pack-card {
  background: #15102a;
  border: 2px solid;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.pack-card:hover {
  transform: translateY(-2px);
}
.pack-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}
.pack-card.cursors { border-color: #4dabf7; }
.pack-card.badges { border-color: #9775fa; }
.pack-card.cards { border-color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
.pack-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 6px;
}
.pack-name {
  font-size: 0.5rem;
  margin-bottom: 4px;
}
.pack-card.cursors .pack-name { color: #4dabf7; }
.pack-card.badges .pack-name { color: #9775fa; }
.pack-card.cards .pack-name { color: #ffd700; }
.pack-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  color: #22d3ee;
}

.shop-main {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  border: 3px solid var(--panel-border);
  min-height: 340px;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* ===== SCENA APERTURA CASSA (case-opening, stile CS:GO) ===== */
.case-scene-bg {
  position: relative;
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
  overflow: hidden;
}
.bg-gradient {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(167, 139, 250, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 215, 0, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #1a1530 0%, #100c20 40%, #0a0814 75%, #06060c 100%);
}
.bg-grid-floor {
  position: absolute; bottom: 0; left: -20%; right: -20%; height: 45%;
  background-image:
    linear-gradient(rgba(167, 139, 250, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.18) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom;
  z-index: 0;
  opacity: 0.6;
}
.bg-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
}
.floating-67 {
  position: absolute; z-index: 1; pointer-events: none;
  font-family: 'Orbitron', sans-serif;
  color: rgba(245, 101, 101, 0.18);
}
@keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes float-slow-rev { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(12px) rotate(-3deg); } }
.bg-icon-silhouette {
  position: absolute; z-index: 1; opacity: 0.16; pointer-events: none;
  filter: grayscale(1) brightness(2);
}
@keyframes drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -10px); } }
@keyframes drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, 8px); } }
.bg-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; z-index: 1;
}
@keyframes twinkle-bg { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }
.light-rays {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 0.3s;
  background: radial-gradient(ellipse at center 38%, rgba(255, 215, 0, 0.3) 0%, rgba(167, 139, 250, 0.12) 35%, transparent 65%);
}

.side-items {
  position: absolute; top: 30%; width: 100%; z-index: 3; pointer-events: none;
  display: flex; justify-content: space-between; transition: opacity 0.3s;
}
.side-item {
  width: 80px; height: 96px;
  background: linear-gradient(180deg, #2a2540, #15102a);
  border: 2px solid #3a3050;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; opacity: 0.55; color: #5a5070;
}
.side-item.far { width: 58px; height: 70px; opacity: 0.3; }
.side-item.left-far { transform: perspective(600px) rotateY(35deg) scale(0.85); }
.side-item.left-near { transform: perspective(600px) rotateY(22deg) scale(0.95); }
.side-item.right-near { transform: perspective(600px) rotateY(-22deg) scale(0.95); }
.side-item.right-far { transform: perspective(600px) rotateY(-35deg) scale(0.85); }
.center-mystery {
  position: relative; z-index: 4; width: 115px; height: 140px;
  background: linear-gradient(180deg, #3a2e0a, #1a1408);
  border: 3px solid #ffd700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.2);
}
.mystery-q {
  font-size: 2rem; color: #ffd700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}
.center-divider {
  position: absolute; left: 50%; top: 8%; bottom: 8%; width: 2px; background: #ffd700; opacity: 0.7;
}

.case-shadow {
  position: absolute; bottom: 40px; left: 50%; width: 130px; height: 14px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
  transform: translateX(-50%); z-index: 4; transition: opacity 0.3s;
}
.case-wrap {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 5; text-align: center; cursor: default;
  transition: opacity 0.3s, transform 0.3s;
}
.case-wrap.fade-out {
  opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.85);
}
.case-box { width: 110px; height: 80px; position: relative; }
.case-lock {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 24px; z-index: 2;
}
.case-label {
  font-size: 0.38rem; color: #ffd700; margin-top: 8px; letter-spacing: 1px;
}
.lid-flash-overlay {
  position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff, #ffd700, transparent 70%);
}

@keyframes case-shake-fast {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-2deg); }
  75% { transform: translateX(-50%) rotate(2deg); }
}
@keyframes lock-pop-fast {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px) rotate(160deg); }
}
@keyframes lid-flash-fast {
  0% { opacity: 0; } 60% { opacity: 0.9; } 100% { opacity: 0; }
}

/* ===== RUOTA (wheel) di apertura ===== */
.wheel-overlay {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 116px; overflow: hidden; z-index: 8; opacity: 0; pointer-events: none;
  background: rgba(6, 6, 12, 0.92);
  border-top: 3px solid #ffd700; border-bottom: 3px solid #ffd700;
  transition: opacity 0.3s;
}
.wheel-overlay.visible { opacity: 1; }
.wheel-track {
  display: flex; align-items: center; height: 100%; position: absolute; left: 0;
  will-change: transform;
}
.wheel-item {
  width: 92px; height: 92px; margin: 0 6px; flex-shrink: 0;
  border: 3px solid; display: flex; align-items: center; justify-content: center;
  background: #15102a; position: relative;
}
.wheel-item .icon-pixel { width: 60%; height: 60%; }
.wheel-item.comune { border-color: #a0a0b8; }
.wheel-item.rara { border-color: #4dabf7; }
.wheel-item.epica { border-color: #9775fa; }
.wheel-item.leggendaria {
  border-color: #ecc94b;
  box-shadow: 0 0 16px rgba(236, 201, 75, 0.6);
  background: linear-gradient(180deg, #3a2e0a, #1a1408);
}
.wheel-center-line {
  position: absolute; top: -3px; bottom: -3px; left: 50%; width: 3px;
  background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #ffd700; z-index: 6;
  transform: translateX(-50%);
}
.wheel-center-line::before, .wheel-center-line::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-style: solid;
}
.wheel-center-line::before { top: -10px; border-width: 10px 7px 0 7px; border-color: #ffd700 transparent transparent transparent; }
.wheel-center-line::after { bottom: -10px; border-width: 0 7px 10px 7px; border-color: transparent transparent #ffd700 transparent; }

/* ===== REVEAL FINALE ===== */
.reveal-overlay {
  position: absolute; inset: 0; z-index: 9; opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(6, 6, 12, 0.6); transition: opacity 0.2s;
}
.reveal-overlay.visible { opacity: 1; pointer-events: auto; }

.skip-opening-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  background: rgba(10, 10, 20, 0.75);
  color: var(--cream);
  border: 2px solid var(--panel-border);
  padding: 6px 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.42rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s;
}
.skip-opening-btn.visible { opacity: 1; pointer-events: auto; }
.skip-opening-btn:hover { background: rgba(245, 101, 101, 0.3); border-color: var(--red); }
@keyframes reveal-burst-ring { 0% { transform: scale(0.1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
@keyframes reveal-card-impact {
  0% { transform: scale(0.2); opacity: 0; }
  50% { transform: scale(1.25); opacity: 1; }
  75% { transform: scale(0.92); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes gold-name-shine { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
.burst-ring {
  position: absolute; width: 60px; height: 60px; border: 3px solid #ffd700; border-radius: 50%;
  animation: reveal-burst-ring 1s ease-out forwards;
}
.reveal-card-frame {
  display: inline-block; width: 120px; height: 150px; border: 4px solid #ffd700;
  background: linear-gradient(180deg, #3a2e0a, #15102a);
  box-shadow: 0 0 50px rgba(255, 215, 0, 0.8);
  animation: reveal-card-impact 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  position: relative; z-index: 2;
}
.reveal-card-icon { width: 56px; height: 56px; margin: 16px auto 8px; }
.reveal-card-name { font-size: 0.48rem; color: #ffd700; padding: 0 6px; }
.reveal-title {
  font-size: 0.6rem;
  background: linear-gradient(90deg, #ffd700, #fff6d0, #ffd700, #fff6d0);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gold-name-shine 2s linear infinite;
  margin-top: 14px; opacity: 0; transition: opacity 0.4s;
}
.reveal-title.show { opacity: 1; }
.reveal-title.rare-title { background: none; color: #9775fa; -webkit-text-fill-color: #9775fa; }
.reveal-sub {
  font-family: 'Rajdhani', sans-serif; font-size: 0.5rem; color: #a0a0b8;
  margin-top: 6px; opacity: 0; transition: opacity 0.4s;
}
.reveal-sub.show { opacity: 1; }
.reveal-sparkle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff9d6; box-shadow: 0 0 6px #ffd700; pointer-events: none;
}
@keyframes sparkle-pop {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
}
.action-buttons {
  display: flex; gap: 10px; margin-top: 14px; opacity: 0;
  transition: opacity 0.5s; pointer-events: none;
}
.action-buttons.show { opacity: 1; pointer-events: auto; }
.action-btn {
  background: var(--bg-darker); color: #a0a0b8; border: 2px solid #3a3a4e;
  padding: 8px 16px; font-family: 'Orbitron', sans-serif; font-size: 0.5rem; cursor: pointer;
}
.action-btn.primary { background: #ffd700; color: #1a1408; border-color: var(--panel-border); }

/* ===== COLLEZIONE: CARTE GENERATORI + COSMETICI ===== */
.collection-heading {
  font-size: 0.6rem;
  color: var(--red);
  margin: 18px 0 10px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.gen-card {
  background: var(--bg-dark);
  border: 3px solid;
  padding: 10px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.gen-card.locked { border-color: #2a2a3a; opacity: 0.5; cursor: default; }
.gen-card.owned { border-color: #4dabf7; }
.gen-card .card-icon { width: 38px; height: 38px; margin: 0 auto 6px; }
.gen-card .card-rarity-tag { font-size: 0.32rem; letter-spacing: 0.5px; margin-bottom: 4px; }
.gen-card .card-name { font-size: 0.42rem; margin-bottom: 4px; }
.gen-card .card-level { font-family: 'Rajdhani', sans-serif; font-size: 0.5rem; color: #ecc94b; margin-bottom: 4px; }
.gen-card .card-bonus { font-family: 'Rajdhani', sans-serif; font-size: 0.38rem; color: #51cf66; line-height: 1.5; }
.dup-badge {
  position: absolute; top: -6px; right: -6px; background: var(--red); color: var(--cream);
  font-size: 0.38rem; padding: 2px 5px; border: 2px solid var(--panel-border);
}

.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.cosmetic-item {
  background: var(--bg-dark);
  border: 2px solid #2a2a3a;
  padding: 8px;
  text-align: center;
  cursor: pointer;
}
.cosmetic-item.owned { border-color: #9775fa; }
.cosmetic-item.active { border-color: #ffd700; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
.cosmetic-preview { width: 28px; height: 28px; margin: 0 auto 6px; font-size: 1.2rem; }
.cosmetic-item .cname { font-size: 0.36rem; color: #a0a0b8; }

/* ===== CURSORI CUSTOM (cambiano il puntatore del mouse su tutto il sito) =====
   Ogni cursore e' un'icona SVG disegnata ad alta risoluzione (viewBox 64x64,
   con bagliore sfumato via feGaussianBlur e gradiente radiale/lineare) ma
   mostrata a 32x32: il dettaglio extra resta percepibile come profondita'
   e luminosita' anche alla dimensione reale di un cursore, pur perdendo i
   dettagli piu' fini (confermato con un test dedicato). Hotspot a 0 0 (la
   punta in alto a sinistra della freccia, dove il browser interpreta il
   click). Il fallback "auto" garantisce che se l'immagine non carica per
   qualche motivo, il cursore normale del sistema resti utilizzabile. */

body.custom-cursor-blue {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gBlue" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23ffffff"/><stop offset="40%25" stop-color="%239fd8ff"/><stop offset="100%25" stop-color="%231c5fc9"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gBlue)" stroke="%23ffffff" stroke-width="2"/></g><circle cx="34" cy="2" r="3" fill="%23bfe6ff" opacity="0.85"/></svg>') 0 0, auto;
}
body.custom-cursor-green {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gGreen" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23f4ffe8"/><stop offset="40%25" stop-color="%238ce99a"/><stop offset="100%25" stop-color="%232b8a3e"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gGreen)" stroke="%23eafff0" stroke-width="2"/></g><path d="M22 4 Q29 0 27 -6 Q33.6 -3 31.5 3 Z" fill="%2351cf66"/></svg>') 0 0, auto;
}
body.custom-cursor-lightning {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gLight" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23ffffff"/><stop offset="40%25" stop-color="%2382c8ff"/><stop offset="100%25" stop-color="%234dabf7"/></radialGradient><filter id="g" x="-100%25" y="-100%25" width="300%25" height="300%25"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gLight)" stroke="%23ffffff" stroke-width="2"/></g><path d="M8 20 L13.5 6 L10.5 20 L16 18 L10 32 L12.5 22 Z" fill="%23ffffff" stroke="%2382c8ff" stroke-width="0.8"/></svg>') 0 0, auto;
}
body.custom-cursor-fire {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gFire" cx="35%25" cy="65%25" r="85%25"><stop offset="0%25" stop-color="%23fff3bf"/><stop offset="45%25" stop-color="%23ff922b"/><stop offset="100%25" stop-color="%23c92a00"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gFire)" stroke="%23fff3bf" stroke-width="2"/></g><path d="M18 14 Q24 8 20 0 Q29 3.6 25 13 Q32 11 30 4 Q38 12 29 21 Q27 15 23 17 Z" fill="%23ffd43b" opacity="0.9"/></svg>') 0 0, auto;
}
body.custom-cursor-ice {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gIce" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23ffffff"/><stop offset="45%25" stop-color="%23cdf3ff"/><stop offset="100%25" stop-color="%231098ad"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gIce)" stroke="%23ffffff" stroke-width="2"/></g><path d="M25 4 L25 -8 M19 -2 L31 -2 M20.6 -5.6 L29.4 1.6 M29.4 -5.6 L20.6 1.6" stroke="%23ffffff" stroke-width="1.2"/></svg>') 0 0, auto;
}
body.custom-cursor-gold {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gGold" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23fffbe0"/><stop offset="45%25" stop-color="%23ffd43b"/><stop offset="100%25" stop-color="%23b8860b"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gGold)" stroke="%23fff8e1" stroke-width="2"/></g><path d="M27 -3 L29.2 1.4 L34 2.4 L29.2 3.4 L27 8 L24.8 3.4 L20 2.4 L24.8 1.4 Z" fill="%23fff3c4"/></svg>') 0 0, auto;
}
body.custom-cursor-cosmic {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gCosmic" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23f3e8ff"/><stop offset="45%25" stop-color="%23b266ff"/><stop offset="100%25" stop-color="%234b0a91"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gCosmic)" stroke="%23f3e8ff" stroke-width="2"/></g><circle cx="27" cy="2" r="2.2" fill="%23ffffff"/><circle cx="22" cy="-8" r="1.4" fill="%23ffffff"/><circle cx="34" cy="-2" r="1.6" fill="%23ffffff"/></svg>') 0 0, auto;
}
body.custom-cursor-rainbow {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><linearGradient id="gRainbow" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" stop-color="%23ff6b6b"/><stop offset="25%25" stop-color="%23ffd43b"/><stop offset="50%25" stop-color="%2351cf66"/><stop offset="75%25" stop-color="%234dabf7"/><stop offset="100%25" stop-color="%23b266ff"/></linearGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gRainbow)" stroke="%23ffffff" stroke-width="2"/></g></svg>') 0 0, auto;
}

/* Fix: senza questa regola, qualsiasi elemento con "cursor: pointer" locale
   (bottoni, righe cliccabili - 21 occorrenze nel CSS) sovrascrive il
   cursore custom del body non appena il mouse vi passa sopra, facendolo
   "tornare" al cursore di sistema. Applicando lo stesso cursore custom a
   TUTTI i discendenti del body con specificita' maggiore di un singolo
   selettore, l'effetto custom non si perde mai navigando l'interfaccia. */
body.custom-cursor-blue * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gBlue" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23ffffff"/><stop offset="40%25" stop-color="%239fd8ff"/><stop offset="100%25" stop-color="%231c5fc9"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gBlue)" stroke="%23ffffff" stroke-width="2"/></g><circle cx="34" cy="2" r="3" fill="%23bfe6ff" opacity="0.85"/></svg>') 0 0, auto;
}
body.custom-cursor-green * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gGreen" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23f4ffe8"/><stop offset="40%25" stop-color="%238ce99a"/><stop offset="100%25" stop-color="%232b8a3e"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gGreen)" stroke="%23eafff0" stroke-width="2"/></g><path d="M22 4 Q29 0 27 -6 Q33.6 -3 31.5 3 Z" fill="%2351cf66"/></svg>') 0 0, auto;
}
body.custom-cursor-lightning * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gLight" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23ffffff"/><stop offset="40%25" stop-color="%2382c8ff"/><stop offset="100%25" stop-color="%234dabf7"/></radialGradient><filter id="g" x="-100%25" y="-100%25" width="300%25" height="300%25"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gLight)" stroke="%23ffffff" stroke-width="2"/></g><path d="M8 20 L13.5 6 L10.5 20 L16 18 L10 32 L12.5 22 Z" fill="%23ffffff" stroke="%2382c8ff" stroke-width="0.8"/></svg>') 0 0, auto;
}
body.custom-cursor-fire * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gFire" cx="35%25" cy="65%25" r="85%25"><stop offset="0%25" stop-color="%23fff3bf"/><stop offset="45%25" stop-color="%23ff922b"/><stop offset="100%25" stop-color="%23c92a00"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gFire)" stroke="%23fff3bf" stroke-width="2"/></g><path d="M18 14 Q24 8 20 0 Q29 3.6 25 13 Q32 11 30 4 Q38 12 29 21 Q27 15 23 17 Z" fill="%23ffd43b" opacity="0.9"/></svg>') 0 0, auto;
}
body.custom-cursor-ice * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gIce" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23ffffff"/><stop offset="45%25" stop-color="%23cdf3ff"/><stop offset="100%25" stop-color="%231098ad"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gIce)" stroke="%23ffffff" stroke-width="2"/></g><path d="M25 4 L25 -8 M19 -2 L31 -2 M20.6 -5.6 L29.4 1.6 M29.4 -5.6 L20.6 1.6" stroke="%23ffffff" stroke-width="1.2"/></svg>') 0 0, auto;
}
body.custom-cursor-gold * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gGold" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23fffbe0"/><stop offset="45%25" stop-color="%23ffd43b"/><stop offset="100%25" stop-color="%23b8860b"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gGold)" stroke="%23fff8e1" stroke-width="2"/></g><path d="M27 -3 L29.2 1.4 L34 2.4 L29.2 3.4 L27 8 L24.8 3.4 L20 2.4 L24.8 1.4 Z" fill="%23fff3c4"/></svg>') 0 0, auto;
}
body.custom-cursor-cosmic * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><radialGradient id="gCosmic" cx="35%25" cy="20%25" r="80%25"><stop offset="0%25" stop-color="%23f3e8ff"/><stop offset="45%25" stop-color="%23b266ff"/><stop offset="100%25" stop-color="%234b0a91"/></radialGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gCosmic)" stroke="%23f3e8ff" stroke-width="2"/></g><circle cx="27" cy="2" r="2.2" fill="%23ffffff"/><circle cx="22" cy="-8" r="1.4" fill="%23ffffff"/><circle cx="34" cy="-2" r="1.6" fill="%23ffffff"/></svg>') 0 0, auto;
}
body.custom-cursor-rainbow * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><defs><linearGradient id="gRainbow" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" stop-color="%23ff6b6b"/><stop offset="25%25" stop-color="%23ffd43b"/><stop offset="50%25" stop-color="%2351cf66"/><stop offset="75%25" stop-color="%234dabf7"/><stop offset="100%25" stop-color="%23b266ff"/></linearGradient><filter id="g" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(%23g)"><path d="M0 0 L0 56 L12.8 45.9 L20.3 62.1 L30.9 56 L23.5 39.7 L41.6 39.7 Z" fill="url(%23gRainbow)" stroke="%23ffffff" stroke-width="2"/></g></svg>') 0 0, auto;
}

/* ============================================================
   ===== RESTYLE V2: grafica potenziata (sfondo + UI cards) =====
   ============================================================ */

@keyframes restyle-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes restyle-drift1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(8px,-12px); } }
@keyframes restyle-drift2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-10px,10px); } }
@keyframes restyle-float67 { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes restyle-pulse-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(34,211,238,0.35), 0 4px 0 #0a4a55, inset 0 2px 0 rgba(34,211,238,0.15); }
  50% { box-shadow: 0 0 26px rgba(34,211,238,0.6), 0 4px 0 #0a4a55, inset 0 2px 0 rgba(34,211,238,0.25); }
}

/* Sfondo globale: griglia prospettica + bagliori radiali + 67 fluttuanti
   + particelle, tutto in layer fissi dietro al contenuto (z-index negativo,
   pointer-events:none), così non interferisce mai con i click reali. */
body {
  background-color: #05050c;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,101,101,0.16), transparent 55%),
    radial-gradient(ellipse at 15% 100%, rgba(34,211,238,0.09), transparent 50%),
    radial-gradient(ellipse at 88% 92%, rgba(236,201,75,0.07), transparent 45%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
}
.restyle-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.restyle-bg-grid {
  position: absolute;
  bottom: -40%;
  left: -50%;
  width: 200%;
  height: 70%;
  background-image:
    linear-gradient(rgba(245,101,101,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,101,101,0.14) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(300px) rotateX(72deg);
  opacity: 0.5;
}
.restyle-bg-67 {
  position: absolute;
  font-family: 'Orbitron', sans-serif;
  animation: restyle-float67 8s ease-in-out infinite;
}
.restyle-bg-particle {
  position: absolute;
  border-radius: 50%;
  animation: restyle-drift1 5s ease-in-out infinite, restyle-twinkle 2.4s ease-in-out infinite;
}

/* ===== Box profilo, stat box, gemme ===== */
.profile-box {
  background: linear-gradient(135deg, #13132a, #0a0a16);
  background-image: radial-gradient(rgba(245,101,101,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
  border: none !important;
  box-shadow: 0 6px 0 var(--panel-border), 0 0 24px rgba(245,101,101,0.28);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  position: relative;
}
.avatar-frame {
  background: radial-gradient(circle at 30% 25%, #ffb3b3, var(--red) 50%, #9e1f1f 90%) !important;
  box-shadow: 0 0 0 3px var(--panel-border), 0 0 0 5px var(--red), 0 4px 0 var(--red-shadow), 0 0 18px rgba(245,101,101,0.5) !important;
}
.profile-box-name {
  text-shadow: 2px 2px 0 var(--red-shadow), 0 0 10px rgba(245,101,101,0.45);
}

.stat-box {
  background: linear-gradient(180deg, #181830, #0a0a14) !important;
  border: none !important;
  box-shadow: 0 4px 0 var(--panel-border), inset 0 2px 0 rgba(255,255,255,0.04);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  position: relative;
}
.stat-value { text-shadow: 1px 1px 0 #000; }
.stat-box:has(.text-red), .stat-box-rate {
  background: linear-gradient(180deg, #2a1414, #160a0a) !important;
  box-shadow: 0 0 14px rgba(245,101,101,0.28), 0 4px 0 var(--red-shadow), inset 0 2px 0 rgba(255,255,255,0.04);
}
.stat-box:has(.text-red) .stat-value, .stat-box-rate .stat-value { text-shadow: 0 0 10px rgba(245,101,101,0.75); }

.stat-box-gems {
  background: linear-gradient(180deg, #0a2a30, #081218) !important;
  animation: restyle-pulse-glow 2.4s ease-in-out infinite;
}
.stat-box-gems .text-cyan { text-shadow: 0 0 12px rgba(103,232,249,0.85); }

/* ===== Generatori e upgrade (negozio) ===== */
.shop-item, .gen-item {
  background: linear-gradient(135deg, #1c1c38, #0c0c1a) !important;
  border: none !important;
  box-shadow: 0 4px 0 var(--panel-border), inset 0 1px 0 rgba(255,255,255,0.06);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  position: relative;
}
.item-icon-box {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5), transparent 60%);
  box-shadow: 0 0 0 2px var(--panel-border), 0 0 10px rgba(245,101,101,0.4);
}

/* ===== Bottoni di navigazione e azione ===== */
.btn-nav, .btn-icon, .btn-save, .btn-mute, .btn-resume {
  background: linear-gradient(180deg, #ff9d9d, var(--red) 55%, #d94545) !important;
  border: 3px solid var(--cream) !important;
  box-shadow: 0 0 0 2px var(--panel-border), 0 5px 0 var(--red-shadow), 0 5px 0 5px var(--panel-border) !important;
}
.btn-nav:hover, .btn-icon:hover, .btn-save:hover, .btn-mute:hover, .btn-resume:hover {
  box-shadow: 0 0 0 2px var(--panel-border), 0 3px 0 var(--red-shadow), 0 3px 0 5px var(--panel-border) !important;
}
.btn-prestige {
  background: linear-gradient(180deg, #fff0a8, var(--gold) 55%, #b7791f) !important;
  border: 3px solid var(--cream) !important;
  box-shadow: 0 0 0 2px var(--panel-border), 0 5px 0 var(--gold-shadow), 0 5px 0 5px var(--panel-border) !important;
}

.buy-mode-btn.active {
  background: linear-gradient(180deg, #ff9d9d, var(--red) 55%, #d94545);
  box-shadow: 0 0 8px rgba(245,101,101,0.5);
}

/* ===== Classifica: restyle visivo (overflow/contenimento già corretti) ===== */
.leaderboard-table {
  background: linear-gradient(135deg, #13132a, #0a0a16) !important;
  border: 3px solid #3a3a5e !important;
  box-shadow: 0 4px 0 var(--panel-border), inset 0 1px 0 rgba(255,255,255,0.04);
}
.leaderboard-table th {
  background: linear-gradient(180deg, #1c1c38, #0c0c1a) !important;
  text-shadow: 0 0 8px rgba(245,101,101,0.4);
}
.leaderboard-table tr:hover {
  background: rgba(245, 101, 101, 0.08) !important;
}

/* ===== Contorno SVG sincronizzato con il taglio diagonale =====
   Disegnato dinamicamente via JS (vedi cutBorders.js in game.js), un
   poligono SVG sovrapposto che segue esattamente lo stesso profilo del
   clip-path applicato all'elemento, incluso il segmento diagonale del
   taglio — un border CSS normale resterebbe sempre rettangolare anche
   quando il contenuto è tagliato. */
.cut-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* ===== Titolo principale "67 CLICKER" con il nuovo font ===== */
.game-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
}

/* ===== Overlay blocco amministrativo (ban temporaneo) ===== */
.admin-ban-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 12, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.admin-ban-overlay.hidden {
  display: none;
}
.admin-ban-box {
  text-align: center;
  padding: 40px 50px;
  background: linear-gradient(135deg, #1a1530, #0a0a16 60%, #1f1018);
  border: 4px solid var(--red);
  box-shadow: 0 0 40px rgba(245, 101, 101, 0.5);
}
.admin-ban-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--red);
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(245, 101, 101, 0.7);
  margin-bottom: 20px;
}
.admin-ban-timer {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  color: #fff5f5;
  font-size: 2.4rem;
  text-shadow: 0 0 16px rgba(245, 101, 101, 0.8);
}