/* ================= BASE ================= */

body{
  background:url("../img/bg.jpg") center/cover fixed;
  color:white;
  font-family:Verdana, Arial, sans-serif;
  text-align:center;
  overflow:hidden;
}

body.started{
  overflow-y:auto;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.15) 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events:none;
}

body:not(.started) #screen{
  opacity:0;
  pointer-events:none;
}

/* ================= LAYOUT ================= */

#screen{
  width:800px;
  height:600px;
  margin:40px auto 0;
  transform:scale(1.4);
  transform-origin:top center;
  filter:contrast(1.1) saturate(0.9);
  position:relative;
  z-index:2;
}

#dim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:0.2s;
  z-index:1;
}

#fade{
  position:fixed;
  inset:0;
  background:black;
  z-index:1000;
  opacity:1;
  pointer-events:none;
}

/* ================= TEXTO / TÍTULO ================= */

h1{
  font-size:42px;
  margin-top:20px;
  color:white;
  text-shadow:3px 3px 0 #000;
}

#title{
  display:block;
  margin:10px auto 23px;
  width:200px;
  transform:scale(2);
  image-rendering:pixelated;
}

/* ================= SUBTÍTULO ================= */

#title-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:10px;
}

#subtitle{
  font-family: 'Orbitron', sans-serif;

  font-size:15px;
  font-weight:900;
  color:#ff533c;

  text-transform:uppercase;
  letter-spacing:-1px;

  -webkit-text-stroke: 1px #000000;
  
  margin-top:-8px;
}

/* ================= LIBRARY ================= */

#library{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  width:700px;
  margin:-1px auto;
  padding:25px;
  background:#5f8dd870;
  border:4px solid #1b3c7a;
  border-radius:12px;
  max-height:400px;
  overflow-y:auto;
  scrollbar-gutter:stable;
}

.game{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:120px;
  cursor:pointer;
  transition:transform 0.15s ease, opacity 0.2s;
  position:relative;
  opacity:0;
  transform:translateY(20px);
}

.game.show{
  opacity:1;
}

.game p{
  margin-top:5px;
  font-size:13px;
  color:#ffe066;
  transition:0.2s;
  position:relative;
  z-index:15;
}

.cover{
  position:relative;
  transition:transform 0.25s;
  will-change:transform;
  z-index:10;
}

.cover img{
  will-change:transform, filter;
}

.cover img:not(.new-badge){
  width:120px;
  height:160px;
  object-fit:cover;
  border-radius:6px;
  image-rendering:pixelated;
  filter:brightness(1);
}

/* ================= HOVER ================= */

body:has(.game:hover) #dim{
  opacity:1;
}

#library:has(.game:hover) .game:not(:hover) .cover img{
  filter:brightness(0.35);
  transform:scale(0.98);
}

#library:has(.game:hover) .game:not(:hover) p{
  opacity:0;
}

#library .game:hover .cover{
  transform:scale(1.25);
  transition:transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
  z-index:10;
}

#library .game:hover .cover img{
  filter:brightness(1) !important;
}

#library .game:hover p{
  opacity:1;
  transform:translateY(20px) scale(1.1);
}

#library .game:hover .new-badge{
  transform:rotate(-15deg) scale(1.3);
}

/* ================= SCROLL ================= */

::-webkit-scrollbar{
  width:15px;
}

::-webkit-scrollbar-track{
  background:#1b3c7a;
}

::-webkit-scrollbar-thumb{
  background:#5f8ed8;
  border:2px solid #0f2d5c;
  border-radius:0;
}

::-webkit-scrollbar-thumb:hover{
  background:#7aa6ff;
}

#library::-webkit-scrollbar{
  width:14px;
}

#library::-webkit-scrollbar-track{
  background:#1b3c7a;
  margin:-1px 0;
  border-radius:6px;
}

#library::-webkit-scrollbar-thumb{
  background:#5f8ed8;
  border:2px solid #1b3c7a;
  border-radius:6px;
}

#library::-webkit-scrollbar-thumb:hover{
  background:#7aa6ff;
}

/* ================= FILTROS ================= */

#filters{
  width:700px;
  margin:0 auto;
  display:flex;
  gap:5px;
  background:#5f8dd870;
  border:4px solid #1b3c7a;
  border-bottom:none;
  border-radius:12px 12px 0 0;
  padding:8px;
  backdrop-filter:blur(2px);
  opacity:0;
}

