/* -----------------------------------------
   GLOBAL VARIABLES & THEME COLORS (ALL PAGES)
------------------------------------------ */
@charset "UTF-8";

:root {
  --primary-bg: #051a27;
  --secondary-bg: #3b5566;
  --text-light: #FFF;
  --text-muted: #A3A3A3;
  --accent-color: #52BAD5;
  --border-color: #4c6d80;
  --link-hover-color: #00ffcc;
  --link-hover-alt: #65bef2;
  --title-color: #94e3f7;
  --tick-color: #00FF2C;
  --highlight-color: #00ffcc;
  --footer-bg: #192025;
  --navbar-bg: #192025;
  --navbar-svg-hover: #00ffcc;
  --footer-text: #B3B3B3;

  --tag2-color: rgb(0, 255, 144);
  --tag3-color: rgb(244, 127, 255);

  --border-radius: 25px;
  --primary-font: 'Roboto', Arial, Helvetica, sans-serif;
  --secondary-font: 'Poppins', 'Courier';

  --transition: transform 0.3s ease-in-out;

  /* Tier Colors */
  --s-tier: rgb(255, 127, 127);
  --a-tier: rgb(255, 191, 127);
  --b-tier: rgb(255, 223, 127);
  --c-tier: #FFFF7F;
  --d-tier: rgb(191, 255, 127);
  --ea-tier: rgb(127, 255, 127);
  --f-tier: rgb(127, 255, 255);
  --dnf-tier: rgb(127, 255, 255);
  --np-tier: rgb(127, 191, 255);
  --nyo-tier: rgb(255, 127, 255);
  --rip-tier: rgb(133, 133, 133);
}


/* -----------------------------------------
   TYPOGRAPHY & BASIC ELEMENTS (ALL PAGES)
------------------------------------------ */
html {
  font-family: var(--primary-font);
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  scroll-behavior: smooth;
}

body {
  background-color: var(--primary-bg);
  color: var(--text-light);
  font-family: var(--primary-font);
  font-size: 1.1em;
  margin: 0;
  display: flex;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.accent
{
  font-weight: bold;
  font-style: italic;
}

a {
  color: var(--text-light);
  text-decoration: none;
  position: relative;
}

a:hover {
  
  color: var(--link-hover-color);
}

h1 {
  color: #000;
  text-align: center;
}

h2 {
  color: #fff;
  text-align: center;
  margin-top:0px;
}

hr {
  height: 1px;
  border-bottom: 1px dotted #61696d;
  margin: 10px 84px;
}

/* sizes "Demajen's X" logos at page top */
  .headerImage
  {
	max-width:50vw; 
	padding-top: 10%;
  }

  .centered {text-align: center;}

  .paddedborder 
  {
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--secondary-bg);
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
  }

  .faq {
    max-width: 100vw;
  }


  /* -----------------------------------------
   NAVIGATION BAR (ALL PAGES)
------------------------------------------ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--navbar-bg);
  border-bottom: 2px solid var(--link-hover-color);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.navbar svg {
  height: 50px;
  fill: white;
}

.navbar svg:hover {
  fill: var(--navbar-svg-hover);
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar a {
  position: relative;
  color: white;
  margin: 0 10px;
  transition: var(--transition);
}

.navbar a:not(.logo-link)::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(
    circle at bottom,
    rgba(0, 255, 204, 0.08) 0%,   /* centre glow — very soft */
    rgba(0, 255, 204, 0.04) 45%,  /* mid fade */
    rgba(0, 255, 204, 0.00) 80%   /* outer fade */
  );
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.navbar a:not(.logo-link):hover::before {
  opacity: 1;
  transform: scale(1);
}

.navbar a:not(.logo-link)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -29px;    /* adjust to align with your navbar border */
  width: 100%;
  height: 3px;      /* thickness of the glow-bar */
  background-color: white; /* your #00ffcc accent */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.navbar a:not(.logo-link):hover::after {
  transform: scaleX(1);
}

.navbar a:hover {
  color: var(--highlight-color);

}

#menu-toggle {
  display: none;
  font-size: 40px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* Desktop default */
#tableHeader {
  display: block;
}
#visibleHeader {
  display: none;
}

