body{margin:0;padding:0;min-height:100vh;font-family:Arial;background:linear-gradient(to bottom,#000,#444,#ddd,#fff);position:relative}
#disqus_thread{max-width:800px;margin:30px auto;padding:20px;background:#1e1e1e;border-radius:12px}
#modal-links{display:flex;flex-direction:column;align-items:center;gap:4px}.btn-abrir{color:#0066cc;font-weight:bold;text-decoration:underline;cursor:pointer}
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);z-index:9999;justify-content:center;align-items:center}.modal-conteudo{position:relative;width:90%;max-width:800px;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.5)}.video-container{position:relative;padding-bottom:56.25%;height:0}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.btn-fechar{position:absolute;top:10px;right:15px;color:#fff;font-size:28px;font-weight:bold;cursor:pointer;z-index:10000}
body::after{content:"";position:fixed;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.15),transparent);animation:brilhoVertical 6s linear infinite;pointer-events:none}@keyframes brilhoVertical{0%{top:-100%}100%{top:100%}}
header{display:flex;align-items:center;padding:10px;text-align:center}header .right{position:absolute;right:20px}header .left{position:absolute;width:20px}.left,.center,.right{flex:1}.left{display:flex;align-items:center;gap:15px}.center{display:flex;justify-content:center}.right{display:flex;justify-content:flex-end}.right span{font-size:16px;color:#333}input{width:90%;max-width:500px;padding:12px;border-radius:8px;border:1px solid #ccc}#search{width:100%;max-width:400px;padding:10px}
.grid{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;padding:20px}.item{background:#fff;border-radius:12px;padding:6px;box-shadow:0 8px 20px rgba(0,0,0,.08);cursor:pointer;transition:.3s;position:relative;overflow:hidden}.item img{width:100%;border-radius:10px;display:block}.item:hover{transform:scale(1.05)}.title{font-size:14px}.subtitle{font-size:11px;color:#666}.item::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-25deg);pointer-events:none}.item:hover::before{animation:flash .8s}@keyframes flash{0%{left:-100%}100%{left:150%}}
.categoria{position:absolute;top:10px;right:10px;background:linear-gradient(45deg,#f00,#c00);color:#fff;font-size:10px;padding:4px 11px;border-radius:20px;font-weight:bold;box-shadow:0 0 10px rgba(255,0,0,.6);z-index:2}.img-box{position:relative;overflow:hidden;border-radius:10px}.img-box::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-25deg);animation:brilho 5s infinite;pointer-events:none}@keyframes brilho{0%{left:-100%;opacity:0}10%{opacity:1}30%{left:150%;opacity:0}100%{left:150%;opacity:0}}
.card-img{position:relative}.card-img img{width:100%;display:block}.btn-trailer{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;font-size:12px;border-radius:6px;text-decoration:none;transition:.3s;z-index:3}.btn-trailer:hover{background:red}
.modal{display:none;position:fixed;inset:0;width:100vw;height:100vh;background:rgba(0,0,0,.9);z-index:9999;overflow-y:auto}.modal-content{position:relative;background:linear-gradient(145deg,#1a1a1a,#0d0d0d);color:#fff;margin:3% auto;padding:20px;width:90%;max-width:500px;border-radius:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 25px rgba(0,0,0,.8),0 0 10px rgba(255,0,0,.3);text-align:center;max-height:90vh;overflow-y:auto;backdrop-filter:blur(10px)}.modal-content img{width:100%;border-radius:10px}.modal-content::-webkit-scrollbar{width:6px}.modal-content::-webkit-scrollbar-thumb{background:#f00;border-radius:10px}.close{position:absolute;top:5px;right:5px;z-index:10;font-size:25px;cursor:pointer}
button{position:relative;background:linear-gradient(45deg,#f00,#c00);color:#fff;border:none;padding:12px;margin-top:10px;border-radius:10px;cursor:pointer;font-weight:bold;overflow:hidden;transition:.3s}button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 20px rgba(255,0,0,.5)}button:active{transform:scale(.95)}button::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transition:.5s}button:hover::before{left:100%}.link-desc{font-size:12px;color:#ccc;margin-bottom:10px}
.menu-btn{background:#111;color:#fff;border:1px solid #333;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:bold}.menu-btn:hover{background:#1f1f1f}.menu{position:relative}.menu-dropdown{position:absolute;top:45px;left:0;background:#111;border:1px solid #333;border-radius:10px;display:none;min-width:180px;overflow:hidden;z-index:999}.menu-dropdown a{display:block;padding:10px;color:#fff;cursor:pointer;transition:.2s}.menu-dropdown a:hover{background:#222}.menu:hover .menu-dropdown{display:block}
.game-frame{width:100%;height:78vh;border:0;background:transparent;display:block}.game-modal-content{max-width:560px;padding:0;overflow:hidden}.game-modal-content .close{color:#fff;background:rgba(0,0,0,.8);width:34px;height:34px;line-height:31px;border-radius:50%;right:10px;top:10px;z-index:10002}.game-page-shell{padding:20px 0}.game-page-shell .modal-content{display:block}.game-back{display:inline-block;color:#fff;text-decoration:none;margin:0 0 15px;font-size:13px}.game-meta{font-size:12px;color:#aaa;margin:8px 0}.game-manual{text-align:left;margin-top:18px;border-top:1px solid rgba(255,255,255,.12);padding-top:15px}.game-manual h3{margin:12px 0 8px}.game-manual a{color:#fff}@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr)}.game-frame{height:86vh}}
/* Link real do card: mantém o mesmo tema e permite URL limpa/SEO */
.item-page-link {
  display: block;
  color: inherit;
  text-decoration: none;
}


/* SINGLE RED SCROLLBAR START */
/* O modal externo é o único responsável pela rolagem. */
.game-modal-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 90vh !important;
  scrollbar-width: thin;
  scrollbar-color: #ff0000 transparent;
}

/* Chrome / Edge / Safari */
.game-modal-content::-webkit-scrollbar {
  width: 6px;
}

.game-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.game-modal-content::-webkit-scrollbar-thumb {
  background: #ff0000;
  border-radius: 10px;
}

.game-modal-content::-webkit-scrollbar-thumb:hover {
  background: #cc0000;
}

/* O iframe cresce com o conteúdo e não cria uma segunda barra. */
.game-frame {
  width: 100% !important;
  height: 0;
  min-height: 0 !important;
  border: 0 !important;
  display: block;
  overflow: hidden !important;
}
/* SINGLE RED SCROLLBAR END */





/* IFRAME LARGE FIX START */
/* Modal do jogo mais largo, sem cortar o conteúdo. */
.game-modal-content {
  width: 94vw !important;
  max-width: 1000px !important;
  max-height: 92vh !important;
  padding: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;

  scrollbar-width: thin;
  scrollbar-color: #ff0000 transparent;
}

.game-modal-content::-webkit-scrollbar {
  width: 6px;
}

.game-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.game-modal-content::-webkit-scrollbar-thumb {
  background: #ff0000;
  border-radius: 10px;
}

.game-modal-content::-webkit-scrollbar-thumb:hover {
  background: #cc0000;
}

.game-frame {
  display: block !important;
  width: 100% !important;
  min-height: 700px;
  height: 700px;
  border: 0 !important;
  overflow: hidden !important;
  background: transparent;
}

/* A página interna usa a largura disponível do iframe. */
.game-page-shell {
  width: 100%;
  box-sizing: border-box;
}

/* Em telas menores, o modal ocupa praticamente toda a tela. */
@media (max-width: 700px) {
  .game-modal-content {
    width: 98vw !important;
    max-width: 98vw !important;
    margin: 1vh auto !important;
    padding: 6px !important;
  }

  .game-frame {
    min-height: 650px;
  }
}
/* IFRAME LARGE FIX END */





/* GAME TRAILER SAME LINE START */
/*
   Página individual:
   Trailer = canto superior esquerdo
   Categoria = canto superior direito
   Ambos na mesma linha da imagem.
*/
.game-page-shell .img-box {
  position: relative !important;
}

.game-page-shell .img-box .btn-trailer {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 10 !important;

  display: inline-block !important;

  background: linear-gradient(45deg, #ff0000, #cc0000) !important;
  color: #ffffff !important;

  padding: 4px 11px !important;
  border-radius: 20px !important;

  font-size: 10px !important;
  font-weight: bold !important;
  line-height: normal !important;

  text-decoration: none !important;

  box-shadow: 0 0 10px rgba(255,0,0,0.6) !important;

  transition: 0.3s !important;
}

.game-page-shell .img-box .btn-trailer:hover {
  background: linear-gradient(45deg, #ff2020, #dd0000) !important;
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(255,0,0,0.8) !important;
}

/*
   A categoria já usa top:10px / right:10px no tema.
   Esta regra garante a mesma altura nas páginas individuais.
*/
.game-page-shell .categoria {
  top: 10px !important;
  right: 10px !important;
}
/* GAME TRAILER SAME LINE END */


/* IFRAME BLACK BACKGROUND START */
/*
  Quando uma página /game/ estiver carregada dentro do iframe:
  - fundo totalmente preto
  - sem o brilho/efeito animado do body
  A página principal continua usando o efeito normalmente.
*/
html.in-game-iframe,
html.in-game-iframe body {
  background: #000000 !important;
  background-image: none !important;
}

html.in-game-iframe body::before,
html.in-game-iframe body::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

html.in-game-iframe .game-page-shell {
  background: #000000 !important;
}

/* O próprio iframe e o modal também ficam pretos. */
.game-frame,
.game-modal-content {
  background: #000000 !important;
}
/* IFRAME BLACK BACKGROUND END */


/* GAME META SAME LINE START */
.game-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  color: #bdbdbd;
  font-size: 13px;
}

.game-meta-separator {
  opacity: 0.7;
}

.game-meta-genre,
.game-meta-date {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .game-meta-row {
    gap: 6px;
    font-size: 12px;
  }
}
/* GAME META SAME LINE END */


/* HOME CARD IMAGE SHINE FIX START */
/* Desativa o brilho antigo aplicado ao card inteiro. */
.item::before {
  display: none !important;
}

/* Mantém o reflexo somente na área da imagem do card da página inicial. */
.item .card-img {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

.item .card-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  z-index: 4;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  );

  transform: skewX(-25deg);
  opacity: 0;
}

.item:hover .card-img::after {
  animation: homeImageShine 0.85s ease-out;
}

@keyframes homeImageShine {
  0% {
    left: -80%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    left: 145%;
    opacity: 0;
  }
}
/* HOME CARD IMAGE SHINE FIX END */


/* BIG CLOSE X START */
/* Main floating game modal close button */
.game-modal-content .close,
#closeModal {
  font-size: 44px !important;
  line-height: 44px !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 6px !important;
  right: 8px !important;
  z-index: 10050 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  text-shadow: 0 0 8px rgba(0,0,0,0.9) !important;
}

/* Trailer floating modal close button */
.btn-fechar {
  font-size: 44px !important;
  line-height: 44px !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 4px !important;
  right: 8px !important;
  z-index: 10050 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  text-shadow: 0 0 8px rgba(0,0,0,0.9) !important;
}
/* BIG CLOSE X END */


/* HOME LOADING START */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility .4s ease;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader-inner {
  width: min(360px, calc(100vw - 48px));
  text-align: center;
}

.site-loader-logo {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 22px;
  text-shadow: 0 0 14px rgba(255,0,0,.5);
}

.site-loader-spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border: 5px solid rgba(255,255,255,.14);
  border-top-color: #f00;
  border-right-color: #f00;
  border-radius: 50%;
  animation: gofLoaderSpin .75s linear infinite;
  box-shadow: 0 0 12px rgba(255,0,0,.3);
}

@keyframes gofLoaderSpin {
  to { transform: rotate(360deg); }
}

.site-loader-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.site-loader-track {
  height: 5px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}

.site-loader-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#990000,#ff0000,#ff4545);
  box-shadow: 0 0 10px rgba(255,0,0,.65);
  transition: width .12s ease;
}

.site-loader-count {
  color: #999;
  font-size: 11px;
  margin-top: 9px;
}
/* HOME LOADING END */


/* CROSS BROWSER INFINITE SCROLL START */
.infinite-scroll-sentinel {
  width: 100%;
  height: 2px;
  clear: both;
  pointer-events: none;
  visibility: hidden;
}
/* CROSS BROWSER INFINITE SCROLL END */


/* BACK TO TOP BUTTON START */
.back-to-top {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ff0000;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a0000 0%, #0a0a0a 45%, #000 100%);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  z-index: 5000;
  box-shadow:
    0 0 10px rgba(255,0,0,.45),
    0 0 22px rgba(255,0,0,.22),
    inset 0 0 10px rgba(255,0,0,.15);
  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: radial-gradient(circle at 35% 30%, #5a0000 0%, #180000 45%, #050505 100%);
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 0 12px rgba(255,0,0,.75),
    0 0 28px rgba(255,0,0,.35),
    inset 0 0 12px rgba(255,0,0,.22);
}

.back-to-top:active {
  transform: translateY(0) scale(.96);
}

.back-to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.back-to-top span {
  display: block;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
    font-size: 27px;
  }
}
/* BACK TO TOP BUTTON END */








/* DATE GROUP SEPARATOR START */
.date-group-separator {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 10px 0 2px;
}

.date-group-separator::before,
.date-group-separator::after {
  content: "";
  height: 1px;
  flex: 1;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,0,0,.55),
    transparent
  );
}

.date-group-label {
  flex: 0 0 auto;

  padding: 5px 12px;
  border: 1px solid rgba(255,0,0,.55);
  border-radius: 18px;

  background: rgba(0,0,0,.82);

  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;

  box-shadow:
    0 0 9px rgba(255,0,0,.18),
    inset 0 0 7px rgba(255,0,0,.08);
}

@media (max-width: 600px) {
  .date-group-separator {
    margin-top: 8px;
    gap: 8px;
  }

  .date-group-label {
    padding: 4px 9px;
    font-size: 10px;
  }
}
/* DATE GROUP SEPARATOR END */





/* GAME TEST LINK FLASH START */
.game-test-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 8px 0 14px;
  padding: 8px 16px;

  overflow: hidden;

  border: 1px solid rgba(255,0,0,.78);
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(35,0,0,.96),
      rgba(12,0,0,.96)
    );

  color: #fff;
  text-decoration: none;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;

  box-shadow:
    0 0 8px rgba(255,0,0,.28),
    inset 0 0 9px rgba(255,0,0,.10);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;
}

.game-test-link span {
  position: relative;
  z-index: 2;

  text-shadow:
    0 0 4px rgba(255,255,255,.25),
    0 0 8px rgba(255,0,0,.35);

  transition:
    text-shadow .25s ease,
    letter-spacing .25s ease;
}

/*
  Flash uses a transition rather than a one-way animation:
  - mouse enters: left -> right
  - mouse leaves: right -> left
*/
.game-test-link::before {
  content: "";
  position: absolute;

  top: -35%;
  left: -70%;

  width: 40%;
  height: 170%;

  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.15),
      rgba(255,255,255,.95),
      rgba(255,255,255,.15),
      transparent
    );

  transform: skewX(-22deg);

  opacity: 0;

  transition:
    left .72s ease-in-out,
    opacity .12s ease;
}

