/* =====================================================
   HBB WIKI  —  shared.css
   Loaded by every page. Page-specific colours in <style>.
   ===================================================== */

/* Base */
body { margin:0; padding:0; color:#ffffff; font-family:"Times New Roman",Times,serif;
  cursor:url("img/Cursor.png") 0 0,auto; }
body::after { content:""; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.45); z-index:0; pointer-events:none; }

/* z-index stacking */
.main-container,.sidebar-archive,.sidebar-leaderboard,.top-marquee-bar { position:relative; z-index:1; }

/* Marquee bar */
.top-marquee-bar { background-color:#000000; font-family:"Courier New",Courier,monospace;
  font-size:13px; font-weight:bold; padding:3px 0; overflow:hidden; white-space:nowrap; }
.top-marquee-bar marquee { display:block; }

/* Main container — responsive width */
.main-container { max-width:780px; width:100%; margin:0 auto; padding:10px; box-sizing:border-box; }

/* Nav */
.site-nav { background-color:#000040; border:2px solid #ffff00; padding:6px 12px;
  margin:10px 0 8px 0; font-family:"Courier New",Courier,monospace; font-size:13px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.site-nav a { color:#aaaaff; text-decoration:none; padding:2px 6px; border:1px solid #444488;
  cursor:url("img/Cursor Select.png") 0 0,pointer !important; }
.site-nav a:hover { background-color:#000088; color:#ffff00; border-color:#ffff00; }
.site-nav .nav-sep { color:#444488; }
.site-nav .nav-current { color:#ffff00; font-weight:bold; }

/* Fighter header */
.fighter-header { border:4px solid #ffff00; background-color:#000033; padding:0;
  margin:10px 0; display:flex; align-items:stretch; overflow:hidden; }
.fighter-portrait-block { background-color:#000022; border-right:3px solid #ffff00;
  padding:12px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-width:180px; max-width:180px; }
.fighter-portrait-block .portrait-frame { width:150px; height:150px; border:2px inset #888888;
  background-color:#001133; display:flex; align-items:center; justify-content:center;
  font-size:64px; overflow:hidden; }
.fighter-portrait-block .portrait-frame img { width:130%; height:130%; object-fit:cover; margin:-15%; }
.fighter-portrait-block .portrait-label { font-family:"Courier New",Courier,monospace;
  font-size:10px; color:#888888; margin-top:6px; text-align:center; }
.fighter-title-block { padding:14px 18px; flex:1; min-width:0; }
.fighter-title-block .fighter-name { font-family:"Impact","Arial Black",sans-serif;
  font-size:42px; color:#ffff00; text-shadow:3px 3px 0px #000000;
  margin:0 0 4px 0; letter-spacing:2px; line-height:1; }
.fighter-title-block .fighter-epithet { font-family:"Times New Roman",Times,serif;
  font-style:italic; font-size:15px; color:#00ffff; margin:0 0 10px 0; }
.quick-stats-table { border-collapse:collapse; font-family:"Courier New",Courier,monospace;
  font-size:12px; width:100%; }
.quick-stats-table td { padding:2px 8px 2px 0; vertical-align:top; }
.quick-stats-table .stat-label { color:#888888; text-transform:uppercase; width:110px; white-space:nowrap; }
.quick-stats-table .stat-value { color:#ffffff; font-weight:bold; }
.quick-stats-table .stat-value.highlight { color:#00ffff; }
.quick-stats-table .stat-value.danger { color:#ff6666; }
.quick-stats-table .stat-value.warning { color:#ffaa00; }

/* Content sections */
.content-section { border:2px ridge #888888; background-color:#000033; margin:10px 0; overflow:hidden; }
.section-body { padding:12px 14px; }

/* Text / lore */
.lore-text { font-size:14px; line-height:1.7; color:#ccccff; }
.lore-text p { margin:0 0 10px 0; }
.lore-text p:last-child { margin-bottom:0; }
.lore-image-float { float:right; margin:0 0 10px 14px; border:2px outset #888888;
  background-color:#000022; padding:4px; text-align:center; }
.lore-image-float img { display:block; max-width:200px; }
.lore-image-float .img-caption { font-family:"Courier New",Courier,monospace;
  font-size:10px; color:#888888; margin-top:4px; }
.clearfix::after { content:""; display:table; clear:both; }

/* Stats table */
.stats-table { border-collapse:collapse; width:100%; font-family:"Courier New",Courier,monospace; font-size:13px; }
.stats-table th { background-color:#000066; color:#ffff00; border:1px solid #444488;
  padding:5px 10px; text-align:left; text-transform:uppercase; letter-spacing:1px; font-size:11px; }
.stats-table td { border:1px solid #333366; padding:5px 10px; color:#ccccff; }
.stats-table tr:nth-child(even) td { background-color:#00001a; }
.stats-table tr:hover td { background-color:#000044; color:#ffffff; }
.stats-table .stat-name { color:#aaaaff; font-weight:bold; }
.stats-table .stat-num { color:#00ffff; font-weight:bold; text-align:center; width:80px; }
.stat-bar-wrap { background-color:#000011; border:1px solid #333355; height:10px; width:100%;
  position:relative; display:inline-block; vertical-align:middle; min-width:100px; }
.stat-bar-fill { background-color:#00aaff; height:100%; display:block; }
.stat-bar-fill.high   { background-color:#00ff88; }
.stat-bar-fill.medium { background-color:#ffaa00; }
.stat-bar-fill.low    { background-color:#ff4444; }

/* Abilities */
.ability-entry { border:1px solid #333366; background-color:#00001a;
  padding:10px 12px; margin-bottom:8px; }
.ability-entry:last-child { margin-bottom:0; }
.ability-name { font-family:"Arial Black","Impact",sans-serif; font-size:14px;
  color:#ffff00; margin:0 0 2px 0; }
.ability-type-tag { display:inline-block; background-color:#220044; border:1px solid #8800ff;
  color:#cc88ff; font-family:"Courier New",Courier,monospace; font-size:10px;
  padding:1px 5px; margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; }
.ability-type-tag.passive  { background-color:#002200; border-color:#00aa00; color:#88ff88; }
.ability-type-tag.active   { background-color:#220000; border-color:#aa0000; color:#ff8888; }
.ability-type-tag.weapon   { background-color:#221100; border-color:#aa6600; color:#ffcc88; }
.ability-type-tag.movement { background-color:#001122; border-color:#0066aa; color:#88ccff; }
.ability-desc { font-size:13px; color:#ccccff; line-height:1.6; margin:0; }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gallery-item { border:2px outset #888888; background-color:#000022; padding:4px; text-align:center; }
.gallery-item img { width:100%; display:block; border:1px solid #333355; }
.gallery-item .gallery-caption { font-family:"Courier New",Courier,monospace;
  font-size:10px; color:#888888; margin-top:4px; }

/* Match record */
.record-table { border-collapse:collapse; width:100%; font-family:"Courier New",Courier,monospace; font-size:12px; }
.record-table th { background-color:#000066; color:#ffff00; border:1px solid #444488;
  padding:4px 8px; text-align:left; font-size:11px; text-transform:uppercase; }
.record-table td { border:1px solid #333366; padding:4px 8px; color:#aaaacc; }
.record-table .win  { color:#00ff88; font-weight:bold; }
.record-table .loss { color:#ff4444; font-weight:bold; }
.record-table .draw { color:#ffaa00; font-weight:bold; }
.record-table-wrap { overflow-x:auto; }

/* Footer */
.site-footer { border-top:3px double #ffff00; margin-top:14px; padding-top:8px;
  text-align:center; font-family:"Courier New",Courier,monospace; font-size:11px; color:#888888; }
.site-footer .footer-links a { color:#aaaaff; margin:0 8px; font-size:12px; }
.site-footer .footer-links a:hover { color:#ffff00; }
.site-footer .copyright { margin-top:6px; color:#666666; }
.best-viewed { font-size:10px; color:#666666; margin-top:4px; }

/* Social icons */
.hbb-social { position:fixed; bottom:15px; left:15px; display:flex; gap:10px; z-index:999; }
.hbb-social a img { width:45px; height:45px; display:block; transition:transform 0.15s ease; }
.hbb-social a img:hover { transform:translateY(-6px); }

/* Music player */
.music-player { position:fixed; bottom:15px; right:180px; width:340px;
  background-color:#000033; border:2px solid #ffff00;
  font-family:"Courier New",Courier,monospace; z-index:1000; }
.music-player-titlebar { background:linear-gradient(to right,#440000,#000066);
  border-bottom:1px solid #ffff00; padding:4px 8px;
  font-family:"Arial Black","Impact",sans-serif; font-size:11px; color:#ffff00;
  letter-spacing:2px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; user-select:none; }
.music-player-titlebar:hover { background:linear-gradient(to right,#660000,#000088); }
.music-player-body { display:none; padding:8px; }
.music-player-body.open { display:block; }
.music-player-display { background-color:#000000; border:1px inset #333366;
  padding:5px 8px; margin-bottom:6px; font-size:11px; }
.music-player-track { color:#00ff88; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-bottom:2px; }
.music-player-time { color:#888888; font-size:10px; }
.music-player-progress-bg { background-color:#111133; border:1px solid #333366;
  height:6px; margin:4px 0 6px 0; cursor:pointer; position:relative; }
.music-player-progress-fill { background-color:#00ff88; height:100%; width:0%;
  transition:width 0.5s linear; pointer-events:none; }
.music-player-controls { display:flex; justify-content:center; gap:6px; margin-bottom:8px; }
.mp-btn { background-color:#000044; border:1px solid #444488; color:#aaaaff;
  font-family:"Courier New",Courier,monospace; font-size:13px;
  padding:3px 10px; cursor:pointer; user-select:none; }
.mp-btn:hover { background-color:#000088; color:#ffff00; border-color:#ffff00; }
.mp-btn.active { background-color:#002200; color:#00ff88; border-color:#00ff88; }
.music-player-volume { display:flex; align-items:center; gap:6px; margin-bottom:8px;
  font-size:10px; color:#888888; }
.music-player-volume input[type=range] { flex:1; accent-color:#ffff00; height:4px; }
.music-player-playlist { border-top:1px solid #333366; padding-top:6px; }
.mp-playlist-item { padding:3px 6px; font-size:11px; color:#aaaacc; cursor:pointer;
  border-bottom:1px solid #111133; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-playlist-item:hover { background-color:#000044; color:#ffffff; }
.mp-playlist-item.playing { color:#00ff88; background-color:#001100; }

/* Lightbox */
#lightbox { display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.85); z-index:9999; align-items:center;
  justify-content:center; cursor:pointer; }
#lightbox-img { max-width:90%; max-height:90vh; border:3px solid #ffff00;
  box-shadow:0 0 30px #000000; }

/* Misc */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.blink { animation:blink 1s step-end infinite; }

/* Index-only sidebar styles */
.sidebar-archive { position:fixed; top:40px; right:10px; width:390px; max-height:75vh;
  overflow-y:auto; background-color:#000033; border:2px solid #ffff00;
  font-family:"Courier New",Courier,monospace; font-size:13px; z-index:1000; }
.sidebar-archive::-webkit-scrollbar { width:6px; }
.sidebar-archive::-webkit-scrollbar-track { background:#000022; }
.sidebar-archive::-webkit-scrollbar-thumb { background:#444488; }
.sidebar-archive-header { background:linear-gradient(to right,#440000,#000066);
  border-bottom:2px solid #ffff00; padding:5px 8px;
  font-family:"Arial Black","Impact",sans-serif; font-size:12px; color:#ffff00;
  letter-spacing:2px; cursor:pointer; user-select:none; text-align:center; }
.sidebar-archive-header:hover { background:linear-gradient(to right,#660000,#000088); }
.sidebar-archive-body { display:none; }
.sidebar-archive-body.open { display:block; }
.sidebar-season-label { background-color:#000044; border-left:3px solid #ffff00;
  border-bottom:1px solid #333366; padding:4px 8px; color:#ffff00; font-size:14px;
  letter-spacing:1px; cursor:pointer; user-select:none; }
.sidebar-season-label:hover { color:#00ffff; border-left-color:#00ffff; }
.sidebar-season-matches { display:none; }
.sidebar-season-matches.open { display:block; }
.sidebar-match-row { padding:5px 8px; border-bottom:1px solid #1a1a44;
  color:#aaaacc; line-height:1.5; }
.sidebar-match-row:last-child { border-bottom:none; }
.sidebar-match-row:nth-child(even) { background-color:#00001a; }
.sidebar-match-row:hover { background-color:#000044; color:#ffffff; }
.sidebar-match-vs { display:block; color:#ccccff; margin-bottom:2px; font-size:14px; }
.sidebar-match-id { color:#aaaacc; font-size:12px; }
.sidebar-match-link { float:right; }
.sidebar-match-link a { color:#aaaaff; text-decoration:none; font-size:11px;
  border:1px solid #444488; padding:0 3px; }
.sidebar-match-link a:hover { color:#ffff00; border-color:#ffff00; }
.sidebar-leaderboard { position:fixed; top:40px; left:10px; width:390px;
  max-height:85vh; overflow-y:auto; overflow-x:hidden; background-color:#000033;
  border:2px solid #ffff00; font-family:"Courier New",Courier,monospace;
  font-size:12px; z-index:1000; }
.sidebar-leaderboard::-webkit-scrollbar { width:6px; }
.sidebar-leaderboard::-webkit-scrollbar-track { background:#000022; }
.sidebar-leaderboard::-webkit-scrollbar-thumb { background:#444488; }
.sidebar-leaderboard-header { background:linear-gradient(to right,#440000,#000066);
  border-bottom:2px solid #ffff00; padding:5px 8px;
  font-family:"Arial Black","Impact",sans-serif; font-size:12px; color:#ffff00;
  letter-spacing:2px; cursor:pointer; user-select:none; text-align:center; }
.sidebar-leaderboard-header:hover { background:linear-gradient(to right,#660000,#000088); }
.sidebar-leaderboard-body { display:none; }
.sidebar-leaderboard-body.open { display:block; }
.lb-table { width:100%; border-collapse:collapse; font-size:12px; }
.lb-table th { background-color:#000066; color:#ffff00; padding:4px 6px;
  text-align:center; border-bottom:2px solid #ffff00; font-size:11px;
  letter-spacing:1px; position:sticky; top:0; }
.lb-table th:first-child { text-align:left; }
.lb-table td { padding:4px 6px; border-bottom:1px solid #1a1a44;
  text-align:center; color:#ccccff; }
.lb-table td:nth-child(2) { text-align:left; font-weight:bold; }
.lb-table td:nth-child(3) { color:#aaaacc; text-align:left; }
.lb-table tr:nth-child(even) td { background-color:#00001a; }
.lb-table tr:hover td { background-color:#000044; color:#ffffff; }
.lb-pos { color:#888888; }
.lb-wins { color:#00ff88; font-weight:bold; }
.lb-losses { color:#ff4444; font-weight:bold; }
.lb-winrate { font-weight:bold; }
.lb-status-winner { color:#00ff88; font-size:11px; }
.lb-status-loser  { color:#ff8800; font-size:11px; }
.lb-status-elim   { color:#ff4444; font-size:11px; }

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Laptop (~900px): sidebars get narrower, player shifts */
@media (max-width:960px) {
  .sidebar-archive,.sidebar-leaderboard { width:220px; font-size:11px; }
  .music-player { right:10px; width:280px; }
  .hbb-social a img { width:36px; height:36px; }
}

/* Tablet (~820px): sidebars drop out of fixed and stack into page */
@media (max-width:820px) {
  .sidebar-archive,.sidebar-leaderboard {
    position:static; width:100%; max-height:none; margin:8px 0;
  }
  .music-player { right:10px; width:260px; }
  .fighter-title-block .fighter-name { font-size:30px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .roster-grid { grid-template-columns:repeat(3,1fr) !important; }
}

/* Mobile (~600px) */
@media (max-width:600px) {
  .main-container { padding:6px; }
  .fighter-header { flex-direction:column; }
  .fighter-portrait-block { min-width:unset; max-width:unset; width:100%;
    border-right:none; border-bottom:3px solid #ffff00; padding:10px; }
  .fighter-title-block { padding:10px 12px; }
  .fighter-title-block .fighter-name { font-size:24px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .roster-grid { grid-template-columns:repeat(2,1fr) !important; }
  .music-player { position:fixed; bottom:0; right:0; left:0; width:100%;
    border-left:none; border-right:none; border-bottom:none; }
  .hbb-social { bottom:52px; left:6px; gap:6px; }
  .hbb-social a img { width:30px; height:30px; }
  .site-nav { font-size:11px; gap:4px; }
  .record-table th,.record-table td { font-size:10px; padding:3px 4px; }
}