.navbar-links {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.navbar-links.right {
  margin-left: auto;
  margin-right: 25px;
}


/* -----------------------------------------
   MAIN PAGE SEARCHBOX FUNCTION & STYLING
------------------------------------------ */

/* styles search box on Main Page */
.search {
    --padding: 14px; 
    width: fit-content;
    min-width: 350px;
    display: flex;
    align-items: center;
    padding: var(--padding);
	  border-radius:var(--border-radius);
    background: var(--title-color);
    margin:auto;
    visibility:visible;
    height: auto;
    transition: background 0.25s;
}

/* changes search box colour to white when click on on Main Page */
.search:focus-within {
    background: #FFF;
}

/* styles the search input field on Main Page */
.search-input {
    font-size: 16px;
    font-family: var(--primary-font);
    color:#333;
    margin-left: var(--padding);
    outline: none;
    border: 0;
    background: transparent;
    flex:1;
}

/* styles the search input default icon on Main Page */
.search-input::placeholder,
.search-icon {
    color: rgba(0,0,0,0.5);
}

/* -----------------------------------------
   MAIN PAGE INTRO SECTION STYLING
------------------------------------------ */
.aboutbox {
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  font-size: 17px;
  margin-top: 30px;
  line-height: 22px;
  padding: 20px;
  border-radius: var(--border-radius);
  border: 3px solid var(--border-color);
  background-color: var(--secondary-bg);
  margin-left: auto;
  margin-right: auto;
}

.copyright {
	text-align: center;
	vertical-align: middle;
	padding: 0px;
	color: #FFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
}


.site-footer {
  width:100vw;
  margin-top: 3rem;
  padding: 1.5rem 0;
  border-top: 2px solid var(--link-hover-color);
  border-radius: 0;
  font-size: 0.9rem;
  color: #ccc;
  background-color: var(--footer-bg);
}

.footer-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-contact {
  padding-top: 10px;
  align-items: center;
  gap: 0.75rem;
}

.footer-contact .contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  font-size: 2.5rem;      /* icon size */
  color: #888;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.1s ease;
}

.footer-contact .contact-link:hover,
.footer-contact .contact-link:focus-visible {
  color: #fff;            /* highlight on hover */
  transform: translateY(-1px);
}

.footer-contact .contact-link:active {
  transform: translateY(0);
}

.kofi-icon {
  width: 2.5rem;
  height: auto;
  fill: currentColor; /* makes all paths adopt the text colour */
}


.sort-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1em;
  margin-top: 1em;
}

.sort-toggle button {
  flex: 1 1 0;
  max-width: 180px;
  padding: 10px 0;
  background: var(--secondary-bg);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.sort-toggle button.active {
  background: var(--accent-color);
  color: #fff;
}


#cardSort
{
  text-align: center;
  margin-top: 20px;
}

#sortSelect
{
  text-align: center;
  width: auto;
}


/* -----------------------------------------
   MAIN PAGE CONTAINER STRUCTURE & GRID
------------------------------------------ */

/* main body Container div beneath header on Main Page */
.container {
  max-width: 2220px;
  margin: auto;
  overflow: hidden;
}

/* Container div for the gallery of game "cards" on the Main Page */
.gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 2220px;
  width: 100%;
  padding: 35px 0;
  gap: 20px;
}

/* Governs style of each full game "card" on the Main Page */
.card {
  display: flex;
  flex-direction: column;
  background: var(--secondary-bg);
  max-width: 370px;
  min-width: 200px;
  height: 550px;
  text-align: center;
  padding-top: 20px;
  border: 3px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  flex: 0 1 370px;
}

.card-footer {
  display: flex;
  justify-content: space-between;  /* HQ left, store right */
  align-items: center;
  gap: 8px;
  margin-top: auto;                /* sticks footer to the bottom of the card */
  padding-top: 8px;
}

.card.retrospective
{
	height: 380px;
}

/* Governs style of thumbnail images on Main Page */
.thumbnail {
  max-width: 90%;
  max-height: 200px;
  opacity: 0.8;
  box-shadow: none;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  border: 3px solid var(--border-color);
}

/* Makes thumbnail images of Games on the Main Page grow when hovered over */
.thumbnail:hover {
  opacity: 1;
  transform: scale(1.1);
  transition: var(--transition);
  box-shadow: 0 0 20px;
}


/* Styles the Names of Games on the Main Page */
.gallery .card h1 {
	margin-top: 5px;
	margin-bottom: 10px;
	font-family: var(--primary-font);
	color: var(--title-color); /*#52BAD5;*/
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 18px;
}
/* Styles info paragraphs of Games on the Main Page */
.gallery .card p {
	margin: 0;
	color: #A3A3A3;
	font-family: var(--primary-font);
	text-align: left;
	padding-left: 20px;
}

