*{
box-sizing:border-box;
margin:0;
padding:0;
}

/* prevent horizontal overflow */

html,body{
max-width:100%;
overflow-x:hidden;
}

body{
font-family:'Inter',sans-serif;
color:white;
line-height:1.7;
font-size:18px;

/* PIXEL RETRO BACKGROUND */

background:#0f0f0f;

background-image:
linear-gradient(rgba(255,90,42,0.35) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,90,42,0.3) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,0.9) 50%, transparent 20%);

background-size:
40px 40px,
40px 40px,
100% 4px;

animation:bgmove 80s linear infinite;
}

@keyframes bgmove{

0%{
background-position:0 0,0 0,0 0;
}

100%{
background-position:400px 400px,400px 400px,0 200px;
}

}

/* HEADER BAR (only used in bobbys-mazes page) */

.topbar{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:#0f0f0f;
display:flex;
align-items:center;
padding-left:20px;
z-index:1000;
border-bottom:1px solid #222;
}

.topbar img{
height:90px;
opacity:0.95;
}

/* HERO */

.hero{
text-align:center;
padding:130px 20px 70px 20px;
}

/* INDEX HERO LOGO FIX */

.hero .logo{
width:100%;
max-width:260px;
height:auto;
margin-bottom:20px;
}

.hero .bobbysmazes_logo{
width:100%;
max-width:260px;
height:auto;
margin-bottom:20px;
}

/* INTRO */

.intro{
max-width:900px;
margin:auto;
opacity:0.9;
font-size:20px;
}

.intro p{
margin-bottom:16px;
}

/* TEAM LIST */

.team-list{
list-style:none;
margin-top:15px;
text-align:left;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.team-list li{
margin-bottom:8px;
padding-left:10px;
border-left:3px solid #ff5a2a;
}

.undertagline
{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    text-align: left;
}

/* TITLES */

h1,h2,h3{
font-family:'Press Start 2P',cursive;
color:#ff5a2a;
letter-spacing:2px;
}

h1{font-size:42px;}
h2{font-size:30px;}
h3{font-size:20px;margin-bottom:15px;}

b{
    color:#ff5a2a;
}

/* SEPARATOR */

.separator{
border:none;
height:3px;
background:#666;
margin:10px auto;
width:80%;
}

/* PROJECTS */

.projects{
max-width:1100px;
margin:auto;
padding:20px;
}

.project{
background:#1b1b1b;
padding:30px;
border-radius:8px;
box-shadow:0 8px 25px rgba(0,0,0,0.6);
margin-bottom:60px;
position:relative;
}

/* FEATURED GAME */

.featured{
border:2px solid #ff5a2a;
background:#1f1a18;
margin-top: 20px;
}

.featured-label{
position:absolute;
top:-14px;
left:20px;
background:#ff5a2a;
color:white;
font-size:12px;
padding:6px 12px;
border-radius:4px;
font-weight:bold;
}

/* GAME HEADER */

.game-header{
background:linear-gradient(180deg,#232323,#1b1b1b);
border-radius:8px;
padding:25px;
text-align:center;
margin-bottom:25px;
}

.game-logo{
max-width:260px;
width:100%;
height:auto;
}

/* MEDIA */

.media-container,
.media-container-vertical{
text-align:center;
margin-bottom:15px;
}

.media-container img,
.media-container iframe,
.media-container-vertical img,
.media-container-vertical iframe{
width:100%;
max-width:800px;
border-radius:6px;
}

.media-container iframe,
.media-container-vertical iframe{
height:450px;
}

@media(min-width:700px){

.media-container-vertical img{
max-width:280px;
}

}

.publisher-box{
    margin-top: 10px;
    padding: 10px;
    background-color: #2a2a2a;
    border-radius:6px;
}

/* FEATURE ROW (bobbys-mazes page) */

.feature-row{
display:flex;
align-items:center;
gap:40px;
margin:35px 0;
}

.feature-media{
flex:1.3;
}

.feature-media video,
.feature-media img{
width:100%;
border-radius:6px;
display:block;
}

.feature-text{
flex:1;
}

/* GALLERY */

.gallery-main{
text-align:center;
margin-bottom:15px;
}

.gallery-main img{
width:100%;
max-width:800px;
border-radius:6px;
}

.thumbnails{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}

.thumbnails img{
width:110px;
cursor:pointer;
border-radius:4px;
opacity:0.85;
transition:0.25s;
border:2px solid transparent;
}

.thumbnails img:hover{
opacity:1;
transform:scale(1.05);
border-color:#ff5a2a;
}

/* TEXT */

.project-text{
margin-top:20px;
font-size:18px;
opacity:0.95;
}

/* BADGES */

.badges{margin-top:25px;}

.badge-group{margin-bottom:15px;}

.badge-title{
display:block;
font-size:15px;
margin-bottom:8px;
opacity:0.7;
}

.badge{
display:inline-block;
padding:7px 12px;
border-radius:6px;
font-size:14px;
margin:4px;
font-weight:bold;
}

.award{
background:#c8a100;
color:black;
}

.award::before{
content:"🏆 ";
}

.feature{
background:#2d6cdf;
}

.platform{
background:#2ea44f;
}

/* CONTACT */

.contact{
text-align:center;
padding:40px 20px;
}

.contact h2{
margin-bottom:30px;
}

form{
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:10px;
}

input,textarea{
padding:12px;
border:none;
border-radius:4px;
font-size:16px;
}

textarea{
height:120px;
}

button{
padding:14px;
background:#ff5a2a;
color:white;
border:none;
border-radius:4px;
cursor:pointer;
font-size:16px;
}

button:hover{
background:#ff3c00;
}

footer{
text-align:center;
padding:25px;
opacity:0.6;
font-size:14px;
}

/* RESPONSIVE */

@media(max-width:800px){

.hero .logo{
max-width:260px;
}

.hero .bobbysmazes_logo{
    max-width:260px;
}

.feature-row{
flex-direction:column;
text-align:center;
}

.media-container iframe,
.media-container-vertical iframe{
height:230px;
}

.game-logo{
max-width:200px;
}

.topbar{
height:80px;
}

.topbar img{
height:60px;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 23px;
}


}

/* PROGRESS BAR - RETRO STYLE (CENTRADO + SCROLL ANIMATION) */

.progress-wrapper{
margin:25px auto 35px auto;
text-align:center;
max-width:500px;
}

.progress-label{
font-family:'Press Start 2P',cursive;
font-size:12px;
color:#ff5a2a;
margin-bottom:12px;
letter-spacing:1px;
text-align:center;
}

.progress-bar{
width:100%;
height:28px;
background:#111;
border:2px solid #ff5a2a;
border-radius:4px;
overflow:hidden;
box-shadow:0 0 10px rgba(255,90,42,0.3);
margin:0 auto;
}

.progress-fill{
height:100%;
width:0; /* IMPORTANTE: empieza en 0 */
background:
repeating-linear-gradient(
45deg,
#ff5a2a,
#ff5a2a 10px,
#ff7a4a 10px,
#ff7a4a 20px
);
transition:width 1.8s ease-out;
}

/* cuando se activa */
.progress-fill.active{
width:85%;
}

/* ===== SIMPLE STICKY INDEX ===== */

#bm-index{
position:fixed;
top:100px;
left:0;
width:100%;
background:#0f0f0f;
z-index:9999;
border-bottom:1px solid #222;
}

#bm-index ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
list-style:none;
margin:0;
padding:6px;
}

