body { font-family: sans-serif;  }
nav a { margin-right: 1em; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 6px; }

h1 { width: 100% }
/* public/css/style.css */

h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }

.wide-container {
  width: 100%; /* or whatever you prefer */
  max-width:2000px;
}


/* Global background and text */
body {
  background-color: #f7f7f7;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

/* Navbar tweaks */
.navbar {
  margin-bottom: 1.5rem;
  border-bottom: 10px solid #ff2f73;
}

a, .nav-link {
color: #ff2f73;
}

.btn-primary, .nav-link.active {
	background-color: #ff2f73 !important;
	border: 1px solid #ff2f73 !important;
}


#mainNav .nav-link { 
	color:#fff;
}



.navbar-brand {
  font-weight: bold;
  letter-spacing: 1px;
}

/* Tables */
table th, table td {
  vertical-align: middle;
}

/* Forms */
form label {
  font-weight: 500;
}

/* Custom footer */
footer {
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
  font-size: 0.9em;
  color: #666;
}


/* Minimal Lightbox */
.lb-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center;
  z-index: 1050; /* above navbar */
}
.lb-backdrop.show { display: flex; }
.lb-frame { position: relative; max-width: 92vw; max-height: 92vh; }
.lb-frame img { max-width: 85%; max-height: 85%; border-radius: 6px; display: block; }
.lb-caption {
  position: absolute; left:0; right:0; bottom:-2.4rem; text-align:center; 
  color:#ddd; font-size:.95rem;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:.4rem .6rem; border-radius:6px; color:#eee; cursor:pointer; user-select:none;
}
.lb-close { top: .75rem; right: .75rem; transform:none; }
.lb-prev { left: -3rem; }
.lb-next { right: -3rem; }
@media (max-width: 768px){
  .lb-prev { left: .5rem; } .lb-next { right: .5rem; }
  .lb-caption { position: static; margin-top:.5rem; }
}


        .navbar-nav .games-menu {
            width: 100vw;
            left: 50%;
            transform: translate(-50%, -1px);
        }


/* Generations */

.generationbk { 
	background: url('/img/platform/platform-default.jpg');
	color:#fff;
}
.generationbk .text-body, .generationbk  .text-muted {
	color: #fff !important;
}


/* Platform */

.platformbk { 
	background: url('/img/platform/platform-default.jpg');
	color:#fff;
}