/* -----------------------------------------
   CARD INFO BOX STYLING
------------------------------------------ */

/* Container */
.infobox {
  width: 100%;
  margin-inline: auto;
}

/* Grid layout */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "released mapped"
    "contact  contact";
  gap: 0px; /* tweak to taste */
}

/* Cards */
.info-item {
  background: var(--secondary-bg);
  border-radius: 10px;
  padding: 0px 5px;
  min-height: 40px;
}

/* Area mapping */
.info-item.released { grid-area: released; }
.info-item.mapped   { grid-area: mapped; }
.info-item.contact  { grid-area: contact; }

/* Content line */
.tag {
  display: flex;
  flex-direction: column; /* stack items vertically */
  align-items:center; /* left-align everything */
  line-height: 1.35;
  margin: 0;
  gap: 2px; /* small vertical gap between label and value */
}

.icon-inline {
  inline-size: 1.2em;
  block-size: 1.2em;
  flex: 0 0 auto;
  vertical-align: middle;
  margin-right: 4px; /* space before label text */
}

.label {
  display: flex;
  align-items: center; /* keeps icon vertically centered with label text */
  gap: 6px;
  font-weight: 400;
}

.value {
  font-weight: 500;
  }

.contact-line {
  display: flex;
  flex-direction: row !important; /* override column from .tag */
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap; /* if a note makes it long, it can wrap neatly */
  text-align: center;
}

.contact-line span.has {
  color: #ff6961; /* red tone for 'HAS' */
}

.contact-line span.no {
  color: #77dd77; /* green tone for 'NO' */
}

/* Make sure grid items can shrink properly on small screens */
.info-item { 
  min-width: 0; 
}

/* Responsive: stack on small screens */
@media (max-width: 360px) {
  .info-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "released"
      "mapped"
      "contact";
  }
}



/* -----------------------------------------
   MAIN PAGE TAG STYLING
------------------------------------------ */

.releasedatesection
{
  width:95%;
  margin: auto;
  justify-content: center;
  border: 3px solid var(--border-color);
  background-color: #476273;
  border-radius: 5px;
}


.gallery .card .tag {
	color: #FFF;
	font-size: 14px;
	padding-bottom: 4px;
	padding-top: 10px;
  line-height: 1.25rem;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
}

.gallery .card .tag1 {
	color: #FFF;
	font-size: 14px;
	padding-bottom: 4px;
	padding-top: 10px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}

.gallery .card .tag2 {
	color: #00ff90;
	padding-bottom: 4px;
	padding-top: 10px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 14px;
}

.gallery .card .tag3 {
	color: #f47fff;
	padding-bottom: 4px;
	padding-top: 10px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 14px;
}

.gallery .card .hqLink {
	padding-bottom: 4px;
	padding-top: 10px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 17px;
  border: 3px solid var(--border-color);
  border-radius: 50%;
  display: inline-flex;

	bottom: 5px;
  left: 5px;
  width: 200px;
}

.hq-badge {
  left: 10px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  text-decoration: none;
  color: #fff;
  transition: transform 120ms ease, opacity 120ms ease;
}

/* Make the trolley rotate around its own geometry */
.hq-badge .trolley {
  width: 22px;
  height: 22px;
  transform-box: fill-box;            /* key for correct pivot in SVG */
  transform-origin: 50% 100%;         /* bottom-center (wheels) */
}

/* The 'HQ' label sits above the trolley, centered */
.hq-badge .hq-label {
  position: absolute;
  left: 50%;
  top: -6px;                          /* start above the trolley */
  transform: translate(-50%, 0);
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;               /* clicks go to the link */
  opacity: 0.95;
}

/* Wiggle + drop on hover/focus */
@media (hover: hover) and (pointer: fine) {
  .hq-badge:hover .trolley,
  .hq-badge:focus-visible .trolley {
    animation: trolleyJiggle 600ms ease-in-out;
  }

  .hq-badge:hover .hq-label,
  .hq-badge:focus-visible .hq-label {
  animation: hqDrop 600ms cubic-bezier(.2,.8,.2,1) forwards;
  }
}

@media (hover: none), (pointer: coarse) {
  /* Kill animations */
  .hq-badge:hover .trolley,
  .hq-badge:active .trolley,
  .hq-badge:focus .trolley,
  .hq-badge:hover .hq-label,
  .hq-badge:active .hq-label,
  .hq-badge:focus .hq-label {
    animation: none !important;
  }

  /* Preserve baseline centering for the label */
  .hq-badge .hq-label {
    transform: translate(-50%, 0) !important;
  }


  .hq-badge, .store-badge {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  }
}