#bm-index a{
color:#aaa;
text-decoration:none;
font-size:12px;
}

#bm-index a.active{
color:#ff5a2a;
}

@media(max-width:800px){
#bm-index{top:80px;}
#bm-index ul{
flex-direction:column;
display:none;
}
#bm-index ul.show{
display:flex;
}
}

/* ===== STICKY INDEX (DESKTOP) ===== */

#sticky-index {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  background: rgba(15,15,15,0.95);
  border-bottom: 2px solid #ff5a2a;
  z-index: 1001;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 6px 0;
  gap: 10px;
  font-family: 'Press Start 2P', cursive;
}

#sticky-index a {
  color: #ff5a2a;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

#sticky-index a:hover {
  background: #ff5a2a;
  color: black;
  transform: scale(1.05);
}

#sticky-index a.active {
  background: #ff5a2a;
  color: black;
}

/* ===== MOBILE DRAWER INDEX ===== */

#sticky-index-toggle {
  display: none;
  position: fixed;
  top: 105px;
  right: 20px;
  z-index: 1200;
  font-size: 22px;
  color: #ff5a2a;
  cursor: pointer;
  font-family: 'Press Start 2P', cursive;
}

/* Panel lateral */
@media (max-width: 800px) {

  #sticky-index-toggle {
    display: block;
  }

  #sticky-index {
    top: 80px;
    bottom: 0;
    left: 0;
    right: auto;
    width: 260px;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 12px;

    background: #0f0f0f;
    border-right: 2px solid #ff5a2a;
    border-bottom: none;

    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  #sticky-index.mobile-active {
    transform: translateX(0);
  }

  /* EMPUJA EL CONTENIDO */
  body.menu-open {
    transform: translateX(260px);
    transition: transform 0.3s ease;
  }

  /* Links más cómodos en mobile */
  #sticky-index a {
    font-size: 12px;
    width: 100%;
  }
}

/* SMOOTH SCROLL (ya lo tenías pero lo dejo limpio) */
html {
  scroll-behavior: smooth;
}