.filter-btn{
  flex:1;
  background:transparent;
  border:none;
  color:#ffe066;
  font-size:12px;
  cursor:pointer;
  padding:6px 0;
  transition:0.15s;
}

.filter-btn:hover{
  color:#fff;
  opacity:0.8;
}

.filter-btn.active{
  color:#fff;
  opacity:1;
}

/* ================= GAME ================= */

#game{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:1200;
  pointer-events:none;
}

#game-msg{
  opacity:0;
  transition:0.3s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#fff;
  font-size:14px;
  margin-bottom:10px;
  font-family:monospace;
  letter-spacing:1px;
}

.loading-text{
  font-size:16px;
  color:#9ecbff;
  animation:blink 1s infinite;
}

.f5-text{
  font-size:12px;
  opacity:0.8;
}

@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:0.4;}
}

/* ================= STARTUP ================= */

body.startup #library{
  opacity:0;
  transform:translateY(-80px);
}

body.startup #title,
body.startup #filters,
body.startup #subtitle{
  opacity:0;
}

/* ================= ANIMAÇÕES ================= */

@keyframes dropWindow{
  0%{opacity:0; transform:translateY(-120vh);}
  100%{opacity:1; transform:translateY(0);}
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes fadeOut{
  to{opacity:0;}
}

@keyframes titleFlash{
  0%{opacity:0; filter:brightness(2);}
  50%{opacity:1; filter:brightness(3);}
  100%{opacity:1; filter:brightness(1);}
}

/* ================= EXECUÇÃO ================= */

body.startup #fade{
  animation:fadeOut 1.2s ease forwards;
}

body.startup #library{
  animation:dropWindow 1.6s cubic-bezier(0.2,0.8,0.2,1) forwards;
  animation-delay:0.8s;
}

body.startup #title{
  animation:titleFlash 0.6s ease forwards;
  animation-delay:1.8s;
}

body.startup #filters{
  animation:fadeIn 0s ease forwards;
  animation-delay:5s;
}

body.startup .game{
  opacity:0;
  transform:translateY(20px);
}

body.ready .game{
  transition:all 0.6s ease;
  pointer-events:auto !important;
}

body.ready #changelog-btn{
  opacity:1;
  pointer-events:auto !important;
}

body.ready #filters{
  pointer-events:auto !important;
}

/* ================= PLAYING ================= */

body.playing{
  overflow:hidden;
}

body.playing #dim{
  opacity:1;
}

body.playing #game{
  pointer-events:auto;
}

body.playing #library,
body.playing #filters,
body.playing #title{
  filter:brightness(0.2);
}

body.playing #changelog,
body.playing #changelog-btn{
  display:none;
}

/* ================= PERF ================= */

#library, #title, #filters{
  will-change:transform, opacity;
}

/* ================= CHANGELOG ================= */

/* botão */

#changelog-btn{
  position:fixed;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  background:#5f8dd886;
  border:3px solid #1b3c7a;
  border-radius:8px;
  color:white;
  font-size:18px;
  cursor:pointer;
  z-index:1400;

  opacity:0;
  pointer-events:none;
  transition:0.3s;
}

#changelog-btn:hover{
  transform:scale(1.1);
  background:#7aa6ffcc;
}

/* janela */

#changelog{
  position:fixed;
  top:50%;
  left:50%;

  width:420px;
  max-height:380px;
  overflow-y:auto;

  background:rgba(15,45,92,0.9);
  backdrop-filter:blur(6px);

  border:4px solid #1b3c7a;
  border-radius:12px;

  padding:18px;

  transform:translate(-50%, -60%) scale(0.9);
  opacity:0;
  pointer-events:none;

  transition:0.25s;
  z-index:2000;

  text-align:center;
}

/* abrir */

#changelog.open{
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* título */

#changelog h2{
  margin:0 0 12px 0;
  padding-bottom:8px;
  border-bottom:2px solid #1b3c7a;
  font-size:16px;
  letter-spacing:1px;
}

/* versão */

.changelog-version{
  margin:14px 0 6px;
  padding-top:10px;
  border-top:2px solid rgba(123,166,255,0.25);

  font-size:13px;
  font-weight:bold;
  color:#9ecbff;
}

/* card do log */