.hq-badge:hover,
.hq-badge:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

/* Remove tap highlight on iOS Safari */
.hq-badge, .store-badge {
  -webkit-tap-highlight-color: transparent;
}

/* Define the keyframes for the wiggle */
@keyframes trolleyJiggle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-10deg); }
  30%  { transform: rotate(8deg); }
  45%  { transform: rotate(-6deg); }
  60%  { transform: rotate(4deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* When you hover over the HQ badge, the icon wiggles */
.hq-badge:hover img {
  animation: trolleyJiggle 0.6s ease-in-out infinite;
    transform-box: fill-box;        /* use the actual icon geometry */
  transform-origin: center;       /* or: 50% 100% for bottom-center */
  transform-origin: 50% 50%;
}

/* Keyframes for the 'HQ' dropping into the basket */
@keyframes hqDrop {
  0%   { transform: translate(-50%, -8px) scale(1);   opacity: 0.0; }
  40%  { transform: translate(-50%, 0px)  scale(1);   opacity: 1;   } /* hits rim */
  65%  { transform: translate(-50%, -3px) scale(.95); opacity: 1;   } /* little bounce up */
  100% { transform: translate(-50%, 17px)  scale(.85); opacity: 0.5;  } /* settles "in" */
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hq-badge:hover .trolley,
  .hq-badge:focus-visible .trolley,
  .hq-badge:hover .hq-label,
  .hq-badge:focus-visible .hq-label {
    animation: none;
    transform: none;
  }
}

.icon-inline {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin-right: 5px;
  filter: brightness(0) invert(1); /* optional: makes it white if you use dark backgrounds */
}


/* -----------------------------------------
   MAIN PAGE TAG BUBBLE STYLING
------------------------------------------ */

.tag-bubble {
	display: inline-block;
	background-color: rgb(0, 255, 144, 0.9); 
	border-style: solid;
	border-width: 2px;
	border-color: var(--tag2-color);
	color: #000; /* Dark text */
	padding: 4px 10px;
	border-radius: 20px;
	margin-top: 10px;
	margin-right: 5px;
	font-size: 12px;
	text-transform: capitalize;
	box-shadow: 1px 1px 1px black;
  }

  .mapStyle-bubble {
	display: inline-block;
	background-color: rgb(244, 127, 255, 0.9); 
	border-style: solid;
	border-width: 2px;
	border-color: var(--tag3-color);
	color: #000; /* Dark text */
	padding: 4px 10px;
	border-radius: 20px;
	margin-right: 5px;
  margin-bottom: 10px;
	font-size: 12px;
	text-transform: capitalize;
	box-shadow: 1px 1px 1px black;
}

/* -----------------------------------------
   MAIN PAGE STORE LINK STYLING
------------------------------------------ */

.gallery .card .store-badge {
	position: absolute;
    color: #fff;
	text-align: right;
	padding-right: 10px;
	font-size: 12px;
	bottom: 5px;
    right: 5px;
    width: 250px;
}

/* appropriately sizes platform icon for store link on Main Page */
.platform-icon
{
    vertical-align: middle;
    transform: translateY(0.5px);
}

/* Styles the Tick icon on the Main and Restrospective Pages */
.tick { color:#00FF2C;}

/* Styles the tier circle on the Main Page */
.tier-circle {
    position: absolute;
    top: -170px;
    right: 0;
    z-index: 10;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid black;
    outline: 3px solid white;
     box-shadow: 0 0px 18px rgba(0,0,0,1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: bold;
    font-size: 15px;
  }

  .engine-circle {
    position: absolute;
    top: 57px;
    right: 14px;
    z-index: 5;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: white 2px solid;
         box-shadow: 0 0px 18px rgba(0,0,0,1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    font-weight: bold;
    font-size: 14px;
  }

  .engine-text {
  display: none;
}


/* Styles the mapping order circle on the Retrospective Page */
.mapping-order-circle {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(0, 0, 0);
	font-weight: bold;
	font-size: 16px;
	background-color: white;
}


/* -----------------------------------------
   ACCORDION PAGE LAYOUT STRUCTURE & TABLE
------------------------------------------ */
    .prefs{
      max-width: 720px;
      margin: auto;
    }

    .accordion {
      margin-top: 1rem;
      border-radius: var(--border-radius);
      border: 10px solid rgb(255, 255, 255);
      overflow: hidden;
      background: radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 55%);
      font-family: var(--primary-font);
    }

    .accordion-item + .accordion-item {
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .accordion-header {
      width: 100%;
      text-align: left;
      padding: 0.85rem 1.2rem;
      background: var(--secondary-bg);
      border: none;
      color: inherit;
      font: inherit;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }

    .accordion-title {
      font-weight: 500;
      font-size: 1.5rem;
      font-variant: small-caps;
      
    }

    .accordion-icon {
      margin-left: 1rem;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .accordion-header[aria-expanded="true"] .accordion-icon {
      transform: rotate(90deg);
    }

    .accordion-panel {
      padding: 0 1.2rem 1rem;
      background-color: #25343c;
      padding-top: 20px;
    }

    .accordion-panel[hidden] {
      display: none;
    }

    .accordion-panel p {
      margin: 0.4rem 0 1rem 0;
      font-family: var(--primary-font);
      font-weight: 400;
      letter-spacing: 0.01rem;
      max-width: 65ch;
      line-height: 1.5;
      font-size: 16px;
      color: #d8d8d8;
      justify-content: baseline;
    }

     .accordion-panel a {
      color:var(--link-hover-color);
    }



    /* -----------------------------------------
   IMG PREVIEW
------------------------------------------ */
    .img-preview-link {
  position: relative;
}

/* The popup container */
.img-preview {
  position: absolute;
  top: 1.6em;           /* below the link */
  left: 0;
  padding: 4px;
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}

.img-preview img {
  display: block;
  max-width: 240px;    /* adjust size to taste */
  height: auto;
}

/* Show on hover/focus */
.img-preview-link:hover .img-preview,
.img-preview-link:focus-within .img-preview {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------
   TIER LIST PAGE LAYOUT STRUCTURE & TABLE
------------------------------------------ */

/* Styles total width of the tierlist table on the Tierlist Page */
  .tierlisttable {width:57%;}


/* -----------------------------------------
   IMAGES & POPUPS STYLING (TIERLIST PAGE)
------------------------------------------ */

/* styles image thumbnail & popup borders with appropriate Tier placement colours on the Tierlist Pages */
.STierContainer:hover { --tier-color: var(--s-tier); }
.ATierContainer:hover { --tier-color: var(--a-tier); }
.BTierContainer:hover { --tier-color: var(--b-tier); }
.CTierContainer:hover { --tier-color: var(--c-tier); }
.DTierContainer:hover { --tier-color: var(--d-tier); }
.EATierContainer:hover { --tier-color: var(--ea-tier); }
.BLTierContainer:hover, .DNFTierContainer:hover { --tier-color: var(--f-tier); }
.NPTierContainer:hover { --tier-color: var(--np-tier); }
.NYOContainer:hover { --tier-color: var(--nyo-tier); }
.RIPTierContainer:hover { --tier-color: var(--rip-tier); }

.gamethumb {
  border: 2px solid var(--primary-bg);
  border-radius: 10px;
  max-width: 100%;
  transition: border-color 0.25s ease;
  filter: brightness(85%);
}

/* styles the thumbnail hover borders to match their tier colour on the Tierlist & Upcoming Pages */
.imageContainer:hover .gamethumb {
  border-color: var(--tier-color, var(--primary-bg));
  filter: brightness(100%);
  transition:filter .3s ease-in-out;
  
}

/* 👇 This line ensures unmapped thumbnails start from the correct baseline */
.imageContainer.unmapped .gamethumb {
  filter: grayscale(0%) brightness(100%);
  transition: filter .5s ease-in-out;
  
}

.imageContainer.unmapped:hover .gamethumb {
  filter: grayscale(100%) brightness(80%);
  transition: filter .5s ease-in-out;
}



/* styles the hover tooltip popup on the Tierlist Page */
.tooltip {
  display: none;
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  background-color: #1e1e1e;
  color: white;
  padding: 10px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  font-size: 0.9em;
  z-index: 999;
  white-space: normal;
  border-top: 10px solid var(--tier-color, transparent);
  border-left: 3px solid var(--tier-color, transparent);
  border-right: 3px solid var(--tier-color, transparent);
  border-bottom: 3px solid var(--tier-color, transparent);
}

/* Styles the popup anchor arrows for the Tierlist Page */
.tooltip::before,
.tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
}

.tooltip::before {
  top: 100%;
  border-width: 9px;
  border-color: var(--tier-color, #1e1e1e) transparent transparent transparent;
  z-index: 1;
}

.tooltip::after {
  top: calc(100% - 3px);
  border-width: 8px;
  border-color: #1e1e1e transparent transparent transparent;
  z-index: 2;
}

/* base list styling for the pros & cons popups on the Tierlist Page */
.tooltip ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* styles the pros list symbol colour for the Tierlist Page */
.tooltip .pros li {
  color: #7CFC00;
  margin-bottom: 4px;
}

/* styles the cons list symbol colour for the Tierlist Page */
.tooltip .cons li {
  color: #FF6347;
  margin-bottom: 4px;
}

.tooltip i {margin-right: 6px;}

.imageContainer:hover .tooltip {display: block;}




/* -----------------------------------------
   TIERLIST PAGE(S) SPECIFIC STYLING
------------------------------------------ */

.STier {background-color: var(--s-tier);}
.ATier {background-color:var(--a-tier);}
.BTier {background-color:var(--b-tier);}
.CTier {background-color:var(--c-tier);}
.DTier {background-color:var(--d-tier);}
.EATier {background-color:var(--ea-tier);}
.F1Tier {background-color:var(--f-tier);}
.F2Tier {background-color:var(--f-tier);}
.NPTier {background-color:var(--np-tier);}
.NYOTier {background-color:var(--nyo-tier);}
.RIPTier {background-color:var(--rip-tier);}


.headerContainer {display: flex;}


/* tierlist main table formatting */
table {
	border-collapse: separate;
	border: 10px solid white;
	border-radius: 10px !important;
}

/* governs coloured tier headers */
th {
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-top: none;
	background-color: rgb(59, 59, 59);
	padding: 5px;
	color:black;
	width: 75px;
}

/* governs tier rows where games are arranged */
td {
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-top: none;
	background-color: rgb(59, 59, 59);
	padding: 15px;
	color:black;
}

/* organises games into grid block */
.imageContainer{
	position: relative;
	display: inline-block;
	text-align: center;
	color: black;
    padding-left: 0.25rem; /* 5px ~ 0.25rem */
    padding-right: 0.25rem; /* 5px ~ 0.25rem */
    max-width: 13.5rem; /* 215px ~ 13.5rem */
}

/* For placement of "game title" beneath thumbnail */
.game-title {
    margin-top: 5px;
	margin-bottom: 5px;
    font-size: 11px;
	background-color:antiquewhite;
    color: #000;
    text-align: center;
	width:auto;
}

/* For placement of "release date" in bottom right of thumbnail */
.release-date {
    position: absolute;
    bottom:40px;
    right: 5px;
    font-size: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
}

/* For placement of "mapped" checkmark in top right of thumbnail */
.top-right {
	position: absolute;
	top: 0px;
	right: 5px;
	color: greenyellow;
	padding-left: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	font-size: 20px;
	-webkit-text-stroke-width: 1.5px; 
	-webkit-text-stroke-color: black;
}

/* Style formatting for tier intro bubbles.*/
.tier-intro
{
	padding-left: 10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom: 5px;
	border-radius: 5px;
  max-width: 98%;
}

.tier-flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* try 'center' or 'space-evenly' if you prefer */
  gap: 2px; /* controls space between game cards */
}


.tier-flex-wrapper .imageContainer {
  max-width: 13.5rem;
  width: 100%;
  box-sizing: border-box;
}








/* -----------------------------------------
   SOULS RIP PAGE - TABLE STYLING
------------------------------------------ */

#deathTable_wrapper {
    max-width: 1200px;
    margin: 40px auto 60px;
    width: 100%;
    padding: 16px 20px;
    background-color: var(--secondary-bg);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Table frame */
#deathTable {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

/* Header cells */
#deathTable thead th {
    background-color: #304553; /* slightly darker than secondary-bg */
    color: var(--text-light);
    border-bottom: 2px solid var(--border-color);
    padding: 6px 8px;
    font-weight: 600;
}

/* Body cells – let rows control background */
#deathTable tbody th,
#deathTable tbody td {
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    color: var(--text-light);
    background: transparent; /* important: no white here */
}

/* Row striping */
#deathTable.dataTable tbody tr.odd {
    background-color: #324757 !important;  /* darker stripe */
}
#deathTable.dataTable tbody tr.even {
    background-color: #3b5566 !important;  /* matches secondary-bg */
}

/* Row hover */
#deathTable.dataTable tbody tr:hover {
    background-color: rgba(82, 186, 213, 0.18) !important; /* accent-tinted hover */
}

/* Deaths column centre aligned */
#deathTable td:nth-child(3),
#deathTable th:nth-child(3),
.sorting_1 {
    text-align: center;
}

/* Links inside table */
#deathTable a:link,
#deathTable a:visited {
    color: var(--accent-color);
    text-decoration: none;
}
#deathTable a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* -------- DataTables controls (length, filter, info, pagination) -------- */

