/* Skeuomorphic overrides for ball profile pages, layered on top of shared.css.
   Only linked from ball pages so it never touches bet/roulette/auth/ballmaker/bracket/faq. */

.fighter-header {
  position: relative;
  overflow: hidden;
  border: 3px outset #ffff00;
  background: linear-gradient(#000044, #000022);
  box-shadow: 0 4px 0 #665500, 0 6px 10px rgba(0,0,0,.5);
}
.fighter-header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events: none;
}
.fighter-portrait-block {
  background: linear-gradient(#000022, #000011);
  box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
.fighter-portrait-block .portrait-frame {
  border: 2px inset #888888;
  background-color: #001133;
  box-shadow: inset 0 0 8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}

.content-section {
  position: relative;
  overflow: hidden;
  border: 2px ridge #888888;
  background: linear-gradient(#001a33, #000022);
  box-shadow: inset 0 0 12px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4);
}

.lore-image-float {
  border: 2px outset #888888;
  background: linear-gradient(#001a33, #000022);
  box-shadow: 0 3px 0 #000015, 0 4px 6px rgba(0,0,0,.4);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border: 2px outset #888888;
  background: linear-gradient(#001a33, #000022);
  box-shadow: 0 3px 0 #000015, 0 4px 6px rgba(0,0,0,.4);
  transition: transform .05s ease, box-shadow .05s ease;
}
.gallery-item:hover { transform: translateY(-2px); }
.gallery-item:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }

.stats-table { border: 1px solid #444488; }
.stats-table th {
  background: linear-gradient(#000088, #000044);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.ability-entry {
  border: 1px solid #333366;
  background: linear-gradient(#00001a, #000011);
  box-shadow: 0 2px 0 #000000, inset 0 1px 0 rgba(255,255,255,.05);
}

.record-table th {
  background: linear-gradient(#000088, #000044);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.quick-stats-table .stat-value { text-shadow: 1px 1px 0 rgba(0,0,0,.6); }

/* Jukebox, matched to index.html's rounded skeuomorphic version */
.music-player {
  background: linear-gradient(#000044, #000022);
  border: 2px solid #ffff00;
  border-top-color: #fffb99;
  border-left-color: #fffb99;
  border-bottom-color: #998f00;
  border-right-color: #998f00;
  border-radius: 14px;
  box-shadow: 0 5px 0 #665500, 0 8px 14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.4);
  overflow: hidden;
}
.music-player-titlebar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #440000, #000066);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.music-player-titlebar:hover { background: linear-gradient(to right, #660000, #000088); }
.music-player-display {
  border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8);
}
.music-player-track { text-shadow: 0 0 6px rgba(0,255,136,.5); }
.music-player-progress-bg {
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
}
.music-player-progress-fill {
  background: linear-gradient(#66ffbb, #00ff88);
  box-shadow: 0 0 6px rgba(0,255,136,.6);
}
.mp-btn {
  background: linear-gradient(#001a55, #000022);
  border: 1px outset #444488;
  border-radius: 6px;
  box-shadow: 0 2px 0 #000015, 0 3px 4px rgba(0,0,0,.4);
}
.mp-btn:hover { background: linear-gradient(#002299, #000044); color: #ffff00; border-color: #ffff00; }
.mp-btn:active { border-style: inset; transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.mp-btn.active { background: linear-gradient(#003300, #001100); color: #00ff88; border-color: #00ff88; }
.music-player-playlist {
  scrollbar-width: thin;
  scrollbar-color: #ffff00 #000022;
}
.music-player-playlist::-webkit-scrollbar { width: 10px; }
.music-player-playlist::-webkit-scrollbar-track {
  background: #000011;
  border-left: 1px solid #333366;
  box-shadow: inset 0 0 4px rgba(0,0,0,.8);
}
.music-player-playlist::-webkit-scrollbar-thumb {
  background: linear-gradient(#ffff88, #998f00);
  border: 1px outset #ffff99;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(255,255,0,.5);
}
.music-player-playlist::-webkit-scrollbar-thumb:hover { background: linear-gradient(#ffffaa, #bba800); }
.music-player-playlist::-webkit-scrollbar-thumb:active { background: linear-gradient(#998f00, #665500); }