.log{
  background:rgba(0,0,0,0.25);
  border:2px solid #1b3c7a;
  border-radius:8px;

  padding:10px;
  margin-bottom:10px;

  text-align:left;
  transition:0.2s;
}

.log:hover{
  background:rgba(0,0,0,0.4);
  transform:scale(1.02);
}

/* título do log */

.log h3{
  margin:0;
  font-size:13px;
  color:#ffe066;
}

/* data */

.date{
  display:block;
  font-size:10px;
  opacity:0.5;
  margin-bottom:6px;
}

/* lista */

.log ul{
  margin:4px 0 6px 12px;
  padding:0;
  font-size:12px;
}

.log li{
  margin-bottom:2px;
}

/* categorias */

.section-title{
  margin:6px 0 2px;
  font-size:10px;
  color:#9ecbff;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* cores */

.log-new{ color:#7CFFB2; }
.log-fix{ color:#FF7C7C; }
.log-change{ color:#FFD36B; }

/* scrollbar */

#changelog::-webkit-scrollbar{
  width:10px;
}

#changelog::-webkit-scrollbar-track{
  background:#1b3c7a;
}

#changelog::-webkit-scrollbar-thumb{
  background:#5f8ed8;
  border:2px solid #0f2d5c;
  border-radius:6px;
}

#changelog::-webkit-scrollbar-thumb:hover{
  background:#7aa6ff;
}

/* dim quando aberto */

body.changelog-open #dim{
  opacity:1;
}

/* ================= NEW BADGE ================= */

@keyframes newSwing{
  0%{transform:rotate(-8deg);}
  50%{transform:rotate(-2deg);}
  100%{transform:rotate(-8deg);}
}

.new-badge{
  position:absolute;
  right:-8px;
  top:-10px;
  width:28px;
  transform:rotate(-15deg);
  pointer-events:none;
  z-index:10;
  animation:newSwing 1.2s infinite ease-in-out;
}

/* ================= LOAD FADE ================= */

#game-transition{
  position:fixed;
  inset:0;
  background:black;
  z-index:1100;
  opacity:0;
  pointer-events:none;
  transition:none;
}

body.playing #game-transition{
  opacity:1;
}

/* ================= INTRO ================= */

#intro{
  position:fixed;
  inset:0;
  background:black;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  backdrop-filter:blur(6px) brightness(0.7);
}

#intro-bg{
  position:absolute;
  width:640px;
  height:480px;
  background:url("../img/introbg.png") center/cover no-repeat;
  image-rendering:pixelated;
  box-shadow:0 0 80px rgba(0,0,0,0.9);
  border:2px solid #000;
  filter:contrast(1.2) saturate(0.9);
}

#intro-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.2) 2px,
    transparent 2px,
    transparent 4px
  );
}

#ps2{
  position:absolute;
  transform:translateY(-50px);
  width:320px;
  image-rendering:pixelated;
  z-index:1;
}

#cd{
  position:absolute;
  width:320px;
  transform:translateY(150px);
  cursor:pointer;
  image-rendering:pixelated;
  z-index:2;
  will-change:transform;
  backface-visibility:hidden;
}

@keyframes cdInsert{
  0%{transform:translateY(150px) translateX(-6px) scale(1.12) rotate(-2deg);}
  40%{transform:translateY(-30px) translateX(-3px) scale(1.08) rotate(1deg);}
  65%{transform:translateY(-45px) translateX(1px) scale(0.97) rotate(-1deg);}
  80%{transform:translateY(-48px) translateX(-1px) scale(1.02) rotate(0.5deg);}
  100%{transform:translateY(-50px);}
}

#cd.insert{
  animation:cdInsert 0.75s cubic-bezier(0.22,1,0.36,1) forwards;
}

#skip-intro{
  position:absolute;
  top:20px;
  right:20px;
  background:rgba(0,0,0,0.6);
  border:1px solid #fff;
  color:white;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
  z-index:10;
}

#skip-intro:hover{
  background:white;
  color:black;
}

#insert-text{
  position:absolute;
  bottom:45px;
  font-size:14px;
  color:#9ecbff;
  font-family:monospace;
  letter-spacing:2px;
  opacity:0.8;
  animation:blink 1s infinite;
}

/* ================= STARTUP BLOCK ================= */

#startup-block{
  position:fixed;
  inset:0;
  z-index:9999;
  background:transparent;
  pointer-events:auto;
  transition:opacity 0.3s;
}