#deathTable_wrapper .dataTables_length,
#deathTable_wrapper .dataTables_filter,
#deathTable_wrapper .dataTables_info,
#deathTable_wrapper .dataTables_paginate {
    color: var(--text-light);
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 0.9rem;
}

/* Layout: length left, search right on desktop */
@media (min-width: 769px) {
    #deathTable_wrapper .dataTables_length {
        float: left;
    }
    #deathTable_wrapper .dataTables_filter {
        float: right;
    }
}

/* Stack nicely on mobile */
@media (max-width: 768px) 
{
    #deathTable_wrapper 
      {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;   /* MUCH smaller padding */
        margin: 0 auto !important;

        border-radius: 0 !important;   /* flat edges = more usable space */
        box-shadow: none !important;   /* remove shadow to reclaim width */
        background-color: transparent !important;
      }
    #deathTable_wrapper .dataTables_length, #deathTable_wrapper .dataTables_filter 
      {
        float: none;
        text-align: left;
        margin-bottom: 8px;
      }

       #deathTable {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Also help text wrap instead of forcing width */
    #deathTable td,
    #deathTable th {
        white-space: normal !important;
        
    }

/* Hide header cells */
    #deathTable th:nth-child(4),
    #deathTable th:nth-child(5),
    /* Hide body cells */
    #deathTable td:nth-child(4),
    #deathTable td:nth-child(5) 
      {
        display: none;
      }
}