.game-test-link:hover {
  color: #fff;

  background:
    linear-gradient(
      180deg,
      rgba(150,0,0,.98),
      rgba(60,0,0,.98)
    );

  transform: translateY(-2px);

  box-shadow:
    0 0 12px rgba(255,0,0,.72),
    0 0 24px rgba(255,0,0,.30),
    inset 0 0 10px rgba(255,255,255,.08);
}

.game-test-link:hover span {
  letter-spacing: .8px;

  text-shadow:
    0 0 5px rgba(255,255,255,.75),
    0 0 10px rgba(255,0,0,.85),
    0 0 18px rgba(255,0,0,.45);
}

.game-test-link:hover::before {
  left: 135%;
  opacity: 1;
}

.game-test-link:active {
  transform: translateY(0) scale(.98);
}
/* GAME TEST LINK FLASH END */


/* BACK TO HOME ANIMATION START */
.game-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  overflow: hidden;

  color: #f1f1f1 !important;
  text-decoration: none !important;

  font-weight: 700;
  letter-spacing: .2px;

  text-shadow:
    0 0 4px rgba(255,255,255,.08);

  transition:
    color .25s ease,
    transform .25s ease,
    text-shadow .25s ease,
    letter-spacing .25s ease;
}

/* red underline grows on hover */
.game-back::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: -2px;

  width: 100%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #ff0000,
    transparent
  );

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform .34s ease;
}

/* subtle moving light across the text */
.game-back::before {
  content: "";
  position: absolute;

  top: 0;
  left: -45%;

  width: 30%;
  height: 100%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.72),
    transparent
  );

  transform: skewX(-18deg);
  opacity: 0;

  transition:
    left .55s ease,
    opacity .18s ease;
}

.game-back:hover {
  color: #ffffff !important;

  transform: translateX(-3px);

  letter-spacing: .7px;

  text-shadow:
    0 0 5px rgba(255,255,255,.50),
    0 0 9px rgba(255,0,0,.70),
    0 0 18px rgba(255,0,0,.32);
}

.game-back:hover::after {
  transform: scaleX(1);
}

.game-back:hover::before {
  left: 120%;
  opacity: 1;
}

.game-back:active {
  transform: translateX(-1px) scale(.98);
}
/* BACK TO HOME ANIMATION END */