.platformfullwith a, .platformfullwith { color: #fff !important; }

.platformlogo { 
	color: #444;
	background-size: contain;
	background-repeat: no-repeat;
}
.platformlogotxt { 
	display:none;
	background: #0000008c; 
	border-radius: 30px;
	padding: 5px;
	margin: 4px;
} 
.col-lg-1-10  .platformlogo {
  width: 70px;
}


/* Games */
.barcode39 {
	font-family: 'Libre Barcode 39', monospace;
	font-size: 48px;      /* tweak size as you like */
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.gameimg {
	//max-height: 630px;
	min-width: 500px;
	filter: drop-shadow(5px 5px 10px #000000);	
}



.gamesbk { 
  background-image: url('/img/platform/platform-default.jpg');
  color:#fff;
  xbackground-position: center center; /* center horizontally + vertically */
  background-position: 0px 44px;
  background-repeat: no-repeat;      /* prevent tiling */
  background-size: cover;            /* scale to cover entire element */
  height: 375px;  
  xbackground-size: contain;
  xheight: 380px;
}

.gamesbk .text-body, .gamesbk  .text-muted {
	color: #fff !important;
}


/* PS1 */
.col-lg-1-10 .gamesbk.plat-sony-playstation {
  height: 193px
}
.col-lg-1-10 .plat-sony-playstation .gamesplatform {
  bottom: -24px;
}

.col-lg-2 .gamesbk.plat-sony-playstation {
  height: 315px;
}
.col-lg-2 .plat-sony-playstation .gamesplatform {
  bottom: -20px;
}

.col-md-4 .gamesbk.plat-sony-playstation {
  height: 485px;
}
.col-md-4 .plat-sony-playstation .gamesplatform {
  bottom: -15px;
}



/* PS2 */
.col-lg-1-10 .gamesbk.plat-sony-playstation-2 {
  height: 270px;
}
.col-lg-1-10 .plat-sony-playstation-2 .gamesplatform {
  bottom: -100px;
}

.col-lg-2 .gamesbk.plat-sony-playstation-2 {
  height: 450px;
}
.col-lg-2 .plat-sony-playstation-2 .gamesplatform {
  bottom: -155px;
}

.col-md-4 .gamesbk.plat-sony-playstation-2 {
  height: 680px;
}
.col-md-4 .plat-sony-playstation-2 .gamesplatform {
  bottom: -210px;
}



/* NES */
.col-lg-1-10 .gamesbk.plat-nes-famicom {
  height: 260px;
}
.col-lg-1-10 .plat-nes-famicom .gamesplatform {
  bottom: -90px;
  height: 21px;
  overflow: hidden;
}

.col-lg-2 .gamesbk.plat-nes-famicom {
  height: 450px;
}
.col-lg-2 .plat-nes-famicom .gamesplatform {
  bottom: -155px;
  height: 21px;
  overflow: hidden;
}





/* N64 */
.col-lg-1-10 .gamesbk.plat-nintendo-64 {
  height: 130px;
}
.col-lg-1-10 .plat-nintendo-64 .gamesplatform {
  bottom: 38px;
}


.col-lg-2 .gamesbk.plat-nintendo-64 {
  height: 215px;
}
.col-lg-2 .plat-nintendo-64 .gamesplatform {
  bottom: 75px;
}




.col-lg-2 .gamesbk {
  background-repeat: no-repeat;
  background-size: cover;
  height: 220px;
  height: 340px;
  height: 355px;
  xbackground-position: 0px 50px !important;
  margin-top: 0px;
}
.col-md-4 .gamesbk {
  height: 545px;
}


.col-lg-1-10 .gamesbk {
  background-image: url('/img/platform/platform-default.jpg');
  color: #fff;
  background-position: 0px 44px;
  background-repeat: no-repeat;
  background-size: cover;
  height: 215px;
}

/*
.gamesname {
  position: absolute;
  top: 0px;
  padding: 10px;
  background-color: #000000cf;
  background: #dbdbdb;
  width: 100%;
  font-size: 1rem !important;
  backdrop-filter: blur(3px);
}
*/

.gamesname {
  xposition: absolute;
  top: 0px;
  padding: 10px;
  xbackground-color: #000000cf;
  background: #dbdbdb;
  width: 100%;
  font-size: 0.7em !important;
  xbackdrop-filter: blur(3px);
border-top: 5px solid #ff2f73;
}

.gamesname a { text-decoration:none; color:#333; }

.col-lg-2 .gamesname {
  font-size: 11px !important;
  height: 50px;
}
.col-lg-1-10 .gamesname {
  font-size: 10px !important;
  height: 50px;
}
.col-lg-1-10 .py-1 {
  padding-top: 1.25rem !important;
  padding-bottom: .25rem !important;
}


.col-lg-2 .platformlogo {
   width: 84px;
}
.col-lg-2 .gamesplatform  {
   bottom: -62px;
}


.col-lg-2 .py-1 {
  padding-top: 1.25rem !important;
  padding-bottom: .25rem !important;
}

.gamesplatform {
  text-align: left;
  position: absolute;
  bottom: -80px;
  padding: 2px 10px;
  background-color: #000000cf;
  width: 100%;
  font-size: 11px;
  backdrop-filter: blur(3px);
}
.col-12 .gamesname { text-align: left; }


.col-lg-1-10 .gamesplatform {
   bottom: -45px;
}

.games-list .col-12 {

}
.games-list .col-12 .gamename {
	padding: 0px 0px;
}


.games-list .card {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.games-list .gamesbk {
  width: 50%;
  height: 40px;
  flex-shrink: 0;
  background-size: cover;
  text-align:left;
  background-position: center;
}

.games-list  .col-12 .gamesbk { background-image: none !important; display:none !important; }
.games-list  .col-12 .gamesname { width: 100%; }
.games-list .col-12 {  padding: 0px;  margin: 3px;  height: 20px; border-bottom:1px solid #ccc; }


.games-list .card-body {
  flex: 1;
}

  @media (min-width: 992px) {
    .col-lg-1-10 {
      flex: 0 0 auto;
      width: 10%;
      max-width: 10%;
    }
  }
  .row.g-3 .col-lg-1-10 {
      padding-left: .25rem;
      padding-right: .25rem;
  }
.col-lg-1-10 { flex: 0 0 auto; width: 10%; }


/* STORES */

    .store-card-img {
      width: 100%;
      height: 225px;
      object-fit: cover; /* crop nicely */
      background: #f6f6f6;
    }
    .store-card-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .store-card-desc {
      max-height: 3.2em; /* roughly 2 lines */
      overflow: hidden;
    }


  .store-pin {
      width: 34px; height: 34px; border-radius: 50%;
      background: #eee center/cover no-repeat;
      border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
    }
    .leaflet-popup-content { margin: 8px 12px; }
    .popup-img { width: 48px; height: 48px; object-fit: cover; border-radius: .25rem; background:#f6f6f6; }

.leaflet-container a, #map a {
	color:#fff !important;
}