/* "Show X entries" dropdown */
#deathTable_wrapper .dataTables_length select {
    background-color: var(--primary-bg);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.9rem;
}


/* Search box */
#deathTable_wrapper .dataTables_filter input {
    background-color: var(--primary-bg);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.9rem;
}

/* -------- Game filter dropdown (your custom <select>) -------- */

#gameFilter {
    background-color: var(--primary-bg);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: "Lexend", system-ui, sans-serif;
    margin-left: 6px;
}
label[for="gameFilter"] {
    color: var(--text-light);
    font-family: "Lexend", system-ui, sans-serif;
    margin-right: 4px;
}




/* -----------------------------------------
   MOBILE STYLING & MEDIA QUERIES
------------------------------------------ */

/* Hide tooltips on mobile (touch) devices */
@media (hover: none), (pointer: coarse) {
    .tooltip {
      display: none !important;
    }



  }

  /* Desktop: hide the mobile TOP item */
@media (min-width: 901px) {
  .mobile-top-link {
    display: none;
  }
}

/* Up to 992px: tablet and smaller */
@media (max-width: 992px) {

  .headerImage
  {
    display:none;
  }  

.hiddenonmobile
{
  display:none;
}
    .gamethumb {
    border: 2px solid transparent; /* fallback */
    display: block;
  }

  .gamethumb.s-tier {
    border-color: var(--s-tier);
  }

  .gamethumb.a-tier {
    border-color: var(--a-tier);
  }

  .gamethumb.b-tier {
    border-color: var(--b-tier);
  }

  .gamethumb.c-tier {
    border-color: var(--c-tier);
  }

  .gamethumb.d-tier {
    border-color: var(--d-tier);
  }

  .gamethumb.ea-tier {
    border-color: var(--ea-tier);
  }

  .gamethumb.f1-tier {
    border-color: var(--f-tier);
  }

  .gamethumb.f2-tier {
    border-color: var(--f-tier);
  }

  .gamethumb.np-tier {
    border-color: var(--np-tier);
  }

  .gamethumb.rip-tier {
    border-color: var(--rip-tier);
  }



  /* Table adjustments */
  table {
    border-collapse: separate;
    border: 0;
    border-radius: 0;
  }

  th {
    display:none;
  }
  #tableHeader {
    display: none;
  }

  #visibleHeader {
    display: block;
  }

  #logo-svg {
    display: none;
  }

  .tierlisttable,
  .imageContainer {
    width: 100%;
   }

   td {

    background-color: var(--primary-bg);

   }



