/* Character + visible pool */
.swimmer-character { display: inline-block; line-height: 0; }
.swimmer-char-svg { width: 100%; height: 100%; display: block; }
.swimmer-lg .swimmer-char-svg { width: 160px; height: 120px; }
.swimmer-team .swimmer-stand-svg { width: 56px; height: auto; }
.swimmer-sm .swimmer-char-svg { width: 64px; height: 48px; }

.swimmer-anim .sw-char-arm-l { animation: charArmL 0.4s ease-in-out infinite; transform-origin: 58px 44px; }
.swimmer-anim .sw-char-arm-r { animation: charArmR 0.4s ease-in-out infinite; transform-origin: 56px 48px; }
.swimmer-anim .sw-char-legs { animation: charLegs 0.4s ease-in-out infinite; transform-origin: 35px 58px; }
.swimmer-anim .sw-char-body { animation: charBob 0.8s ease-in-out infinite; }
.swimmer-anim .sw-char-bubble { animation: charBubble 1.2s ease-out infinite; }
.swimmer-anim .sw-char-bubble.b2 { animation-delay: 0.4s; }

@keyframes charArmL { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-30deg)} }
@keyframes charArmR { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(25deg)} }
@keyframes charLegs { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(8deg)} }
@keyframes charBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes charBubble { 0%{opacity:0.6;transform:translate(0,0)} 100%{opacity:0;transform:translate(-12px,-10px)} }

.character-showcase {
  text-align: center; padding: 20px;
  background: linear-gradient(180deg, rgba(14,165,233,0.12), rgba(6,182,212,0.05));
  border-radius: 20px; border: 1px solid var(--card-border); margin-bottom: 16px;
}
.character-showcase-info { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.level-pill, .token-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.level-pill { background: rgba(251,191,36,0.2); color: var(--gold); }
.token-pill { background: rgba(34,197,94,0.15); color: var(--green); }
.coin-svg, .token-svg { width: 18px; height: 18px; vertical-align: middle; }

/* Pool v2 — swimmer always visible */
.game-pool-v2 {
  position: relative; height: 200px; border-radius: 20px; overflow: hidden;
  cursor: pointer; border: 2px solid rgba(14,165,233,0.5);
  background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 40%, #0284c7 100%);
  margin-bottom: 12px; touch-action: manipulation;
}
.pool-water-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.pool-lanes-h {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.1) 39px, rgba(255,255,255,0.1) 40px);
}
.pool-end-wall {
  position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
  background: repeating-linear-gradient(0deg, #fff 0 8px, #ef4444 8px 16px);
  box-shadow: -4px 0 12px rgba(0,0,0,0.3);
}
.swimmer-lane {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 130px; height: 100px; z-index: 10;
  transition: left 0.15s ease-out; pointer-events: none;
}
.passive-card {
  background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(14,165,233,0.1));
  border: 1px solid rgba(251,191,36,0.35); border-radius: 16px;
  padding: 14px; margin-bottom: 12px; text-align: center;
}
.passive-card .passive-val { font-family: var(--font-display); font-size: 24px; color: var(--gold); }
.passive-card .passive-rate { font-size: 11px; color: var(--muted); margin-top: 4px; }

.gear-art-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; background: rgba(0,0,0,0.2); border-radius: 12px; margin-bottom: 8px;
}
.gear-tier-stars { font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.gear-icon.tier-3, .gear-icon.tier-4, .gear-icon.tier-5 { filter: drop-shadow(0 0 4px currentColor); }

.cosmetic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cosmetic-opt {
  padding: 10px 6px; border-radius: 12px; text-align: center; font-size: 10px;
  border: 2px solid transparent; cursor: pointer; background: rgba(0,0,0,0.2);
}
.cosmetic-opt.selected { border-color: var(--accent); background: rgba(14,165,233,0.2); }
.cosmetic-opt.locked { opacity: 0.45; }

.game-level-bar { margin-bottom: 10px; }
.game-level-label { font-size: 11px; display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 4px; }

.incentive-banner {
  background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(14,165,233,0.1));
  border: 1px solid rgba(34,197,94,0.35); border-radius: 12px;
  padding: 12px; font-size: 12px; margin-bottom: 12px; line-height: 1.5;
}
.incentive-banner strong { color: var(--green); }