:root {
  /* Shared responsive height baseline for all carousels */
  --carousel-height-desktop: 51.25vh;
  --carousel-height-tablet: 40vh;
  --carousel-height-mobile: 30vh;
}



html {
	height: 100%;
	width: 100%;
}

body {
	padding: 0;
}

body, .content-container-outer {
	height: 100%;
	width: 100%;
	background-color: #f5f5f5 !important;
}

.navbar {
	border-radius: 5px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border: 0;
	border-bottom: 1px solid black;
	/*margin-top: 1%;*/
	background-color: #f5f5f5;
	margin-bottom: 0;
	padding: 15px;
}

.navbar-header button {
	border: 0;
	background-color: #f5f5f5;
}

.icon-bar {
	background-color: black !important;
}

@media all and (min-width: 950px) {
    #occupation {
		margin-left: -20px !important;
		color: #800 !important;
		font-size: 1em;
	}
	.navbar {
		padding-right: 80px;
		padding-left: 80px;
	}
}

@media all and (max-width: 950px) {
    #occupation {
		display: none;
	}
	.navbar {
		padding-right: 20px;
		padding-left: 20px;
	}
}

.navbar-brand {
	font-size: 2em;
}

.nav li a, .navbar-brand {
	font-family: 'Montserrat';
	/*font-weight: bold;*/
	color: black !important;
}

.nav li a span {
	font-size: 1.25em;
	padding-right: 0.25em;
	color: #800;
}

.nav li a span, .nav li a em {
	vertical-align: middle;
}

.content-container-outer {
	padding: 0;
}

.content-container {
	width: 100%;
	height: 100% !important;
	padding: 0;
	background-color: transparent;
}

.content-container-inner {
	padding-top: 20px;
	height: 100% auto !important;
}

.content-container h3 {
	font-family: 'Montserrat';
	/*font-weight: bold;*/
	font-size: 1.5em;
	color: #800;
}

.content-container h2 {
	margin-top: 0px;
	padding-bottom: 10px;
	text-align: center;
	font-family: 'Roboto Slab';
	/*font-weight: bold;*/
	font-size: 2em;
	color: black;
}

.content-container p {
	font-family: 'Roboto Slab';
	font-size: 1em;
}

.games-container {
	margin-left: 0;
	margin-right: 0;
	padding-bottom: 20px;
}

.games-container h2 {
	margin-top: 0;
}


.content-container ul {
	padding-left: 20px;
}

.gameDetail {
	font-family: 'Montserrat' !important;
	line-height: 1;
}

.extLinks, .gameInfo {
	font-family: 'Montserrat';
	/*font-weight: bold;*/
	color: #800;
	padding-right: 2px;
}

#skillName {
	font-family: 'Montserrat';
	/*font-weight: bold;*/
	font-size: 1em;
	text-align: left;
	padding-bottom: 5px;
}

.progress-bar {
	margin-top: 5px;
	height: 10px;
	border-radius: 0;
	background-color: #800;
	vertical-align: middle;
}

@media all and (min-width: 500px) {
	.progress-bar {
		width: 90%;
	}
}

@media all and (max-width: 500px) {
	.progress-bar {
		width: 85%;
	}
}

.progress {
	height: 100% auto;
	border-radius: 0;
    box-shadow: none;
    position: relative;
    margin-bottom: 15px;
}

.progress strong {
	padding-left: 10px;
}

#skillValue {
	background-color: red;
	width: 1%;
}



hr {
	border-color: #800;
}

.footer-container {
	margin-top: 2.5%;
	font-family: 'Montserrat';
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-color: #f5f5f5;
	border-top: 1px solid #800;
}




/* CAROUSEL CSS */

.carousel .list-inline {
    white-space:nowrap;
    overflow-x:auto;
}

.carousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
    margin-top: 5px;
}

.carousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
    padding: 0;
    border-radius: 0;
    margin-right: 20px;
}

.carousel .carousel-indicators > li.active img {
    opacity: 0.7;
}

.list-inline-item a img {
	max-height: 80px;
	max-width: 80px;
}

:root{
  --bs-min-h: 140px;
  --bs-max-h: 320px;
  --bs-vh-ratio: 28vh;
}

/* === Battle Spins responsive fix with breakpoints === */
#bs-carousel .carousel-inner .item img.bs-height {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* === Battle Spins responsive fix (auto follows other carousels) === */
#bs-carousel .carousel-inner .item img.bs-height {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Desktop */
@media (min-width: 992px) {
  #bs-carousel .carousel-inner .item img.bs-height {
    max-height: var(--carousel-height-desktop) !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  #bs-carousel .carousel-inner .item img.bs-height {
    max-height: var(--carousel-height-tablet) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #bs-carousel .carousel-inner .item img.bs-height {
    max-height: var(--carousel-height-mobile) !important;
  }
}