/* Optional: little text hint next to stars */
.tier-score-text {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-left: 0.35rem;
}



/* ------------------------- */
/*  MOBILE NAVBAR – FLOATING */
/* ------------------------- */


  /* Keep navbar, but simplify it on mobile */
  .navbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    background-color: var(--footer-bg);
    position: relative;
    z-index: 100;
  }

  /* Logo stays top-left, nothing special needed */
  .navbar > a:first-child {
    display: inline-flex;
    align-items: center;
  }

  /* Hide normal nav lists by default on mobile */
  .navbar-links,
  .navbar-links.right {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* FLOATING HAMBURGER BUTTON (bottom-right) */
  #menu-toggle {
    display: block;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* avoid iOS Safari bar */
    right: 16px;
    z-index: 10000;

    font-size: 26px;
    line-height: 1;
    padding: 12px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;

    background-color: #00ffcc;   /* tweak to match your accent color */
    color: #111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

    .navbar-links.right {
    display: none !important;}

  /* DROPDOWN MENU (opens above the button) */
  .navbar-links.show,
  .navbar-links.right.show {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)); /* above the button */
    right: 16px;
    width: 70vw;                     /* nice thumb-sized panel */
    max-width: 320px;
    background-color: #222;
    border-radius: 8px;
    padding: 8px 0;
    gap: 4px;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  }

  .navbar-links li,
  .navbar-links.right li {
    width: 100%;
  }

  .navbar-links a,
  .navbar-links.right a {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-decoration: none;
    /* inherit your existing font/color, or: */
    color: #fff;
  }

  .navbar-links a:hover,
  .navbar-links.right a:hover {
    background-color: #333;
  }
}