/* All carousels now share the same height scaling */
.carousel .carousel-inner .item img {
  max-height: var(--carousel-height-desktop);
  height: auto;
  width: 100%;
  object-fit: contain;
}

@media (min-width: 768px) and (max-width: 991px) {
  .carousel .carousel-inner .item img {
    max-height: var(--carousel-height-tablet);
  }
}

@media (max-width: 767px) {
  .carousel .carousel-inner .item img {
    max-height: var(--carousel-height-mobile);
  }
}

/* === UNIVERSAL CAROUSEL RESPONSIVE HEIGHT SYNC === */

/* Applies to all carousels (images + video iframes) */
.carousel .carousel-inner .item img,
.carousel .carousel-inner .item .embed-responsive.embed-responsive-16by9,
.carousel .carousel-inner .item iframe.embed-responsive-item {
  width: 100% !important;
  max-width: 100% !important;
  border: none;
  display: block;
  margin: 0 auto;
  object-fit: contain !important;
}

/* Desktop */
@media (min-width: 992px) {
  .carousel .carousel-inner .item img,
  .carousel .carousel-inner .item .embed-responsive-16by9,
  .carousel .carousel-inner .item iframe.embed-responsive-item {
    max-height: var(--carousel-height-desktop) !important;
    height: var(--carousel-height-desktop) !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .carousel .carousel-inner .item img,
  .carousel .carousel-inner .item .embed-responsive-16by9,
  .carousel .carousel-inner .item iframe.embed-responsive-item {
    max-height: var(--carousel-height-tablet) !important;
    height: var(--carousel-height-tablet) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .carousel .carousel-inner .item img,
  .carousel .carousel-inner .item .embed-responsive-16by9,
  .carousel .carousel-inner .item iframe.embed-responsive-item {
    max-height: var(--carousel-height-mobile) !important;
    height: var(--carousel-height-mobile) !important;
  }
}

/* Override Bootstrap’s padding-bottom ratio for embeds */
.carousel .carousel-inner .item .embed-responsive-16by9 {
  padding-bottom: 0 !important;
  position: relative;
}
.carousel .carousel-inner .item iframe.embed-responsive-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
}

/* === PROJECT HERO MODULE (Corrected: true spatial alignment) === */
.project-hero {
  position: relative;
  width: 100%;
  min-height: 480px;
  background: var(--hero-bg, #222) center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center; /* default: center HUD */
  overflow: hidden;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

/* left / right hero alignment (affects HUD position within the banner) */
.project-hero.align-left {
  justify-content: flex-start;
  padding-left: 6%;
}

.project-hero.align-right {
  justify-content: flex-end;
  padding-right: 6%;
}

.project-hero.align-center {
  justify-content: center;
}

/* overlay darkener */
.project-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* lighter so banner shows more */
  z-index: 1;
}

/* HUD wrapper (margin:0 so side alignment works) */
.project-hero .hero-hud {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 850px;
  width: 90%;
  margin: 0; /* important: do NOT use auto here if you want left/right placement */
  text-align: center;
  margin-bottom: 6rem;
  margin-top: 6rem;
}

/* internal text alignment */
.project-hero.align-left .hero-hud {
  align-items: flex-start;
  text-align: left;
}

.project-hero.align-right .hero-hud {
  align-items: flex-end;
  text-align: right;
}

.project-hero.align-center .hero-hud {
  align-items: center;
  text-align: center;
}

/* mobile fallback */
@media (max-width: 768px) {
  .project-hero {
    min-height: 420px;
  }
  .project-hero.align-left,
  .project-hero.align-right {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .project-hero.align-left .hero-hud,
  .project-hero.align-right .hero-hud {
    align-items: center;
    text-align: center;
  }
}

/* === HERO TITLE IMAGE === */
.hero-title-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px; /* centers image & adds spacing below */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.project-hero.align-left .hero-title-img {
  margin-left: 0;
  margin-right: auto;
}

.project-hero.align-right .hero-title-img {
  margin-right: 0;
  margin-left: auto;
}


/* HUD BLOCKS */
.hud-block {
  background: rgba(245,245,245,0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

/* === HUD COMMAND BAR & PLAY BUTTONS (consistent with hud-block) === */
.hud-command-bar {
  display: flex;
  gap: 0;
  align-items: center;            /* vertically center content in each column */
  justify-content: space-between;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  background: rgba(245,245,245,0.08); /* match .hud-block translucent tone */
  border: 1px solid rgba(255,255,255,0.15); /* match hud-block border */
  border-radius: 12px;
  padding: 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35); /* match hud-block shadow */
}

/* each column inside the command bar: center text and vertically center content */
.hud-command-bar .command-col {
  flex: 1 1 0;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center of text inside each column */
  text-align: center;
}

/* divider between columns */
.hud-command-bar .command-divider {
  width: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  margin: 0 8px;
  border-radius: 1px;
  align-self: stretch;
}

/* keep headings clean — inherit typography from base */
.hud-command-bar h4 { margin: 0 0 8px; }

/* FEATURES LIST with icons
   - Keep text styles inherited; left-align list content inside the feature tile.
*/
.features-title { margin: 0 0 10px; font-weight: 700; text-align: left; }
.hero-features { text-align: left; }        /* left-align content inside the tile */
.features-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.features-list li { display: flex; align-items: center; gap: 10px; }
.feat-icon { flex: 0 0 18px; }

/* Play section: keep header and buttons visually separate */
.play-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.play-header {
  background: rgba(255,255,255,0.04);
  padding: 8px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

/* platform buttons — colored SVGs inside neutral UI buttons */
.platform-buttons { display: flex; gap: 12px; align-items: center; }
.platform-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:40px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.08);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.02);
}
.platform-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}

.platform-btn svg { 
  width:20px; 
  height:20px; 
  display:block; 
}

/* --- New addition: handle image logos --- */
.platform-btn img {
  width: 22px;
  height: auto;
  max-height: 22px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.platform-btn:hover img {
  transform: scale(1.08);
  opacity: 1;
}

/* Responsive collapse */
@media (max-width: 900px) {
  .hud-command-bar { flex-direction: column; gap: 12px; padding: 14px; max-width: 720px; }
  .hud-command-bar .command-divider { display: none; }
  .hud-command-bar .command-col { padding: 6px 4px; align-items: center; text-align: center; }
}



/* Modular: hide empty blocks */
.hud-block:empty {
  display: none;
}

/* Typography consistency */
.hero-title h1 {
  font-size: 2.5em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.hero-title h4 {
  font-family: 'Roboto Slab', serif;
  font-size: 1.25em;
  margin: 6px 0 0;
  color: #ddd;

}

.hero-desc p {
  font-family: 'Roboto Slab', serif;
  font-size: 1em;
  line-height: 1.55;
  margin: 0;
  color: #eee;
}

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

.hero-features li {
  font-family: 'Montserrat';
  font-size: 0.95em;
  margin-bottom: 6px;
  color: #fff;
}

.hero-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hud-btn {
  background: #800;
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat';
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}

.hud-btn:hover {
  background: #a00;
}

.hud-btn.outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.hud-btn.outline:hover {
  background: rgba(255,255,255,0.15);
}

/* Responsive tweak */
@media (max-width: 768px) {
  .project-hero {
    min-height: 420px;
  }
  .hero-title h1 {
    font-size: 2em;
  }
  .hud-block {
    padding: 14px 16px;
  }
}

/* === HUD ROW (Equal Width Columns) === */
.hud-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: stretch;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

.project-hero.align-left .hud-row {
  justify-content: flex-start;
}

.project-hero.align-right .hud-row {
  justify-content: flex-end;
}

/* HUD blocks in rows stretch to fill */
.hud-row .hud-block {
  flex: 1 1 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Keeps text inside centered nicely */
.hud-row .hud-block h4,
.hud-row .hud-block p {
  margin: 0;
  text-align: center;
}

@media (max-width: 768px) {
  .hud-row {
    flex-direction: column;
  }
}

/* === MLP Readability Boost === */
.project-hero.mlp .hero-overlay {
  background: rgba(0, 0, 0, 0.25); /* darker, improves contrast but keeps color underneath */
  backdrop-filter: blur(3px);      /* adds a soft diffusion to the confetti/edges */
}

/* Slightly stronger text clarity */
.project-hero.mlp .hero-title h1,
.project-hero.mlp .hero-desc p,
.project-hero.mlp .hero-features li {
  text-shadow: 0 2px 6px rgba(0,0,0,0.55); /* more shadow depth for readability */
}

/* HUD block brightening */
.project-hero.mlp .hud-block,
.project-hero.mlp .hud-command-bar {
  background: rgba(255,255,255,0.16); /* a touch more opaque */
  border: 1px solid rgba(255,255,255,0.28);
}

/* Maintain glow but tone down highlight contrast */
.project-hero.mlp .hero-features li strong {
  color: #fff; /* keeps strong text crisp without color bleeding */
}



/* === Floating scroll hint === */
.scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 8px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  color: #fff;
  z-index: 50;
  opacity: 0.9;
  animation: floatHint 2.2s ease-in-out infinite;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; /* avoids blocking clicks */
}

.scroll-hint-icon {
  animation: bounceHint 1.2s ease-in-out infinite;
  font-size: 1.2em;
}

@keyframes bounceHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes floatHint {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.6; }
}

/* Hidden state (JS toggled) */
.scroll-hint.hide {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* HERO GALLERY BLOCK */
/* === Hero Gallery v2.4: Flow-Based Layout (No Absolute Positioning) === */
.hero-gallery {
  position: static; /* always in flow, no overlap */
  width: 90%;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 14px 18px;
  border-radius: 16px;
  box-sizing: border-box;
  background: none;
  box-shadow: none;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    width 0.4s ease,
    padding 0.4s ease,
    margin 0.4s ease;
}

/* Animation states (keep as-is) */
.hero-gallery.visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-gallery.fade-out {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Image presentation */
.hero-gallery img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  opacity: 0.95;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.hero-gallery img:hover {
  transform: scale(1.05);
  filter: brightness(1.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

/* Alignment control still works visually, but now through margins only */
.hero-gallery.side-left { margin-left: 6%; margin-right: 0; }
.hero-gallery.side-right { margin-right: 6%; margin-left: 0; }

/* Responsive tweaks */
@media (max-width: 991px) {
  .hero-gallery {
    width: 95%;
    margin-top: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 700px) {
  .hero-gallery {
    width: 100%;
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding: 1rem 1.4rem;
  }
}

/* === HERO MOBILE/TABLET CENTER + SPACING FIX (Final Polished Version) === */
@media (max-width: 991px) {
  .project-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* Added breathing space */
    padding: 2.5rem 1.5rem; /* vertical | horizontal */
    box-sizing: border-box;
  }

  /* HUD always first */
  .project-hero .hero-hud {
    order: 1;
    width: 100%;
    max-width: 900px;

    /* New spacing and centering refinements */
    margin: 0 auto 1.75rem auto;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Gallery always second */
  .project-hero .hero-gallery {
    order: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0.5rem;
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }

  /* Neutralize alignment overrides */
  .project-hero.align-left,
  .project-hero.align-right {
    justify-content: center;
    align-items: center;
    padding: 2.5rem 1.5rem; /* ensures all alignments share the same padding */
  }

  /* Reset gallery side variants */
  .hero-gallery.side-left,
  .hero-gallery.side-right {
    margin: 0 auto;
  }

  /* Ensure consistent centering for internal elements */
  .hero-hud > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Add slight bottom spacing before next section */
  .project-hero:not(:last-of-type) {
    margin-bottom: 2rem;
  }
}

/* === Achievement Line Inline Fix === */
/* === Force 10% to stay inline, even if HTML breaks === */
.features-list li strong {
  white-space: nowrap;
  font-weight: 700;
}

.features-list li {
  white-space: normal;
  word-break: keep-all;
}

.features-list li:has(strong) {
  display: inline-block;
}

/* === APPLAYDU HERO POLISH (v1.2 Darkened Readability Pass) === */
.project-hero.applaydu .hero-overlay {
  background: rgba(0, 0, 0, 0.30); /* darker overlay for stronger contrast */
  backdrop-filter: blur(1.5px);
}

/* HUD tiles with richer separation and softer highlight */
.project-hero.applaydu .hud-block,
.project-hero.applaydu .hud-command-bar {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Text glow — subtle blue-white tint for crispness */
.project-hero.applaydu .hero-title h1,
.project-hero.applaydu .hero-desc p,
.project-hero.applaydu .hero-features li {
  color: #fff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.75);
}

/* Gallery hover toned down slightly to fit darker background */
.project-hero.applaydu .hero-gallery img:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}

/* Platform buttons — extra punch */
.project-hero.applaydu .platform-buttons {
  gap: 18px;
}

.project-hero.applaydu .platform-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.project-hero.applaydu .platform-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Applaydu logo pop with soft warm glow */
.project-hero.applaydu .hero-title-img {
  filter: drop-shadow(0 4px 8px rgba(255, 180, 80, 0.6));
}