@media (max-width: 768px) {

.tier-flex-wrapper .imageContainer {
    max-width: none;          /* full screen width */
    margin: 0 auto;        /* center if narrower */
  }

.cardList .imageContainer {
    max-width: none;          /* full screen width */
    margin: 0 auto;        /* center if narrower */
  }

}


/* 761px and up: desktop enhancements */
@media (min-width: 761px) {
  .navigation {
    margin: auto;
    font-size: 1em;
    position: fixed;
    width: 30px;
    height: 30px;
    right: 2%;
    bottom: 2%;
    z-index: 100;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(43, 58, 68, 0.8);
  }


}
.stars {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  vertical-align: middle;
}

.stars .star {
  position: relative;
  display: inline-block;
  width: 1em;
  text-align: center;
  color: #555;           /* empty star colour */
    text-shadow:
    -1px -1px 2px rgba(0,0,0,0.8),
     1px -1px 2px rgba(0,0,0,0.8),
    -1px  1px 2px rgba(0,0,0,0.8),
     1px  1px 2px rgba(0,0,0,0.8);
}

.stars .star.full {
  color: #f5c518;
}

.stars .star.half::before {
  content: '★';
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  overflow: hidden;
  color: #f5c518;
    text-shadow:
    -1px -1px 2px rgba(0,0,0,0.8),
     1px -1px 2px rgba(0,0,0,0.8),
    -1px  1px 2px rgba(0,0,0,0.8),
     1px  1px 2px rgba(0,0,0,0.8);
}


/* Wrapper box */
.faq-box {
  width: 100%;              /* can use full parent width */
  max-width: 650px;         /* but no wider than this */
  margin: 1.5rem auto;
  background-color: #4a5b67;
  border-radius: 16px;
  border: 2px solid #ffffff20;
  color: #fff;
  overflow: hidden;
}

@media (max-width: 768px) {

.faq-box {

  max-width: 350px;         /* but no wider than this */

}
}

/* Clickable header bar */
.faq-box summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;              /* <- stretch to full faq-box width */
  padding: 0.75rem 1.25rem;
  box-sizing: border-box;   /* padding stays inside that width */
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

/* Remove default triangle marker */
.faq-box summary::marker {
  content: '';
}
.faq-box summary::-webkit-details-marker {
  display: none;
}

/* Icon rotation when open */
.faq-box .faq-icon {
  transition: transform 0.2s ease;
}
.faq-box[open] .faq-icon {
  transform: rotate(90deg);
}

/* Content area */
.faq-box-content {
  padding: 0 1.25rem 1rem;
  padding-top: 5px;
  background-color: #25343c;
}

/* Optional: tweak questions/answers */
.faq-box .question {
  width: 100%;
  font-weight: 600;
  font-size: 19px;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}
.faq-box .answer {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-weight: 400;
  font-size: 16px;
}

.faq-box hr
{
border-top: 2px dashed var(--link-hover-color);
margin-top: 30px;
margin-bottom: 30px;
}